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.