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`）設(shè)置樣式。

我們也可以在DevTools中確認(rèn)這一點。請注意，名為`.wp-element-button`的類是選擇器。相同的類也用于設(shè)置交互式狀態(tài)。

同樣，所有這些樣式都在全局級別發(fā)生，來自`theme.json`。每當(dāng)我們使用按鈕時，它都將具有相同的背景，因為它們共享相同的選擇器，并且沒有其他樣式規(guī)則覆蓋它。

順便說一句，WordPress 6.1添加了對使用`theme.json`中的偽類（包括`:hover`、`:focus`和`:active`）或全局樣式UI設(shè)置某些元素（如按鈕和鏈接）的交互式狀態(tài)樣式的支持。Automattic工程師Dave Smith在一個YouTube視頻中演示了此功能。

我們可以在`theme.json`中（最好在子主題中，因為我們使用的是默認(rèn)WordPress主題）或在站點編輯器中的全局樣式設(shè)置中覆蓋按鈕的背景顏色（不需要子主題，因為它不需要代碼更改）。

但是，按鈕將同時更改。如果我們想在按鈕是特定塊的一部分時覆蓋背景顏色怎么辦？這就是塊級樣式發(fā)揮作用的地方。

#### 元素的塊級樣式

為了了解如何在塊級別使用和自定義樣式，讓我們更改包含在搜索塊中的按鈕的背景顏色。請記住，有一個按鈕塊，但我們正在做的是在搜索塊的塊級別覆蓋背景顏色。這樣，我們只在那里應(yīng)用新顏色，而不是將其全局應(yīng)用于所有按鈕。

為此，我們在`theme.json`的`styles.blocks`對象上定義樣式。沒錯，如果我們在`styles.elements`上定義所有按鈕的全局樣式，我們可以在`styles.block`上定義按鈕元素的塊特定樣式，這遵循類似的結(jié)構(gòu)：
</code>

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

<code>
看到了嗎？我在`styles.blocks.core/search.elements.button`上設(shè)置了背景和文本屬性，并使用了WordPress中預(yù)設(shè)的兩個CSS變量。

結(jié)果？搜索按鈕現(xiàn)在是紅色的（`--wp--preset--color--quaternary`），默認(rèn)按鈕塊保留其亮綠色背景。

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

如果我們想設(shè)置包含在其他塊中的按鈕的樣式，也是如此。按鈕只是一個例子，所以讓我們再看一個。

### 示例：在每個級別設(shè)置標(biāo)題樣式

讓我們用一個例子來鞏固所有這些信息。這次，我們將：

- 全局設(shè)置所有標(biāo)題的樣式
- 設(shè)置所有二級標(biāo)題元素的樣式
- 設(shè)置查詢循環(huán)塊中二級標(biāo)題元素的樣式

首先，讓我們從`theme.json`的基本結(jié)構(gòu)開始：
</code>

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

<code>
這為我們的全局和塊級樣式建立了輪廓。

#### 全局設(shè)置所有標(biāo)題的樣式

讓我們將`headings`對象添加到我們的全局樣式并應(yīng)用一些樣式：
</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>
這將所有標(biāo)題的顏色設(shè)置為WordPress中的預(yù)設(shè)基本顏色。讓我們在全局級別更改二級標(biāo)題元素的顏色和字體大?。?</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>
現(xiàn)在，所有二級標(biāo)題元素都設(shè)置為主要預(yù)設(shè)顏色，并具有流體字體大小。但也許我們希望在將二級標(biāo)題元素用于查詢循環(huán)塊時使用固定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!