Allowing core blocks ONLY within custom inner blocks

  • Resolved Glenn

    (@glennmeekers)


    3 years, 2 months ago

    Hi,

    For a client website, I created a set of custom Gutenberg blocks with the help of ACF.

    I want my client to be able to use a limited selection of core WordPress blocks within these inner blocks. Blocks such like:
    – core/paragraph
    – core/heading
    – core/list

    However, I don’t want these blocks to be available outside of these custom inner blocks. They need to be exclusively available INSIDE these custom inner blocks.

    How do I achieve this?

    Right now I have disabled all Gutenberg blocks except for these blocks with the following array:

    add_filter( 'allowed_block_types', 'ql_allowed_block_types', 10, 2 );
function ql_allowed_block_types( $allowed_blocks, $post ) {

    $allowed_blocks = array(
       'core/heading',
       'core/paragraph', 
       'core/list',
       "acf/img-text-column",
       "acf/img-text-row",
       "acf/text-block",
       "acf/img-grid",
       "acf/columns",
       "acf/button",
     );

	return $allowed_blocks;
}

    With the acf blocks being my custom blocks.

    Here is a screenshot of the blocks in the Gutenberg block menu: https://prnt.sc/1s7znyl

    Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Glenn

    (@glennmeekers)

    In case anyone is encountering a similar situation. I have found a solution for it!

    Here’s what you have to do.

    1. Create a js file in your theme directory and enqueue in the wp-admin head

    add_action('admin_enqueue_scripts', 'enqueue_admin_scripts') ;
function enqueue_admin_scripts() {
    wp_enqueue_script('gutenberg-filters', get_stylesheet_directory_uri() . '/js/filter-gutenberg-blocks.js', ['wp-edit-post']);
}

    2. Add the following code to this js file.

    const coreBlocksArray = ['core/paragraph', 'core/heading', 'core/list', 'acf/button'];

function addParentAttribute( settings, name ) {
    if ( !coreBlocksArray.includes(name) ) {
        return settings;
    }
 
    return Object.assign(settings, {
        parent: [
            'acf/img-text-column',
            'acf/img-text-row',
            'acf/text-block',
         ],
    } );
}
 
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'my-plugin/class-names/list-block',
    addParentAttribute
);

    First I created an array called ‘coreBlocksArray’ containing all blocks that I want to target. This includes a few WordPress core blocks and a custom block that I created with Advanced Custom Fields (ACF).

    In the function below, it looks at every block in the array and adds the ‘parent’ attribute to settings. More about the Block Configuration ‘parent’ attribute in the Block Registration Documentation.

    It’s adding a selection of custom blocks (acf/img-text-column, acf/img-text-row, acf/text-block) to this ‘parent’ array.

    This means that the blocks inside the ‘coreBlocksArray’ array are now only available inside the selection of custom blocks.

    I hope this helps anyone!

    Hi

    That was useful and I’ve got it working on my site, although I’m still a bit confused by some things.

    One thing that confused me was the line “‘my-plugin/class-names/list-block”. After some hunting it turned out I’m not the only one who found that confusing. But eventually I found this which helped.

    Anyway thanks for documenting this, it was very helpful.

    Although this approach is working, on my widgets screen, I see the following message:

    Notice: wp_enqueue_script() was called incorrectly. “wp-editor” script should not be enqueued together with the new widgets editor (wp-edit-widgets or wp-customize-widgets). Please see Debugging in WordPress for more information. (This message was added in version 5.8.0.)

    It seems to be the code for “core blocks only” that is causing this – if I remove it the notice goes away.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Allowing core blocks ONLY within custom inner blocks’ is closed to new replies.