Tetapi kerja ini belum selesai sepenuhnya! Jika kita melihat tema lalai dua puluh dua puluh (TT2), terdapat dua masalah utama yang belum diselesaikan: interaksi gaya (seperti: hover ,: aktif ,: fokus) dan margin dan padding bekas susun atur. Anda dapat melihat bagaimana isu -isu ini ditetapkan sementara dalam fail gaya.css TT2 dan bukannya menambahkannya ke fail tema.json.
WordPress 6.1 membetulkan isu -isu ini, dan saya ingin mengkhususkan diri di dalamnya. Sekarang kita mempunyai gaya JSON untuk susun atur susun atur dan padding, yang memberikan kita cara yang lebih fleksibel dan berkuasa untuk menentukan jarak dalam susun atur tema
. jenis jarak apa yang kita bicarakan?
, yang merupakan pernyataan mewah mengenai elemen mengisi. Ini hebat kerana ia memastikan jarak yang konsisten pada unsur -unsur yang dikongsi di semua halaman dan jawatan. Tetapi ada lebih banyak lagi, kerana sekarang kita mempunyai cara untuk mendapatkan blok untuk memintas padding itu dan menyelaraskannya dengan lebar penuh. Ini adalah terima kasih kepada penjajaran yang menyedari , ciri pilihan baru dalam tema.json. Jadi, walaupun anda mempunyai padding peringkat akar, anda masih boleh membenarkan, sebagai contoh, imej (atau beberapa blok lain) untuk memecahkan dan memaparkan lebar penuh. Ini mengingatkan kita tentang perkara lain:
susun atur yang dikekang. Idea di sini adalah bahawa mana -mana blok bersarang dalam susun atur mematuhi lebar kandungan susun atur (ini adalah tetapan global) dan tidak mengalir keluar dari lebar itu. Kita boleh menulis ganti blok tingkah laku ini dengan blok menggunakan penjajaran, tetapi kita akan membincangkannya kemudian. mari kita mulakan dengan ...
Tahap akar isi
Ini adalah tetapan global. Jadi jika kita membuka DevTools dan periksa unsur -unsur kita akan melihat gaya CSS ini:
<code>{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}</code>tidak buruk. Tetapi persoalannya ialah bagaimana untuk membolehkan blok tertentu memecahkan jarak itu untuk mengisi keseluruhan skrin, tepi ke tepi. Itulah sebabnya jarak wujud, bukan? Ia membantu menghalang ini daripada berlaku!
<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>masukkan ...
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.
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.
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.
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!
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.
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
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
Ini adalah tetapan jarak yang dikeluarkan baru -baru ini dengan userootpaddingAwareArsignments didayakan dan telah mengemas kini tema.json fail untuk menentukan susun atur yang terkawal:
<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
<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.
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.
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.
Atas ialah kandungan terperinci Menggunakan susun atur baru yang terkawal dalam tema blok WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bolehkah percikan api Douyin dinyalakan semula jika ia telah dimatikan selama lebih daripada tiga hari?
Sepuluh pertukaran mata wang digital teratas
css3transition
Apakah maksud wifi dinyahaktifkan?
Tiga kaedah pencetus pencetus sql
Penggunaan ModifyMenu
Bagaimana untuk mendapatkan Bitcoin
Apa yang perlu dilakukan jika memuatkan dll gagal
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
