Adding an html wrapper to a custom Block Pattern

Question

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 --> 

Answer 1

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.