Penggayaan tersuai untuk blok WordPress Gutenberg: Bahagian 1

Ini adalah masa yang menarik untuk menjadi pembangun WordPress, dengan keluaran rasmi versi 5.0 tidak lama lagi. Ini akan menandakan kemunculan sulung editor baharu yang diberi nama kod Gutenberg. Jika anda berurusan dengan WordPress secara tetap, sama ada sebagai pembangun atau sebagai pengguna, maka anda mungkin faham mengapa ini berita besar.

Namun, tidak semua orang menantikan versi baharu kerana ia membawa pengalaman penyuntingan yang sangat berbeza kepada WordPress. Terdapat beberapa ketidakpastian tentang bagaimana ini akan memberi kesan kepada ekosistem WordPress yang lebih luas. Walau bagaimanapun, editor baharu berpotensi untuk merevolusikan cara anda mencipta kandungan untuk laman WordPress anda. Walaupun ia mungkin menghadapi rintangan awal dalam menarik pengguna secara keseluruhannya, saya fikir ia akhirnya boleh mewujudkan hubungan yang lebih ketara dengan kandungan anda dengan cara yang tidak dapat dilakukan oleh editor TinyMCE klasik

Anda boleh mencuba editor baharu sebelum keluaran WordPress 5.0 yang dirancang dengan memasang pemalam Gutenberg daripada repositori pemalam WordPress. Jika anda belum berpeluang mencubanya, saya amat mengesyorkan anda berbuat demikian untuk mendapatkan pratonton pengalaman penyuntingan masa hadapan anda dalam WordPress!

Mencipta kandungan dalam editor baharu adalah berdasarkan blok sepenuhnya. Setiap bahagian kandungan yang anda tambahkan pada editor adalah satu blok. Ini termasuk semua elemen kegemaran anda seperti peluncur, perenggan, butang, senarai, imej, testimoni dan banyak lagi. Selepas menambah blok pada editor, anda boleh mengkonfigurasi tetapan yang mengawal penampilan dan kelakuannya. Ini boleh diedit pada blok itu sendiri atau melalui panel Inspektor (terletak di sebelah kanan skrin editor). Tetapan blok kadangkala diulang di dua lokasi, tetapi ini berbeza dari satu blok ke satu blok.

Walau bagaimanapun, hampir semua blok menyediakan pilihan dalam panel pemeriksa untuk menambah satu atau lebih nama kelas CSS secara manual untuk membolehkan penyesuaian lanjut blok. Ini boleh berguna jika anda ingin mengatasi penggayaan blok teras atau blok pihak ketiga.

Walaupun ini berfungsi dengan baik, adalah berfaedah untuk melanjutkan tingkah laku ini dan membenarkan untuk menambah pilihan penyesuaian blok melalui satu set pilihan gaya yang telah ditetapkan. Itulah yang dibawa oleh perubahan gaya blok kepada kami, dan kami akan memberi tumpuan khusus padanya dalam tutorial ini.

Prasyarat

Kami juga akan melihat cara menambah variasi gaya blok pada blok anda sendiri dan cara memanjangkan blok sedia ada, jadi untuk meneruskan, anda idealnya perlu membiasakan diri dengan asas pembangunan pemalam WordPress dan cara membuat blok.

Namun, jangan panik – jika anda memerlukan kursus ranap, lihat tutorial empat bahagian saya tentang membuat blok tersuai. Ia merangkumi hampir semua perkara yang anda perlu tahu tentang tutorial ini - kecuali untuk perubahan gaya blok, yang menjadi tumpuan tutorial khusus ini!

Selain itu, jika anda ingin mengikuti kod dan mencubanya sendiri, anda memerlukan pelayan pembangunan setempat untuk menjalankan WordPress (cth. WAMP, MAMP, dll.) dan penyunting kod.

Latar Belakang

API Varian Gaya Blok telah diperkenalkan kepada Project Gutenberg dalam pemalam v3.2 dan membolehkan anda menggunakan gaya blok alternatif secara terus melalui antara muka editor.

Untuk mendapatkan hasil yang sama sebelum gaya blok berubah, anda perlu memasukkan kelas CSS tersuai secara manual dalam medan teks Kelas CSS Lain dalam panel Pemeriksa Blok, yang terletak di bahagian Lanjutan.

Jika anda berminat dengan cadangan asal untuk perubahan gaya blok, maka anda boleh membaca butiran penuh dalam permintaan tarik dalam repositori rasmi Gutenberg.

Sebarang variasi gaya yang ditentukan untuk blok boleh diakses terus dalam bar alat blok. Pilih blok dan klik ikon di penjuru kiri sebelah atas bar alat untuk memaparkan anak tetingkap Gaya Sekat.

Ingat dahulu apabila saya mengatakan bahawa tetapan blok tertentu dan kumpulan pemeriksaan boleh diakses terus dalam blok? Nah, itulah yang berlaku dengan perubahan gaya blok! Pastikan blok dipilih dan dilihat dalam panel Inspektor.

Ini adalah untuk kemudahan dan anda boleh memilih varian gaya dari mana-mana yang paling sesuai untuk anda. Sebagai contoh, pada skrin yang lebih besar, anda boleh memilih untuk menukar gaya blok melalui panel Inspektor, kerana ia membolehkan anda bertukar-tukar antara gaya dengan satu klik tetikus. Walau bagaimanapun, pada peranti yang lebih kecil anda mungkin ingin menyembunyikan panel pemeriksa dan hanya menukar gaya melalui bar alat blok.

Sokongan Blok Teras

Sesetengah blok teras kini menyokong variasi gaya blok, termasuk:

• Butang
• Petikan Tarik
• Petikan
• Pemisah
• Meja

Saya pasti sokongan untuk blok teras lain akan ditambah pada masa hadapan kerana ciri ini semakin meluas. Ia sangat fleksibel dan saya pasti ramai pengguna tidak sabar untuk memilih daripada pilihan penggayaan yang telah ditetapkan untuk kebanyakan blok. Sebaik sahaja anda menggunakan variasi gaya blok, mudah untuk melihat sebab ini berlaku.

Sudah tentu, anda juga boleh menambah variasi gaya blok pada blok anda sendiri. Seterusnya kita akan membincangkan butiran pelaksanaan khusus.

Laksanakan perubahan gaya blok

Terdapat dua cara untuk melaksanakan perubahan gaya blok tersuai. Jika anda mempunyai akses kepada definisi blok, anda boleh menentukan varian gaya blok terus dalam fungsi registerBlockType() melalui atribut gaya. registerBlockType() 函数内指定块样式变体。

例如，这就是按钮核心块样式属性定义的样子。

styles: [
	{ name: 'default', label: _x( 'Rounded', 'block style' ), isDefault: true },
	{ name: 'outline', label: __( 'Outline' ) },
	{ name: 'squared', label: _x( 'Squared', 'block style' ) },
],

在这里，注册了三个新的块样式变体。请注意，圆角样式也被设置为默认样式。

但是，如果您无法访问块源代码，那么您可以采取另一种方法。在 Gutenberg 3.4 中，添加了两个新函数来从块定义外部注册和取消注册块样式变体。

要注册自定义块样式变体，请使用 registerBlockStyle() 函数，如下所示：

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'custom-button-style',
    label: 'My Button Style'
} );

这会向核心按钮块添加一个名为 custom-button-style 的新块样式变体。现在，当将按钮块插入编辑器时，您将看到可用的新块样式变体。

一旦选择，块样式变体就会添加 is-style-custom-将 Button-style CSS 类添加到块检查器面板中的其他 CSS 类文本字段。

这反过来会触发块输出的更新，并且该类将添加到 HTML 标记中。

您可能想知道在自己的代码中添加 registerBlockStyle()

Sebagai contoh, inilah rupa definisi atribut gaya blok teras butang.

rrreee

Di sini, tiga varian gaya blok baharu didaftarkan. Ambil perhatian bahawa gaya

Sudut Bulat

juga ditetapkan sebagai gaya lalai.

Walau bagaimanapun, jika anda tidak mempunyai akses kepada kod sumber blok, maka anda boleh mengambil pendekatan lain. Dalam Gutenberg 3.4, dua fungsi baharu telah ditambah untuk mendaftar dan menyahdaftar varian gaya blok dari luar definisi blok.

Untuk mendaftarkan varian gaya blok tersuai, gunakan fungsi registerBlockStyle() seperti berikut:

rrreee Ini menambahkan varian gaya blok baharu yang dipanggil gaya butang tersuai pada blok butang teras. Sekarang, apabila memasukkan blok butang ke dalam editor, anda akan melihat variasi gaya blok baharu tersedia.

Setelah dipilih , varian gaya blok menambah kelas CSS is-style-custom-Button-style pada

kelas CSS yang lain

teks dalam medan panel pemeriksa blok.

Ini dalam giliran akan mencetuskan kemas kini keluaran blok dan kelas akan ditambahkan pada penanda HTML.

🎜🎜Anda boleh tertanya-tanya di mana untuk menambah fungsi registerBlockStyle() dalam kod anda sendiri. Jangan risau, kami akan membincangkan contoh penuh dalam artikel seterusnya dan anda akan dapat memuat turun kod pemalam terakhir supaya anda boleh mengujinya sendiri. 🎜 🎜Soalan kecil! 🎜 🎜Apabila anda mula-mula memasukkan blok yang menyokong varian gaya blok, perlu diperhatikan bahawa sehingga anda mengklik secara khusus pada varian gaya blok, sebenarnya tidak ada sebarang kelas CSS yang ditambahkan pada teg blok, walaupun salah satu daripadanya muncul sebagai Dipilih lalai. 🎜 🎜Cuba sendiri. 🎜 🎜Masukkan blok butang baharu anda ke dalam editor dan hidupkan pilihan variasi gaya blok. Anda seharusnya melihat pilihan 🎜Sudut Bulat🎜 dipilih secara lalai. Jika anda membuka bahagian 🎜Lanjutan🎜 dalam pemeriksa blok, kelas CSS belum ditambahkan pada medan teks. Oleh itu, kelas CSS tidak dimasukkan ke dalam tag blok. Lihat output HTML dari blok butang dalam editor untuk mengesahkan sendiri. 🎜 🎜Sekarang kembali ke tetapan Varian Gaya Blok blok Butang dan klik pada pilihan Lalai (Pilihan Terpilih) atau mana-mana pilihan Gaya Blok yang lain. Anda akan segera melihat bahawa kelas CSS telah ditambahkan pada medan teks 🎜Kelas CSS Lain🎜 dan tag pembalut blok. Selepas memilih varian gaya blok, sebarang peraturan CSS tersuai yang ditakrifkan untuk kelas tersuai juga akan digunakan serta-merta. 🎜 🎜Tingkah laku ini agak mengelirukan pada pertemuan pertama kerana secara intuitif anda menjangkakan kelas CSS akan ditambahkan secara automatik untuk varian gaya blok pilihan lalai. 🎜 🎜Kesimpulan🎜 🎜Kami telah mengetahui apakah varian gaya blok dan sebab ia merupakan tambahan yang berguna kepada pengalaman penyuntingan blok. Saya juga menunjukkan pelaksanaan asas varian gaya blok. 🎜 🎜Dalam artikel seterusnya, kami akan memperincikan cara mendaftar gaya blok anda sendiri dan menyambungkan CSS melalui pemalam serta tema kanak-kanak. 🎜 🎜Kami juga akan mempelajari cara menyahdaftarkan gaya blok dan cara menetapkan varian gaya yang dipilih secara lalai apabila blok pertama kali dimasukkan ke dalam editor. 🎜

Atas ialah kandungan terperinci Penggayaan tersuai untuk blok WordPress Gutenberg: Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!