Menggunakan Tata Letak Terkendali Baru Di Tema Blok WordPress

Salah satu tujuan utama dari Editor Situs WordPress (dan, ya, sekarang adalah nama “resmi”.) adalah memindahkan gaya blok dasar dari CSS ke JSON terstruktur. File JSON dapat dibaca oleh mesin, yang membuatnya dapat dikonsumsi oleh Editor Situs berbasis JavaScript untuk mengonfigurasi gaya global tema secara langsung di WordPress.

Ini belum sampai ke sana! Jika kita melihat tema default Twenty Twenty-Two (TT2), ada dua masalah utama yang belum terselesaikan: interaksi gaya (seperti :hover, :active, :focus), Dan margin dan padding wadah tata letak. Anda dapat melihat bagaimana itu diperbaiki sementara di TT2 style.css file daripada membuatnya menjadi theme.json file.

Wordpress 6.1 memperbaiki masalah tersebut dan yang ingin saya lakukan adalah melihat secara khusus yang terakhir. Sekarang kita memiliki gaya JSON-ified untuk margin dan padding wadah tata letak, yang membuka kita cara yang lebih fleksibel dan kuat untuk menentukan spasi dalam tata letak tema kami.

Jarak seperti apa yang sedang kita bicarakan?

Pertama, kita sudah punya padding tingkat akar yang merupakan cara mewah untuk menggambarkan padding pada elemen. Itu bagus karena memastikan spasi yang konsisten pada elemen yang dibagikan di semua halaman dan postingan.

Tapi ada lebih dari itu karena sekarang kita memiliki cara untuk blok melewati padding itu dan menyelaraskan diri dengan lebar penuh. Itu berkat keberpihakan sadar-padding yang merupakan fitur keikutsertaan baru di theme.json. Jadi, bahkan jika Anda memiliki padding tingkat root, Anda masih dapat mengizinkan, katakanlah, gambar (atau beberapa blok lainnya) untuk keluar dan menjadi lebar penuh.

Itu membawa kita ke hal lain yang kita dapatkan: tata letak yang dibatasi. Idenya di sini adalah bahwa blok apa pun yang bersarang di tata letak menghormati lebar konten tata letak — yang merupakan pengaturan global — dan tidak mengalir di luarnya. Kita dapat mengesampingkan perilaku itu berdasarkan blok demi blok dengan penyelarasan, tetapi kita akan membahasnya.

Mari kita mulai dengan…

Bantalan tingkat akar

Sekali lagi, ini bukan hal baru. Kami memiliki kemampuan untuk mengatur padding pada elemen dalam theme.json sejak percobaan plugin Gutenberg memperkenalkannya di versi 11.7. Kami mengaturnya di styles.spacing objek, di mana kita memiliki margin dan padding objek untuk menentukan jarak atas, kanan, bawah, dan kiri pada badan:

{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}

Ini adalah pengaturan global. Jadi, jika kita membuka DevTools dan memeriksanya elemen, kita akan melihat gaya CSS ini:

body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

Dingin. Namun di sinilah letak masalah tentang bagaimana di dunia kita dapat membiarkan beberapa blok keluar dari jarak itu untuk mengisi layar penuh, ujung ke ujung. Itu sebabnya jaraknya ada, kan? Ini membantu mencegah hal itu terjadi!

Namun memang ada banyak kasus di mana Anda mungkin ingin keluar dari jarak tersebut pada contoh satu kali saat bekerja di Editor Blok. Katakanlah kita memasukkan blok Gambar pada halaman dan kita menginginkannya menjadi lebar penuh sementara konten lainnya mengikuti padding tingkat root?

Memasukkan…

Penjajaran sadar padding

Saat mencoba membuat tema WordPress default pertama yang mendefinisikan semua gaya di theme.json file, perancang utama Kjell Reigstad mengilustrasikan aspek yang menantang untuk keluar dari bantalan tingkat akar dalam hal ini Masalah GitHub.

Fitur baru di WordPress 6.1 dibuat untuk mengatasi masalah ini. Mari kita gali yang berikutnya.

useRootPaddingAwareAlignments

Sebuah baru useRootPaddingAwareAlignments properti diciptakan untuk mengatasi masalah tersebut. Ini sebenarnya pertama kali diperkenalkan di plugin Gutenberg v13.8. Itu permintaan tarik asli adalah primer yang bagus tentang cara kerjanya.

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },

Langsung saja, perhatikan bahwa ini adalah fitur yang harus kita pilih. Properti diatur ke false secara default dan kita harus mengaturnya secara eksplisit true untuk mengaktifkannya. Perhatikan juga bahwa kita punya appearanceTools mulai true juga. Itu memilih kami ke dalam kontrol UI di Editor Situs untuk menata batas, warna tautan, tipografi, dan, ya, spasi yang menyertakan margin dan padding.

Pengaturan appearanceTools mulai true secara otomatis memilih blok menjadi margin dan padding tanpa harus mengatur keduanya settings.spacing.padding or setting.spacing.margin untuk true.

Ketika kita mengaktifkan useRootPaddingAwareAlignments, kami diberikan properti khusus dengan nilai bantalan akar yang disetel di elemen di ujung depan. Menariknya, itu juga menerapkan padding ke .editor-styles-wrapper kelas sehingga spasi ditampilkan saat bekerja di Editor Blok back-end. Cukup keren!

Saya dapat mengonfirmasi properti khusus CSS tersebut di DevTools sambil mencari-cari.

Mengaktifkan useRootPaddingAwareAlignments juga menerapkan bantalan kiri dan kanan ke blok mana pun yang mendukung lebar "konten" dan lebar "lebar" pada gambar Gaya Global di atas. Kita juga dapat mendefinisikan nilai-nilai tersebut di theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

Jika pengaturan Gaya Global berbeda dari yang ditentukan di theme.json, maka Gaya Global diutamakan. Anda dapat mempelajari semua tentang mengelola gaya tema blok di artikel terakhir saya.

• contentSize adalah lebar default untuk blok.
• wideSize menyediakan opsi tata letak "lebar" dan menetapkan kolom yang lebih luas agar blok dapat direntangkan.

Jadi, contoh kode terakhir itu akan memberi kita CSS berikut:

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] menunjukkan nomor unik yang dihasilkan secara otomatis oleh WordPress.

Tapi coba tebak apa lagi yang kita dapatkan? Penyelarasan penuh juga!

.wp-container-[id] .alignfull {
  max-width: none;
}

Lihat itu? Dengan mengaktifkan useRootPaddingAwareAlignments dan mendefinisikan contentSize dan wideSize, kami juga mendapatkan kelas CSS penyelarasan penuh untuk total tiga konfigurasi wadah untuk mengontrol lebar blok yang ditambahkan ke halaman dan posting.

Ini berlaku untuk blok khusus tata letak berikut: Kolom, Grup, Konten Posting, dan Putaran Kueri.

Kontrol tata letak blok

Katakanlah kita menambahkan salah satu dari blok khusus tata letak yang disebutkan di atas ke sebuah halaman. Saat kami memilih blok, UI pengaturan blok menawarkan pengaturan tata letak baru berdasarkan pada settings.layout nilai-nilai yang kita definisikan theme.json (atau UI Gaya Global).

Kita berurusan dengan blok yang sangat spesifik di sini — yang dapat memiliki blok lain yang bersarang di dalamnya. Jadi, pengaturan Tata Letak ini sebenarnya tentang mengontrol lebar dan perataan blok bersarang tersebut. Setelan "Blok dalam menggunakan lebar konten" diaktifkan secara default. Jika kita mematikannya, maka kita tidak punya max-width pada wadah dan balok-balok di dalamnya saling berhadapan.

Jika kita membiarkan sakelar aktif, maka blok bersarang akan mengikuti salah satunya contentWidth or wideWidth nilai-nilai (lebih lanjut tentang itu sebentar lagi). Atau kita dapat menggunakan input numerik untuk mendefinisikan custom contentWidth dan wideWidth nilai dalam contoh satu kali ini. Itu fleksibilitas yang luar biasa!

Blok lebar

Pengaturan yang baru saja kita lihat diatur pada blok induk. Setelah kami membuat blok di dalam dan memilihnya, kami memiliki opsi tambahan di blok itu untuk menggunakan contentWidth, wideWidth, atau lebar penuh.

Perhatikan bagaimana WordPress mengalikan properti kustom CSS padding level root dengan -1 untuk membuat margin negatif saat memilih opsi "Lebar penuh".

Menggunakan tata letak yang dibatasi

Kami baru saja membahas spasi dan penyelarasan baru yang kami dapatkan dengan WordPress 6.1. Itu khusus untuk blok dan blok bersarang apa pun di dalam blok. Tapi WordPress 6.1 juga memperkenalkan fitur tata letak baru untuk lebih banyak fleksibilitas dan konsistensi dalam template tema.

Contoh kasus: WordPress telah sepenuhnya merestrukturisasi tipe tata letak Flex dan Flow-nya dan memberi kami a dibatasi tata ruang tipe yang memudahkan untuk menyelaraskan tata letak blok dalam tema menggunakan pengaturan lebar konten di UI Gaya Global Editor Situs.

Tata letak Flex, Flow, dan Constrained

Perbedaan antara ketiga jenis tata letak ini adalah gaya yang dihasilkannya. Isabel Brison memiliki tulisan yang sangat bagus yang dengan baik menguraikan perbedaannya, tetapi mari kita memparafrasakannya di sini untuk referensi:

• Tata letak alur: Menambahkan jarak vertikal antara blok bersarang di margin-block arah. Blok bersarang itu juga bisa disejajarkan ke kiri, kanan, atau tengah.
• Tata letak yang dibatasi: Kesepakatan yang persis sama dengan tata letak Aliran, tetapi dengan batasan lebar pada blok bersarang yang didasarkan pada contentWidth dan wideWidth pengaturan (baik di theme.json atau Gaya Global).
• Tata letak fleksibel: Ini tidak berubah di WordPress 6.1. Ini menggunakan CSS Flexbox CSS untuk membuat tata letak yang mengalir secara horizontal (dalam satu baris) secara default, tetapi juga dapat mengalir secara vertikal sehingga blok menumpuk satu di atas yang lain. Spasi diterapkan menggunakan CSS gap milik.

Deretan jenis tata letak baru ini membuat nama kelas semantik untuk setiap tata letak:

Kelas tata letak semantik	Jenis tata letak	Blok yang didukung
.is-layout-flow	Tata letak aliran	Kolom, Grup, Konten Posting, dan Putaran Kueri.
.is-layout-constrained	Tata letak yang dibatasi	Kolom, Grup, Konten Posting, dan Putaran Kueri.
.is-layout-flex	Tata letak fleksibel	Kolom, Tombol, Ikon Sosial

Justin Tadlock memiliki banyak artikel tentang berbagai jenis tata letak dan kelas semantik, termasuk kasus penggunaan dan contoh.

Memperbarui tema Anda untuk mendukung tata letak terbatas

Jika Anda sudah menggunakan tema blok buatan Anda sendiri, Anda pasti menginginkannya perbarui untuk mendukung tata letak yang dibatasi. Yang diperlukan hanyalah menukar beberapa hal theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

Ini adalah tema blok yang baru dirilis yang telah mengaktifkan pengaturan spasi dengan useRootPaddingAwareAlignments dan memiliki pembaruan theme.json file yang mendefinisikan tata letak terbatas:

Menonaktifkan gaya tata letak

Gaya tata letak dasar adalah fitur default yang dikirimkan di WordPress 6.1 Core. Dengan kata lain, mereka diaktifkan langsung dari kotak. Tetapi kita dapat menonaktifkannya jika perlu dengan cuplikan kecil ini functions.php:

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

Peringatan besar di sini: nonaktifkan juga dukungan untuk jenis tata letak default menghapus semua gaya dasar untuk tata letak tersebut. Itu berarti Anda harus menggulung gaya Anda sendiri untuk penspasian, perataan, dan apa pun yang diperlukan untuk menampilkan konten dalam template berbeda dan konteks blok.

Membungkus

Sebagai penggemar berat gambar dengan lebar penuh, tata letak WordPress 6.1 yang baru dan fitur penyelarasan sadar padding adalah dua dari favorit saya. Diambil bersama dengan alat lain termasuk, kontrol margin dan padding yang lebih baik, tipografi cair, dan blok Daftar dan Kutipan yang diperbarui, antara lain, merupakan bukti kuat bahwa WordPress bergerak menuju pengalaman pembuatan konten yang lebih baik.

Sekarang, kita harus menunggu dan melihat bagaimana imajinasi dan kreativitas desainer biasa dan pembuat konten menggunakan alat luar biasa ini dan membawanya ke tingkat yang baru.

Karena iterasi pengembangan editor situs sedang berlangsung, kita harus selalu mengantisipasi jalan yang sulit di depan. Namun, sebagai orang yang optimis, saya sangat ingin melihat apa yang akan terjadi di versi WordPress 6.2 yang akan datang. Beberapa hal, yang saya awasi adalah hal-hal seperti fitur yang sedang dipertimbangkan untuk inklusi, dukungan untuk posisi lengket, nama kelas tata letak baru untuk pembungkus blok bagian dalam, opsi perataan footer yang diperbarui, dan menambahkan opsi tata letak terbatas dan aliran ke Blok penutup.

Kredensial mikro Masalah GitHub #44720 daftar diskusi terkait tata letak dijadwalkan untuk WordPress 6.2.

Sumber daya tambahan

Saya berkonsultasi dan mereferensikan banyak sumber sambil menggali semua ini. Berikut adalah daftar besar hal-hal yang menurut saya berguna dan menurut Anda mungkin akan Anda nikmati juga.

Tutorial

Postingan WordPress

GitHub menarik permintaan dan masalah