Gutenbergには見栄えを変更する設定項目として一部ブロックに文字サイズ・文字色・背景色を指定できる項目が用意されているのですが、多くの場合はこれらをサイトの雰囲気にあったものに制限したいと思うので、任意のサイズや色だけ表示されるようにカスタマイズする方法を紹介します。

ここで紹介する方法を使用する際は、after_setup_themeにフックさせる形で記述してください。
after_setup_themeがよくわからない場合は、CodexやTwenty Nineteenのfunctions.php内の記述などを参考にしてみてください。

文字サイズ設定

Gutenbergの文字サイズ設定部分のイメージ

文字サイズは段落ブロック使用時にサイドへ表示される「テキスト設定」内で設定できます。
デフォルトではイメージのように「標準」を含めた5サイズが選択できるようになっており、さらにその横の入力フィールドを利用することで直接数値を入力してサイズ指定することもできます。

文字サイズ選択を任意で設定する

「中」や「特大」といった予め用意されたものを選択した場合、一応付与されるclass（詳しくは後述します）を用いてCSSを書けばフロント表示では任意のサイズになりはしますが、単純に選択できるサイズを増減したいとかちゃんと設定してエディタ上や選択部分に正しいサイズ感で出したいときは、下記のように記述することで文字サイズ設定を任意の内容に変更できます。

functions.php
add_theme_support( 'editor-font-sizes', array(
  array(
    'name'      => __( 'Small', 'themeLangDomain' ),
    'shortName' => __( 'S', 'themeLangDomain' ),
    'size'      => 12,
    'slug'      => 'small',
  ),
  array(
    'name'      => __( 'Medium', 'themeLangDomain' ),
    'shortName' => __( 'M', 'themeLangDomain' ),
    'size'      => 16,
    'slug'      => 'medium',
  ),
  array(
    'name'      => __( 'Large', 'themeLangDomain' ),
    'shortName' => __( 'L', 'themeLangDomain' ),
    'size'      => 32,
    'slug'      => 'large',
  ),
) );

'name'と'shortName'は選択部分で表示される名前、'slug'はサイズ指定要素に付与されるclassで使用、'size'は設定したいフォントサイズになります。
指定要素には.has-{slug}-font-sizeのようなclassが付与され、例えばサンプルコードの「Medium」であれば.has-medium-font-sizeというclassが付与されるので、フロントの見栄えで使用しているCSSにもこれらのclassを用いたスタイルを追加してあげることで公開された記事にも反映されるようになります。
また、サンプルコード内にはありませんが、'slug'をnormalにしたものを登録しておけば標準サイズとして項目が追加され、リセットボタンを押したときと同じようにclassなどはつかない状態になります。

カスタム文字サイズを非表示にする

文字サイズ選択の横にあるフィールドでは任意の数値を入力することで自由に文字サイズを指定することができ、何らかの理由で文字サイズ選択にはないサイズを使用したいときには便利な設定です。
ただ、サイズ指定は直接styleで挿入されてるので後々メンテナンスする際に困る可能性もありますし、サイト全体の文字サイズの統一感がなくなってしまうなどの理由からこの項目は不要と感じる場合は、下記のように記述することで非表示にすることができます。

functions.php
add_theme_support( 'disable-custom-font-sizes' );

ちなみに、同じように文字サイズ選択を非表示にする方法もあるかと思ったのですが、ちょっと調べた感じではそういったものは見つけることができませんでした。
もし文字サイズ選択についても非表示にしたい場合は、手っ取り早い方法としてCSSやJavaScriptを利用して非表示にするとか、あとは見た目が微妙ですが選択できる項目が出ないようにあえてadd_theme_support( 'editor-font-sizes', array( '' ) );と設定してしまうなどでとりあえず対応しようかなと思います。

色設定

Gutenbergの色設定部分のイメージ

色に関する設定は段落ブロックやボタンブロック使用時にサイドへ表示される「色設定」内で設定できます。
背景色と文字色をそれぞれ設定させることができ、デフォルトではイメージのように11色＋カラーピッカーが用意されています。

詳しくは後述しますが、色設定についても文字サイズのときと同様に選択したものによってclassが付与されるので、それを利用してフロント表示で使用しているCSSに記述すれば適用されるようになります。
また、カラーピッカーを利用した場合は要素に直接styleで挿入される形になります。

カラーパレットを任意で設定する

サイト全体の色合いを統一させるために不要な色を削除したいときやデフォルトにはない色を追加したいときなどは、下記のように記述することでカラーパレット設定を任意の内容に変更できます。

functions.php
add_theme_support( 'editor-color-palette', array(
  array(
    'name'  => __( 'Blue', 'themeLangDomain' ),
    'slug'  => 'example-blur',
    'color' => '#3498db',
  ),
  array(
    'name'  => __( 'Red', 'themeLangDomain' ),
    'slug'  => 'example-red',
    'color' => '#e74c3c',
  ),
  array(
    'name'  => __( 'Yellow', 'themeLangDomain' ),
    'slug'  => 'example-yellow',
    'color' => '#f1c40f',
  ),
  array(
    'name'  => __( 'Black', 'themeLangDomain' ),
    'slug'  => 'example-black',
    'color' => 'rgb(0, 0, 0)',
  ),
  array(
    'name'  => __( 'White', 'themeLangDomain' ),
    'slug'  => 'example-white',
    'color' => 'hsl(0, 0%, 100%)',
  ),
) );

'name'にはパレットにホバーした際にツールチップで表示される名前、'color'には指定したいカラーコードを指定し、サンプルコードの「Black」や「White」のようにrgb()やhsl()で指定もできます。
'slug'はカラー指定要素に付与されるclassに使用され、背景色であれば.has-{slug}-background-color、文字色であれば.has-{slug}-colorのように付与されます。
例えばサンプルコードの「Blue」であれば'slug'にexample-blurを指定しているので.has-example-blur-background-colorや.has-example-blur-colorのようなclassが付与されるようになり、フロントの見栄えで使用しているCSSにもこれらのclassを用いたスタイルを記述してあげることで公開された記事にも反映されるようになります。

カラーパレットを非表示にする

カラーパレット自体が不要であれば、下記のように記述することで非表示にすることができます。

functions.php
add_theme_support( 'editor-color-palette' );

カラーピッカーを非表示にする

カラーピッカーが不要であれば、下記のように記述することで非表示にすることができます。
また、カラーパレット・カラーピッカーともに非表示にした場合は、色設定の項目自体が非表示になります。

functions.php
add_theme_support( 'disable-custom-colors' );