この記事は最後に更新してから1年以上経過しています。

テーブルブロックを定形に整える

説明

ブロックエディターについて調べていると、「段落ブロックをもう少しカスタマイズした」で使ったRichTextShortcutとは別にショートカットキーを使うためのKeyboardShortcutsが見つかった。今回はこのKeyboardShortcutsを使ってテーブルブロックを定形に整える仕組みを考えてみた。

ショートカットキーの適用範囲

参考にした記事は「KeyboardShortcuts(英語)」である。サンプルコードではパラメータのshortcutsに連想配列(オブジェクトを指定し、そのキーにショートカットキーの組み合わせを示す文字列を、その値としてコールバック関数を指定しているようだ。

今回のショートカットキーの実装は、「前回」のJavaScriptを拡張する。具体的に追加した部分が、赤字・青字の部分となる。

( function ( wp ) {
	var el = wp.element.createElement;

	const extendCoreBlocks = wp.compose.createHigherOrderComponent(
		function ( BlockEdit ) {
			return function ( props ) {
				const {
					name,
					attributes,
					setAttributes,
					isSelected,
				} = props;

				if ( isSelected && 'core/table' === name ) {
					attributes.column1_th = false;

					if ( 0 < attributes.body.length && 'string' === typeof attributes.body[0].cells[0].tag ) {
						attributes.column1_th = ( 'th' === attributes.body[0].cells[0].tag );
					}

					function onToggleColumn1() {
						let newBody = attributes.body;
						for ( let row = 0; row  select( 'core/editor' ).getCurrentPostType(),
						[]
					);
					const [ meta, setMeta ] = wp.coreData.useEntityProp( 'postType', postType, 'meta' );

					if ( 'post' === postType  &&
						2 <= attributes.body.length &&
						2 <= attributes.body[0].cells.length &&
						( meta['item_addr'] !== attributes.body[0].cells[1].content ||
						meta['item_price'] !== attributes.body[1].cells[1].content ) ) {
						setMeta( { ...meta,
							'item_addr': attributes.body[0].cells[1].content,
							'item_price': attributes.body[1].cells[1].content
						} );
					}

					attributes.regular_headings = false;
					if ( 2 <= attributes.body.length &&
						( attributes.body[0].cells[0].content == '住所' &&
						attributes.body[1].cells[0].content == '価格' ) ) {
						attributes.regular_headings = true;
					}

					function setRegularHeadings( event ) {
						let newBody = attributes.body;
						if ( ! attributes.regular_headings ) {
							newBody[0].cells[0].content = '住所';
							newBody[1].cells[0].content = '価格';
						}

						setAttributes( {
							regular_headings: ! attributes.regular_headings,
							body: newBody,
						} );
					}

					return el(
						wp.element.Fragment,
						{},
						el( BlockEdit, props ),
						el(
							wp.components.KeyboardShortcuts,
							{
								bindGlobal: true,
								shortcuts: {
									'mod+q': setRegularHeadings
								}
							}
						),
						el(
							wp.blockEditor.InspectorControls,
							{},
							el(
								wp.components.PanelBody,
								{
									title: 'その他の設定',
									initialOpen: true,
								},
								el(
									wp.components.ToggleControl,
									{
										label: 'tbody内の第1列をth要素にする',
										help: attributes.column1_th?
											'第1列はth要素。': '第1列はtd要素。',
										checked: attributes.column1_th,
										onChange: onToggleColumn1,
									}
								)
							)
						)
					);
				}
				return el( BlockEdit, props );
			};
		},
		'extendCoreBlocksControl'
	);

	wp.hooks.addFilter(
		'editor.BlockEdit',
		'core-extend/table-block',
		extendCoreBlocks
	);
} )( window.wp );

まずはコード上の前後が逆になってしまうが、KeyboardShortcutsの要素を追加するところ。サンプルコードから変更した点は、青字のbindGlobalの指定になる。テーブルブロックは、セルにRichTextコンポーネントを内蔵しており、この指定がないと指定したコールバック関数が呼び出されない。ショートカットキーを指定してコールバック関数が呼び出されない場合は、まずbindGlobalの指定を確認するとよいだろう。

shortcutsに指定した連想配列のキー部分は、ここでは'mod+q'としている。「mod」はWindowsのCtrlキー(MacのCommandキー)を示すもので、この場合はCtrlキーとQキーの組み合わせとなる。またこのキーの値部分にはコールバック関数を指定している。このようなケースでは無名関数を指定することがあると思うが、そうするとコンポーネントのアンマウント時にそのコールバック関数の正しくアンマウントできなくなってしまうので、KeyboardShortcutsでは無名関数を指定しないようにしたい。

コールバック関数となるsetRegularHeadings関数では、テーブルブロックのtbody部分を示す属性データのbodyに対し、その1行目・第1カラムのテキストに'住所'を、2行目・第1カラムのテキストに'価格'を指定し、setAttributes関数で更新している。なお、はじめはbodyのみを更新していたのだが、それだと変更した内容はすぐにエディター画面に反映されないことがあった。この問題を解決するため、属性としてregular_headingsを追加し、青字の部分によってその値を更新することで、すぐにエディター画面に反映できるようになった(バージョン5.8.2)。


今回はテーブルブロックの入力の手間を軽減する手段として、ショートカットキーにより定形に整えることを実装してみた。上記ではテキストの差し替えにとどめているが、行・列数や揃え方も同時に行うことで編集効率を向上できる。複数の定型パターンがある場合はツールバーとの併用になると思うが、キーの組み合わせ1回で実現できる手軽さは魅力がある。

さてショートカットキーは、ブラウザが標準で指定しているもの、ブロックエディターや各ブロックが指定しているものがあり、使用できるキーの組み合わせは限定される。各ブロックで使用していないショートカットキーの一覧はどこかに載ってないだろうか。。。


最終更新 : 2021年12月27日 15:48

お勧め

get_next_image_link(2021年7月25日 更新)

string get_next_image_link( [ string | int[] $size = 'thumbnail' [ , string | false $text = false ] ] )
次の添付ファイルへのリンクを取得する。

wp_after_insert_post(2020年12月11日 更新)

void wp_after_insert_post( int | WP_Post $post, bool $update, WP_Post $post_before )
投稿情報を保存した後にアクションを実行する。

wp_save_post_revision(2024年1月10日 更新)

int | WP_Error | void wp_save_post_revision( int $post_id )
現状の投稿のリビジョンを作成する。

wp_debug_backtrace_summary(2012年6月15日 更新)

mixed wp_debug_backtrace_summary( [ string $ignore_class = null [ , int $skip_frames = 0 [ , bool $pretty = true ] ] ] )
デバッグ用の呼び出し情報を取得する。

nocache_headers(2018年5月27日 更新)

void nocache_headers( )
ブラウザのキャッシュを無効にするHTTPヘッダーを出力する。