日付形式設定・時刻形式設定をカスタムブロックから取得する (WordPress Gutenberg)

どうも、あつまるのテックリードの三井です。

カスタムブロックで日付や時刻を取り扱うとき、管理画面で設定した日付形式・時刻形式で表示したくなるときがあります。

今回は管理画面から日付形式・時刻形式を取得して表示する方法を紹介します。

@wordpress/data を使う

記事編集画面で wp.data.select( 'core' ).getSite() を実行すると一般設定の登録情報が取れます。日付形式は date_format , 時刻形式は time_format というキーで取れます。

実際には useSelect を使って下記のようにするのがいいでしょう。

export function edit() {
    const { date_format, time_format } = useSelect(
        ( select ) => select( 'core' ).getSite(),
        []
    );

    console.log( date_format );  // => 'Y/n/j'
    console.log( time_format );  // => 'H:i'

    return <div />;
}

React Hook の形でまとめると再利用しやすいかも知れません。

export function useDateTimeFormat( 
    default_date_format = 'Y/n/j',
    default_time_format = 'H:i'
): [ string, string ] {
    const { date_format, time_format } = useSelect(
        ( select ) => select( 'core' ).getSite(),
        []
    );

    return [
        date_format ?? default_date_format,
        time_format ?? default_time_format,
    ];
}

使うときはこんな感じ、

export function edit() {
    const [ date_format, time_format ] = useDateTimeFormat( 'Y-m-d', 'H:i:s' );

    console.log( date_format );  // => 'Y/n/j'
    console.log( time_format );  // => 'H:i'

    return <div />;
}

取得できる日付形式・時刻形式が JavaScript で使いづらい問題

取得できる日付形式・時刻形式は PHP の DateTimeInterface::format 形式になっています。そのため JavaScript でメジャーなフォーマット関数 ( Moment.js の format メソッドや date-fns の format 関数 ) でそのまま使うことができません。

PHP 形式の日付形式・時刻形式を JavaScript で使うために @wordpress/date というモジュールが用意されています。
このモジュールに用意されている date() 関数を使うと、うまく日付・時刻をフォーマットして表示してくれます。管理画面で設定したタイムゾーン設定を引用してくれるので便利です。

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

export function edit() {
    const { date_format, time_format } = useSelect(
        ( select ) => select( 'core' ).getSite(),
        []
    );

    const d = new Date( '2022-01-05 12:30' );

    console.log( date_format );             // => 'Y/n/j'
    console.log( date( d, date_format ) );  // => '2022/1/5'

    console.log( time_format );              // => 'H:i'
    console.info( date( d, time_format ) );  // => '12:30'

    return <div />;
}

@wordpress/date モジュールには他にも dateI18n, getDate などの関数が用意されているので必要に応じて使い分けてください。
どれも PHP 形式の設定を JavaScript の処理で使いやすくするために橋渡ししてくれる便利な関数です。

まとめ

Y-m-d → yyyy-MM-dd みたいな変換処理をする関数を自作しようかと思ったけど、WordPress が代替案を用意してくれてたので安心しました。

私からは以上です。