Gutenberg registerBlockStyle 標準のブロックにスタイルを追加する

こんにちは。ましじめの田村です。

Gutenbergで標準のブロックにスタイルを追加したい場合はありました。
この場合次の記述で実現可能です。

マニュアルはこちら。
block-filters

基本はこちら

const { blocks } = wp;
const { registerBlockStyle } = blocks;
const __ = Drupal.t;

registerBlockStyle( 'core/quote', {
    name: 'fancy-quote',
    label: 'Fancy Quote'
} );

設定値

name
class名を設定します。設定した値は次のクラスとして書き出されます。
.is-style-{name}

label
表示名

isDefault
デフォルトとして設定するかどうか？

また複数設定したい場合は次のようにすると良さそうです。

function myRegisterStyles() {
  ['core/paragraph'].forEach((block) => {
    registerBlockStyle(block, {
      name: 'type1',
      label: __('タイプ1'),
      isDefault: true,
    });

    registerBlockStyle(block, {
      name: 'type1',
      label: __('タイプ2'),
      isDefault: false,
    });
    registerBlockStyle(block, {
      name: 'type3',
      label: __('タイプ3'),
      isDefault: false,
    });
  });
}
myRegisterStyles();

表示

以上「Gutenberg registerBlockStyle 標準のブロックにスタイルを追加する」でした。

標準のブロックにスタイルを追加したい場合参考にしてみてください。

---