在其他元素中包装Gutenberg块‘div’/额外的HTML

时间:2019-05-17 作者:bearandpear

我试图在块周围添加HTML包装以创建剪切效果,类似于下面的代码。有人建议,这可能与块保存或块编辑功能一起实现?

我已经对CSS片段路径和SVG片段路径进行了大量的实验,但不幸的是,它们无法实现我想要实现的目标,因为我需要跨浏览器支持。

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%;
}
这是一个原始HTML/CSS效果的代码笔https://codepen.io/bearandpear/pen/VObzQZ

因此,本质上只是尝试在块输出代码的任一侧添加额外的HTML div元素。

任何帮助都将不胜感激。我不是开发人员,我很擅长HTML、CSS和一点PHP,但在Javascript/React方面完全是绿色的…

2 个回复
最合适的回答,由SO网友:Alvaro 整理而成

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.

SO网友:moped

可以在Gutenberg编辑/保存功能中的div(或不同元素)内创建div。像这样:

createElement( "div",
               {className: "transform-containter"},
                createElement( "div",
                               {className: "transform-right"},
                                createElement( "div",
                                                {className: "transform-left"},
                          [AND SO ON...]
                               YOUR BLOCK CONTENT
                                )
                )
)
我想你是想自己写块,还是我错了?