【WordPress】ブロックエディタで使える単位をカスタマイズする方法【カスタムユニット】

レスポンシブなサイトを想定した場合、レスポンシブに対応できるようさまざまな単位が使えた方が良さそうですね。

WordPressはデフォルトで(レスポンシブに対応した単位を含め)さまざまな単位を準備してくれているので、ユーザーが正しい単位を選択できれば見栄えの良いページを提供することがきると思います。

もしCSSの設計上の理由など何らかの理由で使わない単位がある場合は、そういった単位は非表示にした方がユーザーにとって使いやすいでしょう。

functions.phpに追加の記述をすることで単位の選択を無効にしたり使用する単位を選択・制限したりすることができるようになります。

デフォルトの設定

以下の画像はカラムブロックを使用した場合の例です。

デフォルトで単位を選択できるようになっています。

単位の選択を無効化する方法

単位の選択を無効化するとそれぞれのブロックや設定するプロパティによって異なりますが、特定の単位が使われます。

カバーブロックのカバー画像の最小の高さではpx、スペーサーブロックの高さはpx、カラムブロックの幅には%が固定で使用されます。

functions.php

function my_theme_setup() {
    //単位の選択を無効にする
    add_theme_support( 'custom-units', array() );
}
add_action( 'after_setup_theme', 'my_theme_setup'); 

単位を制限する方法

デフォルトではいくつかの単位が使用できますが、使用する単位を制限することもできます。

例えばpxとemのみ選択できるようにするためには以下のような記述を追加します。

functions.php

function my_theme_setup() {
    //単位をカスタマイズ
    add_theme_support( 'custom-units', 'px','em' );
}
add_action( 'after_setup_theme', 'my_theme_setup'); 

参考