On a WordPress page I have a number of H2 headings followed by some text.

I'm trying to group all these blocks along with a common background color so that it looks neat and organized.

Here is a crude example of what I'm trying to achieve in WordPress. Notice the background color goes across the blocks:

    A Heading H2 block
    A paragraph (containing the main body) block
    A short code block
    A short code block

The section highlighted above is a bunch of WordPress blocks with a common background color. This improves readability.

All my attempts color individual blocks with an ugly white space between them rather than a constant color across multiple blocks.

How can I change the background color (or create a "visible panel" for lack of better words) in this manner? I would like to implement this without modifying the CSS file. I'm using a Hestia theme file in case that helps.

On a WordPress page I have a number of H2 headings followed by some text.

I'm trying to group all these blocks along with a common background color so that it looks neat and organized.

Here is a crude example of what I'm trying to achieve in WordPress. Notice the background color goes across the blocks:

    A Heading H2 block
    A paragraph (containing the main body) block
    A short code block
    A short code block

The section highlighted above is a bunch of WordPress blocks with a common background color. This improves readability.

All my attempts color individual blocks with an ugly white space between them rather than a constant color across multiple blocks.

How can I change the background color (or create a "visible panel" for lack of better words) in this manner? I would like to implement this without modifying the CSS file. I'm using a Hestia theme file in case that helps.

• customization
• html
• block-editor

• 1 have you tried grouping them together or using a cover/section/containing block? – Tom J Nowell ♦ Commented Dec 15, 2019 at 15:28
• @TomJNowell Thanks for the suggestions! I was not aware of these options and haven't tried these yet. However, I believe I would need to update my Wordpress version to try them out. Let me try out the answer solution first and after that I'll try out your solution as well on a staging site. Thanks for responding! – Mugen Commented Dec 16, 2019 at 7:01
• 1 I'd recommend upgrading WP to the latest version regardless, especially if it gives you new block editor options – Tom J Nowell ♦ Commented Dec 16, 2019 at 16:27

2 Answers 2

You should group your blocks inside a container block that lets you choose its background color.

I'm going to give you a couple of options, ordered by accessibility.

Grouped Blocks

For WordPress 5.3+, there is the Group block that lets you group blocks and select a background color. Check Toms answer for some screenshots.

Cover Blocks

WordPress doesn't have a background color block, but it does have a block called Cover, from which you can choose a background image and a background color overlay. The overlay can have 100% opacity, hiding the background image and showing only the color as the background. The problem with this block is that it only lets you use paragraphs and headings inside.

Plugins

You could install a custom block that does what you are searching for. There is a plugin that adds a background block that works as a container. It's called WP Munich Blocks – Gutenberg Blocks for WordPress.

Building Your Own Block

If the previous options don't make you happy, you could create a block yourself.

You can use Create Gutenberg Block, a developer toolkit that facilitates blocks creation. It may seem a little complicated, but there might be people out there looking for this kind of solution.

This would be a way of doing it. Keep in mind that is a very simple example, but I think that it works pretty well in the editor. You would need to edit the front end look as you like, from CSS to layout.

    const { __ } = wp.i18n; // Import __() from wp.i18n
    const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
    const { InspectorControls, InnerBlocks  } = wp.editor;
    const { ColorPicker } = wpponents;

    registerBlockType( 'special/background-color', {
        // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        title: __( 'Background Color' ), // Block title.
        icon: 'media-document', // Block icon from Dashicons → https://developer.wordpress/resource/dashicons/.
        category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
        keywords: [
            __( 'Background' ),
            __( 'Color' ),
            __( 'Container' ),
        ],
        attributes: {
            color: {
                type: 'string',
                source: 'attribute',
                attribute: 'style',
            },
        },
        // The "edit" property must be a valid function.
        edit: function( props ) {
            const { attributes, setAttributes, className, isSelected } = props;

            const style = {
                backgroundColor: attributes.color,
                border: 'solid 1px',
                padding: '10px',
            };

            return (
                <div style={style} className={className + ' background-color-container-block'}>
                    <InnerBlocks />
                    <InspectorControls>
                        <ColorPicker
                        color={ attributes.color }
                        onChangeComplete={ ( value ) => setAttributes( {color: value.hex} ) }
                        />
                    </InspectorControls>
                </div>
            );
        },
        // The "save" property must be specified and must be a valid function.
        save: function( { attributes } ) {
            const style = {
                backgroundColor: attributes.color,
            };

            return (
                <div style={style} className={'background-color-container-block'}>
                    <InnerBlocks.Content />
                </div>
            );
        },
    } );

This is going to be a barebones explanation of what's going on here. If you need more information, you can always check out the official gutenberg block development documentation.

What we are doing here is registering a block of id special/background-color and name Background Color (you can change those if you want to).

In attributes, we define the data this block works with, and that get saved with the content of the post. In this case we only use the attribute color, that stores the background color for the container.

The edit function controls how the block works on the editor. In this case, we set a container with a background-color that changes with the color attribute. The color is manipulated using the ColorPicker component. When the color changes, we update the view storing the new value using setAttributes. `

The InnerBlocks component is the one that lets us have nested blocks inside the container.

The save function saves the content and controls how the block looks on the front end. Here we only render a div with a background-color equal to the color saved in the attributes. Inside of it, we render the nested blocks using InnerBlocks.Content

In the latest versions of the block editor/WP 5.3+, you can select multiple blocks, group them, then assign a background colour:

You can also set it's width option when the group block is selected: