Methods to disable and lock Gutenberg blocks

Gutenberg makes it simple to construct content material with blocks, however from time to time, you want regulate over which blocks are to be had. Possibly you’re operating on a shopper web site and wish to save you them from the use of sure blocks. Or possibly you’re streamlining the enhancing revel in by way of putting off useless choices.

On this information, we’ll discover alternative ways to disable Gutenberg blocks, together with:

• The usage of the WordPress consumer interface (UI) to cover blocks within the inserter
• Locking blocks to forestall them from being moved or deleted
• Imposing block restrictions with PHP, together with role-based get entry to

That stated, we received’t be overlaying block visibility (appearing/hiding content material according to prerequisites) or disabling explicit block settings like textual content or background colours, which is treated in theme.json. Alternatively, we will be able to speak about block locking because it’s intently associated with disabling blocks.

All of the strategies on this information paintings with out plugins and practice to any block-based theme. Let’s get began!

Disabling blocks with the WordPress UI

Getting rid of useless blocks is helping streamline the enhancing revel in and will fairly toughen backend efficiency, as disabled blocks aren’t loaded into reminiscence.

Any consumer can disable blocks from the Personal tastes menu within the block editor. You’ll do that by way of clicking the three-dot Settings (⋮) menu within the top-right nook opens the editor personal tastes. Then, below the Blocks tab, customers can uncheck any block to take away it from the block inserter.

As an example, you’ll be able to disable the Quote block by way of merely unchecking its field, as proven under.

If you wish to move additional, you’ll be able to disable a complete block class. For example, unchecking the Textual content class will take away all text-related blocks from the inserter, making sure they’re not to be had to be used. This will also be useful for streamlining the editor and combating customers from getting access to useless blocks.

Disabling blocks with PHP

There are two elementary and really distinct approaches to permitting or combating a block from getting used with WordPress. Relying for your wishes you might select both to permit or deny a block from being to be had within the Inserter.

Each approaches will also be applied the use of PHP or JavaScript, every with its personal benefits and downsides. PHP is normally more effective when allow-listing blocks, whilst JavaScript is frequently extra environment friendly for deny-listing.

We’re the use of PHP for all of our examples to exhibit more than a few use circumstances.

Permit-listing blocks

To permit best explicit blocks within the inserter, use the next clear out. This guarantees that best the designated blocks are to be had for all customers:

add_filter('allowed_block_types_all', 'allowed_block_types_all_users', 10, 2 );

serve as allowed_block_types_all_users( $allowed_blocks, $block_editor_context ) {
    go back array(
        'core/paragraph',
        'core/heading',
        'core/symbol',
        'core/quilt',
        'core/listing',
        'core/list-item'
    );
}

This code will have to be added to the purposes.php document of a kid theme to forestall adjustments from being misplaced when the theme is up to date.

When the use of this system, be sure that all important kid blocks are incorporated. As an example, in case you enable the core/listing block, you should additionally come with core/list-item to forestall mistakes.

The allowed_block_types_all clear out provides builders regulate over the blocks to be had within the inserter. It accepts two parameters:

• $allowed_block_types — An array or boolean defining the authorised blocks (default: true).
• $block_editor_context — Supplies details about the present block editor state, together with the submit being edited.

Permitting explicit blocks for members and authors

The next code restricts the to be had blocks for customers with out the publish_pages capacity (members and authors):

add_filter('allowed_block_types_all', 'allowed_block_types_for_non_admins', 10, 2);

serve as allowed_block_types_for_non_admins($allowed_blocks, $block_editor_context) {
    // Follow restrictions if the consumer does no longer have the 'publish_pages' capacity
    if (!current_user_can('publish_pages')) {
        // Outline the allowed blocks for customers with out 'publish_pages' capacity
        $allowed_blocks = array(
            'core/paragraph',
            'core/heading',
            'core/symbol',
            'core/quilt',
            'core/listing',
            'core/list-item'
        );
    }
    go back $allowed_blocks;
}

Within the above instance, Individuals and Authors can best use paragraph, heading, symbol, quilt, and listing blocks.

Permitting blocks for explicit submit sorts and customers

The next code provides the Shortcode block to the inserter when enhancing a web page however assists in keeping it unavailable for different submit sorts:

add_filter('allowed_block_types_all', 'allowed_block_types', 25, 2);

serve as allowed_block_types($allowed_blocks, $editor_context) {
    $allowed_blocks = array(
        'core/paragraph',   
        'core/heading',    
        'core/symbol',      
        'core/quilt',      
        'core/listing',       
        'core/list-item'
    );

    // Take a look at if the editor context has a submit object and if its sort is 'web page'
    if (!empty($editor_context->submit) && 'web page' === $editor_context->post->post_type) {
        $allowed_blocks[] = 'core/shortcode';
    }

    go back $allowed_blocks;
}

Remember the fact that since members upload authors can’t create or regulate pages the end result will seem best in a submit.

All customers will best see six blocks however directors and editors will even see the shortcode block to be had just for a web page.

In our instance, the have an effect on this has on members and authors is null as, by way of default, they can not upload new pages. Alternatively, the use of a Function Supervisor plugin may just adjust that capacity.

Permitting blocks according to Put up ID

If there are cases the place you need to enable a suite of blocks just for sure posts here’s how you’ll be able to do it:

add_filter('allowed_block_types_all', 'allowed_block_types', 10, 2);

serve as allowed_block_types($allowed_blocks, $editor_context) {
    // Take a look at if the editor context has a submit object
    if (!empty($editor_context->submit)) {
        $post_id = $editor_context->post->ID;

        // Outline allowed blocks for explicit submit IDs
        $allowed_blocks_by_post = array(
            2 => array('core/paragraph', 'core/heading', 'core/symbol'),
            3 => array('core/paragraph', 'core/heading', 'core/symbol')
        );

        // Take a look at if the present submit ID has an outlined allowed blocks array
        if (array_key_exists($post_id, $allowed_blocks_by_post)) {
            go back $allowed_blocks_by_post[$post_id];
        }
    }
    go back $allowed_blocks;
}

On this instance, best paragraph, heading, and symbol blocks might be to be had for submit IDs 2 and three.

That is high-quality for a small set of submit IDs. However when you’ve got a dynamic scenario the place pages or posts are added incessantly, then believe filtering on taxonomies and customized fields.

Deny-listing blocks

Permit-listing, by way of implication, is a type of deny-listing as blocks no longer to be had are denied. However you’ll be able to take a opposite means if you would like enable maximum blocks apart from for a couple of. On this instance, the heading and canopy blocks are not to be had to any consumer.

add_filter('allowed_block_types_all', 'deny_blocks');

serve as deny_blocks($allowed_blocks) {
    // Get all registered blocks
    $blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();

    // Disable two explicit blocks
    unset($blocks['core/heading']);
    unset($blocks['core/cover']);

    go back array_keys($blocks);
}

Necessarily, we discover all registered blocks after which take away the heading and canopy blocks.

Watch out in case you suppose you’ll be able to unset any block with this system. If a block — core or differently — is registered with JavaScript you should unregister it with JavaScript.

Deny-listing complete block classes

If you wish to take away complete classes of blocks, reminiscent of Widgets, Embeds, or Theme blocks, use this means:

add_filter('allowed_block_types_all', 'disable_blocks_by_categories', 10, 2);

serve as disable_blocks_by_categories($allowed_blocks, $editor_context) {
    // Get all registered blocks
    $registered_blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();

    // Specify the kinds to disable
    $categories_to_disable = array('widgets', 'embed', 'theme');

    // Initialize an array to carry allowed block names
    $allowed_block_names = array();

    // Loop via registered blocks
    foreach ($registered_blocks as $block_name => $block_type) {
        // Take a look at if the block has classes outlined
        if (isset($block_type->class)) {
            // If the block's class is NOT within the disabled listing, enable it
            if (!in_array($block_type->class, $categories_to_disable, true)) {
                $allowed_block_names[] = $block_name;
            }
        } else {
            // If the block has no class outlined, enable it by way of default
            $allowed_block_names[] = $block_name;
        }
    }
    go back $allowed_block_names;
}

This means filters out complete classes of blocks, simplifying the block editor revel in.

Locking blocks with the WordPress UI

Locking a block prevents it from being moved or deleted whilst nonetheless permitting content material edits. Any consumer can lock or release a block at any time the use of the Lock possibility within the block toolbar.

To both lock or release a block, click on the three-dot Settings (⋮) at the block, click on Lock after which settling on the Lock all possibility mechanically permits each Save you motion and Save you elimination, however those choices may also be implemented one after the other.

It’s necessary to understand that even if a block is locked, customers can nonetheless trade its content material and elegance except additional restrictions are implemented.

Combating styling adjustments isn’t conceivable during the lock characteristic by myself. To limit block styling, changes should be made within the theme.json document.

For blocks containing nested components, there’s an extra strategy to lock best the mum or dad block or lock all internal blocks as neatly. This guarantees that grouped components stay structured whilst permitting managed edits inside of them.

Locking blocks with PHP

Whilst the WordPress UI supplies fundamental block locking, it does no longer implement restrictions site-wide. Any consumer with editor get entry to can release a block, making it simple to override locked content material. To completely prohibit block locking, PHP is the most efficient answer.

With PHP, you’ll be able to totally take away the power to fasten and release blocks, making sure that no consumer can bypass restrictions. That is how WordPress functioned sooner than the discharge of WordPress 5.9, when block locking was once presented.

Block locking turns out to be useful in lots of situations, specifically when keeping up structured content material. By way of implementing block restrictions with PHP, you’ll be able to:

• Keep design integrity by way of combating customers from editing key blocks.
• Save you unintended enhancing that might destroy layouts.
• Streamline content material advent by way of lowering useless choices.
• Be certain consistency in patterns and templates, particularly for consumer initiatives.

Getting rid of block locking capability for all customers

The next PHP snippet disables block locking completely, combating any consumer from locking or unlocking blocks:

add_filter('block_editor_settings_all', 'example_disable_block_locking', 10, 2);

serve as example_disable_block_locking($settings, $context) {
   $settings['canLockBlocks'] = false; 
   go back $settings;
}

With this implemented, the block locking characteristic is totally got rid of from the block editor. Customers won’t see the lock choices, and no person irrespective of function will have the ability to lock or release blocks.

For customers web hosting their web site with Kinsta, making adjustments to theme information is simple and protected the use of SFTP, which is enabled by way of default for all WordPress websites.

Limiting block locking according to consumer roles

As a substitute of totally putting off block locking, you might wish to prohibit who can lock and release blocks. The next PHP snippet permits best directors and editors to change block locks, whilst authors and members can not release any block set by way of an admin or editor.

add_filter('block_editor_settings_all', 'example_disable_block', 10, 2);

serve as example_disable_block ($settings, $context ) {
   if (
       isset( $context->submit ) &&
       'submit' === $context->post->post_type &&
       ! current_user_can( 'edit_theme_options' )
   ) {
       $settings['canLockBlocks'] = false; 
       $settings['codeEditingEnabled'] = false;   
   }
   go back $settings;
}

This means limits block regulate to customers with the edit_theme_options capacity, most often directors and editors. Authors and members will be unable to release blocks set by way of higher-level customers.

Moreover, get entry to to the Code Editor is disabled, combating customers from manually editing block markup to circumvent restrictions. This guarantees that locked blocks stay unchanged, even by way of customers with coding wisdom.

Abstract

Opting for whether or not to permit or deny blocks — or a mixture of each — is determined by your explicit wishes. You could wish to prohibit sure blocks for a cleaner enhancing revel in, implement design consistency, or regulate get entry to according to consumer roles.

Talking of consumer roles, features will also be changed to additional customise how blocks are controlled. This opens up much more probabilities past what we’ve coated right here.

Remember the fact that WordPress evolves through the years. Long run updates may just introduce new techniques to regulate blocks or regulate current capability, so staying up to the moment with WordPress construction is necessary to verify your means stays efficient.

Are you on the lookout for a protected and developer-friendly web hosting answer? Kinsta makes it simple to regulate your WordPress information, together with enhancing theme information by the use of SFTP, making sure protected and seamless customizations with out risking web site balance.

The submit Methods to disable and lock Gutenberg blocks seemed first on Kinsta®.

WP Hosting

[ continue ]