Cara kami menulis CSS untuk tema WordPress berada di tengah-tengah perubahan besar-besaran. Saya baru-baru ini membagikan teknik untuk menambahkan dukungan tipe cairan di WordPress dengan cara theme.json, file baru yang WordPress telah berusaha keras untuk menjadi sumber kebenaran utama untuk menentukan gaya dalam tema WordPress yang mendukung fitur pengeditan situs lengkap (FSE).

Tunggu, tidak style.css mengajukan? Kami masih memiliki itu. Faktanya, style.css is masih file yang diperlukan dalam tema blok, meskipun perannya sangat dikurangi menjadi informasi meta yang digunakan untuk mendaftarkan tema. Yang mengatakan, faktanya adalah theme.json masih dalam pengembangan aktif, artinya kita berada dalam masa transisi di mana Anda mungkin menemukan gaya yang didefinisikan di sana, di styles.css atau bahkan di tingkat blok.

Jadi, seperti apa sebenarnya styling di hari-hari FSE WordPress ini? Itulah yang ingin saya ulas dalam artikel ini. Ada kekurangan dokumentasi untuk tema blok gaya di Buku Pegangan Pengembang Tema WordPress, jadi semua yang kami bahas di sini adalah apa yang telah saya kumpulkan tentang keadaan saat ini serta diskusi tentang masa depan tema WordPress.

Evolusi gaya WordPress

Fitur pengembangan baru yang disertakan dalam Wordpress 6.1 membuat kita lebih dekat dengan sistem gaya yang sepenuhnya didefinisikan dalam theme.json, tetapi masih ada banyak pekerjaan yang harus dilakukan sebelum kita dapat sepenuhnya mengandalkannya. Salah satu cara kita bisa mendapatkan ide tentang apa yang akan datang di rilis mendatang adalah dengan menggunakan plugin Gutenberg. Di sinilah fitur eksperimental sering diberikan uji coba.

Cara lain kita bisa merasakan di mana kita berada adalah dengan melihat evolusi tema WordPress default. Sampai saat ini, ada tiga tema default yang mendukung pengeditan situs penuh:

Tapi jangan mulai memperdagangkan CSS di style.css untuk pasangan nilai properti JSON di theme.json baru saja. Masih ada aturan penataan CSS yang perlu didukung di theme.json sebelum kita berpikir untuk melakukan itu. Masalah signifikan yang tersisa saat ini sedang dibahas dengan tujuan untuk sepenuhnya memindahkan semua aturan gaya CSS ke dalam theme.json dan mengkonsolidasikan berbagai sumber theme.json menjadi UI untuk pengaturan gaya global langsung di Editor Situs WordPress.

Itu membuat kami berada di tempat yang relatif sulit. Tidak hanya ada tidak ada jalur yang jelas untuk mengganti gaya tema, tetapi tidak jelas dari mana sumber gaya itu berasal — apakah itu dari lapisan yang berbeda theme.json file, style.css, plugin Gutenberg, atau di tempat lain?

Mengapa theme.json alih-alih style.css?

Anda mungkin bertanya-tanya mengapa WordPress bergerak menuju definisi gaya berbasis JSON alih-alih file CSS tradisional. Ben Dwyer dari tim pengembangan Gutenberg dengan fasih mengartikulasikan mengapa theme.json pendekatan adalah manfaat bagi pengembang tema.

Layak membaca posting Ben, tetapi dagingnya ada dalam kutipan ini:

Mengganti CSS, baik tata letak, prasetel, atau gaya blok, menghadirkan hambatan bagi integrasi dan interoperabilitas: keseimbangan visual antara frontend dan editor menjadi lebih sulit untuk dipertahankan, pemutakhiran untuk memblokir internal mungkin bertentangan dengan penggantian. CSS khusus, selanjutnya, kurang portabel di seluruh tema blok lainnya.

Dengan mendorong penulis tema untuk menggunakan theme.json API jika memungkinkan, hierarki gaya yang ditentukan “dasar > tema > pengguna” dapat diselesaikan dengan benar.

Salah satu manfaat utama dari memindahkan CSS ke JSON adalah bahwa JSON adalah format yang dapat dibaca mesin, yang berarti dapat diekspos di UI Editor Situs WordPress dengan mengambil API, sehingga memungkinkan pengguna untuk mengubah nilai default dan menyesuaikan tampilan situs tanpa menulis CSS sama sekali. Ini juga menyediakan cara untuk menata blok secara konsisten, sambil menyediakan struktur yang menciptakan lapisan kekhususan sedemikian rupa sehingga pengaturan pengguna mengambil prioritas tertinggi daripada yang ditentukan dalam theme.json. Interaksi antara gaya tingkat tema di theme.json dan gaya yang ditentukan pengguna di UI Gaya Global adalah yang membuat pendekatan JSON begitu menarik.

Pengembang menjaga konsistensi dalam JSON, dan pengguna mendapatkan fleksibilitas dengan penyesuaian tanpa kode. Itu menang-menang.

Ada manfaat lain, pasti, dan Mike McAlister dari WP Engine mencantumkan beberapa di utas Twitter ini. Anda dapat menemukan lebih banyak manfaat dalam hal ini diskusi mendalam di blog Make WordPress Core. Dan setelah Anda membacanya, bandingkan manfaat pendekatan JSON dengan cara yang tersedia untuk menentukan dan mengganti gaya dalam tema klasik.

Mendefinisikan gaya dengan elemen JSON

Kami telah melihat banyak kemajuan sejauh bagian mana dari sebuah tema theme.json mampu menata gaya. Sebelum WordPress 6.1, yang bisa kita lakukan hanyalah membuat judul dan tautan gaya. Sekarang, dengan WordPress 6.1, kita dapat menambahkan tombol, keterangan, kutipan, dan judul ke campuran.

Dan kami melakukannya dengan mendefinisikan elemen JSON. Pikirkan elemen sebagai komponen individual yang hidup di blok WordPress. Katakanlah kita memiliki blok yang berisi heading, paragraf, dan tombol. Potongan individu itu adalah elemen, dan ada elements objek dalam theme.json di mana kami mendefinisikan gaya mereka:

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

Cara yang lebih baik untuk menggambarkan elemen JSON adalah sebagai komponen tingkat rendah untuk tema dan blok yang tidak memerlukan kerumitan blok. Mereka adalah representasi dari primitif HTML yang tidak didefinisikan dalam satu blok tetapi dapat digunakan di seluruh blok. Bagaimana mereka didukung di WordPress (dan plugin Gutenberg) dijelaskan di Buku Pegangan Editor Blok dan ini Tutorial Pengeditan Situs Lengkap oleh Carolina Nymark.

Misalnya, tautan ditata dalam elements objek tetapi bukan blok dalam hak mereka sendiri. Tetapi tautan dapat digunakan dalam satu blok dan itu akan mewarisi gaya yang ditentukan pada elements.link objek dalam theme.json. Ini tidak sepenuhnya merangkum definisi elemen, karena beberapa elemen juga terdaftar sebagai blok, seperti blok Heading dan Button — tetapi blok tersebut masih dapat digunakan di dalam blok lain.

Berikut adalah tabel elemen yang saat ini tersedia untuk ditata theme.json, milik Carolina:

Seperti yang Anda lihat, ini masih awal dan masih banyak yang perlu dipindahkan dari plugin Gutenberg ke WordPress Core. Tetapi Anda dapat melihat betapa cepatnya melakukan sesuatu seperti menata semua judul dalam tema secara global tanpa mencari penyeleksi dalam file CSS atau DevTools.

Selanjutnya, Anda juga dapat mulai melihat bagaimana struktur theme.json semacam bentuk lapisan kekhususan, pergi dari elemen global (misalnya headings) ke elemen individu (mis h1), dan gaya level blok (mis h1 terkandung dalam satu blok).

Informasi tambahan tentang elemen JSON tersedia di ini Buat proposal WordPress dan tiket terbuka ini di repo GitHub plugin Gutenberg.

Kekhususan JSON dan CSS

Mari kita terus berbicara tentang kekhususan CSS. Saya sebutkan sebelumnya bahwa pendekatan JSON untuk penataan membentuk hierarki. Dan itu benar. Gaya yang didefinisikan pada elemen JSON di theme.json dianggap gaya tema default. Dan apa pun yang diatur oleh pengguna di UI Gaya Global akan menggantikan default.

Dengan kata lain: gaya pengguna membawa lebih banyak kekhususan daripada gaya tema default. Mari kita lihat blok Button untuk merasakan cara kerjanya.

saya menggunakan tema kosong, tema WordPress kosong tanpa gaya CSS. Saya akan menambahkan blok Button pada halaman baru.

Oke, kami tahu bahwa WordPress Core dikirimkan dengan beberapa gaya ringan. Sekarang, saya akan beralih ke tema TT3 default dari WordPress 6.1 dan mengaktifkannya. Jika saya menyegarkan halaman saya dengan tombol, tombol akan berubah gaya.

Anda dapat melihat dengan tepat dari mana gaya baru itu berasal di TT3's theme.json mengajukan. Ini memberi tahu kita bahwa gaya elemen JSON lebih diutamakan daripada gaya Inti WordPress.

Sekarang saya akan memodifikasi TT3 dengan menimpanya dengan a theme.json file dalam tema anak, di mana warna latar belakang default dari blok Tombol diatur ke merah.

Tetapi perhatikan tombol pencarian di tangkapan layar terakhir itu. Itu juga harus merah, kan? Itu pasti berarti itu ditata di tingkat lain jika perubahan yang saya buat adalah di tingkat global. Jika kita ingin berubah kedua tombol, kita bisa melakukannya di tingkat pengguna menggunakan UI Gaya Global di editor situs.

Kami mengubah warna latar belakang kedua tombol menjadi biru dan memodifikasi teks juga menggunakan UI gaya Global. Perhatikan bahwa warna biru dari sana lebih diutamakan daripada gaya tema!

Mesin Gaya

Itu ide yang sangat cepat, tapi bagus, tentang bagaimana spesifisitas CSS dikelola dalam tema blok WordPress. Tapi itu bukan gambaran yang lengkap karena masih belum jelas dimana gaya tersebut dihasilkan. WordPress memiliki gaya defaultnya sendiri yang datang dari suatu tempat, menggunakan data di theme.json untuk lebih banyak aturan gaya, dan menimpanya dengan apa pun yang diatur dalam Gaya Global.

Apakah gaya itu sebaris? Apakah mereka dalam stylesheet terpisah? Mungkin mereka disuntikkan pada halaman di ?

Itu yang baru Mesin Gaya adalah mudah-mudahan akan memecahkan. Style Engine adalah API baru di WordPress 6.1 yang dimaksudkan untuk membawa konsistensi tentang bagaimana gaya dihasilkan dan di mana gaya diterapkan. Dengan kata lain, dibutuhkan semua sumber gaya yang mungkin dan bertanggung jawab untuk menghasilkan gaya blok dengan benar. Saya tahu saya tahu. Namun abstraksi lain di atas abstraksi lain hanya untuk menulis beberapa gaya. Tetapi memiliki API terpusat untuk gaya mungkin merupakan solusi paling elegan mengingat gaya dapat berasal dari sejumlah tempat.

Kami hanya mendapatkan tampilan pertama di Style Engine. Faktanya, inilah yang telah diselesaikan sejauh ini, sesuai tiket:

• Audit dan konsolidasikan tempat kode menghasilkan CSS dukungan blok di bagian belakang sehingga dikirim dari tempat yang sama (berlawanan dengan beberapa tempat). Ini mencakup aturan CSS seperti margin, padding, tipografi, warna, dan batas.
• Hapus gaya khusus tata letak berulang dan buat nama kelas semantik.
• Kurangi jumlah tag gaya sebaris yang kami cetak ke halaman untuk dukungan blok, tata letak, dan elemen.

Pada dasarnya, ini adalah dasar untuk membuat satu API yang berisi semua aturan gaya CSS untuk sebuah tema, dari mana pun asalnya. Ini membersihkan cara WordPress akan menyuntikkan gaya inline pra-6.1 dan menetapkan sistem untuk nama kelas semantik.

Rincian lebih lanjut tentang tujuan jangka panjang dan jangka pendek dari Style Engine dapat ditemukan di sini Buat diskusi Inti WordPress. Anda juga dapat mengikuti masalah pelacakan dan papan proyek untuk pembaruan lebih lanjut.

Bekerja dengan elemen JSON

Kami berbicara sedikit tentang elemen JSON di theme.json file dan bagaimana mereka pada dasarnya primitif HTML untuk mendefinisikan gaya default untuk hal-hal seperti judul, tombol, dan tautan, antara lain. Sekarang, mari kita lihat sebenarnya menggunakan elemen JSON dan bagaimana perilakunya dalam berbagai konteks gaya.

Elemen JSON umumnya memiliki dua konteks: the tingkat global dan tingkat blok. Gaya tingkat global ditentukan dengan kekhususan yang lebih rendah daripada di tingkat blok untuk memastikan bahwa gaya khusus blok didahulukan untuk konsistensi di mana pun blok digunakan.

Gaya global untuk elemen JSON

Mari kita lihat tema TT3 default baru dan periksa bagaimana gaya tombolnya. Berikut ini adalah copy-paste disingkat dari TT3 theme.json file (ini dia kode lengkap) menunjukkan bagian gaya global, tetapi Anda dapat menemukan kode aslinya di sini.

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

Semua tombol ditata pada tingkat global (styles.elements.button).

Kami juga dapat mengonfirmasi ini di DevTools. Perhatikan bahwa kelas yang disebut .wp-element-button adalah pemilih. Kelas yang sama juga digunakan untuk menata status interaktif.

Sekali lagi, gaya ini terjadi di tingkat global, berasal dari theme.json. Setiap kali kita menggunakan tombol, itu akan memiliki latar belakang yang sama karena mereka berbagi pemilih yang sama dan tidak ada aturan gaya lain yang menimpanya.

Selain itu, WordPress 6.1 menambahkan dukungan untuk menata status interaktif untuk elemen tertentu, seperti tombol dan tautan, menggunakan kelas semu di theme.json - termasuk :hover, :focus, dan :active — atau UI Gaya Global. Insinyur Otomatis Dave Smith menunjukkan fitur ini dalam video YouTube.

Kita bisa mengganti warna latar belakang tombol baik di theme.json (sebaiknya dalam tema anak karena kami menggunakan tema WordPress default) atau dalam pengaturan Gaya Global di editor situs (tidak diperlukan tema anak karena tidak memerlukan perubahan kode).

Tapi kemudian tombol akan berubah sekaligus. Bagaimana jika kita ingin mengganti warna latar belakang ketika tombol adalah bagian dari blok tertentu? Di situlah gaya level blok ikut bermain.

Gaya tingkat blok untuk elemen

Untuk memahami bagaimana kita dapat menggunakan dan menyesuaikan gaya di tingkat blok, mari ubah warna latar belakang tombol yang terdapat di blok Cari. Ingat, ada blok Tombol, tetapi yang kami lakukan adalah mengganti warna latar belakang pada tingkat blok blok Pencarian. Dengan begitu, kami hanya menerapkan warna baru di sana sebagai lawan menerapkannya secara global ke semua tombol.

Untuk melakukan itu, kita mendefinisikan gaya pada styles.blocks objek dalam theme.json. Itu benar, jika kita mendefinisikan gaya global untuk semua tombol di styles.elements, kita dapat menentukan gaya khusus blok untuk elemen tombol pada styles.block, yang mengikuti struktur serupa:

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

Lihat itu? saya mengatur background dan text properti aktif styles.blocks.core/search.elements.button dengan dua variabel CSS yang telah diatur sebelumnya di WordPress.

Hasil? Tombol pencarian sekarang berwarna merah (--wp--preset--color--quaternary), dan blok Tombol default mempertahankan latar belakang hijau cerahnya.

Kita bisa melihat perubahan di DevTools juga.

Hal yang sama berlaku jika kita ingin menata tombol yang termasuk dalam blok lain. Dan tombol hanyalah salah satu contoh, jadi mari kita lihat yang lain.

Contoh: Menata judul di setiap level

Mari kita bawa pulang semua informasi ini dengan sebuah contoh. Kali ini, kami akan:

• Gaya semua judul secara global
• Gaya semua elemen Pos 2
• Style Heading 2 elemen di blok Query Loop

Pertama, mari kita mulai dengan struktur dasar untuk theme.json:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Ini menetapkan garis besar untuk gaya global dan level blok kami.

Gaya semua judul secara global

Mari tambahkan headings menolak gaya global kami dan menerapkan beberapa gaya:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

Itu mengatur warna untuk semua judul ke warna dasar preset di WordPress. Mari kita ubah warna dan ukuran font elemen Heading 2 di tingkat global juga:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

Sekarang, semua elemen Pos 2 disetel menjadi warna prasetel utama dengan a ukuran font cair. Tapi mungkin kita ingin diperbaiki fontSize untuk elemen Heading 2 saat digunakan di blok Query Look:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

Sekarang kita memiliki tiga level gaya untuk elemen Heading 2: semua heading, semua elemen Heading 2, dan elemen Heading 2 yang digunakan dalam blok Query Loop.

Contoh tema yang ada

Meskipun kami hanya melihat contoh gaya untuk tombol dan judul di artikel ini, WordPress 6.1 mendukung penataan elemen tambahan. Ada tabel yang menguraikannya di “Mendefinisikan gaya dengan elemen JSON” bagian.

Anda mungkin bertanya-tanya elemen JSON mana yang mendukung properti CSS mana, belum lagi bagaimana Anda mendeklarasikannya. Sementara kami menunggu dokumentasi resmi, sumber daya terbaik yang kami miliki adalah theme.json file untuk tema yang ada. Saya akan memberikan tautan ke tema berdasarkan elemen yang mereka sesuaikan, dan menunjukkan properti apa yang disesuaikan.

Pastikan untuk memberikan masing-masing theme.json file tampilan yang bagus karena tema ini menyertakan contoh gaya tingkat blok yang sangat baik di styles.blocks obyek.

Membungkus

Perubahan yang sering terjadi pada editor situs lengkap menjadi sumber utama iritasi bagi banyak orang, termasuk pengguna Gutenberg yang paham teknologi. Bahkan aturan CSS yang sangat sederhana, yang berfungsi baik dengan tema klasik, tampaknya tidak berfungsi untuk tema blok karena lapisan baru kekhususan kita bahas sebelumnya.

Tentang a Usulan GitHub untuk mendesain ulang editor situs dalam mode browser baru, Sara Gooding menulis di postingan WP Tavern:

Sangat mudah tersesat saat mencoba berkeliling Editor Situs kecuali Anda bekerja siang dan malam di dalam alat. Navigasinya tidak stabil dan membingungkan, terutama saat beralih dari penelusuran templat ke pengeditan templat hingga memodifikasi blok individual.

Bahkan sebagai pengendara awal yang tajam di dunia editor blok Gutenberg dan tema blok-mata, saya memiliki banyak frustrasi sendiri. Saya optimis, dan mengantisipasi bahwa editor situs, setelah selesai, akan menjadi alat revolusioner bagi pengguna dan pengembang tema yang paham teknologi. Ini twit harapan sudah mengkonfirmasi itu. Sementara itu, tampaknya kita harus bersiap untuk lebih banyak perubahan, dan bahkan mungkin perjalanan yang bergelombang.

Referensi

Saya mencantumkan semua sumber daya yang saya gunakan saat meneliti informasi untuk artikel ini.

elemen JSON

Gaya Global

Mesin Gaya

Terima kasih sudah membaca! Saya ingin mendengar refleksi Anda sendiri tentang penggunaan tema blok dan bagaimana Anda mengelola CSS Anda.