Search code examples
javascriptreactjswordpresswordpress-gutenberggutenberg-blocks

Add an extra settings field to the Gutenberg cover block

I want to add an extra field to the Gutenberg cover block which lets me define a height based on a selection or dropdown.

I'm already using custom styles for the block and need an extra option for the height (which otherwise would lead to a lot of custom styles). The idea is to combine styles and height.

At the moment there is only a custom height option in the dimensions panel. See the image below. For me, it would be a great solution if I could an extra setting there.

Is there anything like adding an extra style. I'm doing it with this code (short example):

    wp.blocks.registerBlockStyle(
        'core/cover',
        [
            {
                name: 'cover-custom',
                label: 'Custom',
            }
        ]
    );

enter image description here

Solution

  • Add attributes (Type:'string' ans selector : 'select') in your block

    https://github.com/WordPress/gutenberg-examples/blob/master/05-recipe-card-esnext/src/index.js