段落ブロックに日付・時刻の入力支援を実装した

説明

ブロックエディターには文字入力を支援する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」とタイプすると、次のような候補リストが表示される。

段落ブロックで「now」をタイプ

候補リストは、現状最大10個となっており、初期候補はoptionsプロパティの配列先頭から順に表示される。ここで表示される内容は続いてタイプする文字によって変化するようになっており、例えば「y」をタイプすれば「format」に「Y」が含まれている内容に切り替わる。

「now」に続いて「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

お勧め

add_magic_quotes(2020年8月13日 更新)

array add_magic_quotes( array $array )
配列の文字列をスラッシュでクォートする。

wp_parse_id_list(2019年2月23日 更新)

array wp_parse_id_list( array | string $list )
IDのリストをパースする。

wp_mkdir_p(2014年11月27日 更新)

bool wp_mkdir_p( string $target )
ディレクトリを再帰的に作成する。

get_object_taxonomies(2018年5月27日 更新)

array get_object_taxonomies( mixed $object [ , string $output = 'names' ] )
投稿タイプのタクソノミー情報を取得する。

add_media_page(2022年6月27日 更新)

mixed add_media_page( string $page_title, string $menu_title, mixed string $capability, string $menu_slug [ , mixed $function = '' [, int $position = null ] ] )
メディアメニューにサブメニューを登録する。