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

以前のブログはこちら

広告

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

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

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

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

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


関連するタグ

全 1 件中 1 〜 1 件目を表示

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

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

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

お問い合わせはこちらから