[ 解説動画あり ] WordPress 7.0 新機能紹介 PHPだけでブロックを作れるようになった機能を試してみる 〜 同期パターンとの違い

function gutenberg_register_php_only_blocks() {
    register_block_type(
        'my-plugin/example',
        array(
            'title'           => __( 'My Example Block', 'myplugin' ),
            'attributes'      => array(
                'title'   => array(
                    'label'   => __( 'Title', 'myplugin' ),
                    'type'    => 'string',
                    'default' => 'Hello World',
                ),
                'count'   => array(
                    'label'   => __( 'Count', 'myplugin' ),
                    'type'    => 'integer',
                    'default' => 5,
                ),
                'enabled' => array(
                    'label'   => __( 'Enabled?', 'myplugin' ),
                    'type'    => 'boolean',
                    'default' => true,
                ),
                'size'    => array(
                    'label'   => __( 'Size', 'myplugin' ),
                    'type'    => 'string',
                    'enum'    => array( 'small', 'medium', 'large' ),
                    'default' => 'medium',
                ),
            ),
            'render_callback' => function ( $attributes ) {
                return sprintf(
                    __( '<p>%s: %d items (%s)</p>', 'myplugin' ),
                    esc_html( $attributes['title'] ),
                    $attributes['count'],
                    $attributes['size']
                );
            },
            'supports'        => array(
                'autoRegister' => true,
            ),
        )
    );
}

add_action( 'init', 'gutenberg_register_php_only_blocks' );

<?php
/**
 * Plugin Name: My Plugin
 * Plugin URI:
 * Description: これは *** のプラグインです。
 * Version: 0.0.0
 * Requires at least: 6.0
 * Requires PHP: 7.4
 * License: GPL 2.0 or Later
 */

// ※ 子テーマのfunctions.php などに貼り付けるならここから下だけでOK /////////

/**
 * PHP のみで完結するブロックを登録する
 *
 * WordPress 7.0 で追加された supports.autoRegister を利用し、
 * block.json や JS 側の registerBlockType を書かずに、
 * PHP だけでブロック定義（属性・サイドバー UI・描画）を完結させる。
 *
 * @return void
 */
function my_gutenberg_register_php_only_blocks() {
	// register_block_type に第1引数でブロック名、第2引数で定義配列を渡す
	register_block_type(
		'my-plugin/example', // ブロックタイプ（識別スラッグみたいなもの）
		array(
			// エディター上で表示されるブロック名
			'title'           => '商品データ',
			// ブロックに持たせる属性。autoRegister=true により、
			// 各属性の type に応じたコントロール UI がサイドバーへ自動生成される
			'attributes'      => array(
				// 文字列属性 → テキスト入力
				'title'   => array(
					'label'   => '商品名',
					'type'    => 'string',
					'default' => 'Vektor Passport',
				),
				// 整数属性 → 数値入力
				'count'   => array(
					'label'   => '残数',
					'type'    => 'integer',
					'default' => 5,
				),
				// enum 付き文字列 → セレクトボックス（選択肢は enum の値）
				'size'    => array(
					'label'   => 'サイズ',
					'type'    => 'string',
					'enum'    => array( '小', '中', '大' ),
					'default' => '中',
				),
				// boolean 属性 → トグルスイッチ
				'on_sale' => array(
					'label'   => '販売中',
					'type'    => 'boolean',
					'default' => true,
				),
			),
			/*
			 * 実際に出力するブロックのPHP
			 *
			 * @param array $attributes attributes で定義したキーごとの値
			 * @return string フロント／エディターに出力する HTML
			 */
			'render_callback' => function ( $attributes ) {
				// 販売中の場合
				if ( $attributes['on_sale'] ) {
					// 項目名と属性値の組を縦に並べたテーブルとして組み立てる
					$content  = '<table>';
					// 商品名（title 属性）の行
					$content .= '<tr>';
					$content .= '<th class="text-left">商品名</th>';
					$content .= '<td>' . esc_html( $attributes['title'] ) . '</td>';
					$content .= '</tr>';
					// 残数（count 属性）の行
					$content .= '<tr>';
					$content .= '<th class="text-left">残数</th>';
					if ( $attributes['count'] > 0 ) {
						$count = esc_html( $attributes['count'] );
					} else {
						$count = '在庫なし';
					}
					$content .= '<td>' . $count . '</td>';
					$content .= '</tr>';
					// サイズ（size 属性）の行
					$content .= '<tr>';
					$content .= '<th class="text-left">サイズ</th>';
					$content .= '<td>' . esc_html( $attributes['size'] ) . '</td>';
					$content .= '</tr>';
					$content .= '</table>';
				} else {
					$content = '<p>この製品の販売は終了しました</p>';
				}

				return $content;
			},
			// このブロックが使うコアの編集機能を宣言する場所
			'supports'        => array(
				'autoRegister' => true, // block.json も JS 呼び出しも不要になる
			),
		)
	);
}
// init フックでブロックを登録するのが WP の慣例
add_action( 'init', 'my_gutenberg_register_php_only_blocks' );