0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

WordPressブロックにカスタムスタイルを追加するregister_block_style ジェネレーター

blockstyle.gif

WordPressでは、様々なブロック(投稿編集のための小さな塊)が用意されています。見た目の設定もGUIでできるようになっています。

core-image.png

↑の画像では、スタイル設定が、デフォルト、角丸、影付き、と3つあります。このうち「影付き」は、私がカスタマイズして追加したものです。

カスタムでスタイル設定を追加するコードは↓です。

register_block_style(
    'core/image', // ブロック名
    [
        'name'         => 'shadow', // スタイルで付けるクラスに使う名前
        'label'        => '影付き',
        'inline_style' => '.is-style-shadow {
            box-shadow: 10px 5px 5px black;
        }', // 追加するCSS
    ]
);

ブロック名の指定が面倒

上記のコードを見ると、コード自体はそれほど複雑ではありません。しかし、ブロック名を探して入力する、という手間がかかります。

もちろん、グーテンベルクのブロック一覧を見て入力してもよいのですが、手間がかかりますね。そこでregister_block_style ジェネレーターを作りました。

register_block_style ジェネレーター

こちらのページでは、カスタマイズしたいブロックをプルダウンで選択する → ブロック名を設定したコードを自動生成する、という仕組みになっています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?