この記事は最後に更新してから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」とタイプすると、次のような候補リストが表示される。

段落ブロックで「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

お勧め

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ヘッダーを出力する。