How to add an HTML wrapper to a custom Block Pattern

Block patterns are registered with:

register_block_pattern( array( 
       'title'       => 'My Block Pattern' , 
       'content' => '...pattern...' 
) );

If we wrap the …pattern… with a div tag:

<div class="mywrapper">

...pattern...

</div>

it will show up as a classic block in the editor.

To avoid that, we can use the group block as an out of the box pattern wrapper with a custom class mywrapper:

<!-- wp:group {"className":"mywrapper"} -->
<div class="wp-block-group mywrapper">
<div class="wp-block-group__inner-container">

...pattern...

</div></div>
<!-- /wp:group -->

Theoretically one can use the custom html block as a pattern, like:

<!-- wp:html -->
<div class="mywrappper">
   <h1 class="has-text-align-center">Block 1</h1>
   <h2 class="has-text-align-center">Block 2</h2>
</div>
<!-- /wp:html -->

but not the best user experience 🙂

We can also write our own block to handle this, the InnerBlocks component supports nested blocks and in version 2 of the block api it becomes e.g.:

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

registerBlockType( 'wpse/wrapper', {
    apiVersion: 2,
    title: __( 'WPSE Wrapper', 'wpse' ),
    icon: 'text-page', 
    category: 'design', 
    edit: ( props ) => {
        const blockProps = useBlockProps( { className: 'mywrapper' } );
        return <div { ...blockProps }><InnerBlocks /></div>;
    },
    save: ( props ) => {
        const blockProps = useBlockProps.save( { className: 'mywrapper' } );
        return <div { ...blockProps }><InnerBlocks.Content /></div>;
    },
} );

Then we can wrap the block pattern with:

&lt;!-- wp:wpse/wrapper -->
&lt;div class="wp-block-wpse-wrapper mywrapper">

...pattern...

&lt;/div>
&lt;!-- /wp:wpse/wrapper -->

to generate a div wrapper containing the .mywrapper class.

This started as an answer here:

https://wordpress.stackexchange.com/a/392084/26350

Similar Posts