目次
目次

Gutenbergエディターのブロックにスタイルボタンを追加する方法

Cocoonカスタマイズ集
この記事は約10分で読めます。
記事内に広告が含まれています。

はじめに


以下の内容を実現します。

Cocoonアイコンボックスをおしゃれにカスタマイズ｜デザイン切替・色変更も対応
Cocoonのアイコンボックスは便利ですが、使っているうちに補足も注意点も同じ見た目になるパソコンで見るとアイコンが大きいかも他のサイトと差別化したいと感じることがありました。そこで作ったのが今回のカスタマイズです。この記事では、実際に運用...
turicco.com

本スキンでは、初心者でも簡単にデザイン設定ができるように、いくつかのブロックに独自のスタイルボタンを追加しています。

この記事では、この方法について説明します。

ブロック名の確認方法

register_block_style()に指定するブロック名を調べる方法は2つあります。

  1. Gutenbergエディターをコードエディターに切り替える
    例えば、「アイコンボックス」ブロックの場合、以下のようにブロック名が表示されます。
<!-- wp:cocoon-blocks/icon-box -->
<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box"></div>
<!-- /wp:cocoon-blocks/icon-box -->
  1. Chromeのデベロッパーツールを使用する
    Gutenbergエディター画面で、デベロッパーツールを開き、該当ブロックの data-type属性を確認します。

完成イメージ

Gutenbergエディター
アイコンボックス

実装手順

スタイルボタンの定義には、PHPとJavaScriptを使用した2つの方法があります。

PHP実装する場合

以下の手順で実装します。

  • ラベル
    PHPを追加

    以下のコードをfunctions.phpに追加します。

    add_action('init', function () {
  for ($i = 1; $i <= 5; $i++) {
    register_block_style(
      'cocoon-blocks/icon-box',       // ブロック
      [
        'name'  => 'icon-box' . $i,   // CSSクラス
        'label' => 'スタイル' . $i,   // ラベル
      ]
    );
  }
});
    • 高度な設定→追加CSSクラスはis-style-{$name}の形式で登録されます。
    • 例えば、スタイル1の追加CSSクラスはis-style-icon-box1となります。

    もしスタイルが適用されない場合、追加CSSクラス に登録したクラスを削除すれば、デフォルトスタイルに戻ります。

  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    [class*="is-style-icon-box"] {
  border-radius: 0;
  border-width: 0;
  padding: 15px;

  &.comment-box,
  &.profile-box {
    background-color: #f5f5f5;
  }

  &::before {
    display: grid;
    font-size: 16px;
    margin: 0;
    padding: 0;
    place-content: center;
  }
}

.is-style-icon-box1 {
  border-width: 1px;
  margin-left: 15px;

  &::before {
    border-radius: 100%;
    color: #fff;
    height: 30px;
    left: -15px;
    top: -15px;
    width: 30px;
  }

  &.information-box::before {
    background-color: #87cefa;
  }

  &.question-box::before {
    background-color: #ffe766;
  }

  &.alert-box::before {
    background-color: #f6b9b9;
  }

  &.memo-box::before {
    background-color: #8dd7c1;
  }

  &.comment-box::before {
    background-color: #cccccc;
  }

  &.ok-box::before {
    background-color: #3cb2cc;
  }

  &.ng-box::before {
    background-color: #dd5454;
  }

  &.good-box::before {
    background-color: #98e093;
  }

  &.bad-box::before {
    background-color: #eb6980;
  }

  &.profile-box::before {
    background-color: #cccccc;
  }
}

.is-style-icon-box2,
.is-style-icon-box3,
.is-style-icon-box4,
.is-style-icon-box5 {
  &::before {
    inset: 0;
    margin: 15px 0;
    width: 40px;
  }
}

.is-style-icon-box2,
.is-style-icon-box3 {
  padding-left: 60px;
}

.is-style-icon-box3 {
  background-color: transparent;
  border-width: 2px;
}

.is-style-icon-box4,
.is-style-icon-box5 {
  &::before {
    border: 0;
  }
}

.is-style-icon-box4 {
  border-radius: 0;
  border-top-width: 4px !important;
  border-width: 0;
  padding-left: 45px;
}

.is-style-icon-box5 {
  border-left-width: 4px !important;
  border-radius: 0;
  border-width: 0;
  padding-left: 45px;
}

JavaScript実装する場合

以下の手順で実装します。

  • ラベル
    PHPを追加

    以下のコードをfunctions.phpに追加します。

    add_action('enqueue_block_editor_assets', function () {
  wp_enqueue_script('custom-block-styles', get_stylesheet_directory_uri() . '/custom-block-styles.js', ['wp-blocks']);
});
  • ラベル
    JavaScriptを追加

    以下のコードを例えばcustom-block-styles.jsというファイルに保存（UTF-8形式）し、子テーマフォルダに配置します。

    wp.domReady(function () {
  for (let i = 1; i <= 5; i++) {
    wp.blocks.registerBlockStyle('cocoon-blocks/icon-box', {
      name: 'icon-box' + i,
      label: 'スタイル' + i,
    });
  }
});

参考：他ブロックへの応用

「タブ見出しボックス」ブロックにスタイルを追加する方法

スタイルボタンの追加は定型のコードを使用するため、ブロック名を変更するだけで簡単に実装できます。
「タブ見出しボックス」ブロックのブロック名はcocoon-blocks/tab-caption-box-1です。
このブロックに合わせたCSSを定義することがメインの作業になります。

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    PHPを追加

    以下のコードをfunctions.phpに追加します。

    add_action('init', function () {
  for ($i=1; $i<=5; $i++) { 
    register_block_style(
      'cocoon-blocks/tab-caption-box-1',
      [
        'name'  => 'tab-caption-box' . $i,
        'label' => 'スタイル' . $i,
      ]
    );
  }
});
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    [class*="is-style-tab-caption-box"] {
  .tab-caption-box-label {
    border-radius: 0;
    border-width: 1px;
  }

  .tab-caption-box-content {
    border-radius: 0;
  }

  &.is-style-tab-caption-box1 {
    .tab-caption-box-content {
      margin-top: -1px;
    }
  }

  &.is-style-tab-caption-box2 {
    .tab-caption-box-content {
      margin-top: calc(-1.8em + 1px);
      padding-top: 1.8em;
    }
  }

  &.is-style-tab-caption-box3 {
    .tab-caption-box-label {
      margin-left: 0.8em;
    }

    .tab-caption-box-content {
      margin-top: -0.9em;
      padding-top: 1.8em;
    }
  }

  &.is-style-tab-caption-box4 {
    .tab-caption-box-label {
      border-radius: 100px;
      margin-left: 0.8em;
      margin-top: -0.9em;
    }

    .tab-caption-box-content {
      margin-top: -0.9em;
      padding-top: 1.8em;
    }
  }

  &.is-style-tab-caption-box5 {
    .tab-caption-box-label {
      text-align: center;
      width: 100%;
    }

    .tab-caption-box-content {
      margin-top: -1px;
    }
  }
}

既存のブロックのスタイルを削除する方法

例えば、「FAQ」ブロックのスタイルを削除します。

実装手順

以下の手順で実装します。

  • ラベル
    PHPを追加

    以下のコードをfunctions.phpに追加します。

    add_action('enqueue_block_editor_assets', function () {
  wp_enqueue_script('remove-block-styles', get_stylesheet_directory_uri() . '/custom-block-script.js', ['wp-blocks', 'wp-dom-ready'], '', true);
});
  • ラベル
    JavaScriptを追加

    以下のコードを例えばremove-styles.jsというファイルに保存（UTF-8形式）し、子テーマフォルダに配置します。

    wp.domReady(function () {
  wp.blocks.unregisterBlockStyle('cocoon-blocks/faq', 'square');
  wp.blocks.unregisterBlockStyle('cocoon-blocks/faq', 'accordion');
});

さいごに

今回紹介した方法を使えば、Gutenbergエディターのブロックに独自のスタイルボタンを簡単に追加できます。
しかし、「タブ見出しボックス」ブロックや「アイコンボックス」ブロックは、サイト全体で統一したスタイルを使用するのが一般的です。

そのため、本スキンではSWELLのように、個別に設定するのではなく、サイト全体で一貫したスタイルを設定するようにしました。

また、個人でデザインをするなら、スタイルボタンを設ける代わりに、必要に応じて追加CSSクラスを直接入力すれば十分であり、スタイルボタンを設ける必要はありません。
これにより、余計なスタイルボタンや不要なCSSを増やすことなく、管理をシンプルに保つことができます。

タイトルとURLをコピーしました