ブロックエディターで現在の「ロケール」を取得した時のメモ

説明

ブロックエディター向けのプラグインで日本語固有の機能を実装する際、現在のロケール（言語）を取得したい。ブロックエディターの編集時、投稿を編集しているユーザーの言語が優先され、それをどうやって取得するかを「ChatGPT」に聞いてみたのだが。。。

サイトの言語を取得

「ChatGPT」が教えてくれた内容をいくつか試したのがだ、結論から言うとしっくりくるものはなかった。きっと聞き方が悪かったのだろう。

そんなわけで、まずは基本に戻ってサイトの言語を取得するところから。サイトの設定内容は、次のようにREST APIを使うことで取得できる。

import apiFetch from '@wordpress/api-fetch';

const fetchSettings = async () => {
	await apiFetch( { path: '/wp/v2/settings' } ).then( ( options ) => {
		console.log( options.language );
	} );
}
fetchSettings();

サイトの言語設定が「日本語」なら、コンソールには「ja」が出力される。

ユーザーの言語設定はサイトの言語設定と異なる場合があるので、REST APIを使ってユーザー情報を取得してみる。

	await apiFetch( { path: '/wp/v2/users/me' } ).then( ( profile ) => {
		console.log( profile );
	} );

取得できたユーザー情報は次の通り（一部抜粋）。標準で取得できる内容には「言語」が含まれていなかった。

avatar_urls: {24: '...' }
description: ""
id: 1
link: "http://localhost/author/..."
meta: []
name: "..."
slug: "..."
url: "http://localhost"

PHP側でREST APIで取得できるユーザー情報を拡張することで目的は果たせそうだが、もっと手軽な方法がないだろうか。

wp.date.setSettings発見

そこで気分を変えて投稿編集ページのHTMLソースを眺めてみると、次のようなJavaScriptソースが見つかった。

<script id="wp-date-js-after">
wp.date.setSettings( {"l10n":{"locale":"en_US","months":["January","February","March","April",...
</script>

「いかにも」な感じがしたので、「@wordpress/date」のドキュメントを確認。そこにはsetSettings()と対となるSettings()が記載されており、どんな内容が取得できるのか確認した。

import { getSettings } from '@wordpress/date';

const dateSettings = getSettings();
console.log( dateSettings );

コンソールに出力された内容は次の通りで（一部抜粋）、「l10n.locale」にロケールが格納されていることがわかる。

formats: 
	date: "Y年n月j日"
	datetime: "F j, Y g:i a"
	datetimeAbbreviated: "M j, Y g:i a"
	time: "H:i"
l10n: 
	locale: "en_US"
	meridiem: {am: 'am', pm: 'pm', AM: 'AM', PM: 'PM'}
	months: (12) ['January', 'February', 'March', ... ]
	monthsShort: (12) ['Jan', 'Feb', 'Mar', 'Apr', ... ]
	relative: {future: '%s from now', past: '%s ago', ... }
	startOfWeek: 1
	weekdays: (7) ['Sunday', 'Monday', 'Tuesday', ... ]
	weekdaysShort: (7) ['Sun', 'Mon', 'Tue', 'Wed', ... ]
timezone: 
	abbr: "JST"
	offset: 9
	offsetFormatted: "9"
	string: "Asia/Tokyo"

念のため、ユーザーの言語を「日本語」や「サイトデフォルト」に変更し、「l10n.locale」の内容はその都度正しく反映されていることが確認できた。

さて、冒頭でふれた「ChatGPT」の回答には「@wordpress/i18n」のgetLocale()を紹介してくれた。実際に呼び出してみると未定義のエラーになってしまい、ドキュメントやソースコードにもそれらしいものを見つけることができなかった。「ChatGPT」が誤情報を記録しているのか、昔は存在してたけど現時点では使えなくなっただけなのかはっきりしないが、「ChatGPT」を使っていると時々にこういうことに遭遇するよね。