「ブロックのリカバリーを試行」ボタン

Gutenbergのカスタムブロック（静的ブロック）のアップデート方法についてのメモです。
アップデートで静的ブロック（save.js）に変更を加えると、「ブロックのリカバリーボタンを試行」ボタンが表示されます。非推奨バージョンを提供した場合、「ブロックのリカバリーボタンを試行」ボタンは表示されず、ユーザーがブロックを編集したタイミングでアップデートの変更が反映されるようになります。

基本的な方法

Block Development Examples のサンプルブロック（recipe-card-744e8a）を例にしています。

recipe-card-744e8a

• block.json
• index.js・・・2行追記。
• edit.js
• save.js
• style.scss
• deprecated.js・・・ファイルを新規追加。

index.jsファイル：　赤色二行追記。

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import save from './save';
import metadata from './block.json';
import deprecated from './deprecated';
registerBlockType( metadata.name, {
	edit: Edit,
	save,
	deprecated,
} );

deprecated.js：　新規追加（定型）。

import {} from '@wordpress/block-editor';
const v1 = {
	attributes: {},
	supports: {},
	save() {},
	migrate() {},　// オプション
	isEligible() {},　// オプション
};
const v2 = {};
const v3 = {};
export default [ v3, v2, v1 ];

recipe-card-744e8aの実例

index.jsファイル

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import save from './save';
import metadata from './block.json';
import deprecated from './deprecated';
registerBlockType( metadata.name, {
	edit: Edit,
	save,
	deprecated,
} );

deprecated.jsファイル

import { __ } from '@wordpress/i18n';
import { RichText, useBlockProps } from '@wordpress/block-editor';
const v1 = {
	attributes: {
		title: {
			type: 'string',
			source: 'html',
			selector: 'h2',
		},
		mediaID: {
			type: 'number',
		},
		mediaURL: {
			type: 'string',
			source: 'attribute',
			selector: 'img',
			attribute: 'src',
		},
		ingredients: {
			type: 'string',
			source: 'html',
			selector: '.ingredients',
		},
		instructions: {
			type: 'string',
			source: 'html',
			selector: '.steps',
		},
	},
	save( props ) {
		const {
			attributes: { title, mediaURL, ingredients, instructions },
		} = props;
		const blockProps = useBlockProps.save();
		return (
			<div { ...blockProps }>
				<RichText.Content tagName="h2" value={ title } />
				{ mediaURL && (
					<img
						className="recipe-image"
						src={ mediaURL }
						alt={ __(
							'Recipe Image',
							'block-development-examples'
						) }
					/>
				) }
				<h3>{ __( 'Ingredients', 'block-development-examples' ) }</h3>
				<RichText.Content
					tagName="ul"
					className="ingredients"
					value={ ingredients }
				/>
				<h3>{ __( 'Instructions', 'block-development-examples' ) }</h3>
				<RichText.Content
					tagName="div"
					className="steps"
					value={ instructions }
				/>
			</div>
		);
	},
};
const v2 = {};
const v3 = {};
export default [ v3, v2, v1 ];

migrate関数（オプション、省略可）

ブロックを移行する際に、属性の変更、innerBlocks の変更等をする場合に使用します。

isEligible関数（オプション、省略可）

ブロックは複数の非推奨バージョンを持つことができます。非推奨バージョンは、「解析されたブロックの現在の状態が無効である場合」、または「非推奨バージョンがtrueを返すisEligible関数を定義している場合」に試行されます。