Adding an html wrapper to a custom Block Pattern

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.