1

I've registered a custom block pattern using register_block_pattern with several block elements, and I'd like to wrap the whole thing in a container element. When I add it to the content, however, it doesn't render correctly. Rather than wrapping the other block elements, as coded, it self-closes, and a grey "Classic" box shows in the editor. Is there a way to add extra html that isn't a registered block to a custom block pattern?

Example of the (unescaped) code and desired output (the .wrapper class is the added code):

<div class="wrapper">
    <!-- wp:heading -->
    <h1 class="has-text-align-center">Block 1</h1>
    <!-- /wp:heading -->

    <!-- wp:heading -->
    <h5 class="has-text-align-center">Block 2</h5>
    <!-- /wp:heading -->
</div>

Actual Result after adding the block pattern to a page:

<div class="wrapper"></div>

<!-- wp:heading -->
<h1 class="has-text-align-center">Block 1</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h5 class="has-text-align-center">Block 2</h5>
<!-- /wp:heading -->

1 Answer 1

2

The group block comes to mind 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 :-)

If you want to write your 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 you can wrap the block pattern with:

<!-- wp:wpse/wrapper -->
<div class="wp-block-wpse-wrapper mywrapper">

...pattern...

</div>
<!-- /wp:wpse/wrapper -->

to generate a div wrapper containing the .mywrapper class.

2
  • 1
    Yes, perfect! The block group is exactly what I needed, but wasn't documented in the list of core blocks. I should have looked at the code of one of the core block patterns, as it was used just like this.
    – StudioAl
    Jul 17, 2021 at 19:58
  • yes, hopefully the docs will catch on
    – birgire
    Jul 17, 2021 at 21:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.