【WordPress】BlockPreview の使い方｜ブロックの見た目をエディター内でプレビュー表示する方法

import { useBlockProps, BlockPreview } from '@wordpress/block-editor';
import { createBlock } from '@wordpress/blocks';

export default function Edit() {
	// プレビューしたいブロックの構成を作る
	const previewBlocks = [
		createBlock( 'core/heading', { content: 'キャンペーンのお知らせ', level: 3 } ),
		createBlock( 'core/paragraph', { content: '9月30日まで実施しています。' } ),
	];

	return (
		<div { ...useBlockProps() }>
			<BlockPreview blocks={ previewBlocks } viewportWidth={ 800 } />
		</div>
	);
}

import { createBlock } from '@wordpress/blocks';

export const LAYOUTS = [
	{
		name: 'two-columns',
		label: '2カラム',
		// 呼び出すたびに新しいブロックを作る（使い回すと clientId が重複する）
		getBlocks: () => [
			createBlock( 'core/columns', {}, [
				createBlock( 'core/column', {}, [
					createBlock( 'core/heading', { content: '左の見出し', level: 3 } ),
				] ),
				createBlock( 'core/column', {}, [
					createBlock( 'core/paragraph', { content: '右側の説明文です。' } ),
				] ),
			] ),
		],
	},
	{
		name: 'stacked',
		label: '縦並び',
		getBlocks: () => [
			createBlock( 'core/heading', { content: '見出し', level: 3 } ),
			createBlock( 'core/paragraph', { content: '本文が入ります。' } ),
			createBlock( 'core/buttons', {}, [ createBlock( 'core/button' ) ] ),
		],
	},
];

import {
	useBlockProps,
	useInnerBlocksProps,
	BlockPreview,
	store as blockEditorStore,
} from '@wordpress/block-editor';
import { Placeholder, Button } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { LAYOUTS } from './layouts';

export default function Edit( { clientId } ) {
	const blockProps = useBlockProps();
	const innerBlocksProps = useInnerBlocksProps( blockProps );
	const { replaceInnerBlocks } = useDispatch( blockEditorStore );

	// 中身が空かどうかを判定する
	const hasInnerBlocks = useSelect(
		( select ) =>
			select( blockEditorStore ).getBlocks( clientId ).length > 0,
		[ clientId ]
	);

	if ( hasInnerBlocks ) {
		return <div { ...innerBlocksProps } />;
	}

	return (
		<div { ...blockProps }>
			<Placeholder label={ __( 'レイアウトを選択', 'my-blocks' ) }>
				<div className="my-layout-picker">
					{ LAYOUTS.map( ( layout ) => (
						<Button
							key={ layout.name }
							className="my-layout-picker__item"
							onClick={ () =>
								replaceInnerBlocks( clientId, layout.getBlocks(), false )
							}
						>
							<BlockPreview
								blocks={ layout.getBlocks() }
								viewportWidth={ 800 }
							/>
							<span>{ layout.label }</span>
						</Button>
					) ) }
				</div>
			</Placeholder>
		</div>
	);
}

.my-layout-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  width: 100%;
}

.my-layout-picker__item {
  display: block;
  height: auto;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;

  &:hover {
    border-color: var(--wp-admin-theme-color);
  }
}

import { InspectorControls, BlockPreview } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';
import { createBlock } from '@wordpress/blocks';
import { useMemo } from '@wordpress/element';

// attributes.style が変わるたびにプレビュー用のブロックを作り直す
const preview = useMemo(
	() =>
		createBlock( 'core/quote', {
			value: `<p>${ attributes.sampleText }</p>`,
			className: `is-style-${ attributes.style }`,
		} ),
	[ attributes.sampleText, attributes.style ]
);

return (
	<InspectorControls>
		<PanelBody title="表示スタイル">
			<SelectControl
				value={ attributes.style }
				options={ [
					{ label: 'デフォルト', value: 'default' },
					{ label: '大きめ', value: 'large' },
				] }
				onChange={ ( style ) => setAttributes( { style } ) }
			/>
			<BlockPreview blocks={ preview } viewportWidth={ 600 } />
		</PanelBody>
	</InspectorControls>
);

import { parse } from '@wordpress/blocks';

// 保存済みのブロックコメント付き HTML から復元する
const blocks = parse( savedContent );

<BlockPreview blocks={ blocks } />;