Creating block patterns

theme-support:
  __experimentalBlockPatternCategories: 
    - 
      label: Text
      name: text
    - 
      label: Demo
      name: demo
  __experimentalBlockPatterns: 
    - 
      categories: 
        - text
      content: |-
        <!-- wp:group {"align":"full","style":{"color":{"gradient":"linear-gradient(135deg,rgb(238,238,238) 21%,rgb(169,184,195) 100%)"}}} -->
        <div class="wp-block-group alignfull has-background" style="background:linear-gradient(135deg,rgb(238,238,238) 21%,rgb(169,184,195) 100%)"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":1} -->
        <h1>Featured Articles</h1>
        <!-- /wp:heading -->

        <!-- wp:columns -->
        <div class="wp-block-columns"><!-- wp:column -->
        <div class="wp-block-column"><!-- wp:image {"sizeSlug":"large"} -->
        <figure class="wp-block-image size-large"><img src="https://picsum.photos/200/300" alt=""/></figure>
        <!-- /wp:image -->

        <!-- wp:heading -->
        <h2>Article 1</h2>
        <!-- /wp:heading -->

        <!-- wp:paragraph -->
        <p>Eaedem res maneant alio modo. At hoc in eo M. Non potes, nisi retexueris illa. Scrupulum, inquam, abeunti; Quantum Aristoxeni ingenium consumptum videmus in musicis?</p>
        <!-- /wp:paragraph -->

        <!-- wp:buttons -->
        <div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"red"} -->
        <div class="wp-block-button"><a class="wp-block-button__link has-red-background-color has-background">Read more</a></div>
        <!-- /wp:button --></div>
        <!-- /wp:buttons --></div>
        <!-- /wp:column -->

        <!-- wp:column -->
        <div class="wp-block-column"><!-- wp:image {"sizeSlug":"large"} -->
        <figure class="wp-block-image size-large"><img src="https://picsum.photos/200/300" alt=""/></figure>
        <!-- /wp:image -->

        <!-- wp:heading -->
        <h2>Article 2</h2>
        <!-- /wp:heading -->

        <!-- wp:paragraph -->
        <p>Eaedem res maneant alio modo. At hoc in eo M. Non potes, nisi retexueris illa. Scrupulum, inquam, abeunti; Quantum Aristoxeni ingenium consumptum videmus in musicis?</p>
        <!-- /wp:paragraph -->

        <!-- wp:buttons -->
        <div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"red"} -->
        <div class="wp-block-button"><a class="wp-block-button__link has-red-background-color has-background">Read more</a></div>
        <!-- /wp:button --></div>
        <!-- /wp:buttons --></div>
        <!-- /wp:column -->

        <!-- wp:column -->
        <div class="wp-block-column"><!-- wp:image {"sizeSlug":"large"} -->
        <figure class="wp-block-image size-large"><img src="https://picsum.photos/200/300" alt=""/></figure>
        <!-- /wp:image -->

        <!-- wp:heading -->
        <h2>Article 3</h2>
        <!-- /wp:heading -->

        <!-- wp:paragraph -->
        <p>Eaedem res maneant alio modo. At hoc in eo M. Non potes, nisi retexueris illa. Scrupulum, inquam, abeunti; Quantum Aristoxeni ingenium consumptum videmus in musicis?</p>
        <!-- /wp:paragraph -->

        <!-- wp:buttons -->
        <div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"red"} -->
        <div class="wp-block-button"><a class="wp-block-button__link has-red-background-color has-background">Read more</a></div>
        <!-- /wp:button --></div>
        <!-- /wp:buttons --></div>
        <!-- /wp:column --></div>
        <!-- /wp:columns --></div></div>
        <!-- /wp:group -->
      description: "An example block pattern with a heading."
      name: example/myplugin
      title: "Example block pattern"

When defining block patterns it's required to define block pattern categories.

And here's the result on the editor:

A new tab "Patterns" will appear in the block inserter. Then the user just adds the pattern as a regular block and do any necessary changes:

How to build new block patterns?

The easiest way to build a block is to create a new page with Gutenberg enabled and build the content as a regular document. Then select all content (Ctrl/Cmd + a) and transform to group block:

Then you just need to copy the block and paste into the theme-support -> __experimentalBlockPatterns -> content section on [theme].gutenberg.yml.