WordPress のブロックエディタ (Gutenberg) にカスタムブロックを組み込み、ブロックインサーターボタンで対象ブロックを挿入する際、プレビューでどのようなコンテンツが表示されるかチェックできますが、通常はエディタ側でブロックを挿入した直後の状態、または block.json の "example" プロパティにプレビュー用に用意した attributes や innerBlocks の内容を反映した状態でプレビューエリアにレンダリングされます。
しかし、外部ライブラリを利用したりサーバーサイドレンダリングを要する動的な表示を伴うブロックの場合、プレビューでは「プレビューが利用できません。」と表示されてどのようなコンテンツが表示されるかわからないケースがあります。
このようにブロックのプレビューが表示できない場合の代替画像を表示する方法をご紹介します。
プレビューモードの判定を可能にする
プレビュー用の画像を表示する場合、ブロックエディタ側 (edit.js) でプレビューによるレンダリングの有無を判定し、真である場合はブロックのレンダリングを行わず、任意の画像 (img) を返すようにします。
このプレビューによるレンダリングを判定するには、まず block.json にて "attributes" プロパティおよびプレビュー用の属性やインナーブロックを定義する "example" プロパティの "attributes" に "isPreviewMode": true を追加します。
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"version": "0.1.0",
"name": "my-plugin/some-block",
"title": "Some Block",
:
"attributes": {
isPreviewMode: {
type: "boolean",
default: false
}
:
},
"example": {
"attributes": {
"isPreviewMode": true
},
"viewportWidth": 800
},
:
}
これにより、ブロックの attributes から isPreviewMode プロパティを参照できるようになり、ブロックインサーターによるプレビューのレンダリングの場合は、isPreviewMode が true となり、edit.js (edit メソッド) にてプレビュー判定ができるようになります。
プレビューのビューポート幅の指定
プレビューを表示する際のブロックコンテンツ表示 (ビューポート) 幅は、"example" プロパティに "viewportWidth" を追加し、ピクセル値としての数値で指定できます。
この値は、ここではプレビュー用の画像のサイズ (幅) との兼ね合いで調整します。
プレビューモードの判定と画像の表示
あとは、edit メソッドにてプレビューによるレンダリングである場合は、冒頭にプレビュー用の画像 (img) を返すようにすることで不要なレンダリング処理をする前に画像のみを return してプレビューに利用させることができます。
import { useBlockProps } from '@wordpress/block-editor'
import previewImage from './images/preview.png';
const edit = props => {
const {
attributes: {
isPreviewMode,
:
},
className,
setAttributes,
} = props
// ブロックインサーターのプレビューによるレンダリングの場合
if ( isPreviewMode ) {
const blockProps = useBlockProps();
// 画像のみを return
return (
<div { ...blockProps }>
<img src={ previewImage } style={ { maxWidth: '100%', height: 'auto' } } />
</div>
);
}
// 以下にブロックのメインコード
:
retun (
<div { ...blockProps }>
:
</div>
);
}
export default edit;
上記のように edit メソッドの冒頭に isPreviewMode の判定を行うことで、以下のようにインサーターのプレビュー表示時に画像を表示できます。
