この記事は最後に更新してから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日 更新)
wp_after_insert_post(2020年12月11日 更新)
wp_save_post_revision(2024年1月10日 更新)
wp_debug_backtrace_summary(2012年6月15日 更新)
nocache_headers(2018年5月27日 更新)