Non -registration style variations in a WordPress block theme

When building an adapted theme or working with an underlying theme, you may need to remove or hide certain styling functions, whether it is a single core block or a full variation in the theme style.

This is not just about preference. It often offers practical benefits, such as improved performance, more consistent design and a simpler user interface.

The approaches that have been followed to achieve these goals vary and are probably dependent on your needs and your skills. For the examples in this article we work with a child theme of twenty twenty-five (TT5), a modern WordPress block theme.

Not -register depends on how it is registered

For our purposes, when we refer to the non -registration of a block or theme style variation, we distinguish ourselves between complete and partial removal and whether the variation is completely removed or only hidden from the interface. The distinction is important.

Insight into how to register a block starts with knowing how it is registered. Core blocks registered with JavaScript, for example, are the best not registered in that language. On the other hand, variations in theme -style are registered with PHP and so a different approach can be in order.

Not registering custom blocks falls outside the cutlery of this article and your approach depends on how those blocks were originally registered.

What is a style variation?

WordPress makes a distinction between block styles and variations in theme style. Block styles are visual alternatives for a specific block, such as the “fill” or “circumference” styles of a button block. Block style variations are registered in the core, theme.json” block.json (or in a plug -in).

Variations in theme -Style, on the other hand, are complete visual alternatives that contain colors, typography and layouts that are defined in a unique theme.json file. They enable users to switch between different looks (skins) for a site without changing the theme. TT5 comes with eight style variations in addition to the standard style.

Take your first step: survey your scripts

Because we work with a child theme, you must ensure that you have to come up with your scripts properly.

With this setup you go on your way, including our habit to use us unregister-blocks.js file.

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

As you can see, we have a JavaScript file on js/unregister-blocks.jsIncluding all our scripts for this article.

Do not use get_template_directory_uri() For the JavaScript file, because this indicates the parent theme.

Timing is everything

Knowing when a hook is crucial when working with PHP in WordPress. You should be familiar with the basic loading series, which starts in wp-settings.php:

• Constant
• Sphere
• Core components
• Loadplugs -ins
• Load the theme

Finding the right point at which an adapted function must be performed is one of the most difficult and frustrating parts of WordPress development.

Not registering a core block style

Let’s look at a situation where you want to remove the style of a core block. In this case we want to remove the circumference style for the button block.

Because the filling and sketch button styles are registered in TT5s theme.json File, we use JavaScript to handle the process.

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

The result is the removal of the circumference style in the toolbar and sidebar.