Menguruskan Gaya CSS dalam Tema Blok WordPress

Bagaimana CSS ditulis dalam tema WordPress berubah secara dramatik. Baru-baru ini saya berkongsi teknologi yang menambah sokongan fon cecair di WordPress melalui

, dokumen baru yang sangat dipromosikan oleh WordPress yang akan menjadi sumber utama kebenaran untuk menentukan gaya tema WordPress yang menyokong fungsi penyuntingan tapak (FSE). theme.json

tunggu, tidak

fail? Kami masih memilikinya. Malah, style.css masih merupakan fail yang diperlukan dalam tema blok, walaupun ia mempunyai kesan yang banyak dikurangkan dan hanya digunakan untuk mendaftarkan maklumat meta untuk topik tersebut. Iaitu, style.css masih dalam pembangunan aktif, yang bermaksud kita berada dalam tempoh peralihan di mana anda boleh mencari gaya yang ditakrifkan pada theme.json, theme.json dan juga tahap blok. styles.css

Jadi, apakah gaya yang sebenarnya seperti dalam era WordPress FSE ini? Inilah yang ingin saya perkenalkan dalam artikel ini. Manual pemaju tema WordPress tidak mempunyai dokumentasi pada gaya tema blok, jadi semua yang kami tutupi di sini adalah maklumat yang saya kumpulkan mengenai situasi semasa dan perbincangan masa depan mengenai tema WordPress.

evolusi gaya wordpress

Ciri -ciri pembangunan baru yang termasuk dalam WordPress 6.1 membawa kita lebih dekat kepada sistem yang mentakrifkan gaya sepenuhnya dalam

, tetapi masih banyak kerja yang perlu dilakukan sebelum kita boleh bergantung sepenuhnya. Kita boleh mengetahui apa yang akan muncul dalam siaran masa depan dengan menggunakan plugin Gutenberg, di mana ciri -ciri eksperimen biasanya diuji. theme.json

Kami juga boleh belajar tentang status semasa kami dengan melihat evolusi tema WordPress lalai. Setakat ini, terdapat tiga tema lalai yang menyokong penyuntingan di seluruh tapak:

• Dua puluh dua puluh satu (TT1): Ini adalah versi tema lalai klasik pertama yang serasi dengan blok. Terdapat juga versi blok (blok TT1) dan telah menjadi sumber yang boleh dipercayai untuk tema blok sejak itu. Walau bagaimanapun, semua 5900 baris CSS dalam TT1 berada dalam style.css. Tidak theme.json fail. Blok TT1 adalah kali pertama kita melihat gaya dalam era editor blok, yang boleh kita fikirkan sebagai treler dan bukan model.
• Dua puluh dua puluh dua (TT2): Ini adalah tema WordPress lalai berasaskan blok yang pertama dan kali pertama yang kita temui theme.json. Fail ini mengandungi hanya 373 baris kod. Pemaju utamanya telah membuat usaha yang diselaraskan untuk menjadikannya tema bebas CSS; style.css theme.json
Dua puluh dua puluh tiga (TT3):
• Ini diterbitkan dalam WordPress 6.1 dan ia adalah contoh tema pertama tanpa sebarang CSS dalam fail yang diperlukan. style.css Walau bagaimanapun, jangan segera menggantikan CSS dalam
dengan pasangan nilai atribut JSON dalam

. Sebelum mempertimbangkan melakukan ini, masih terdapat beberapa peraturan gaya CSS untuk menyokong dalam

. Isu -isu penting yang sedang dibincangkan kini dibincangkan, matlamatnya adalah untuk memindahkan semua peraturan gaya CSS ke dalam style.css sepenuhnya dan menggabungkan sumber -sumber yang berbeza theme.json ke dalam satu UI untuk menubuhkan gaya global secara langsung di editor tapak WordPress. theme.json theme.json Ini meletakkan kita dalam keadaan yang agak sukar. Bukan sahaja tidak ada jalan yang jelas untuk mengatasi gaya tema, tetapi juga tidak jelas apa gaya itu - adakah mereka dari pelbagai lapisan theme.json fail,

, plugin Gutenberg atau di tempat lain?

theme.json mengapa memilih tema.json bukannya gaya.css? style.css

Anda mungkin tertanya-tanya mengapa WordPress beralih kepada definisi gaya berasaskan JSON dan bukannya fail CSS tradisional. Ben Dwyer dari pasukan pembangunan Gutenberg dengan fasih menjelaskan mengapa kaedah

adalah manfaat bagi pemaju topik.

bernilai membaca catatan Ben, tetapi maksudnya dalam petikan ini: theme.json

Sama ada susun atur, pratetap atau gaya blok, menimpa CSS boleh menimbulkan halangan kepada integrasi dan interoperabilitas: konsistensi visual antara bahagian depan dan editor menjadi lebih sukar untuk mengekalkan, dan menaik taraf dalam blok mungkin bertentangan dengan menimpa. Di samping itu, CSS adat kurang mudah alih dalam tema blok lain.

Hierarki gaya "asas" yang ditakrifkan dapat diselesaikan dengan betul dengan menggalakkan pengarang topik untuk menggunakan API

sebanyak mungkin.

Salah satu manfaat utama yang memindahkan CSS ke JSON ialah JSON adalah format yang boleh dibaca mesin, yang bermaksud ia boleh didedahkan dalam UI editor tapak WordPress dengan mendapatkan API, yang membolehkan pengguna mengubahsuai nilai lalai dan menyesuaikan penampilan laman web tanpa menulis sebarang CSS. Ia juga menyediakan cara untuk gaya blok secara konsisten, sambil menyediakan struktur yang mewujudkan lapisan tertentu supaya tetapan pengguna mempunyai keutamaan yang lebih tinggi daripada tetapan yang ditakrifkan dalam theme.json. Interaksi ini antara gaya peringkat tema dalam theme.json dan gaya yang ditentukan pengguna dalam Global Style UI menjadikan kaedah JSON begitu menarik.

Pemaju mengekalkan konsistensi dalam JSON, dan pengguna mendapat fleksibiliti melalui penyesuaian tanpa kod. Ini adalah keadaan menang-menang.

Sudah tentu, ada manfaat lain, dan WP Engine's Mike McAlister menyenaraikan beberapa dalam thread Twitter ini. Anda boleh mendapatkan lebih banyak faedah dalam perbincangan yang mendalam mengenai blog Core Make WordPress. Selepas membaca, bandingkan kelebihan kaedah JSON dengan kaedah yang tersedia yang menentukan dan menimpa gaya dalam topik klasik.

Tentukan gaya menggunakan elemen json

Kami telah melihat banyak kemajuan dari segi bahagian tema yang boleh ditetapkan. Sebelum WordPress 6.1, semua yang kita boleh lakukan ialah gaya tajuk dan pautan. Sekarang, dengan WordPress 6.1, kita boleh menambah butang, tajuk, petikan, dan tajuk. theme.json

kita melakukan ini dengan menentukan unsur

json . Unsur boleh dianggap sebagai komponen tunggal yang wujud dalam blok WordPress. Katakan kita mempunyai blok dengan tajuk, perenggan, dan butang. Bahagian individu ini adalah unsur -unsur, dan terdapat objek di mana kita menentukan gaya mereka: theme.json elements

Cara yang lebih baik untuk menggambarkan elemen JSON adalah menjadi komponen topik dan blok peringkat rendah, yang tidak memerlukan kerumitan blok. Mereka adalah perwakilan primitif HTML yang tidak ditakrifkan dalam blok tetapi boleh digunakan di antara blok. Bagaimana mereka disokong dalam WordPress (dan plug-in Gutenberg) diterangkan dalam manual editor blok dan dalam tutorial penyuntingan di seluruh laman web ini oleh Carolina Nymark.

<code>{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}</code>

Sebagai contoh, gaya pautan dalam objek

, tetapi bukan blok itu sendiri. Tetapi pautan boleh digunakan dalam blok, ia akan mewarisi gaya yang ditakrifkan dalam objek

elements. Tetapi ini tidak sepenuhnya meringkaskan definisi unsur -unsur, kerana sesetengah elemen juga didaftarkan sebagai blok, seperti tajuk dan blok butang - tetapi blok ini masih boleh digunakan di blok lain. theme.json elements.link Berikut adalah jadual elemen yang disediakan oleh Carolina yang boleh digunakan untuk gaya dalam

sebelum WordPress 6.1:

theme.json seperti yang anda lihat, ini masih dalam peringkat awal dan masih terdapat banyak perkara untuk bergerak dari plugin Gutenberg ke teras WordPress. Tetapi anda dapat melihat berapa cepatnya untuk menetapkan semua tajuk secara global dalam tema tanpa mencari pemilih dalam fail CSS atau DevTools.

Di samping itu, anda boleh mula memahami bagaimana struktur theme.json membentuk lapisan tertentu, dari unsur-unsur global (seperti tajuk) kepada unsur-unsur individu (seperti H1), dan gaya peringkat blok (seperti H1 termasuk dalam blok).

3

kekhususan json dan css

mari kita terus membincangkan kekhususan CSS. Seperti yang saya nyatakan sebelum ini, kaedah gaya JSON mencipta hierarki. Ini benar. Gaya yang ditakrifkan pada elemen JSON dalam

dianggap sebagai gaya tema lalai. Apa -apa sahaja yang ditetapkan oleh pengguna dalam UI gaya global akan mengatasi nilai lalai. theme.json

dengan kata lain:

Gaya pengguna mempunyai kekhususan yang lebih tinggi daripada gaya tema lalai. Mari lihat blok butang untuk memahami bagaimana ia berfungsi. Saya menggunakan kosong, yang merupakan tema WordPress kosong tanpa gaya CSS. Saya akan menambah blok butang ke halaman baru.

Ok, kita tahu bahawa WordPress Core datang dengan beberapa gaya mudah. Sekarang, saya akan beralih ke tema TT3 lalai di WordPress 6.1 dan mengaktifkannya. Jika saya menyegarkan halaman dengan butang, gaya butang berubah.

Anda dapat melihat dengan tepat di mana gaya baru ini dari dalam fail

TT3. Ini memberitahu kita bahawa gaya elemen JSON mengambil keutamaan atas gaya teras WordPress.

3 theme.json

Tetapi sila ambil perhatian butang carian di tangkapan skrin terakhir. Ia juga merah, kan? Ini bermakna jika perubahan yang saya buat berada di peringkat global, maka ia mesti digayakan pada tahap yang lain. Jika kita mahu menukar butang

dua

, kita boleh membuat perubahan di peringkat pengguna menggunakan UI Global Style di editor tapak.

kami menggunakan UI gaya global untuk menukar warna latar belakang dua butang ke biru dan mengubahsuai teks. Ambil perhatian bahawa biru di sana mengambil keutamaan atas gaya tema!

enjin gaya

Ini adalah idea yang sangat cepat tetapi baik tentang cara menguruskan kekhususan CSS dalam tema blok WordPress. Tetapi ini bukan gambaran lengkap, kerana tidak jelas di mana gaya ini dihasilkan. WordPress mempunyai gaya lalai sendiri yang datang dari suatu tempat, gunakan data dalam

untuk mendapatkan lebih banyak peraturan gaya dan menimpa peraturan tersebut dengan apa sahaja yang ditetapkan dalam gaya global.

Adakah gaya ini digariskan? Adakah mereka dalam stylesheets berasingan? Mungkin mereka disuntik di halaman? Ini adalah masalah yang diharapkan oleh enjin gaya baru. Enjin gaya adalah API baru di WordPress 6.1, yang bertujuan untuk mengekalkan gaya yang dihasilkan dan lokasi aplikasi gaya yang konsisten. Dalam erti kata lain, ia memerlukan semua sumber gaya yang mungkin dan bertanggungjawab secara individu untuk menghasilkan gaya blok dengan betul. Saya tahu, saya tahu. Hanya untuk menulis beberapa gaya, lapisan abstraksi telah ditambah di atas lapisan abstraksi yang lain. Walau bagaimanapun, mempunyai API gaya berpusat mungkin merupakan penyelesaian yang paling elegan, memandangkan gaya boleh datang dari pelbagai tempat. theme.json

Kami hanya melihat enjin gaya untuk kali pertama. Malah, mengikut tiket, kerja berikut telah dilakukan setakat ini:

• Audit dan menggabungkan backend menjana blok yang menyokong lokasi kod CSS supaya mereka dihantar dari lokasi yang sama (bukannya beberapa lokasi). Ini termasuk peraturan CSS seperti margin, mengisi, tipografi, warna, dan sempadan.
• Keluarkan gaya khusus susun atur duplikat dan menghasilkan nama kelas semantik.
• Kurangkan bilangan tag gaya sebaris yang menyokong percetakan ke halaman ke blok, susun atur, dan elemen.

Pada dasarnya, ini adalah asas untuk membina API tunggal yang mengandungi semua peraturan gaya CSS untuk topik itu, tidak kira di mana asalnya. Ia membersihkan cara WordPress menyuntik gaya dalam talian sebelum 6.1 dan membina sistem untuk nama kelas semantik.

Untuk maklumat lanjut mengenai matlamat jangka panjang dan jangka pendek enjin gaya, lihat ini membuat perbincangan teras WordPress. Anda juga boleh mengikuti isu penjejakan dan papan projek untuk maklumat lanjut.

menggunakan elemen JSON

kami membincangkan primitif HTML dalam unsur -unsur theme.json json dalam fail dan bagaimana mereka pada dasarnya menentukan gaya lalai kandungan seperti tajuk, butang, dan pautan. Sekarang mari kita lihat bagaimana sebenar menggunakan unsur json dan bagaimana ia berkelakuan dalam pelbagai konteks gaya.

elemen json biasanya mempunyai dua konteks: tahap global dan tahap blok . Takrif gaya peringkat global lebih rendah daripada tahap blok untuk memastikan gaya khusus blok lebih disukai supaya konsistensi dikekalkan di mana sahaja blok digunakan.

gaya global elemen json

Mari kita lihat tema TT3 lalai baru dan periksa gaya butangnya. Berikut adalah salinan pendek-paste fail TT3 theme.json (ini adalah kod penuh), menunjukkan bahagian gaya global, tetapi anda boleh mencari kod asal di sini.

Lihat kod

`` ` { "Versi": 2, "Tetapan": {}, // ... "Gaya": { // ... "Elemen": { "butang": { "Sempadan": { "Radius": "0" }, "Warna": { "Latar Belakang": "Var (-WP-Preset-Color-Primary)", "Teks": "var (-WP-Preset-Color-Contrast)" }, ": hover": { "Warna": { "Latar Belakang": "Var (-WP-Preset-Color-Contrast)", "Teks": "var (-WP-Preset-color-Base)" } }, ": fokus": { "Warna": { "Latar Belakang": "Var (-WP-Preset-Color-Contrast)", "Teks": "var (-WP-Preset-color-Base)" } }, ": Aktif": { "Warna": { "Latar Belakang": "Var (-WP-Preset-Color-Secondary)", "Teks": "var (-WP-Preset-color-Base)" } } }, "H1": { "Typography": {} }, // ... "tajuk": { "Typography": { "Fontweight": "400", "Lineheight": "1.4" } }, "pautan": { "Warna": { "Teks": "var (-WP-Preset-Color-Contrast)" }, ": hover": { "Typography": { "TextDecoration": "Tiada" } }, ": fokus": { "Typography": { "TextDecoration": "Bawah garis putus -putus" } }, ": Aktif": { "Warna": { "Teks": "var (-WP-preset-color-secondary)" }, "Typography": { "TextDecoration": "Tiada" } }, "Typography": { "TextDecoration": "garis bawah" } } }, // ... }, "TemplateParts": {} }

<code>{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}</code>

{ "Versi": 2, // ... "Gaya": { // gaya peringkat global "Elemen": {}, // gaya tahap blok "Blok": { "teras/carian": { "Elemen": { "butang": { "Warna": { "Latar Belakang": "Var (-WP-Preset-Color-Quaer)", "Teks": "var (-WP-Preset-color-Base)" } } }, // ... } } } }

<code>
所有按钮都在全局级别（`styles.elements.button`）设置样式。

我们也可以在DevTools中确认这一点。请注意，名为`.wp-element-button`的类是选择器。相同的类也用于设置交互式状态。

同样，所有这些样式都在全局级别发生，来自`theme.json`。每当我们使用按钮时，它都将具有相同的背景，因为它们共享相同的选择器，并且没有其他样式规则覆盖它。

顺便说一句，WordPress 6.1添加了对使用`theme.json`中的伪类（包括`:hover`、`:focus`和`:active`）或全局样式UI设置某些元素（如按钮和链接）的交互式状态样式的支持。Automattic工程师Dave Smith在一个YouTube视频中演示了此功能。

我们可以在`theme.json`中（最好在子主题中，因为我们使用的是默认WordPress主题）或在站点编辑器中的全局样式设置中覆盖按钮的背景颜色（不需要子主题，因为它不需要代码更改）。

但是，按钮将同时更改。如果我们想在按钮是特定块的一部分时覆盖背景颜色怎么办？这就是块级样式发挥作用的地方。

#### 元素的块级样式

为了了解如何在块级别使用和自定义样式，让我们更改包含在搜索块中的按钮的背景颜色。请记住，有一个按钮块，但我们正在做的是在搜索块的块级别覆盖背景颜色。这样，我们只在那里应用新颜色，而不是将其全局应用于所有按钮。

为此，我们在`theme.json`的`styles.blocks`对象上定义样式。没错，如果我们在`styles.elements`上定义所有按钮的全局样式，我们可以在`styles.block`上定义按钮元素的块特定样式，这遵循类似的结构：
</code>

{ "Versi": 2, "Gaya": { // gaya peringkat global "Elemen": {}, // gaya tahap blok "Blok": {} } }

<code>
看到了吗？我在`styles.blocks.core/search.elements.button`上设置了背景和文本属性，并使用了WordPress中预设的两个CSS变量。

结果？搜索按钮现在是红色的（`--wp--preset--color--quaternary`），默认按钮块保留其亮绿色背景。

我们也可以在DevTools中看到更改。

如果我们想设置包含在其他块中的按钮的样式，也是如此。按钮只是一个例子，所以让我们再看一个。

### 示例：在每个级别设置标题样式

让我们用一个例子来巩固所有这些信息。这次，我们将：

- 全局设置所有标题的样式
- 设置所有二级标题元素的样式
- 设置查询循环块中二级标题元素的样式

首先，让我们从`theme.json`的基本结构开始：
</code>

{ "Versi": 2, "Gaya": { // gaya peringkat global "Elemen": { "tajuk": { "Warna": "var (-WP-Preset-color-Base)" }, }, // gaya tahap blok "Blok": {} } }

<code>
这为我们的全局和块级样式建立了轮廓。

#### 全局设置所有标题的样式

让我们将`headings`对象添加到我们的全局样式并应用一些样式：
</code>

{ "Versi": 2, "Gaya": { // gaya peringkat global "Elemen": { "tajuk": { "Warna": "var (-WP-Preset-color-Base)" }, "H2": { "Warna": "var (-WP-Preset-color-Rimary)", "Typography": { "FontSize": "Clamp (2.625Rem, Calc (2.625Rem ((1VW - 0.48REM) * 8.4135)), 3.25REM)" } } }, // gaya tahap blok "Blok": {} } }

<code>
这将所有标题的颜色设置为WordPress中的预设基本颜色。让我们在全局级别更改二级标题元素的颜色和字体大小：
</code>

{ "Versi": 2, "Gaya": { // gaya peringkat global "Elemen": { "tajuk": { "Warna": "var (-WP-Preset-color-Base)" }, "H2": { "Warna": "var (-WP-Preset-color-Rimary)", "Typography": { "FontSize": "Clamp (2.625Rem, Calc (2.625Rem ((1VW - 0.48REM) * 8.4135)), 3.25REM)" } } }, // gaya tahap blok "Blok": { "teras/pertanyaan": { "Elemen": { "H2": { "Typography": { "Fontsize": 3.25rem } } } } } } }

<code>
现在，所有二级标题元素都设置为主要预设颜色，并具有流体字体大小。但也许我们希望在将二级标题元素用于查询循环块时使用固定fontSize：
</code>

Atas ialah kandungan terperinci Menguruskan Gaya CSS dalam Tema Blok WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!