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

説明

ブロックエディターには文字入力を支援する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

お勧め

wp_extract_urls(2022年5月31日 更新)

array wp_extract_urls( string $content )
テキスト内のURLを抽出する。

excerpt_remove_blocks(2022年2月8日 更新)

string excerpt_remove_blocks( string $content )
コンテンツ内の抜粋に適したブロックをレンダリングする。

wp_is_large_user_count(2022年6月6日 更新)

bool wp_is_large_user_count( int $network_id = null )
ユーザー数が多いかを判定する。

wp_salt(2019年6月6日 更新)

string wp_salt( [ string $scheme = 'auth' ] )
ハッシュ用のソルトを取得する。

wp_raise_memory_limit(2018年5月27日 更新)

mixed wp_raise_memory_limit( [ string $context = 'admin' ] )
最大メモリー使用量を増やす。