Kursus Singkat di Filter Blok WordPress

Blok di WordPress sangat bagus. Jatuhkan beberapa ke halaman, atur sesuka Anda, dan Anda mendapatkan halaman arahan yang cukup manis dengan sedikit usaha. Tetapi bagaimana jika blok default di WordPress perlu sedikit penyesuaian? Seperti, bagaimana jika kita bisa menghapus opsi perataan di pengaturan blok Cover? Atau bagaimana dengan ukuran kontrol untuk blok Tombol?

Ada banyak opsi untuk memperluas fungsionalitas blok inti di WordPress. Kita dapat menambahkan kelas CSS khusus ke blok di editor, menambahkan gaya khusus, atau membuat variasi blok . Tetapi bahkan itu mungkin tidak cukup untuk mendapatkan apa yang Anda butuhkan, dan Anda merasa perlu memfilter blok inti untuk menambah atau menghapus fitur, atau membangun blok yang sama sekali baru dari awal.

Saya akan menunjukkan cara memperluas blok inti dengan filter dan juga menyentuh saat yang terbaik untuk membangun blok khusus daripada memperluas satu inti.

Catatan singkat tentang contoh-contoh ini

Sebelum kita masuk, saya ingin mencatat bahwa cuplikan kode dalam artikel ini diambil di luar konteks dengan tujuan untuk fokus pada filter daripada membangun alat dan struktur file. Jika saya menyertakan kode lengkap untuk filter, artikelnya akan sulit untuk diikuti. Dengan itu, saya mengerti bahwa itu tidak jelas bagi seseorang yang baru memulai di mana meletakkan cuplikan atau cara menjalankan skrip build dan membuat semuanya berfungsi.

Untuk mempermudah Anda, saya membuat plugin WordPress dengan contoh dari artikel ini tersedia di GitHub saya. Jangan ragu untuk mengunduhnya dan menjelajahi struktur file, dependensi, dan skrip build. Ada README yang akan membantu Anda memulai.

Blokir filter secara singkat

Konsep filter bukanlah hal baru di WordPress. Sebagian besar dari kita akrab dengan fungsi add_filter() di PHP. Hal ini memungkinkan pengembang untuk memodifikasi berbagai jenis data menggunakan kait .

Contoh sederhana dari filter PHP dapat terlihat seperti ini:

 function filter_post_title( $title ){ return '<strong>' . $title . '</strong>'; }; add_filter( 'the_title', 'filter_post_title' );

Dalam cuplikan ini, kami membuat fungsi yang menerima string yang mewakili judul postingan, lalu membungkusnya dengan <strong> dan mengembalikan judul yang dimodifikasi. Kami kemudian menggunakan add_filter() untuk memberi tahu WordPress agar menggunakan fungsi itu pada judul posting.

Filter JavaScript bekerja dengan cara yang sama. Ada fungsi JavaScript yang disebut addFilter() yang hidup dalam wp.hooks dan bekerja hampir seperti saudara PHP-nya. Dalam bentuknya yang paling sederhana, filter JavaScript terlihat seperti ini:

 function filterSomething(something) { // Code for modifying something goes here. return something; } wp.hooks.addFilter( 'hookName', 'namespace', filterSomething );

Terlihat sangat mirip, bukan? Satu perbedaan penting adalah addFilter() memiliki namespace sebagai argumen kedua. Sesuai dengan Buku Pegangan WordPress , “Namespace secara unik mengidentifikasi panggilan balik dalam bentuk vendor/plugin/function .” Namun, contoh dalam buku pegangan mengikuti pola yang berbeda: plugin/what-filter-does atau plugin/component-name/what-filter-does . Saya biasanya mengikuti yang terakhir karena itu membuat pegangannya unik di seluruh proyek.

Apa yang membuat filter JavaScript sulit untuk dipahami dan digunakan adalah sifat yang berbeda dari apa yang dapat mereka filter. Beberapa string filter, beberapa objek JavaScript filter, dan lainnya memfilter komponen React dan memerlukan pemahaman konsep Komponen Tingkat Tinggi .

Selain itu, kemungkinan besar Anda harus menggunakan JSX yang berarti Anda tidak bisa begitu saja memasukkan kode ke dalam tema atau plugin Anda dan mengharapkannya berfungsi. Anda perlu mengubahnya menjadi vanilla JavaScript yang dimengerti oleh browser. Semua itu bisa menakutkan pada awalnya, terutama jika Anda berasal dari latar belakang PHP dan memiliki pengetahuan terbatas tentang ES6, JSX, dan React.

Tapi jangan takut! Kami memiliki dua contoh yang mencakup dasar-dasar filter blok untuk membantu Anda memahami ide dan merasa nyaman bekerja dengan filter JavaScript di WordPress. Sebagai pengingat, jika menulis kode untuk Editor Blok ini baru bagi Anda, jelajahi plugin dengan contoh dari artikel ini.

Tanpa basa-basi lagi, mari kita lihat contoh pertama.

Menghapus opsi penyelarasan blok Cover

Kami akan memfilter blok Cover inti dan menghapus opsi perataan Left , Center , Right , dan Wide dari pengaturan bloknya. Ini mungkin berguna pada proyek di mana blok Sampul hanya digunakan sebagai pahlawan halaman, atau semacam spanduk dan tidak perlu disejajarkan kiri atau kanan.

Kami akan menggunakan filter blocks.registerBlockType Ia menerima pengaturan blok dan namanya dan harus mengembalikan objek pengaturan yang difilter. Pengaturan pemfilteran memungkinkan kami memperbarui supports yang berisi larik perataan yang tersedia. Mari kita lakukan langkah demi langkah.

Kami akan mulai dengan menambahkan filter yang hanya mencatat pengaturan dan nama blok ke konsol, untuk melihat apa yang sedang kami kerjakan:

 const { addFilter } = wp.hooks; function filterCoverBlockAlignments(settings, name) { console.log({ settings, name }); return settings; } addFilter( 'blocks.registerBlockType', 'intro-to-filters/cover-block/alignment-settings', filterCoverBlockAlignments, );

Mari kita hancurkan. Baris pertama adalah destruksi dasar dari objek wp.hooks Ini memungkinkan kita untuk menulis addFilter() di sisa file, alih-alih wp.hooks.addFilter() . Ini mungkin tampak berlebihan dalam kasus ini, tetapi berguna saat menggunakan beberapa filter dalam file yang sama (seperti yang akan kita bahas dalam contoh berikutnya).

Selanjutnya, kita mendefinisikan fungsi filterCoverBlockAlignments() yang melakukan pemfilteran. Untuk saat ini, itu hanya mencatat objek pengaturan dan nama blok ke konsol dan mengembalikan pengaturan apa adanya.

Semua fungsi filter menerima data, dan harus mengembalikan data yang difilter. Jika tidak, editor akan rusak.

Dan, terakhir, kami memulai filter dengan fungsi addFilter() Kami menyediakannya dengan nama hook yang akan kami gunakan, namespace filter, dan fungsi yang melakukan penyaringan.

Jika kita telah melakukan semuanya dengan benar, kita akan melihat banyak pesan di konsol. Tetapi perhatikan bahwa tidak semuanya mengacu pada blok Cover.

Ini benar karena filter diterapkan ke semua blok daripada yang spesifik yang kita inginkan. Untuk memperbaikinya, kita perlu memastikan bahwa kita menerapkan filter hanya ke blok core/cover

 function filterCoverBlockAlignments(settings, name) { if (name === 'core/cover') { console.log({ settings, name }); } return settings; }

Dengan itu, kita akan melihat sesuatu seperti ini sekarang di konsol:

Jangan khawatir jika Anda melihat lebih banyak pernyataan log daripada blok Sampul di halaman. Saya masih harus mencari tahu mengapa itu terjadi. Jika Anda tahu alasannya, silakan bagikan di komentar!

Dan inilah bagian yang menyenangkan: penyaringan yang sebenarnya. Jika Anda telah membuat blok dari awal sebelumnya, maka Anda tahu bahwa opsi penyelarasan ditentukan dengan Supports API . Biarkan saya dengan cepat mengingatkan Anda cara kerjanya — kita dapat menyetelnya ke true untuk mengizinkan semua perataan, seperti ini:

 supports: { align: true }

…atau menyediakan array keberpihakan untuk mendukung. Cuplikan di bawah ini melakukan hal yang sama, seperti yang di atas:

 supports: { align: [ 'left', 'right', 'center', 'wide', 'full' ] }

Sekarang mari kita lihat lebih dekat settings dari salah satu pesan konsol yang kita miliki dan lihat apa yang kita hadapi:

Yang perlu kita lakukan adalah mengganti align: true dengan align: ['full'] di dalam properti supports Inilah cara kita dapat melakukannya:

 function filterCoverBlockAlignments(settings, name) { if (name === 'core/cover') { return assign({}, settings, { supports: merge(settings.supports, { align: ['full'], }), }); } return settings; }

Saya ingin berhenti sejenak di sini untuk menarik perhatian Anda ke metode assign dan merge lodash. Kami menggunakannya untuk membuat dan mengembalikan objek baru dan memastikan bahwa settings asli tetap utuh. Filter masih akan berfungsi jika kita melakukan sesuatu seperti ini:

 /* 👎 WRONG APPROACH! DO NOT COPY & PASTE! */ settings.supports.align = ['full']; return settings;

…tapi itu adalah mutasi objek, yang dianggap sebagai praktik buruk dan harus dihindari kecuali Anda tahu apa yang Anda lakukan. Zell Liew membahas mengapa mutasi bisa menakutkan di A List Apart.

Kembali ke contoh kita, seharusnya sekarang hanya ada satu opsi perataan di bilah alat blok:

Saya menghapus opsi perataan "tengah" karena bilah alat perataan memungkinkan Anda untuk mengaktifkan perataan "aktif" dan "nonaktif". Ini berarti bahwa blok Penutup sekarang memiliki status default dan "Lebar penuh".

Dan inilah cuplikan lengkapnya:

 const { addFilter } = wp.hooks; const { assign, merge } = lodash; function filterCoverBlockAlignments(settings, name) { if (name === 'core/cover') { return assign({}, settings, { supports: merge(settings.supports, { align: ['full'], }), }); } return settings; } addFilter( 'blocks.registerBlockType', 'intro-to-filters/cover-block/alignment-settings', filterCoverBlockAlignments, );

Ini tidak sulit sama sekali, kan? Anda sekarang dilengkapi dengan pemahaman dasar tentang cara kerja filter dengan blok. Mari kita tingkatkan dan lihat contoh yang sedikit lebih maju.

Menambahkan kontrol ukuran ke blok Tombol

Sekarang mari tambahkan kontrol ukuran ke blok Tombol inti. Ini akan menjadi sedikit lebih maju karena kita perlu membuat beberapa filter bekerja sama. Rencananya adalah menambahkan kontrol yang memungkinkan pengguna memilih dari tiga ukuran tombol: Kecil, Biasa, dan Besar .

Tujuannya adalah untuk mengaktifkan dan menjalankan bagian "Pengaturan ukuran" yang baru.

Ini mungkin tampak rumit, tetapi setelah kami menguraikannya, Anda akan melihat bahwa itu sebenarnya cukup mudah.

1. Tambahkan atribut ukuran ke blok Tombol

Hal pertama yang perlu kita lakukan adalah menambahkan atribut tambahan yang menyimpan ukuran tombol. Kami akan menggunakan blocks.registerBlockType sudah dikenal dari contoh sebelumnya:

 /** * Add Size attribute to Button block * * @param {Object} settings Original block settings * @param {string} name Block name * @return {Object} Filtered block settings */ function addAttributes(settings, name) { if (name === 'core/button') { return assign({}, settings, { attributes: merge(settings.attributes, { size: { type: 'string', default: '', }, }), }); } return settings; } addFilter( 'blocks.registerBlockType', 'intro-to-filters/button-block/add-attributes', addAttributes, );

Perbedaan antara apa yang kita lakukan di sini versus apa yang kita lakukan sebelumnya adalah bahwa kita memfilter attributes daripada objek supports Cuplikan ini saja tidak banyak membantu dan Anda tidak akan melihat perbedaan apa pun di editor, tetapi memiliki atribut untuk ukuran sangat penting agar semuanya berfungsi.

2. Tambahkan kontrol ukuran ke blok Tombol

Kami sedang bekerja dengan filter baru, editor.BlockEdit . Ini memungkinkan kita untuk memodifikasi panel Kontrol Inspektur (yaitu panel pengaturan di sebelah kanan editor Blok).

 /** * Add Size control to Button block */ const addInspectorControl = createHigherOrderComponent((BlockEdit) => { return (props) => { const { attributes: { size }, setAttributes, name, } = props; if (name !== 'core/button') { return <BlockEdit {...props} />; } return ( <Fragment> <BlockEdit {...props} /> <InspectorControls> <PanelBody title={__('Size settings', 'intro-to-filters')} initialOpen={false} > <SelectControl label={__('Size', 'intro-to-filters')} value={size} options={[ { label: __('Regular', 'intro-to-filters'), value: 'regular', }, { label: __('Small', 'intro-to-filters'), value: 'small' }, { label: __('Large', 'intro-to-filters'), value: 'large' }, ]} onChange={(value) => { setAttributes({ size: value }); }} /> </PanelBody> </InspectorControls> </Fragment> ); }; }, 'withInspectorControl'); addFilter( 'editor.BlockEdit', 'intro-to-filters/button-block/add-inspector-controls', addInspectorControl, );

Ini mungkin terlihat seperti banyak, tetapi kami akan memecahnya dan melihat seberapa mudahnya sebenarnya.

Hal pertama yang mungkin Anda perhatikan adalah konstruksi createHigherOrderComponent Tidak seperti filter lain dalam contoh ini, editor.BlockEdit menerima komponen dan harus mengembalikan komponen . Itu sebabnya kita perlu menggunakan pola Komponen Orde Tinggi yang diturunkan dari React.

Dalam bentuknya yang paling murni, filter untuk menambahkan kontrol terlihat seperti ini:

 const addInspectorControl = createHigherOrderComponent((BlockEdit) => { return (props) => { // Logic happens here. return <BlockEdit {...props} />; }; }, 'withInspectorControl');

Ini tidak akan melakukan apa pun selain memungkinkan Anda untuk memeriksa komponen <BlockEdit /> props -nya di konsol. Semoga konstruksinya sendiri masuk akal sekarang, dan kita dapat terus membongkar filternya.

Bagian selanjutnya adalah merusak alat peraga:

 const { attributes: { size }, setAttributes, name, } = props;

Hal ini dilakukan agar kita dapat menggunakan name , setAttributes , dan size dalam lingkup filter, di mana:

  • size adalah atribut dari blok yang telah kita tambahkan pada langkah 1.
  • setAttributes adalah fungsi yang memungkinkan kita memperbarui nilai atribut blok.
  • name adalah nama blok. yang merupakan core/button dalam kasus kami.

Selanjutnya, kami menghindari menambahkan kontrol ke blok lain secara tidak sengaja:

 if (name !== 'core/button') { return <BlockEdit {...props} />; }

Dan jika kita berhadapan dengan blok Button, kami membungkus panel pengaturan dalam <Fragment /> (komponen yang membuat anak-anak tanpa elemen pembungkus) dan menambahkan kontrol tambahan untuk memilih ukuran tombol:

 return ( <Fragment> <BlockEdit {...props} /> {/* Additional controls go here */} </Fragment> );

Akhirnya, kontrol tambahan dibuat seperti ini:

 <InspectorControls> <PanelBody title={__('Size settings', 'intro-to-filters')} initialOpen={false}> <SelectControl label={__('Size', 'intro-to-filters')} value={size} options={[ { label: __('Regular', 'intro-to-filters'), value: 'regular' }, { label: __('Small', 'intro-to-filters'), value: 'small' }, { label: __('Large', 'intro-to-filters'), value: 'large' }, ]} onChange={(value) => { setAttributes({ size: value }); }} /> </PanelBody> </InspectorControls>

Sekali lagi, jika Anda pernah membuat blok sebelumnya, Anda mungkin sudah familiar dengan bagian ini. Jika tidak, saya mendorong Anda untuk mempelajari perpustakaan komponen yang disertakan dengan WordPress.

Pada titik ini kita akan melihat bagian tambahan di kontrol inspektur untuk setiap blok Tombol:

Kami juga dapat menyimpan ukurannya, tetapi itu tidak akan terlihat di editor atau di bagian depan. Mari kita perbaiki itu.

3. Tambahkan kelas ukuran ke blok di editor

Seperti judulnya, rencana untuk langkah ini adalah menambahkan kelas CSS ke blok Button sehingga ukuran yang dipilih tercermin di editor itu sendiri.

Kami akan menggunakan filter editor.BlockListBlock Ini mirip dengan editor.BlockEdit dalam arti menerima komponen dan harus mengembalikan komponen; tetapi alih-alih memfilter panel pemeriksa blok, jika memfilter komponen blok yang ditampilkan di editor.

 import classnames from 'classnames'; const { addFilter } = wp.hooks; const { createHigherOrderComponent } = wp.compose; /** * Add size class to the block in the editor */ const addSizeClass = createHigherOrderComponent((BlockListBlock) => { return (props) => { const { attributes: { size }, className, name, } = props; if (name !== 'core/button') { return <BlockListBlock {...props} />; } return ( <BlockListBlock {...props} className={classnames(className, size ? `has-size-${size}` : '')} /> ); }; }, 'withClientIdClassName'); addFilter( 'editor.BlockListBlock', 'intro-to-filters/button-block/add-editor-class', addSizeClass );

Anda mungkin telah memperhatikan struktur serupa:

  1. Kami mengekstrak size , className , dan variabel name props .
  2. Selanjutnya, kami memeriksa apakah kami bekerja dengan core/button , dan mengembalikan <BlockListBlock> yang tidak dimodifikasi jika tidak.
  3. Kemudian kami menambahkan kelas ke blok berdasarkan ukuran tombol yang dipilih.

Saya ingin berhenti sejenak pada baris ini karena mungkin terlihat membingungkan dari pandangan pertama:

 className={classnames(className, size ? `has-size-${size}` : '')}

Saya menggunakan utilitas classnames di sini, dan itu bukan persyaratan — saya hanya merasa menggunakannya sedikit lebih bersih daripada melakukan penggabungan manual. Ini mencegah saya dari khawatir lupa menambahkan spasi di depan kelas, atau berurusan dengan spasi ganda.

4. Tambahkan kelas ukuran ke blok di ujung depan

Semua yang telah kami lakukan hingga saat ini terkait dengan tampilan Editor Blok, yang seperti pratinjau dari apa yang mungkin kami harapkan di ujung depan. Jika kita mengubah ukuran tombol, simpan posting dan periksa markup tombol di ujung depan, perhatikan bahwa kelas tombol tidak diterapkan ke blok.

Untuk memperbaikinya, kita perlu memastikan bahwa kita benar-benar menyimpan perubahan dan menambahkan kelas ke blok di ujung depan. Kami melakukannya dengan blocks.getSaveContent.extraProps , yang menghubungkan ke fungsi save() blok dan memungkinkan kami untuk memodifikasi properti yang disimpan. Filter ini menerima props blok, jenis blok, dan atribut blok, dan harus mengembalikan props blok yang dimodifikasi.

 import classnames from 'classnames'; const { assign } = lodash; const { addFilter } = wp.hooks; /** * Add size class to the block on the front end * * @param {Object} props Additional props applied to save element. * @param {Object} block Block type. * @param {Object} attributes Current block attributes. * @return {Object} Filtered props applied to save element. */ function addSizeClassFrontEnd(props, block, attributes) { if (block.name !== 'core/button') { return props; } const { className } = props; const { size } = attributes; return assign({}, props, { className: classnames(className, size ? `has-size-${size}` : ''), }); } addFilter( 'blocks.getSaveContent.extraProps', 'intro-to-filters/button-block/add-front-end-class', addSizeClassFrontEnd, );

Dalam cuplikan di atas kami melakukan tiga hal:

  1. Periksa apakah kami bekerja dengan core/button dan lakukan pengembalian cepat jika tidak.
  2. Ekstrak variabel className dan size props dan attributes objek masing-masing.
  3. Buat objek props className diperbarui yang menyertakan kelas ukuran jika perlu.

Inilah yang seharusnya kita lihat di markup, lengkap dengan kelas ukuran kita:

 <div class="wp-block-button has-size-large"> <a class="wp-block-button__link" href="#">Click Me</a> </div>

5. Tambahkan CSS untuk ukuran tombol khusus

Satu hal kecil lagi sebelum kita selesai! Idenya adalah untuk memastikan bahwa tombol besar dan kecil memiliki gaya CSS yang sesuai.

Berikut adalah gaya yang saya buat:

 .wp-block-button.has-size-large .wp-block-button__link { padding: 1.5rem 3rem; } .wp-block-button.has-size-small .wp-block-button__link { padding: 0.25rem 1rem; }

Jika Anda sedang membangun tema khusus, Anda dapat menyertakan gaya front-end ini di lembar gaya tema. Saya membuat plugin untuk tema Twenty Twenty One default, jadi, dalam kasus saya, saya harus membuat stylesheet terpisah dan memasukkannya menggunakan wp_enqueue_style() . Anda bisa dengan mudah bekerja secara langsung di functions.php jika itu tempat Anda mengelola fungsi.

 function frontend_assets() { wp_enqueue_style( 'intro-to-block-filters-frontend-style', plugin_dir_url( __FILE__ ) . 'assets/frontend.css', [], '0.1.0' ); } add_action( 'wp_enqueue_scripts', 'frontend_assets' );

Mirip dengan ujung depan, kita perlu memastikan bahwa tombol ditata dengan benar di editor. Kami dapat menyertakan gaya yang sama menggunakan tindakan enqueue_block_editor_assets

 function editor_assets() { wp_enqueue_style( 'intro-to-block-filters-editor-style', plugin_dir_url( __FILE__ ) . 'assets/editor.css', [], '0.1.0' ); } add_action( 'enqueue_block_editor_assets', 'editor_assets' );

Kita sekarang harus memiliki gaya untuk tombol besar dan kecil di ujung depan dan di editor!

Seperti yang saya sebutkan sebelumnya, contoh-contoh ini tersedia sebagai plugin WordPress yang saya buat hanya untuk artikel ini. Jadi, jika Anda ingin melihat bagaimana semua bagian ini bekerja bersama, unduh di GitHub dan retas. Dan jika ada yang kurang jelas, silahkan bertanya di komentar.

Gunakan filter atau buat blok baru?

Ini adalah pertanyaan yang sulit untuk dijawab tanpa mengetahui konteksnya. Tapi ada satu tip yang bisa saya tawarkan.

Pernahkah Anda melihat kesalahan seperti ini?

Biasanya terjadi ketika markup blok pada halaman berbeda dari markup yang dihasilkan oleh fungsi save() blok. Apa yang saya maksud adalah sangat mudah untuk memicu kesalahan ini ketika bermain-main dengan markup blok dengan filter.

Jadi, jika Anda perlu mengubah markup blok secara signifikan selain menambahkan kelas, saya akan mempertimbangkan untuk menulis blok khusus daripada memfilter yang sudah ada. Yaitu, kecuali Anda baik-baik saja dengan menjaga agar markup tetap konsisten untuk editor dan hanya mengubah markup front-end. Dalam hal ini, Anda dapat menggunakan filter PHP.

Ngomong-ngomong soal…

Kiat bonus: render_block()

Artikel ini tidak akan lengkap tanpa menyebutkan hook render_block Ini memfilter markup blok sebelum dirender. Ini berguna ketika Anda perlu memperbarui markup blok selain menambahkan kelas baru.

Keuntungan besar dari pendekatan ini adalah tidak akan menyebabkan kesalahan validasi di editor. Yang mengatakan, kelemahannya adalah hanya berfungsi di ujung depan. Jika saya ingin menulis ulang contoh ukuran tombol menggunakan pendekatan ini, pertama-tama saya harus menghapus kode yang kami tulis di langkah keempat, dan menambahkan ini:

 /** * Add button size class. * * @param string $block_content Block content to be rendered. * @param array $block Block attributes. * @return string */ function add_button_size_class( $block_content = '', $block = [] ) { if ( isset( $block['blockName'] ) && 'core/button' === $block['blockName'] ) { $defaults = ['size' => 'regular']; $args = wp_parse_args( $block['attrs'], $defaults ); $html = str_replace( '<div class="wp-block-button', '<div class="wp-block-button has-size-' . esc_attr( $args['size']) . ' ', $block_content ); return $html; } return $block_content; } add_filter( 'render_block', 'add_button_size_class', 10, 2 );

Ini bukan pendekatan terbersih karena kami menyuntikkan kelas CSS menggunakan str_replace() — tetapi terkadang itu satu-satunya pilihan. Contoh klasik mungkin bekerja dengan blok pihak ketiga di mana kita perlu menambahkan <div> dengan kelas di sekitarnya untuk penataan.

Membungkus

Filter blok WordPress sangat kuat. Saya suka bagaimana ini memungkinkan Anda untuk menonaktifkan banyak opsi blok yang tidak digunakan, seperti yang kami lakukan dengan blok Cover pada contoh pertama. Ini dapat mengurangi jumlah CSS yang Anda perlukan untuk menulis yang, pada gilirannya, berarti lembar gaya yang lebih ramping dan lebih sedikit perawatan — dan lebih sedikit overhead kognitif bagi siapa pun yang menggunakan pengaturan blok.

Tetapi seperti yang saya sebutkan sebelumnya, menggunakan filter blok untuk modifikasi berat bisa menjadi rumit karena Anda perlu mengingat validasi blok.

Yang mengatakan, saya biasanya meraih filter blok jika saya perlu:

  • nonaktifkan fitur blok tertentu,
  • tambahkan opsi ke blok dan tidak bisa/tidak ingin melakukannya dengan gaya khusus (dan opsi itu tidak boleh mengubah markup blok selain menambahkan/menghapus kelas khusus), atau
  • ubah markup hanya di bagian depan (menggunakan filter PHP).

Saya juga biasanya akhirnya menulis blok khusus ketika blok inti membutuhkan penyesuaian markup yang berat baik di ujung depan maupun di editor.

Jika Anda telah bekerja dengan filter blok dan memiliki pemikiran, pertanyaan, atau komentar lain, beri tahu saya!

Sumber daya


Postingan A Crash Course di WordPress Block Filters muncul pertama kali di CSS-Tricks .

Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

June 2, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *