block editor - Gutenberg: Heading with subheadingparagraph

admin管理员组

文章数量:1279056

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?

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?

• block-editor

Share Improve this question asked Nov 6, 2021 at 2:06 strarsisstrarsis 10322 bronze badges 1

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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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
        ]
    );
} );

本文标签： block editorGutenberg Heading with subheadingparagraph