目次
カスタム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;
}
コメント