【WordPress】カスタムHTMLでタグを開きっぱなしにすると固定ページが死ぬので、代わりに囲みブロックを作った

2020年1月22日

カスタムHTMLでタグを開きっぱなしにすると固定ページが死ぬ

基本的にhtmlをゴリゴリと記述してページを構築するスタイルですが、
部分的にユーザーに触らせたいなと思い、触らせたいところだけtableのブロックにしたところ

保存→固定ページ編集画面から移動→再び固定ページの編集画面に来た時に死にます（ver 5.2.4 時点）

固定ページの編集画面が死ぬ＝下記のエラーがでる（そのうえChrome拡張 JavaScript Errors Notifier を使っていたら、画面が真っ白になって何もできなくなった）

エラー："block validation block validation failed for core/html"

諦めて囲み用のblockを作った

こんな感じで、カスタムhtmlブロックとtableのブロックが混在しても大丈夫に！

 

functions.php

function add_my_assets_to_block_editor() {
wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/block/block_style.css' );
wp_enqueue_script( 'block-custom', get_stylesheet_directory_uri() . '/block/block_custom.js',array(), "", true);
}
add_action( 'enqueue_block_editor_assets', 'add_my_assets_to_block_editor' );

 

/block/block_custom.js

(function () {
    var el = wp.element.createElement,
        blocks = wp.blocks,
        InnerBlocks = wp.editor.InnerBlocks;

    blocks.registerBlockType('custom/section', {
        title: 'sectionタグ囲み',
        icon: 'welcome-widgets-menus',
        category: 'layout',
        supports: {
            anchor: true
        },
        keywords: [],
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'div',
            },
        },
        edit: function edit(_ref) {
            var attributes = _ref.attributes,
                className = _ref.className;

            return wp.element.createElement(
                'div',
                { className: className },
                wp.element.createElement(InnerBlocks, { templateLock: false })
            );
        },
        save: function (_ref2) {
            var className = _ref2.className;
            return wp.element.createElement(
                'section',
                { className: className },
                wp.element.createElement(InnerBlocks.Content, null)
            );
        },
    });


    blocks.registerBlockType('custom/div', {
        title: 'divタグ囲み',
        icon: 'welcome-widgets-menus',
        category: 'layout',
        supports: {
            anchor: true
        },
        keywords: [],
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'div',
            },
        },
        edit: function edit(_ref) {
            var attributes = _ref.attributes,
                className = _ref.className;

            return wp.element.createElement(
                'div',
                { className: className },
                wp.element.createElement(InnerBlocks, { templateLock: false })
            );
        },
        save: function (_ref2) {
            var className = _ref2.className;
            return wp.element.createElement(
                'div',
                { className: className },
                wp.element.createElement(InnerBlocks.Content, null)
            );
        },
    });
})();

 

/block/block_custom.css

.wp-block-custom-section{
    padding:0 10px;
    border: solid 1px #ccc;
    margin: 10px -10px;
}
.wp-block-custom-section::before{
    content:'section class="' attr(class) '"';
    font-family: sans-serif;
    background: #999;
    color:#fff;
    font-size: 10px;
    display: inline-block;
    padding: 1px 10px;
    margin: 0 0 0 -10px;
}

.wp-block-custom-div{
    padding:0 10px;
    margin: 0px -5px;
    border: dashed 1px #ccc;
}
.wp-block-custom-div::before{
    content:'div class="' attr(class) '"';
    font-family: sans-serif;
    background: #999;
    color:#fff;
    font-size: 10px;
    display: inline-block;
    padding: 1px 10px;
    margin: 0 0 0 -10px;
}

 

webWordPress