この記事は最後に更新してから1年以上経過しています。
説明
ブロックエディターには文字入力を支援するAutocompleteがある。自作ブロックだけでなく既存のブロックに適用できるため、ブロックの利用シーンを踏まえた入力支援機能を追加できる。
Autocompleteの使い方
Autocompleteを使う場合、次のようにaddFilter関数を使う。
function setDateTimeCompleter( completers, blockName ) {
return blockName === 'core/paragraph' ?
[ ...completers, datetimeCompleter ] :
completers;
}
wp.hooks.addFilter(
'editor.Autocomplete.completers',
'core-ex/autocompleters/datetime',
setDateTimeCompleter
);
第3パラメータのsetDateTimeCompleter関数では、入力支援機能を適用するブロックを指定する。上記では標準の段落ブロック(core/paragraph)にのみ適用するようにしている。
入力支援機能の実態となるdatetimeCompleterオブジェクトは次の通り。
var datetimeCompleter = {
name: 'datetime',
triggerPrefix: 'now',
options: [
{ format: 'Y/m/d' },
{ format: 'Y年n月j日' },
{ format: 'm/d' },
{ format: 'n月j日' },
{ format: 'H:i:s' },
{ format: 'H時i分s秒' },
{ format: 'H:i' },
{ format: 'H時i分' },
{ format: 'Y/m/d H:i:s' },
{ format: 'Y年n月j日 H時i分s秒' },
],
getOptionKeywords: function ( option ) {
return return option.format.replace( /[^a-z\s]/gi, '' ).split( /\s+/g ).
concat( Array.from( option.format.replace( /[^a-z]/gi, '' ) ) );
},
getOptionLabel: function ( option ) {
return this.getOptionCompletion( option );
},
getOptionCompletion: function ( option ) {
const now = new Date();
const datetime = now.toLocaleString().match(/(\d{4})\/(\d{1,2})\/(\d{1,2})\s(\d{1,2}):(\d{1,2}):(\d{1,2})/i);
return option.format.
replace( 'Y', datetime[1] ).
replace( 'm', ( '0' + datetime[2] ).slice( -2 ) ).
replace( 'n', datetime[2] ).
replace( 'd', ( '0' + datetime[3] ).slice( -2 ) ).
replace( 'j', datetime[3] ).
replace( 'H', datetime[4] ).
replace( 'i', datetime[5] ).
replace( 's', datetime[6] );
},
};
このオブジェクトの内容はname、triggerPrefix、optionsプロパティとgetOptionKeywords、getOptionLabel、getOptionCompletionメソッドが必須となる。
- name名前を文字列で指定。
- triggerPrefix候補リストを表示するトリガーとなる文字列を指定。
- options候補データのオブジェクトを格納した配列または配列を返す関数(メソッド)を指定。
- getOptionKeywordsメソッドoptionsプロパティの配列から1つ受け取り、インクリメンタルサーチ用の文字列配列を返す。
- getOptionLabelメソッドoptionsプロパティの配列から1つ受け取り、候補リストに表示する文字列またはHTML要素を返す。
- getOptionCompletionメソッドoptionsプロパティの配列から1つ受け取り、該当ブロックに出力する文字列またはHTML要素を返す。
実際に段落ブロックで「now」とタイプすると、次のような候補リストが表示される。
候補リストは、現状最大10個となっており、初期候補はoptionsプロパティの配列先頭から順に表示される。ここで表示される内容は続いてタイプする文字によって変化するようになっており、例えば「y」をタイプすれば「format」に「Y」が含まれている内容に切り替わる。
editor.Autocomplete.completersフィルターを使用する上で注意するポイントは、getOptionLabelメソッドとgetOptionCompletionメソッドの返り値がエスケープ処理された後に出力されること。したがってこれらのメソッドでHTML要素を返す場合は、wp.element.createElementメソッドを使用する必要がある。またHTMLエンティティに関しては、getOptionLabelメソッドとgetOptionCompletionメソッドでは異なる内容になる(後者は出力されるブロックの実装しだい!?)。
もともとは絵文字の入力を何とかしたいと考え、いろいろ調べた結果行きついたのがeditor.Autocomplete.completersフィルターだった。そちらを実装しているうちにアイデアが浮かび今回紹介したものになる。曜日や12時間制といった課題はあるが、まずはこんな実装でいいのではないだろうか。
【追記:2023/01/25】optionsは配列を指定するだけでなく、配列を返す関数(メソッド)を指定できる。
最終更新 : 2023年01月25日 11:04
お勧め
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日 更新)