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

WordPress Drupal Gutenberg

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

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 標準のブロックにスタイルを追加する」でした。

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

前の記事 次の記事

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートすることができます。

ご連絡おまちしています!

10万円からホームページ作成サービス

フレームワークをベースに柔軟なカスタマイズ&低価格で作成します。

サービスを詳しく見たい方へ