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

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() {
	// 対象にしたい投稿タイプを配列で指定
	$post_types = ['post']; 

	//メタキーを指定
	$meta_key = 'my_custom_text';

	foreach ( $post_types as $post_type ) {
		register_post_meta( 
			$post_type, 
			$meta_key, 
			[
				'show_in_rest'  => true,
				'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.メタキーが定義されていない投稿タイプならフォームを非表示にする
		// register_post_metaの第二引数で指定したメタキーを指定
		if (meta['my_custom_text'] === undefined) {
			return null; 
		}

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

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

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

})(window.wp);

//テキストボックスの場合の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 useSelect = wp.data.useSelect; // 投稿タイプ取得

	/*** メタパネルの定義 ***/
	var MyCustomPanel = function () { //MyCustomPanelという名前の領域にパネルを追加する
		/*** ここを追加 ***/
			//指定した投稿タイプで出力
			//現在の投稿タイプを取得
			var postType = useSelect(function (select) {
				return select('core/editor').getCurrentPostType();
			}, []);

			// 表示を許可する投稿タイプのリスト（配列）
			var allowedPostTypes = ['post','page']; // 投稿タイプを配列指定

			// リストに含まれていない場合は表示しない
			if (!allowedPostTypes.includes(postType)) {
				return null;
			}
		/*** ここまで追加 ***/

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

		// 2.メタキーが定義されていない投稿タイプならフォームを非表示にする
		// register_post_metaの第二引数で指定したメタキーを指定
		if (meta['my_custom_text'] === undefined) {
			return null; 
		}

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

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

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

})(window.wp);

/*** テキストのサンプル ***/
add_action( 'init', function() {
	// 対象にしたい投稿タイプを配列で指定
	$post_types = ['post']; 

	//メタキーを指定
	$meta_key = 'my_custom_text';

	foreach ( $post_types as $post_type ) {
		register_post_meta( 
			$post_type, 
			$meta_key, 
			[
				'show_in_rest'  => true,
				'single'        => true,
				'type'          => 'string',
				'auth_callback' => function() {
					return current_user_can( 'edit_posts' );
				},
			]
		);

	//スクリプトに渡すための文字列と翻訳可能文字列を紐づけて配列にする
	$localize_val = array(
		'title' => __('テキストパネル','text-domain'),
		'label' => __('文字列','text-domain'),
	);

	//wp_localize_scriptを使ってスクリプトへ配列を渡す
	wp_localize_script( $script_name , 'PwcnLocalizeText', $localize_val);

	}
} );

//テキストボックスの場合の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;

	//文字列（PHPのwp_localize_script()で渡した変数を受け取る）
	const T = PwcnLocalizeText;

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

		// 2.メタキーが定義されていない投稿タイプならフォームを非表示にする
		// register_post_metaの第二引数で指定したメタキーを指定
		if (meta['my_custom_text'] === undefined) {
			return null; 
		}

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

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

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

})(window.wp);

/*** テキストエリアのサンプル ***/
add_action( 'init', function() {
	// 対象にしたい投稿タイプを配列で指定
	$post_types = ['post']; 

	//メタキーを指定
	$meta_key = 'my_custom_text_area';

	foreach ( $post_types as $post_type ) {
		register_post_meta( 
			$post_type, 
			$meta_key, 
			[
				'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 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') || {};
		}, []);

		// 2.メタキーが定義されていない投稿タイプならフォームを非表示にする
		// register_post_metaの第二引数で指定したメタキーを指定
		if (meta['my_custom_text_area'] === undefined) {
			return null; 
		}

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

		// 現在の値を定数に入れておく（文字数計算用）
		//register_post_metaの第二引数で指定したメタキーを指定
		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({
							//register_post_metaの第二引数で指定したメタキーを指定
							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() {
	// 対象にしたい投稿タイプを配列で指定
	$post_types = ['post']; 

	//メタキーを指定
	$meta_key = 'my_custom_check';

	foreach ( $post_types as $post_type ) {
		register_post_meta( 
			$post_type, 
			$meta_key, 
			[
				'show_in_rest'  => true,
				'single'        => true,
				'type' => 'string', //JS側でtrue/falseの場合はboolean、1/空白の場合は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 CheckboxControl = wp.components.CheckboxControl;
	var useSelect = wp.data.useSelect;
	var useDispatch = wp.data.useDispatch;

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

		// 2.メタキーが定義されていない投稿タイプならフォームを非表示にする
		// register_post_metaの第二引数で指定したメタキーを指定
		if (meta['my_custom_check'] === undefined) {
			return null; 
		}

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

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

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

})(window.wp);

/*** ラジオボタンのサンプル ***/
add_action( 'init', function() {
	// 対象にしたい投稿タイプを配列で指定
	$post_types = ['post']; 

	//メタキーを指定
	$meta_key = 'my_custom_button';

	foreach ( $post_types as $post_type ) {
		register_post_meta( 
			$post_type, 
			$meta_key, 
			[
				'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 useSelect = wp.data.useSelect;
 	var useDispatch = wp.data.useDispatch;
	var RadioControl = wp.components.RadioControl; // ラジオボタン用

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

		// 2.メタキーが定義されていない投稿タイプならフォームを非表示にする
		// register_post_metaの第二引数で指定したメタキーを指定
		if (meta['my_custom_button'] === undefined) {
			return null; 
		}

		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: {
							//register_post_metaの第二引数で指定したメタキーを指定
							'my_custom_button': newValue
						}
					});
				}
			})
		);
	};

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

})(window.wp);

/*** セレクトボックスのサンプル ***/
add_action( 'init', function() {
	// 対象にしたい投稿タイプを配列で指定
	$post_types = ['post']; 

	//メタキーを指定
	$meta_key = 'my_custom_selection';

	foreach ( $post_types as $post_type ) {
		register_post_meta( 
			$post_type, 
			$meta_key, 
			[
				'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 () {
		// 1. 現在のメタデータを取得
		var meta = useSelect(function (select) {
			return select('core/editor').getEditedPostAttribute('meta') || {};
		}, []);

		// 2.メタキーが定義されていない投稿タイプならフォームを非表示にする
		// register_post_metaの第二引数で指定したメタキーを指定
		if (meta['my_custom_selection'] === undefined) {
			return null; 
		}

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

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

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

})(window.wp);

(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');