Deregistrasi variasi gaya dalam tema blok WordPress

Saat mengembangkan tema yang dipersonalisasi atau bekerja dengan tema anak, orang mungkin perlu menghapus atau menyembunyikan beberapa karakteristik gaya, apakah itu blok pusat tunggal atau variasi gaya seluruh tema.

Ini bukan hanya masalah preferensi. Ini sering melibatkan keunggulan praktis, seperti kinerja yang lebih baik, desain yang lebih koheren dan antarmuka pengguna yang lebih sederhana.

Pendekatan yang diadopsi untuk mencapai tujuan ini bervariasi dan bergantung pada kebutuhan dan keterampilan pengembang. Untuk contoh yang ditunjukkan dalam artikel ini, kami bekerja dengan tema anak-anak oleh dua puluh lima puluh (TT5), tema blok WordPress modern.

Deregstraction tergantung pada cara pendaftaran dilakukan

Untuk tujuan kami, ketika kami merujuk pada deregulasi variasi gaya blok atau tema, kami membedakan antara penghapusan lengkap dan parsial dan jika variasi dihapus sepenuhnya atau hanya disembunyikan oleh antarmuka. Perbedaannya penting.

Untuk memahami cara menderegis blok, perlu untuk mengetahui bagaimana itu dicatat. Misalnya, blok inti yang direkam dalam JavaScript lebih baik untuk menderegisnya dalam bahasa yang sama. Sebaliknya, variasi gaya tema dicatat dalam PHP dan oleh karena itu mungkin perlu mengikuti pendekatan yang berbeda.

Deregulasi blok yang dipersonalisasi tidak termasuk dalam artikel ini dan pendekatannya akan tergantung pada cara blok -blok ini awalnya direkam.

Apa variasi gaya?

WordPress membedakan antara blok gaya blok dan variasi dalam gaya tema. Gaya blok adalah alternatif visual dari blok tertentu, seperti gaya “pengisian” atau “garis besar” dari blok tombol. Variasi gaya blok direkam dalam inti, dalam theme.jsonDi block.json atau di plugin.

Variasi gaya tema, di sisi lain, adalah seluruh alternatif visual yang mencakup warna, tipografi, dan tata letak yang didefinisikan dalam satu file tunggal theme.json. Ini memungkinkan pengguna untuk beralih dari satu aspek ke aspek lain (kulit) situs tanpa mengubah tema. TT5 dilengkapi dengan delapan variasi gaya selain gaya default.

Langkah pertama: untuk melawan skrip

Karena kami bekerja dengan tema anak, kami harus berhati -hati untuk memasukkan skrip dengan benar.

Konfigurasi ini memungkinkan kami ke file yang dipersonalisasi kami unregister-blocks.js.

// Enqueue Parent and Child Styles
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        ['parent-style'],
        wp_get_theme()->get('Version')
    );
});

// Enqueue styles in the WordPress admin
add_action('admin_enqueue_scripts', function () {
    wp_enqueue_style(
        'child-admin-style',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get('Version')
    );
});

// Enqueue JavaScript for block editor
add_action('enqueue_block_editor_assets', function () {
    wp_enqueue_script(
        'unregister-core-blocks',
        get_stylesheet_directory_uri() . '/js/unregister-blocks.js',
        ['wp-blocks', 'wp-dom-ready', 'wp-edit-post'],
        null,
        true
    );
});

Kami memiliki file javascript di alamat js/unregister-blocks.js yang mencakup semua skrip kami.

Kami tidak menggunakan get_template_directory_uri() Untuk file JavaScript, karena bertujuan pada tema utama.

Timpisme adalah segalanya

Mengetahui kapan kait aktif adalah fundamental saat bekerja dengan PHP di WordPress. Anda harus mengetahui urutan pemuatan dasar, yang dimulai wp-settings.php:

• Konstan
• Global
• Komponen utama
• Memuat plugin
• Mengunggah temanya

Menemukan titik yang tepat di mana fungsi yang dipersonalisasi harus dilakukan adalah salah satu bagian paling sulit dalam pengembangan WordPress.

Deregistraction dari gaya blok inti

Kami mempertimbangkan situasi di mana kami ingin menghapus gaya blok inti. Dalam hal ini, kami ingin menghapus gaya tombol blok tombol.

Karena gaya pengisian dan garis besar tombol direkam dalam file theme.json TT5, kami menggunakan JavaScript untuk mengelola proses.

wp.domReady(() => {
    if (wp.blocks && wp.blocks.unregisterBlockStyle) {
        wp.blocks.unregisterBlockStyle('core/button', 'outline');
    }
});

Hasilnya adalah penghapusan gaya kontur di bilah alat dan di bilah samping.