メタボックスを使わずにカスタムフィールドの値を追加・更新・削除する方法（リアルタイムコラボレーション対応）

add_action( 'init', function() {
	remove_post_type_support( 'post', 'custom-fields' );
} );

function pwcn_meta_panel_js_init(){
	wp_enqueue_script(
		'pwcn-meta-panel-js',
		get_template_directory_uri() . '/pwcn-metapanel.js', 
		[ 'wp-plugins', 'wp-edit-post', 'wp-element', 'wp-components', 'wp-data', 'wp-i18n' ],
		filemtime( get_template_directory() . '/pwcn-metapanel.js' )
	);
}
add_action('enqueue_block_editor_assets','pwcn_meta_panel_js_init');

/*** テキストのサンプル ***/
add_action( 'init', function() {
	register_post_meta( 'post', 'my_custom_text', [
		'show_in_rest' => true,      // これでREST APIの "meta" 内に出現する
		'single'       => true,
		'type'         => 'string',
		'auth_callback' => function() {
			return current_user_can( 'edit_posts' );
		},
	] );
} );

//テキストボックスの場合のJS
(function (wp) {
	/*** 必要な関数やツールの準備 ***/
	// Reactの要素を作成するための関数（PHPのHTML出力に相当する役割）
		var el = wp.element.createElement;
	// 作成したパネルをWordPressのエディターに正式に登録するための関数
		var registerPlugin = wp.plugins.registerPlugin;
	// 投稿設定サイドバー（右側の「投稿」タブ）の中に新しいパネル（アコーディオン）を作るための部品
		var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel || wp.editPost.PluginDocumentSettingPanel;
	// データベース（メタデータ）から現在の値を取得するための「読み込み」用ツール
	var useSelect = wp.data.useSelect;
	// 入力された値をデータベースへ反映（ dispatch ）するための「書き込み」用ツール
	var useDispatch = wp.data.useDispatch;
	// 1行のテキスト入力欄を表示する
	var TextControl = wp.components.TextControl;

	/*** メタパネルの定義 ***/
	var MyCustomPanel = function () { //MyCustomPanelという名前の領域にパネルを追加する
		// 1. 現在のメタデータを取得
		var meta = useSelect(function (select) {
			return select('core/editor').getEditedPostAttribute('meta') || {};
		}, []);

		// 2. 更新用関数を取得
		var { editPost } = useDispatch('core/editor');

		return el(
			PluginDocumentSettingPanel,
			{
				//パネルの名前、文字列、アイコンを指定
				//nameはサイト内で一意である必要がある点に注意
				name: 'my-custom-panel',
				title: 'テキストパネル',
				icon: 'admin-generic',
			},
			//TextControl(文字列)として処理
			el(TextControl, {
				//入力欄の上に表示する説明
				label: '文字列', 
				//register_post_metaの第一引数でmy_custom_textという名前をつけたフィールドの値を表示
				value: meta['my_custom_text'] || '',
				__next40pxDefaultSize: true,
				onChange: function (newValue) {
					// 3. メタデータの特定キーだけを上書きして送信
					editPost({
						meta: {
							//register_post_metaの第一引数でmy_custom_textという名前をつけたフィールドを更新
							my_custom_text: newValue
						}
					});
				}
			})
		);
	};

	//MyCustomPanelという領域にmy-custom-panel-pluginという名前のパネルを出力する
	//領域やパネル名は一意である必要がある点に注意
	registerPlugin('my-custom-panel-plugin', { render: MyCustomPanel });

})(window.wp);

/*** テキストエリアのサンプル ***/
add_action( 'init', function() {
	register_post_meta( 'post', 'my_custom_text_area', [
		'show_in_rest' => true,      // これでREST APIの "meta" 内に出現する
		'single'       => true,
		'type'         => 'string',
		'auth_callback' => function() {
			return current_user_can( 'edit_posts' );
		},
	] );
} );

//テキストエリアの場合のJS（入力文字列カウント付き）
(function (wp) {
	var el = wp.element.createElement;
	var registerPlugin = wp.plugins.registerPlugin;
	var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel || wp.editPost.PluginDocumentSettingPanel;
	var useSelect = wp.data.useSelect;
	var useDispatch = wp.data.useDispatch;
	var TextareaControl = wp.components.TextareaControl; //テキストエリアの場合

	var MyCustomPanel = function () {
		// 1. 現在のメタデータを取得
		var meta = useSelect(function (select) {
			return select('core/editor').getEditedPostAttribute('meta') || {};
		}, []);

		var { editPost } = useDispatch('core/editor');

		// 現在の値を定数に入れておく（文字数計算用）
		var currentValue = meta['my_custom_text_area'] || '';
		var charCount = currentValue.length;

		return el(
			PluginDocumentSettingPanel,
			{
				name: 'my-custom-textarea-counter',
				title: 'テキストエリアパネル',
				icon: 'edit',
			},
			el('div', {},
				// メインのテキストエリア
				el(TextareaControl, {
					label: '長文文字列',
					value: currentValue,
					rows: 5, //行数
					onChange: function (newValue) {
						editPost({
							meta: { my_custom_text_area: newValue }
						});
					}
				}),
				// 文字数カウンターの表示
				el('div', { 
					style: { 
						textAlign: 'right', 
						fontSize: '12px', 
						color: charCount > 120 ? '#d94f4f' : '#666', // 120文字を超えたら赤くする例
						marginTop: '0', // TextareaControlとの隙間を調整
						paddingBottom: '10px'
					} 
				},
				charCount + ' 文字'
				)
			)
		);
	};

	registerPlugin('my-custom-textarea-counter-plugin', { render: MyCustomPanel });

})(window.wp);

/*** チェックボックスのサンプル ***/
add_action( 'init', function() {
	register_post_meta( 'post', 'my_custom_check', [
		'show_in_rest' => true,
		'single'       => true,
		'type'         => 'boolean', // 真偽値として定義
		'auth_callback' => function() {
			return current_user_can( 'edit_posts' );
		},
	] );
} );

//チェックボックスのJS
(function (wp) {
	var el = wp.element.createElement;
	var registerPlugin = wp.plugins.registerPlugin;
	var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel || wp.editPost.PluginDocumentSettingPanel;
	var CheckboxControl = wp.components.CheckboxControl;
	var useSelect = wp.data.useSelect;
	var useDispatch = wp.data.useDispatch;

	var MyCustomPanel = function () {
		var meta = useSelect(function (select) {
			return select('core/editor').getEditedPostAttribute('meta') || {};
		}, []);

		var { editPost } = useDispatch('core/editor');

		return el(
			PluginDocumentSettingPanel,
			{
				name: 'my-custom-check-panel',
				title: '機能設定',
				icon: 'admin-settings',
			},
			el(CheckboxControl, {
				label: 'この機能を有効にする',
				help: 'チェックを入れるとフロントエンドで特定の機能が動作します。',
				checked: !!meta['my_custom_check'], // 二重否定(!!)で確実に boolean 型に変換
				onChange: function (newValue) {
					editPost({
						meta: {
							my_custom_check: newValue // newValue には true/false が入る
						}
					});
				}
			})
		);
	};

	registerPlugin('my-custom-check-plugin', { render: MyCustomPanel });

})(window.wp);

/*** ラジオボタンのサンプル ***/
add_action( 'init', function() {
	register_post_meta( 'post', 'my_custom_button', [
		'show_in_rest' => true,
		'single'       => true,
		'type'         => 'string', // ラジオボタンの値（'option1'など）を保存するためstring
		'auth_callback' => function() {
			return current_user_can( 'edit_posts' );
		},
	] );
} );

//ラジオボタンの場合のJS
(function (wp) {
	var el = wp.element.createElement;
	var registerPlugin = wp.plugins.registerPlugin;
	var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel || wp.editPost.PluginDocumentSettingPanel;
	var useSelect = wp.data.useSelect;
 	var useDispatch = wp.data.useDispatch;
	var RadioControl = wp.components.RadioControl; // ラジオボタン用

	var MyCustomPanel = function () {
		var meta = useSelect(function (select) {
			return select('core/editor').getEditedPostAttribute('meta') || {};
		}, []);

		var { editPost } = useDispatch('core/editor');

		return el(
			PluginDocumentSettingPanel,
			{
				name: 'my-custom-radio-panel',
				title: 'ボタン設定パネル',
				icon: 'admin-settings',
			},
			el(RadioControl, {
				label: '表示モードを選択',
				selected: meta['my_custom_button'] || 'default', // 現在の値（未設定ならdefault）
				options: [
					{ label: '標準（Default）', value: 'default' },
					{ label: '目立たせる（Highlight）', value: 'highlight' },
					{ label: '隠す（Hidden）', value: 'hidden' },
				],
				onChange: function (newValue) {
					editPost({
						meta: {
							my_custom_button: newValue
						}
					});
				}
			})
		);
	};

	registerPlugin('my-custom-radio-plugin', { render: MyCustomPanel });

})(window.wp);

/*** セレクトボックスのサンプル ***/
add_action( 'init', function() {
	register_post_meta( 'post', 'my_custom_selection', [
		'show_in_rest' => true,
		'single'       => true,
		'type'         => 'string',
		'auth_callback' => function() {
			return current_user_can( 'edit_posts' );
		},
	] );
} );

//セレクトボックスのJS
(function (wp) {
	var el = wp.element.createElement;
	var registerPlugin = wp.plugins.registerPlugin;
	var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel || wp.editPost.PluginDocumentSettingPanel;
	var SelectControl = wp.components.SelectControl; // ここを変更
	var useSelect = wp.data.useSelect;
	var useDispatch = wp.data.useDispatch;

	var MyCustomPanel = function () {
		var meta = useSelect(function (select) {
			return select('core/editor').getEditedPostAttribute('meta') || {};
		}, []);

		var { editPost } = useDispatch('core/editor');

		return el(
			PluginDocumentSettingPanel,
			{
				name: 'my-custom-select-panel',
				title: '表示設定',
				icon: 'admin-settings',
			},
			el(SelectControl, {
				label: '表示モードを選択',
				// RadioControlでは "selected" でしたが、SelectControlでは "value" を使います
				value: meta['my_custom_selection'] || 'default', 
				options: [
					{ label: '選択１（Default）', value: 'default' },
					{ label: '選択２', value: 'highlight' },
					{ label: '選択３', value: 'hidden' },
				],
				onChange: function (newValue) {
					editPost({
						meta: {
							my_custom_selection: newValue
						}
					});
				}
			})
		);
	};

	registerPlugin('my-custom-select-plugin', { render: MyCustomPanel });

})(window.wp);

//メッセージのみを表示したい場合のJS
(function (wp) {
	var el = wp.element.createElement;
	var Notice = wp.components.Notice; //WP標準の警告や通知などの背景スタイルを使いたい場合
	var ExternalLink = wp.components.ExternalLink; //外部ページへのリンクを使いたい場合は追加
	var registerPlugin = wp.plugins.registerPlugin;
	var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel || wp.editPost.PluginDocumentSettingPanel;

	var MyNoticePanel = function () {
		return el(
			PluginDocumentSettingPanel,
			{
				name: 'my-notice-panel',
				title: '【重要】設定上の注意',
				icon: 'info-outline', // インフォメーションアイコン
			},
			// パネルの内部コンテンツ
			el('div', { style: { padding: '10px 0' } },
				el('p', { style: { fontSize: '13px', lineHeight: '1.5', color: '#1e1e1e' } },
					'説明文のみを出力するパネルです',
				el('br'),
                    '文字列やリンクなどいろいろなことを表示させることができます'
				),
				el('p', { style: { marginTop: '10px', fontWeight: '600' } },
					'⚠️ 注意:',
					el('br'),
					'JSの作法に従ってHTMLタグを使って記述していきます'
				),
				el(ExternalLink, { href: 'https://example.com/docs' }, '詳細なマニュアルはこちら'),
				el(Notice, { 
					status: 'warning', // 'error', 'info', 'success', 'warning'
					isDismissible: false // 消去ボタンを隠す
				}, '内部にこのような警告文を表示することもできます')
			)
		);
	};

	registerPlugin('my-notice-panel-plugin', { render: MyNoticePanel });

})(window.wp);

/*** テキストのサンプル ***/
add_action( 'init', function() {
	register_post_meta( 'post', 'my_custom_text', [
		'show_in_rest' => true,      // これでREST APIの "meta" 内に出現する
		'single'       => true,
		'type'         => 'string',
		'auth_callback' => function() {
			return current_user_can( 'edit_posts' );
		},
	] );
} );

/*** テキストのサンプル ***/
function pwcn_register_my_custon_text_field(){
	register_post_meta( 'post', 'my_custom_text', [
		'show_in_rest' => true,      // これでREST APIの "meta" 内に出現する
		'single'       => true,
		'type'         => 'string',
		'auth_callback' => function() {
			return current_user_can( 'edit_posts' );
		},
	] );
add_action('init','pwcn_register_my_custon_text_field');