In this post I will demonstrate how to add create a custom block plugin with InnerBlocks in WordPress.

Custom WordPress block plugin using InnerBlocks to offer flexibility.

InnerBlocks blocks are useful to allow further customization for the user utilizing your WordPress block plugin. They will be able to add native WordPress components which is also beneficial for the developer of the plugin. Less work needed to implement and track data elements.

In the example below, I will introduce this demonstration as a dynamic rendering build using render.php for the frontend. The base UI elements will be a vertical H1 text next to the main content DIV. Inside the main content DIV is where the user has the ability to add WordPress core/image, core/paragraph or layout blocks ( core/group )blocks.

Testing

Create A Checkmark Animation With Animatables in Android

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec felis dictum, egestas risus sed, euismod justo. Suspendisse in eros ut nunc dapibus imperdiet. Nulla purus felis, aliquet maximus neque at, placerat varius neque. Cras eget metus neque. Pellentesque posuere, nunc non consequat auctor, erat urna rhoncus turpis, at malesuada eros eros ut ligula. Curabitur aliquam auctor ipsum id tincidunt. Nulla in urna malesuada, egestas nisi non, egestas felis. Vivamus dui metus, pharetra eget auctor eu, fringilla a mauris. Phasellus convallis, lorem vitae aliquet elementum, orci nibh aliquam justo, sed egestas sapien leo id nunc. Sed id tortor tellus. Quisque nec leo tincidunt, blandit arcu nec, maximus augue.

Custom Block Plugin With InnerBlocks

Code

The block plugin will have a few CSS variables that are passed on from the block.json attributes file which are edited in the edit.js file. We will go through each file below. If you want a more comprehensive demonstration of passing block plugin attributes as CSS variables, please view the link below.

Use WordPress Block Attributes As CSS Variables

Block.json

Here we will create the attributes for the block plugin.

bgContentColor

The color to change the main content DIV container.

shadowColor

The color for the shadow of the main content DIV and the H1 text.

headerText

The vertically oriented H1 text.

supports

Added native color support for the background as well as the color for the text.

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "r2creations24/my-custom-blocks-vertical-title",
	"version": "0.1.0",
	"title": "My Custom Blocks Vertical Title",
	"category": "widgets",
	"icon": "smiley",
	"description": "Custom blocks created by R2creations24.",
	"example": {},
	"attributes": {
		"bgContentColor": {
			"type": "string",
			"default": "#611e1ea1"
		},
		"shadowColor": {
			"type": "string",
			"default": "#000000"
		},
		"headerText": {
			"type": "string",
			"default": "Lorem Ipsum"
		}
	},
	"supports": {
		"html": false,
		"color":{
			"text": true,
			"background": true
		}
	},
	"textdomain": "my-custom-blocks-vertical-title",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"render": "file:./render.php",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js"
}

Style.scss

The stylesheet that will be used for the editor as well as the frontend.

Here the H1 is vertically placed to the left side of the main content DIV with a text shadow.

Also the P elements in the main content DIV will have its initial first letter scaled up for decorative purposes.

Finally, the main content DIV will have a box shadow.

.wp-block-r2creations24-my-custom-blocks-vertical-title {
    margin: auto;
    align-items: center;
    overflow-wrap: break-word;
    display: flex;
    padding: 15px;
}

.wp-block-r2creations24-my-custom-blocks-vertical-title h1 {
	transform: rotateZ(180deg);
    writing-mode: vertical-lr;
    text-shadow: 2px 2px var(--shadow-color), 0px 0px 10px var(--shadow-color);
    text-decoration: underline;
	align-self: flex-start;
	color: var(--bg-content-color);
	font-weight: 900;
    margin: 0 10px 0 0;
}

.wp-block-r2creations24-my-custom-blocks-vertical-title .content {
    width: 95%;
	background-color: var(--bg-content-color);
    border-radius: 25px;
    padding: 15px;
    box-shadow: inset 1px 1px 50px -6px var(--shadow-color), 8px 8px 8px var(--shadow-color);
}

.wp-block-r2creations24-my-custom-blocks-vertical-title p::first-letter {
  font-size: 200%
}

Save.js

Unlike the other dynamic rendering examples I have demonstrated in the past, we can't just return null in save.js. We will need to return the InnerBlocks contents. It is still very easy, just something you can't forget.

import { __ } from "@wordpress/i18n";
import { InnerBlocks } from "@wordpress/block-editor";

export default function save() {
	return <><InnerBlocks.Content /></>;
}

Render.php

In the render.php file, we will create PHP variables for each attributes passed and feed them into the stylesheet for the block plugin.

To get the InnerBlocks that is created by the user in the editor, we need to use a WordPress hook.

<?php echo do_blocks($content); ?>

Below is what the completed file will look like.

<?php

 $bgContentColor = $attributes['bgContentColor'];
 $shadowColor = $attributes['shadowColor'];

 $headerText = $attributes['headerText'];

 $style = "--bg-content-color: ".$bgContentColor.";";
 $style .= "--shadow-color: ".$shadowColor.";";
?>
<div <?php echo get_block_wrapper_attributes(array("style" => $style)); ?>>
    <h1><?php echo $headerText; ?></h1>
        <div class="content">
            <?php echo do_blocks($content); ?>
    </div>
</div>

Edit.js

Lastly, its time to create the editor UI.

The InnerBlocks does take a few parameters. Here I chose to only allow certain WordPress blocks to be added to the main content DIV.

Breakdown

First we need to import our components.

import { __ } from '@wordpress/i18n';

import { 
	useBlockProps,
	PanelColorSettings,
	InspectorControls,
    InnerBlocks
 		} from '@wordpress/block-editor';

import { 
    PanelBody,
    TextControl,
    BaseControl
        } from '@wordpress/components';

import './editor.scss';

Then we will build the editor.

export default function Edit( { attributes, setAttributes } ) {

	const newStyle = {
        "--bg-content-color": attributes.bgContentColor,
        "--shadow-color": attributes.shadowColor
    };

    const blockProps = useBlockProps( { style: newStyle } );

    function setBgContentColor(value){
        if(value === undefined){
            setAttributes({bgContentColor: "#611e1ea1"});
        } else {
             setAttributes({bgContentColor: value});
        }
    }

    function setShadowColor(value){
        if(value === undefined){
            setAttributes({shadowColor: "#000000"});
        } else {
             setAttributes({shadowColor: value});
        }
    }

	return (
		<>
		    <InspectorControls>
                <PanelBody title={ __( 'Settings', 'my-custom-blocks-vertical-title' ) }>
                    <PanelColorSettings
                        title = { __('Configure Colors')}
                        colorSettings={
                            [
                                {
                                    value: attributes.bgContentColor,
                                    onChange: (value) => setBgContentColor(value),
                                    label: __('Content Background')
                                },
                                {
                                    value: attributes.shadowColor,
                                    onChange: (value) => setShadowColor(value),
                                    label: __('Shadow')
                                }
                            ]
                        }
                    />
                    <BaseControl __nextHasNoMarginBottom>
                        <BaseControl.VisualLabel>Title</BaseControl.VisualLabel>
                            <TextControl
                                __nextHasNoMarginBottom
                                __next40pxDefaultSize
                                value= {attributes.headerText}
                                onChange={ ( value ) => setAttributes({ headerText : value}) } 
                                placeholder={ __( 'Lorem Ipsum' ) } 
                            />
                    </BaseControl>
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <h1>{ attributes.headerText }</h1>
                <div class="content">
                    <InnerBlocks 
                        allowedBlocks={ [ 'core/image', 'core/paragraph', 'core/group' ] }
                    />
                </div>
            </div>
		</>
	);
}

export default function Edit( { attributes, setAttributes } ) {

	const newStyle = {
        "--bg-content-color": attributes.bgContentColor,
        "--shadow-color": attributes.shadowColor
    };

    const blockProps = useBlockProps( { style: newStyle } );

    function setBgContentColor(value){
        if(value === undefined){
            setAttributes({bgContentColor: "#611e1ea1"});
        } else {
             setAttributes({bgContentColor: value});
        }
    }

    function setShadowColor(value){
        if(value === undefined){
            setAttributes({shadowColor: "#000000"});
        } else {
             setAttributes({shadowColor: value});
        }
    }

	return (
		<>
		    <InspectorControls>
                <PanelBody title={ __( 'Settings', 'my-custom-blocks-vertical-title' ) }>
                    <PanelColorSettings
                        title = { __('Configure Colors')}
                        colorSettings={
                            [
                                {
                                    value: attributes.bgContentColor,
                                    onChange: (value) => setBgContentColor(value),
                                    label: __('Content Background')
                                },
                                {
                                    value: attributes.shadowColor,
                                    onChange: (value) => setShadowColor(value),
                                    label: __('Shadow')
                                }
                            ]
                        }
                    />
                    <BaseControl __nextHasNoMarginBottom>
                        <BaseControl.VisualLabel>Title</BaseControl.VisualLabel>
                            <TextControl
                                __nextHasNoMarginBottom
                                __next40pxDefaultSize
                                value= {attributes.headerText}
                                onChange={ ( value ) => setAttributes({ headerText : value}) } 
                                placeholder={ __( 'Lorem Ipsum' ) } 
                            />
                    </BaseControl>
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <h1>{ attributes.headerText }</h1>
                <div class="content">
                    <InnerBlocks 
                        allowedBlocks={ [ 'core/image', 'core/paragraph', 'core/group' ] }
                    />
                </div>
            </div>
		</>
	);
}

Hope this was useful.