0

How can this be modeled with existing blocks or other means?

I want a heading block and a paragraph block visually (and semantically, if possible and necessary) grouped together.

Example: Circle around the heading block with text "Hairstyle" and a paragraph block below with text "Beautify your hair".

I can use a group block with a heading block and a paragraph block inside - but I find this quite cumbersome and complex. Can I at least make this group-heading-paragraph block structure reusable and lock it somehow so that only the text and its position as a whole can be changed by the editor user?

1
  • 1
    this sounds like a block pattern
    – Tom J Nowell
    Nov 22, 2021 at 0:53

1 Answer 1

2

In this case it seems a block pattern might suffice. The Group block has a templateLock attribute which can be set to all to prevent any additional blocks from being inserted within and also keep the Heading and Paragraph blocks from being moved or deleted.

Here's an example with the template lock and a custom class added to the Group block.

add_action( 'init', function(){
    register_block_pattern(
        'my-plugin/dually-heading',
        [
            'title'       => __( 'Heading with sub-heading', 'my-plugin' ),
            'categories'  => [ 'header' ],
            'content'     => <<<MARKUP
                <!-- wp:group {"templateLock":"all"} -->
                <div class="wp-block-group dually-heading">
                    <!-- wp:heading --><h2>Get some at HUD</h2><!-- /wp:heading -->
                    <!-- wp:paragraph --><p>The candy store of covert revenues</p><!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            MARKUP
        ]
    );
} );
1
  • Can the newly introduced patterns property in theme.json be used for this? Or can it only be used to reference to block patterns in the official WordPress patterns directory?
    – strarsis
    Oct 16, 2022 at 17:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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