Wrap gutenberg block ‘div’ in other elements/extra HTML

Question

I’m trying to add HTML wrappers around a block to create a clipping effect, something like the below code. It has been suggested this might be possible with the block save or block edit functions?

I have done a fair bit of experimenting with CSS clip-path and SVG clipPath and unfortunately they will not work for what I am trying to achieve as I need cross-browser support.

HTML:

<div class="transform-containter">
<div class="transform-right">
<div class="transform-left">
<div class="transform-content">
<div class="block-container">
BLOCK CONTENT HERE
</div>
</div>
</div>
</div>
</div>

CSS:

.transform-containter {
    width: 100%;
    height: auto;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}
.transform-right {
    position: relative;
    width: 110%;
    height: 100%;
    top: 0;
    left: -5%;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    overflow: hidden;
    margin-top:2.5%;
}
.transform-left {
    position: relative;
    width: 110%;
    height: 100%;
    left: -5%;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    transform: rotate(-4deg);
    overflow: hidden;
    margin-top: -4%;
    margin-bottom: 3.5%;
}
.transform-content {
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    background-color: #cccccc;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 2% 0 -2% 0;
    padding: 2em 10%;
}

Here is a codepen of the effect in raw HTML/CSS https://codepen.io/bearandpear/pen/VObzQZ

So essentially just trying to add the extra HTML div elements either side of the block output code.

Any help would be greatly appreciated. I’m not a developer, I’m pretty good with HTML, CSS and a little PHP, but completely green when it comes to Javascript/React…

Answer 1

When registering a block we indicate: an edit property which defines how the block acts/displays in the editor, and a save property which is responsible for the final HTML of the block.

To modify these two functions from a block we need to use filter hooks. These hooks just need to be included inside a script in the editor.

The getSaveElement filter lets us modify the HTML output of the save property of the block. Using JSX:

const modifySaveHtml = (block, props, attributes) => {
    if (props.name !== "my-plugin/my-block") {
        return block;
    }

    return (
        <div className="transform-container">
            <div className="transform-right">
                <div className="transform-left">
                    <div className="transform-content">{block}</div>
                </div>
            </div>
        </div>
    );
};
wp.hooks.addFilter(
    "blocks.getSaveElement",
    "my-plugin/modifySaveHtml",
    modifySaveHtml
);

Using JS (ES5):

var createElement = wp.element.createElement;

var modifySaveHtml = function(block, props, attributes) {
    if (props.name !== "my-plugin/my-block") {
        return block;
    }

    return createElement(
        "div",
        { className: "transform-container" },
        createElement(
            "div",
            { className: "transform-right" },
            createElement(
                "div",
                { className: "transform-left" },
                createElement("div", { className: "transform-content" }, block)
            )
        )
    );
};
wp.hooks.addFilter(
    "blocks.getSaveElement",
    "my-plugin/modifySaveHtml",
    modifySaveHtml
);

The editor.BlockEdit filter modifies the HTML of the edit property of the block. This might not be necessary if you don't need to modify the HTML in the editor. Using JSX:

const modifyEditHtml = BlockEdit => {
    return props => {
        if (props.name !== "my-plugin/my-block") {
            return <BlockEdit {...props} />;
        }

        return (
            <div className="transform-container">
                <div className="transform-right">
                    <div className="transform-left">
                        <div className="transform-content">
                            <BlockEdit {...props} />
                        </div>
                    </div>
                </div>
            </div>
        );
    };
};
wp.hooks.addFilter(
    "editor.BlockEdit",
    "my-plugin/modifyEditHtml",
    modifyEditHtml
);

Using JS (ES5):

var createElement = wp.element.createElement;

var modifyEditHtml = function(BlockEdit) {
    return function(props) {
        if (props.name !== "my-plugin/my-block") {
            return createElement( BlockEdit, props );
        }

        return createElement(
            "div",
            { className: "transform-container" },
            createElement(
                "div",
                { className: "transform-right" },
                createElement(
                    "div",
                    { className: "transform-left" },
                    createElement(
                        "div",
                        { className: "transform-content" },
                        createElement(
                            BlockEdit,
                            props
                        )
                    )
                )
            )
        );
    };
};
wp.hooks.addFilter(
    "editor.BlockEdit",
    "my-plugin/modifyEditHtml",
    modifyEditHtml
);

Keep in mind that these filters will be applied to both new instances of the block and old ones. This means that any block which was created previously will show an "invalid content" message. This is because the filter modifies the block definition and it now expects the new HTML which is not there, as the block was created/saved before applying the filter.

When enqueuing your script (from PHP), remember to include the used dependencies. In the above code, wp-hooks package is used and wp-element as well in the non-JSX code.

function my_plugin_enqueue_editor() {

    wp_enqueue_script(
        'my-plugin-script', // name
        'path/to/my-plugin-script.js', // path
        array( // dependencies
            'wp-element',
            'wp-hooks',
        ),
        '1.0.0', // my-plugin version number
        true // enqueue in the footer.
    );

}
add_action( 'enqueue_block_editor_assets', 'my_plugin_enqueue_editor' );

Note: The JS(ES5) code is untested but I think it should work correctly.

Answer 2

You can create divs inside divs (or different elements) in the Gutenberg edit/save function. Like so:

createElement( "div",
               {className: "transform-containter"},
                createElement( "div",
                               {className: "transform-right"},
                                createElement( "div",
                                                {className: "transform-left"},
                          [AND SO ON...]
                               YOUR BLOCK CONTENT
                                )
                )
)

I think you try to write your own block, or am I wrong?

Answer 3

You could also wrap your gutenberg block via WP PHP filter:

<?php

add_filter( 'render_block', [$this, 'wp_gutenberg_wrap_block'], 10, 2 );

function wp_gutenberg_wrap_block( $block_content, $block ) {
    $align_class = 'default';
    $alignment   = $block['attrs']['align'] ?? 'default';

    if ( $alignment === 'full' ) {
        $align_class = 'alignfull';
    }

    if ( $alignment === 'wide' ) {
        $align_class = 'alignwide';
    }

    $wrapper = "<section class='block_wrapper $align_class'>";
    $wrapper .= $block_content;
    $wrapper .= '</section>';

    return $wrapper;
}