Making Reusable Blocks more obvious in the editor

written by: Jeff McNear

---

Making Reusable Blocks more obvious in the editor

Gutenberg is evolving right before our eyes making the use of some of the moderately more advanced features challenging for users. One of the better Gutenberg features is the Reusable Block, but for the moment they are too easy to edit directly in the post interface rather than in the “manage reusable block” section found at (site root URL)/wp-admin/edit.php?post_type=wp_block.

This article: https://wordpress.org/support/topic/make-it-less-easy-to-edit-reusable-blocks/ describes a way to gain control over the presentation of blocks in the editor (only).

While this is primarily a CSS solution, adding styling to the stylesheet or customizer will not work, adding styles via the functions file will.

This code block will place a red border and the leading text of “* this is a reusable block – please do not edit it directly*” around any reusable block in the edit interface.

//https://wordpress.org/support/topic/make-it-less-easy-to-edit-reusable-blocks/
add_action('admin_head', function () {
    ?>
        <style>
            .block-library-block__reusable-block-container {
                pointer-events: none;
                border: solid red 2px;
                position: relative;
            }

 .block-library-block__reusable-block-container:before{
    content: "*** this is a reusable block - please do not edit it directly***";
    width: 100%;
color: red;
 }
        </style>


    <?php
});

While the article also describes adding this block

<script>
            (function($){
                $(window).load( function() {
                    $('.edit-post-visual-editor').on('click',function(e) {
                        $block = $(e.target);
                        if ($block.hasClass('is-reusable')) {
                            if (confirm('You are about to convert this reusable block to regular blocks. Are you sure you want to do this?')) {
                                const clientId = $block.attr('data-block');
                                wp.data && wp.data.dispatch('core/reusable-blocks').__experimentalConvertBlockToStatic(clientId);
                            }
                        }
                    });
                });
            }(jQuery))
        </script>

to give the user a prompt before converting a reusable block to a “regular” block … now that block patterns are more prominent in Gutenberg these kinds of conversions are no longer readily done.