Thêm hỗ trợ kiểu chữ linh hoạt vào chủ đề khối WordPress

Kiểu chữ linh hoạt là một cách ưa thích "mô tả các thuộc tính phông chữ, chẳng hạn như kích thước hoặc chiều cao dòng, chia tỷ lệ linh hoạt theo kích thước của chế độ xem". Của nó còn được gọi bằng các tên khác, như kiểu chữ đáp ứng, kiểu linh hoạt, kiểu linh hoạt, kiểu chữ có kích thước cửa sổ xem, kiểu chữ linh hoạt và thậm chí cả văn bản hiển thị đáp ứng.

Dưới đây là một ví dụ về kiểu chữ chất lỏng mà bạn có thể phát trực tiếp (nhờ Tài liệu MDN). CSS-Tricks đã đề cập đến kiểu chữ linh hoạt rộng rãi là tốt. Nhưng vấn đề mấu chốt ở đây không phải là giới thiệu cho bạn về kiểu chữ trôi chảy, mà là cách sử dụng nó. Cụ thể hơn, tôi muốn chỉ cho bạn cách triển khai kiểu chữ linh hoạt trong WordPress 6.1, gần đây đã giới thiệu tính năng kiểu chữ linh hoạt trực tiếp trong Trình chỉnh sửa khối của WordPress.

Mở style.css tập tin, áp dụng một quy tắc kiểu với sự lạ mắt clamp()-ing trên font-size tài sản, và tốt để đi, phải không? Chắc chắn, điều đó sẽ cung cấp cho bạn văn bản linh hoạt, nhưng để có được các điều khiển Trình chỉnh sửa khối giúp bạn có thể áp dụng kiểu linh hoạt ở bất kỳ đâu trên trang web WordPress của mình? Điều đó đòi hỏi một cách tiếp cận khác trong những ngày bị tắc nghẽn này.

Hỗ trợ kiểu chữ linh hoạt trong Gutenberg

Một số nhà phát triển chủ đề WordPress đã và đang sử dụng clamp() chức năng để xác định một chất lỏng font-size, trong các chủ đề WordPress của họ, ngay cả trong các chủ đề “khối” mới hơn, chẳng hạn như Hai mươi hai mươi hai, Hai mươi hai mươi ba, Và những người khác.

Nhưng plugin Gutenberg - plugin chứa sự phát triển thử nghiệm cho các tính năng của WordPress Block và Site Editor - đã giới thiệu hỗ trợ cho kiểu chữ linh hoạt bắt đầu từ phiên bản 13.8. Điều đó đã mở ra cánh cửa cho việc triển khai ở cấp chủ đề để loại chất lỏng có thể được áp dụng cho các phần tử và khối cụ thể trực tiếp trong Trình chỉnh sửa khối. CSS-Tricks thậm chí còn được đưa ra lời cảm ơn trong Yêu cầu kéo đã hợp nhất đối tượng địa lý.

Công việc đó đã trở thành một phần của WordPress Core trong Wordpress 6.1. Rich Tabor, một trong những người ủng hộ kiểu chữ linh hoạt trước đó trong Trình chỉnh sửa khối cho biết:

[Kiểu chữ linh hoạt] cũng là một phần làm cho WordPress trở nên mạnh mẽ hơn, đồng thời không phức tạp hơn (mà chúng ta đều biết là một thách thức khá lớn). […] Kiểu chữ trôi chảy hoạt động hiệu quả. Trên thực tế, tôi nghĩ rằng nó hoạt động tuyệt vời.

T Làm nổi bật bài đăng WordPress phương pháp tiếp cận được thực hiện để hỗ trợ tính năng ở cấp khối để kích thước phông chữ linh hoạt được áp dụng cho các khối động theo mặc định. Có một số lợi ích đối với điều này, tất nhiên:

• Nó cung cấp một cách để các tác giả chủ đề kích hoạt kiểu chữ linh hoạt mà không cần lo lắng về việc triển khai nó trong mã.
• Nó áp dụng kiểu chữ linh hoạt cho các thực thể kiểu chữ cụ thể, chẳng hạn như các phần tử hoặc khối theo cách có thể bảo trì và tái sử dụng.
• Nó cho phép sự linh hoạt về đơn vị kích thước phông chữ (ví dụ: px, rem, emvà %).

Giờ đây, tính năng mới này đã có sẵn trong WordPress Block Editor theo mặc định, các tác giả chủ đề có thể áp dụng kiểu chữ trôi chảy thống nhất mà không cần viết thêm mã.

Các khối hỗ trợ cài đặt kiểu chữ và khoảng cách

Gutenberg 14.1 phát hành vào ngày 16 tháng 2022 năm XNUMXvà giới thiệu cài đặt kiểu chữ trên một loạt các khối. Điều đó có nghĩa là cài đặt văn bản cho các khối đó đã được đặt trong CSS trước đó và cũng phải được thay đổi trong CSS. Nhưng các khối đó hiện cung cấp các điều khiển phông chữ và khoảng cách trong giao diện Block Editor.

Công việc đó hiện đang được dự kiến ​​sẽ được thêm vào WordPress 6.1, như chi tiết trong này Tạo bài đăng trên blog WordPress. Và cùng với nó là một số lượng mở rộng các khối có hỗ trợ kiểu chữ.

Khai báo kiểu linh hoạt trong chủ đề khối WordPress

Vì vậy, làm thế nào để chúng ta sử dụng kiểu chữ linh hoạt mới này trong WordPress? Câu trả lời nằm trong theme.json, một tệp mới-ish cụ thể để chặn các chủ đề có chứa một loạt các cấu hình chủ đề trong các cặp key: value.

Hãy xem xét một quy tắc cho một phông chữ lớn trong theme.json Ở đâu contentSize: 768px và chúng tôi đang làm việc với widesize: 1600px cách trình bày. Đây là cách chúng tôi có thể chỉ định một CSS font-size bằng cách sử dụng clamp() chức năng:

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}

Kể từ WordPress 6.1, chỉ rem, em và px các đơn vị được hỗ trợ.

Điều đó thật tuyệt và hiệu quả, nhưng với tính năng loại chất lỏng mới, chúng tôi thực sự sẽ sử dụng một cách tiếp cận khác. Đầu tiên, chúng tôi chọn kiểu chữ linh hoạt trên settings.typography, có một cái mới fluid bất động sản:

"settings": {
  "typography": {
    "fluid": true
  }
}

Sau đó, chúng tôi chỉ định settings.fontSizes như trước đây, nhưng với một fluidSize tài sản nơi chúng tôi có thể đặt min và max giá trị kích thước cho phạm vi loại chất lỏng của chúng tôi.

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}

Đó thực sự là nó. Chúng tôi vừa thêm loại linh hoạt vào kích thước phông chữ được gọi là “Lớn” với phạm vi bắt đầu từ 2.25rem và mở rộng quy mô lên đến 3rem. Bây giờ, chúng ta có thể áp dụng phông chữ “Large” cho bất kỳ khối nào có cài đặt phông chữ.

Làm thế nào để điều này hoạt động dưới mui xe? Rich Tabor đưa ra một lời giải thích thú vị, cũng như Yêu cầu kéo này trong GitHub. Trong ngắn hạn, WordPress chuyển đổi theme.json thuộc tính vào quy tắc CSS sau:

.has-large-font-size {
  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}

… Được áp dụng cho phần tử, chẳng hạn như Khối đoạn văn:

...

Ban đầu, tôi cảm thấy thật khó hiểu và cứ quẩn quanh trong đầu tôi về khái niệm CSS clamp() chức năng mà không cần tìm hiểu về min(), max()và calc() chức năng. Công cụ máy tính này đã giúp tôi khá nhiều, đặc biệt là để xác định giá trị nào sẽ sử dụng trong các dự án chủ đề của riêng tôi.

Đối với mục đích trình diễn, hãy sử dụng máy tính để xác định font-size phạm vi để kích thước là 36px tại một 768px chiều rộng khung nhìn và 48px tại một 1600px chiều rộng khung nhìn.

Máy tính tự động tạo CSS sau:

/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);

Máy tính cung cấp các tùy chọn để chọn các đơn vị đầu vào như px, remvà em. Nếu chúng tôi chọn rem đơn vị, máy tính tạo ra giá trị sau clamp() giá trị:

/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);

Vì vậy, các giá trị tối thiểu và tối đa đó tương ứng với fluidSize.min và fluidSize.max giá trị trong theme.json. Các min giá trị được áp dụng tại các chế độ xem 768px rộng và dưới. Sau đó font-size tăng tỷ lệ khi chiều rộng khung nhìn tăng lên. Nếu khung nhìn rộng hơn 1600px, Các max được áp dụng và font-size được giới hạn ở đó.

Các ví dụ

Có hướng dẫn kiểm tra chi tiết trong Yêu cầu kéo hợp nhất đã giới thiệu tính năng. Thậm chí còn có nhiều hướng dẫn kiểm tra hơn từ Đăng trước prelease của Justin Tadlock trên Make WordPress.

Ví dụ 1: Đặt cài đặt phông chữ linh hoạt mới

Hãy bắt đầu với tập hợp các hướng dẫn của Justin. Tôi đã sử dụng trong một phiên bản mặc định được sửa đổi Chủ đề Twenty Twenty-Three hiện đang được phát triển.

Trước tiên, hãy đảm bảo rằng chúng tôi đang chạy plugin Gutenberg (13.8 trở lên) hoặc WordPress 6.1, sau đó chọn loại linh hoạt trên settings.typography.fluid tài sản trong theme.json tập tin:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
    }
  }
}

Bây giờ, chúng ta hãy thả settings.typography.fontSizes ví dụ trong đó:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
      "fontSizes": [
        {
          "name": "Normal",
          "size": "1.125rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal"
        }
      ]
    }
  }
}

Nếu mọi thứ hoạt động chính xác, bây giờ chúng ta có thể đi vào Trình chỉnh sửa khối của WordPress và áp dụng cài đặt phông chữ “Bình thường” cho khối của chúng ta:

Tốt đẹp! Và nếu chúng tôi lưu và kiểm tra phần tử đó trên giao diện người dùng, thì đây là phần đánh dấu:

Rất tốt. Bây giờ hãy đảm bảo rằng CSS thực sự ở đó:

Tốt tốt. Hãy để lộ thuộc tính tùy chỉnh CSS đó để xem liệu nó có thực sự gây khó khăn không:

Có vẻ như mọi thứ đang hoạt động đúng như mong muốn của chúng ta! Hãy xem một ví dụ khác…

Ví dụ 2: Loại trừ cài đặt phông chữ khỏi loại linh hoạt

Lần này, hãy cùng theo dõi hướng dẫn từ Yêu cầu kéo đã hợp nhất với ví dụ này của Carolina Nymark cho thấy cách chúng ta có thể tắt kiểu linh hoạt trên một cài đặt phông chữ cụ thể.

Tôi đã sử dụng chủ đề trống như đã khuyên trong hướng dẫn và mở ra theme.json tệp để thử nghiệm. Đầu tiên, chúng tôi chọn loại chất lỏng chính xác như chúng tôi đã làm trước đây:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1000px"
    },
    "typography": {
      "fluid": true
    }
  }
}

Lần này, chúng tôi đang làm việc với wideSize giá trị của 1000px thay vì 1600px. Điều này sẽ cho phép chúng tôi thấy loại chất lỏng hoạt động trong một phạm vi chính xác.

OK, tiếp tục xác định một số kích thước phông chữ tùy chỉnh trong settings.typography.fontSizes:

{
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "size": ".875rem",
          "fluid": {
            "min": "0.875rem",
            "max": "1rem"
        },
          "slug": "small",
          "name": "Small"
        },
        {
          "size": "1rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal",
          "name": "Normal"
        },
        {
          "size": "1.5rem",
          "fluid": {
            "min": "1.5rem",
            "max": "2rem"
          },
          "slug": "large",
          "name": "Large"
        },
        {
          "size": "2.25rem",
          "fluid": false,
          "slug": "x-large",
          "name": "Extra large"
        }
      ]
    }
  }
}

Lưu ý rằng chúng tôi đã áp dụng tính năng loại linh hoạt chỉ trên cài đặt phông chữ “Bình thường”, “Trung bình” và “Lớn”. "Cực lớn" là một trong những kỳ lạ trong đó fluid đối tượng được đặt thành false.

WordPress làm gì từ đây - thông qua Công cụ phong cách Gutenberg - là áp dụng các thuộc tính chúng tôi đặt vào CSS clamp() các chức năng cho mỗi cài đặt kích thước phông chữ đã chọn loại linh hoạt và một giá trị kích thước duy nhất cho cài đặt Cực lớn:

--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;

Hãy kiểm tra đánh dấu trên giao diện người dùng:

Khởi đầu tốt! Hãy xác nhận rằng .has-x-large-font-size lớp bị loại trừ khỏi loại chất lỏng:

Nếu chúng ta phơi bày --wp--preset--font-size--x-large biến, chúng ta sẽ thấy nó được đặt thành 2.25rem.

Đó chính xác là những gì chúng tôi muốn!

Các chủ đề khối hỗ trợ kiểu chữ linh hoạt

Nhiều chủ đề WordPress đã sử dụng clamp() chức năng cho loại chất lỏng trong cả chủ đề khối và cổ điển. Một ví dụ điển hình về việc sử dụng kiểu chữ linh hoạt là Chủ đề mặc định Twenty Twenty-Three.

Tôi đã xem xét tất cả các chủ đề khối từ Thư mục Chủ đề khối WordPress, kiểm tra theme.json của mỗi chủ đề và để xem có bao nhiêu chủ đề khối hiện hỗ trợ kiểu chữ linh hoạt - không phải là tính năng mới vì nó vẫn nằm trong plugin Gutenberg kể từ khi viết bài này - bằng cách sử dụng CSS clamp() hàm số. Trong số 146 chủ đề tôi đã xem xét, phần lớn trong số họ sử dụng clamp() chức năng xác định khoảng cách. Hơn một nửa trong số họ đã sử dụng clamp() để xác định kích thước phông chữ. Các Alara chủ đề là chủ đề duy nhất để sử dụng clamp() để xác định bố trí kích thước thùng chứa.

Có thể hiểu, chỉ một số chủ đề được phát hành gần đây có tính năng kiểu chữ linh hoạt mới. Nhưng đây là những cái tôi tìm thấy xác định nó trong theme.json:

Và nếu bạn đọc bài đăng trước của tôi ở đây về CSS-Tricks, Khối Gopher TT2 chủ đề tôi sử dụng cho bản demo cũng đã được cập nhật để hỗ trợ tính năng kiểu chữ linh hoạt.

Các phản ứng đã chọn đối với các tính năng của kiểu chữ chất lỏng của WordPress

Có kiểu chữ linh hoạt trong WordPress ở cấp độ cài đặt là điều cực kỳ thú vị! Tôi nghĩ rằng tôi sẽ chia sẻ một số suy nghĩ từ những người trong cộng đồng nhà phát triển WordPress, những người đã nhận xét về nó.

Matias Ventura, kiến ​​trúc sư chính của dự án Gutenberg:

Một trong những tính năng Gutenberg mới nhất yêu thích của tôi là loại chất lỏng - hy vọng - “hoạt động hiệu quả”. Nó có sẵn để thử nghiệm trong 13.8. pic.twitter.com/9SLUgEg4pF

- Matías Ventura (@matias_ventura) Tháng Tám 4, 2022

Tabor phong phú:

Là một trong những nỗ lực lớn hơn nhằm tạo ra các trang phong phú đẹp mắt trong WordPress, kiểu chữ linh hoạt là một trải nghiệm khá lớn giành được chiến thắng cho cả những người đang xây dựng bằng WordPress - và những người sử dụng nội dung.

Nhà phát triển Automattic Ramón Dodd nhận xét trong Yêu cầu kéo:

Đối chiếu ý tưởng đó với các kích thước phông chữ đáp ứng với các kích thước cửa sổ xem cụ thể, chẳng hạn như những kích thước được xác định bởi truy vấn phương tiện truyền thông, nhưng không làm gì ở giữa các kích thước đó. theme.json đã cho phép các tác giả chèn các giá trị kích thước phông chữ linh hoạt của riêng họ. Điều này sẽ không thay đổi, nhưng PR này cung cấp nó cho những người không muốn lo lắng về các chi tiết thực hiện.

Nick Croft, tác giả của GenesisWP:

Sẽ không nói dối đâu, tôi nghĩ đây là tính năng mà tôi thích thú nhất. Đã sử dụng kẹp để làm điều này nhưng cú pháp trông dễ dàng hơn đối với người bình thường của bạn.

- Nick Croft (@Nick_theGeek) Ngày 1 tháng 2022 năm XNUMX

Brian Garner, nhà thiết kế và nhà phát triển chính ủng hộ tại WPEngine:

Kiểu chữ linh hoạt là một cải tiến lớn đối với #WordPress. Các chủ đề FSE có thể chọn tham gia thử nghiệm này thông qua plugin Gutenberg, nhưng chúng ta sẽ thấy nó được hỗ trợ chính thức vào 6.1 vào mùa thu này. Đây là cách nó trông / hoạt động: pic.twitter.com/Jc7gHdyz5R

- Brian Gardner (@bgardner) Ngày 1 tháng 2022 năm XNUMX

Một vài nhà phát triển nghĩ một số tính năng nên được chọn tham gia. Jason Crist của Automattic nói:

Tôi thích sức mạnh của kiểu chữ linh hoạt, tuy nhiên tôi cũng không tin rằng nó chỉ nên được bật theo mặc định. Việc sử dụng (và các chi tiết của nó) là những quyết định thiết kế quan trọng cần được thực hiện cẩn thận.

Bạn cũng có thể tìm thấy nhiều nhận xét khác trong trang chính thức hướng dẫn kiểm tra cho tính năng.

Kết thúc

Tính năng kiểu chữ linh hoạt trong WordPress là vẫn đang phát triển tích cực tại thời điểm viết bài này. Vì vậy, ngay bây giờ, các tác giả chủ đề nên tiến hành sử dụng nó, nhưng thận trọng và mong đợi một số thay đổi có thể xảy ra trước khi nó được phát hành chính thức. Justin cảnh báo các tác giả chủ đề sử dụng tính năng này và đề nghị theo dõi hai vấn đề GitHub sau:

Vẫn còn rất nhiều công việc đang diễn ra về kiểu chữ và các công cụ WordPress liên quan đến thiết kế khác. Nếu bạn quan tâm, hãy xem cái này theo dõi typography GitHub vé và các vấn đề liên quan đến công cụ thiết kế GitHub.

Thông tin

Tôi đã sử dụng các bài viết sau khi nghiên cứu loại chất lỏng và cách WordPress triển khai nó như một tính năng.

Hướng dẫn và ý kiến

CSS-Thủ thuật

calc() và các chức năng CSS liên quan