mengisi penjajaran sedar

Pereka utama Kjell Reigstad menggambarkan aspek-aspek yang mencabar untuk memecahkan melalui peringkat akar mengisi soalan GitHub ini apabila cuba mencipta tema WordPress lalai pertama yang mentakrifkan semua gaya dalam fail tema.json.

Ciri -ciri baru dalam WordPress 6.1 direka untuk menyelesaikan masalah ini. Mari menggali perkara ini seterusnya.

userootpaddingawareAlignments

Harta UserootPaddingAwareAlignments baru telah diwujudkan untuk menyelesaikan masalah ini. Ia sebenarnya mula diperkenalkan di Gutenberg Plugin v13.8. Permintaan tarik asal memberikan pengenalan yang baik untuk bagaimana ia berfungsi.

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

Pertama sekali, ia adalah ciri yang mesti kita pilih. Harta ini ditetapkan kepada palsu secara lalai, dan kita mesti secara eksplisit menetapkannya kepada benar untuk membolehkannya. Juga ambil perhatian bahawa kami juga telah menetapkan penampilan semula menjadi benar. Ini membolehkan kami menggunakan kawalan UI di editor tapak untuk menetapkan sempadan gaya, warna pautan, tipografi, dan jarak (termasuk margin dan mengisi).

Tetapkan penampilanCetools untuk benar secara automatik membuat blok pilih margin dan padding tanpa tetapan tetapan.spacing.padding atau setpacing.margin menjadi benar.

Apabila kami mengaktifkan UserootPaddingAwareAlignments, kami akan mendapat atribut tersuai dengan nilai pengisian akar yang ditetapkan pada elemen front-end. Menariknya, ia juga menggunakan padding ke kelas .ditor-Styles-Wrapper untuk menunjukkan jarak ketika bekerja di editor blok backend. Terlalu sejuk! Saya dapat mengesahkan sifat adat CSS ini di DevTools semasa menggali sekitar.

Dayakan UserootPaddingAwareAlignments juga memohon kiri dan kanan mengisi ke mana -mana blok yang menyokong nilai lebar "kandungan" dan "lebar" lebar dalam imej gaya global di atas. Kita juga boleh menentukan nilai -nilai ini dalam tema.json:

<code>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;
}</code>

Jika tetapan gaya global berbeza daripada yang ditakrifkan dalam tema.json, gaya global lebih penting. Anda boleh mempelajari semua tentang menguruskan gaya tema blok dalam jawatan terdahulu saya.

• Kandungan adalah lebar lalai blok.
• Widesize menyediakan pilihan susun atur "lebar" dan mencipta lajur yang lebih luas untuk peregangan blok.

jadi contoh kod terakhir akan memberi kita CSS berikut:

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

[id] mewakili nombor unik yang dihasilkan secara automatik oleh WordPress.

Tetapi rasa apa lagi yang kita dapat? Sepenuhnya diselaraskan!

<code>{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}</code>

adakah anda melihatnya? Dengan membolehkan userootpaddingawareAlignments dan mendefinisikan kandungan dan luas, kami juga mendapat kelas CSS yang diselaraskan sepenuhnya untuk tiga konfigurasi kontena yang mengawal lebar blok yang ditambahkan ke halaman dan artikel.

Ini terpakai kepada blok khusus susun atur berikut: lajur, kumpulan, kandungan artikel, dan gelung pertanyaan.

Kawalan susun atur blok

Katakan kami menambah mana-mana blok khusus susun atur di atas ke halaman. Apabila kami memilih blok, UI Tetapan Blok akan menyediakan tetapan susun atur baru berdasarkan tetapan. Nilai Layout Kami Tentukan dalam Tema.JSON (atau Global Style UI). Tetapan lebar kandungan penggunaan blok dalaman diaktifkan secara lalai. Jika kita menutupnya, bekas itu tidak mempunyai lebar maksimum dan blok di dalamnya akan dipaparkan di tepi ke tepi.

Jika kita menyimpan togol, blok bersarang akan mematuhi nilai ContentWidth atau widewidth (lebih lanjut mengenai ini kemudian). Sebagai alternatif, kita boleh menggunakan input numerik untuk menentukan nilai contentwidth dan widewidth tersuai dalam contoh satu kali ini. Ini adalah fleksibiliti yang hebat!

Blok lebar

Tetapan yang kami lihat telah ditetapkan pada blok induk. Sebaik sahaja kami bersarang di dalam dan pilih, kami boleh menggunakan pilihan tambahan dalam blok itu untuk paparan ContentWidth, widewidth, atau lebar penuh.

Perhatikan bagaimana WordPress mendarabkan atribut adat CSS yang dihuni tahap akar oleh -1 untuk membuat margin negatif apabila pilihan lebar penuh dipilih.

menggunakan susun atur yang terkawal

kami hanya memperkenalkan jarak dan penjajaran baru yang dibawa oleh WordPress 6.1. Ini adalah khusus untuk blok dan mana -mana blok bersarang dalam blok. Tetapi WordPress 6.1 juga memperkenalkan ciri susun atur baru untuk mendapatkan fleksibiliti dan konsistensi yang lebih besar dalam templat tema.

Contoh: WordPress benar -benar refactors jenis susun atur flex dan alirannya dan memberikan kami jenis susun atur yang dikekang, yang menjadikannya lebih mudah untuk menyelaraskan susun atur blok dalam tema menggunakan tetapan lebar kandungan di UI gaya global editor tapak. flex, aliran dan susun atur yang dikekang

Perbezaan antara ketiga -tiga jenis susun atur ini adalah gaya yang mereka keluaran. Isabel Brison mempunyai artikel yang sangat baik yang menggariskan perbezaan ini dengan baik, tetapi mari kita menafsirkannya di sini untuk rujukan:

susun atur aliran:
• Tambah jarak menegak antara blok bersarang di arah margin-blok. Blok bersarang ini juga boleh diselaraskan, sejajar, atau selaras.
susun atur yang dikekang:
• sama persis dengan susun atur aliran, tetapi kekangan lebar pada blok bersarang adalah berdasarkan tetapan ContentWidth dan widewidth (dalam tema.json atau gaya global).
susun atur flex:
• Ini tidak berubah dalam WordPress 6.1. Ia menggunakan CSS Flexbox untuk membuat susun atur dengan aliran mendatar lalai (satu baris), tetapi juga boleh mengalir secara menegak, jadi blok disusun satu demi satu. Gunakan harta CSS GAP untuk memohon jarak.
Jenis susun atur baru ini mencipta nama kelas semantik untuk setiap susun atur:

Justin Tadlock menyediakan pengenalan yang luas kepada jenis susun atur yang berbeza dan kelas semantik, termasuk kes penggunaan dan contoh.

Kemas kini tema anda untuk menyokong susun atur yang terkawal

Jika anda sudah menggunakan tema blok yang anda buat sendiri, anda perlu mengemas kini untuk menyokong susun atur yang terkawal. Hanya ada beberapa perkara untuk bertukar dalam tema.json:

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

Lumpuhkan gaya susun atur

Gaya susun atur asas adalah ciri lalai dalam teras WordPress 6.1. Dalam erti kata lain, mereka bekerja di luar kotak. Walau bagaimanapun, jika kita memerlukannya, kita boleh melumpuhkannya menggunakan kod kecil ini dalam fungsi.php:

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

Berikut adalah amaran penting: Melumpuhkan sokongan untuk jenis susun atur lalai juga akan menghapuskan semua gaya asas susun atur ini. Ini bermakna anda perlu gaya gaya anda sendiri untuk jarak, penjajaran, dan apa sahaja yang anda perlukan untuk memaparkan kandungan dalam templat yang berbeza dan konteks blok.

Ringkasan

Sebagai penggemar besar imej lebar penuh, ciri-ciri baru termasuk susun atur WordPress 6.1 dan penjajaran mengisi adalah dua ciri kegemaran saya. Bekerja dengan alat lain, termasuk margin yang lebih baik dan kawalan isi, tipografi lancar, dan penyenaraian yang dikemas kini dan blok rujukan, adalah bukti pengalaman penciptaan kandungan yang lebih baik.

Sekarang kita perlu menunggu dan melihat bagaimana pereka purata dan pencipta kandungan boleh menggunakan alat -alat yang luar biasa ini dan membawa mereka ke peringkat seterusnya.

Oleh kerana lelaran pembangunan editor tapak sedang dijalankan, kita harus sentiasa menjangkakan kesukaran jalan ke depan. Walau bagaimanapun, sebagai optimis, saya ingin melihat apa yang berlaku dalam versi seterusnya WordPress 6.2. Beberapa perkara yang saya perhatikan untuk memasukkan ciri -ciri yang sedang dipertimbangkan, sokongan untuk kedudukan melekit, nama kelas susun atur baru untuk pembungkus blok dalaman, pilihan penjajaran footer yang dikemas kini, dan menambah pilihan susun atur yang terkawal dan aliran ke blok penutup.

Isu GitHub ini #44720 menyenaraikan perbincangan yang berkaitan dengan susun atur yang dirancang untuk WordPress 6.2.

Sumber tambahan

Saya berunding dan merujuk kepada banyak sumber sambil menyelidiki semua ini. Berikut adalah senarai besar dari apa yang saya dapati membantu dan saya fikir anda mungkin juga suka.

tutorial

• Gaya Layout (Gaya | Sumber Pemaju)
• Tema.JSON Layout and Spacing Options (penyuntingan di seluruh tapak)
• mengisi penjajaran sedar (penyuntingan seluruh tapak)
• susun atur dan penjajaran yang luas di WordPress: perubahan masa lalu, sekarang, dan akan datang (Gutenberg Times)
• Gutenberg Times untuk Kelas Susun atur di WordPress 6.1

artikel WordPress

• Sokongan susun atur editor dikemas kini selepas 6.1 refactoring (mencipta teras WordPress)
• Gerakkan gaya blok teras ke JSON (buat teras WordPress)

permintaan dan soalan tarik github

• CSS teras menyokong blok pengisian akar dan menyelaraskan (GitHub PR 42085)
• susun atur: Betulkan nama kelas Global-Padding untuk susun atur yang dikekang tanpa Kontentsize (GitHub PR #43689)
• Layout: Gunakan nama kelas semantik, memusatkan definisi susun atur, mengurangkan duplikasi, dan menetapkan blockgap dalam tema.json (GitHub PR 40875)
• Penjejakan: Pilihan susun atur lain, alat reka bentuk, dan penambahbaikan (isu GitHub 44720)