GutenbergのブロックをAdvanced Custom Fields的に使ってみる

<?php
/**
 * Plugin Name: My Block
 */

function my_block_example() {

	// ブロック用のスクリプトを登録
	wp_register_script(
		'my-block-script-stores',
		plugins_url( 'block-stores.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element', 'wp-editor' ),
		'1.0.0',
		true
	);

	// ブロック用のスクリプトを登録
	wp_register_script(
		'my-block-script-store',
		plugins_url( 'block-store.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element', 'wp-editor' ),
		'1.0.0',
		true
	);

	// CSSの読み込み割愛
	// 「my-block-style-editor」と「my-block-style-front」の読み込みが入ります。

	// ブロックの定義を登録
	register_block_type(
		'my-block/my-stores',
		array(
			'editor_script' => 'my-block-script-stores',
			'editor_style'  => 'my-block-style-editor',
			'style'         => 'my-block-style-front',
		)
	);

	// ブロックの定義を登録
	register_block_type(
		'my-block/my-store',
		array(
			'editor_script' => 'my-block-script-store',
			'editor_style'  => 'my-block-style-editor',
			'style'         => 'my-block-style-front',
		)
	);
add_action( 'init', 'my_block_example' );

( function( blocks, editor, element, blockEditor ) {
	var el = element.createElement;
	var InnerBlocks = blockEditor.InnerBlocks;
	var RichTextTitle = editor.RichText;
	var RichTextContent = editor.RichText;

	const MY_STORE_IMAGE = [
    [ 'core/image', {} ],
	];

	blocks.registerBlockType( 'my-block/my-store', {
			title: '店舗情報',
			category: 'layout',
			attributes: {
				title: {
					type: 'array',
					source: 'children',
					selector: '.store-title',
				},
				content: {
					type: 'array',
					source: 'children',
					selector: '.store-content',
				},
			},
			edit: function( props ) {
				var title = props.attributes.title;
				var content = props.attributes.content;

		    function onChangeTitle( newTitle ) {
			    props.setAttributes( { title: newTitle } );
				}

		    function onChangeContent( newContent ) {
			    props.setAttributes( { content: newContent } );
				}

				return el(
					'div',
					{ className: 'store' },
					el( 'div',
						{ className: 'store-img' },
						el( InnerBlocks,
							{
								template: MY_STORE_IMAGE,
								templateLock: "all",
							} )
					),
					el( 'div',
						{ className: 'store-body' },
						el( RichTextTitle, {
							tagName: 'div',
							className: 'store-title',
							placeholder: '店舗タイトル',
							onChange: onChangeTitle,
							value: title,
						} ),
						el( RichTextContent, {
							tagName: 'p',
							className: 'store-content',
							placeholder: '店舗紹介文',
							onChange: onChangeContent,
							value: content,
						} ),
					)
				)
			},

			save: function( props ) {

					return el(
						'div',
						{
							className: 'store',
						},
							el( 'div',
								{
									className: 'store-img'
								},
								el( InnerBlocks.Content )
							),
							el( 'div',
								{
									className: 'store-body',
									value: props.attributes.body
								},
								el( RichTextTitle.Content, {
									tagName: 'div',
									className: 'store-title',
									value: props.attributes.title,
								} ),
								el( RichTextContent.Content, {
									tagName: 'p',
									className: 'store-content',
									value: props.attributes.content,
								} ),
							)
					);
			},
	} );
} (
	window.wp.blocks,
	window.wp.editor,
	window.wp.element,
	window.wp.blockEditor,
) );

( function( blocks, element, blockEditor ) {
	var el = element.createElement;
	var InnerBlocks = blockEditor.InnerBlocks;
	const ALLOWED_BLOCKS = [ 'my-block/my-store' ]

	blocks.registerBlockType( 'my-block/my-stores', {
			title: '店舗リスト',
			category: 'layout',

			edit: function( props ) {
					return el(
							'div',
							{
								className: props.className,
							},
							el( InnerBlocks,
								{
									allowedBlocks: ALLOWED_BLOCKS,
									templateLock: false,
								}
							)
					);
			},

			save: function( props ) {
					return el(
							'div',
							{ className: props.className },
							el( InnerBlocks.Content )
					);
			},
	} );
} (
	window.wp.blocks,
	window.wp.element,
	window.wp.blockEditor,
) );

function my_post_type_shop() {
	register_post_type(
		'shop',
		[
			'label'         => '店舗',
			'public'        => true,
			'show_in_rest'  => true,
			'template'      => [
				[
					'my-block/my-stores',
					[
						'placeholder' => '店舗情報を入れてください',
					],
				],
			],
			'template_lock' => 'insert',
		]
	);
};
add_action( 'init', 'my_post_type_shop' );