僕たちはそろそろカスタムブロック開発の後方互換が辛い問題に立ち向かわなければいけない。【サンプルコード付き】

git clone https://github.com/vektor-inc/block-test-kit.git && cd block-test-kit
npm install
npm start

npm run test-unit

PASS  test/integration/full-content/full-content.test.js
  full post content fixture
    ✓ block-test-kit__alert (19ms
    ✓ should be present for each block (1ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        4.333s
Ran all test suites matching /test\/integration\/full-content\/full-content.test.js/i.

import { __ } from '@wordpress/i18n';
import { PanelBody, SelectControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor';

import './editor.scss';

export default function AlertEdit({ attributes, setAttributes }) {

	const { style, content } = attributes;

	const blockProps = useBlockProps( {
		className: `alert alert-${style}`,
	} );

	return (
		<Fragment>
			<InspectorControls>
				<PanelBody title={__('Style Settings', 'block-test-kit')}>
					<SelectControl
						value={style}
						onChange={(value) => setAttributes({ style: value })}
						options={[
							{ label: __('Info', 'block-test-kit'), value: 'info' },
							{
								label: __('Danger', 'block-test-kit'),
								value: 'danger',
							},
						]}
					/>
				</PanelBody>
			</InspectorControls>
			<div { ...blockProps }>
				<h3>{__('Alert Block', 'block-test-kit')}</h3>  // 👈 タイトル追加
				<RichText
					tagName="p"
					onChange={ (value) => setAttributes({ content: value }) }
					value={content}
				/>
			</div>
		</Fragment>
	);
}

import { __ } from '@wordpress/i18n';
import { RichText, useBlockProps } from '@wordpress/block-editor';

export default function save({ attributes }) {

	const { style, content } = attributes;

	return (
		<div { ...useBlockProps.save( { className: `alert alert-${style}`} ) }>
			<h3>{__('Alert Block', 'block-test-kit')}</h3>  // 👈 タイトル追加
			<RichText.Content tagName={'p'} value={content} />
		</div>
	);
}

npm run test-unit

export const settings = {
	title: __('Alert', 'block-test-kit'),
	icon: 'smiley',
	save,
	edit,
	// deprecated, 👈 コメントアウトを外す
};

mv test/e2e-tests/fixtures/blocks/block-test-kit__alert.html test/e2e-tests/fixtures/blocks/block-test-kit__alert__deprecated.html

touch test/e2e-tests/fixtures/blocks/block-test-kit__alert.html 

<!-- wp:block-test-kit/alert -->
<div class="wp-block-block-test-kit-alert alert alert-info"><h3>Alert Block</h3><p>Hello World!</p></div>
<!-- /wp:block-test-kit/alert -->

npm run fixtures:regenerate test/integration/full-content/full-content.test.js

npm run test-unit

 PASS  test/integration/full-content/full-content.test.js
  full post content fixture
    ✓ block-test-kit__alert (18ms)
    ✓ block-test-kit__alert__deprecated (9ms)
    ✓ should be present for each block (1ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        2.564s, estimated 4s