現在開発中の、DigiPress テーマ専用のブロックエディタープラグインによる拡張機能として、WordPress 標準のテーブルブロックで作成される HTML テーブル(table 要素)を、横にオーバーフローした際にCSSのみで水平方向にスクロール可能にして表全体が閲覧できるようにするため、table 要素全体を div 要素でラップする必要がでてきました。

ブロックエディターで出力されるコンテンツ全体を div などのタグでラップする方法は、wp.hooks の addFilter を利用して以下のようにフックを実行することで簡単に実装できます。

テーブルブロックをdivでラップするコード(JSX)

/**
 * Wrap table block in div.
 * 
 * @param {object} element 
 * @param {object} blockType 
 * @param {object} attributes 
 * 
 * @return The element.
 */
function modifyGetSaveElement( element, blockType, attributes  ) {
	// テーブルブロック(core/table)以外は除外
	if ( blockType.name !== 'core/table' && wp.element.isValidElement ) {
		return element;
	}

	// 全体(この場合はテーブル)を div でラップする
	return (
		<div className='wp-block-wrapper'>
			{element}
		</div>
	);
}

// ブロックコンテンツが保存される際のフィルター(blocks.getSaveElement)にフックする
wp.hooks.addFilter(
	'blocks.getSaveElement',  // フィルター名
	'namespace/modify-get-save-element',  // 名前空間
	modifyGetSaveElement,  // フックする関数名
);

ところが、保存後、ふたたびエディターを開くと以下のように「このブロックには、想定されていないか無効なコンテンツが含まれています。」というエラーメッセージが表示され、再度変換を促されて通常の編集ができない場合があります。

この場合、右端のドロップダウンメニューから「ブロックのリカバリーを試行」を実行すれば、再び編集は可能になりますが、エディターを開く度にこのエラーが発生します。

コンソールを確認すると、以下のブロックエディター(blocks.min.js)側から、ブロックエディターによる保存時のHTMLと本文のHTMLの構造に相違がある旨の以下のエラーが返されています。

エディターが返すエラー

これは、ブロックエディター右側にある「スタイル」で何らかの選択可能なスタイルを指定(is-style-* クラスを挿入)した場合や、「高度な設定」の「追加 CSS クラス」欄に任意のクラスを挿入してある場合に発生します。

原因は、スタイルを指定した際に挿入される “is-style-*” クラスや 「追加 CSS クラス」に指定したクラスは、ブロックコンテンツの一番外側の(ルート)要素に挿入されていなければいけない仕様のため、blocks.getSaveElement でブロックコンテンツを任意の要素でラップしてしまうことでこの仕様が満たされなくなりブロックエディター側でのバリデーションに通らないためです。

これを回避するには、本来のブロックコンテンツに挿入されているクラスを、ラップする要素のクラスに引き継がせます。

外側のクラスを継承してdivでラップするコード(JSX)

/**
 * Wrap table block in div.
 * 
 * @param {object} element 
 * @param {object} blockType 
 * @param {object} attributes 
 * 
 * @return The element.
 */
function modifyGetSaveElement( element, blockType, attributes  ) {
	// テーブルブロック(core/table)以外は除外
	if ( blockType.name !== 'core/table' && wp.element.isValidElement ) {
		return element;
	}

	// 全体(この場合はテーブル)を div でラップする
	return (
		<div
			className={ 'wp-block-wrapper ' + (
				typeof element.props.className === 'string' && element.props.className.match( /(^|\s+)wp-block-/ )
					? element.props.className.replace( /wp-block-/, 'wp-block-wrapper-' )
					: 'wp-block-wrapper-' + blockType.name.replace( /\//, '-' ).replace( /^core-/, '' )
				)
			}
		>
			{element}
		</div>
	);
}

// ブロックコンテンツが保存される際のフィルター(blocks.getSaveElement)にフックする
wp.hooks.addFilter(
	'blocks.getSaveElement',  // フィルター名
	'namespace/modify-get-save-element',  // 名前空間
	modifyGetSaveElement,  // フックする関数名
);

このコードでは、本来生成される一番外側の要素(例では table)に挿入されている wp-block-* クラスをすべて wp-block-wrapper-* に変換し、その他に指定されている is-style-* などのクラスはすべてそのままの状態で取得し、ラップする要素のクラスにセットします。

これで、保存後のブロックエディターのエラーはなくなりました。

このサンプルでは、テーブルブロック(core/table)の場合のみにラップするようにしていますが、blockType.name の部分を別の登録されているブロック名に変更すれば転用できます。

標準のコアブロックには、他に以下のようなものがあります(一部のみ掲載)。

'core/paragraph',           // 段落
'core/heading',             // 見出し
'core/image',               // 画像
'core/quote',               // 引用
'core/gallery',             // ギャラリー
'core/list',                // リスト
'core/cover',               // カバー
'core/video',               // 動画
'core/code',                // ソースコード
'core/freeform',            // クラシック
'core/html',                // カスタムHTML
'core/preformatted',        // 整形済み
'core/table',               // テーブル
'core/columns',             // カラム
'core/media-text',          // メディアと文章

参考

https://github.com/WordPress/gutenberg/issues/9811