ブロックエディターの各ブロックをクラス+CSSで見た目を変える方法

はじめに

この記事ではブロックエディターの各ブロックの見た目を変える方法について紹介します。カスタマイズしたいブロックがあるのに方法がわからない方に向けた内容です。

ブロックエディターでは見出しブロックや画像ブロックなど各ブロックのスタイルをカスタマイズすることができます。これにより、自分で考えたデザインのエントリー詳細ページを作成することができます。

各ブロックの見た目を変える基本手順

ブロックエディター設定

管理画面 > 編集画面 > ブロックエディター設定を開いてください。
例として赤文字の見出し2ブロックを追加していきます。

ブロックエディター設定を開くと、初期設定では画像のようなブロックが設定されています。

カスタマイズしたい各ブロックの設定方法

スタイルを当てたいブロックを「追加」ボタンから登録してクラス名をクラスの項目に設定します。CSSを用意していない場合、クラスを指定しても閲覧画面の見た目は変わりません。
また、ラベル名は内容が分かるように設定しておくとエントリー作成時に選択しやすいです。

スタイル実装

テーマに既にあるCSSファイルを残したいので新しくCSSファイルをcssフォルダに作成していきます。作成したCSSファイルは admin.html と /include/head/link.html で読み込んでください。
今回はファイル名を custom-entry.css にしています。

link.htmlで読み込むコード

<!-- その他のCSS -->
<link rel="stylesheet" href="/css/custom-entry.css">

admin.htmlで読み込むコード

@section("editor-css")
<!-- その他のCSS -->
<link rel="stylesheet" href="/css/custom-entry.css">
@endsection   

custom-entry.cssのコード（シンプルな書き方）

.acms-entry h2.text-red {
  color: #f00;
}

:where(.acms-entry) h2.text-red:not(:where([class~=not-editor-style], [class~=not-editor-style] *)){
  color: #f00;
}

ACMS.Ready(function() {
   ACMS.Config.blockEditorConfig.editorProps.editorProps.attributes.class = 'ブロックエディターの編集画面に付けたいクラス名';
});

エントリーを作成するとき

エントリーを作成するときには先ほど新しく追加したブロックを選択します。閲覧画面ではカスタマイズしたスタイルのブロックが表示されます。

閲覧画面の表示

このようにブロックエディター設定で追加したいブロックを設定し、そのブロックを使ってエントリーを作成するだけでデザインに沿った本文を実現できます。

カスタマイズの具体例

具体例①：1カラムブロックの装飾（グレー背景）

1カラムブロックについて

https://developer.a-blogcms.jp/blog/changelog/v3220.html

ブロックエディターのカラム機能は、これまで「2カラムに分割」「3カラムに分割」の2種類のみでした。Ver. 3.2.20で追加された「1カラム」は、これらとは異なり「分割しない1つの枠」をブロックとして配置できるものです。

横並びのレイアウトにはなりませんが、テーマ側のCSSで枠線・背景色・角丸・パディングを当てておけば、編集者が「囲み枠」や「強調ボックス」を簡単に挿入できるようになります。

利用するには、管理画面の「編集画面 > ブロックエディター設定 > ブロックメニュー設定」で「1カラム」を有効化してください。

閲覧画面の表示

設定例

ブロックエディター設定で1カラムブロックのクラス項目に bg-gray を設定します。

.bg-gray のCSS

.acms-entry .layout-one-column.bg-gray {
  padding: 10px;
  background-color: #d9d9d9;
}

具体例②：1カラムブロックの装飾（ボーダー枠）

閲覧画面の表示

設定例

ブロックエディター設定で1カラムブロックのクラス項目に border-black を設定します。

.border-black のCSS

.acms-entry .layout-one-column.border-black {
  padding: 15px;
  border: 2px #000 solid;
}

具体例③：画像の回り込み（float設定）＋ 回り込み解除

閲覧画面の表示

設定例

ブロックエディター設定で左に回り込む画像ブロックと右に回り込む画像ブロック、回り込み解除の区切り線のクラスを設定します。

.float-left と .float-right のCSS

画像ブロックには<div class="media-image-block"></div>というdivタグがついており、ここでは「.float-left / .float-right を子に持つ .media-image-block」を対象に実装しています。

/* --------------------
管理画面と閲覧画面で共通している部分
-------------------- */
/* 画像ブロック（回り込み） */
.media-image-block:has([class~=float-left]),
.media-image-block:has([class~=float-right]) {
  display: inline-block;
  max-width: 50%;
  width: auto;
}

.media-image-block:has([class~=float-left]) {
  margin: 20px 30px 30px 0;
  float: left;
}

.media-image-block:has([class~=float-right]) {
  margin: 20px 0 30px 30px;
  float: right;
}

.media-image-block:has([class~=float-left])>figure,
.media-image-block:has([class~=float-right])>figure {
  margin: 0;
  max-width: 100%;
}

.media-image-block:has([class~=float-left]) img,
.media-image-block:has([class~=float-right]) img {
  margin-block: 0;
  max-width: 100%;
  height: auto;
}

/* float直後の見出しの上パディングを消して画像と頭揃える */
.media-image-block:has([class~=float-left])+:is(h2, h3, h4),
.media-image-block:has([class~=float-right])+:is(h2, h3, h4) {
  margin-top: 0;
  padding-top: 0;
}

/* --------------------
閲覧画面用
-------------------- */
/* float直前の要素に下の余白を持たせる（閲覧画面） */
:is(p, h2, h3, h4, ul, ol, blockquote, table):has(+ .media-image-block [class~=float-left]),
:is(p, h2, h3, h4, ul, ol, blockquote, table):has(+ .media-image-block [class~=float-right]) {
  margin-bottom: 16px;
}

/* 回り込み解除 */
hr.clear-both {
  display: block;
  margin: 0;
  height: 0;
  clear: both;
  visibility: hidden;
  border: none;
}


/* --------------------
管理画面用
-------------------- */

/* 編集画面の構造補正 */
.acms-admin-block-editor .react-renderer:has([class~=float-left])+:is(h2, h3, h4),
.acms-admin-block-editor .react-renderer:has([class~=float-right])+:is(h2, h3, h4) {
  margin-top: 0;
  padding-top: 0;
}

/* float直前の要素に下の余白を持たせる（管理画面） */
.acms-admin-block-editor :is(p, h2, h3, h4, ul, ol, blockquote, table):has(+ .react-renderer [class~=float-left]),
.acms-admin-block-editor :is(p, h2, h3, h4, ul, ol, blockquote, table):has(+ .react-renderer [class~=float-right]) {
  margin-bottom: 16px;
}

/* 回り込み解除 */
.acms-admin-block-editor hr.clear-both {
  position: relative;
  margin: 32px;
  overflow: visible;
  clear: both;
  visibility: visible;
  height: 0;
  border: 0;
  border-top: 1px #000 solid;
}

この記事で使用している .acms-entry や .media-image-block、data-type 属性などのクラス名は、ブロックエディターのドキュメント内「ブロックエディターの基本ブロック」で確認できます。
なお .layout-one-column は Ver. 3.2.20 で追加された1カラムブロックのクラスで、ドキュメントには未掲載のため、閲覧画面で対象のブロックを検証して確認してください。

さいごに

これにより自分で考えたデザインをエントリーで実現できるようになります。ぜひ、試してみてください！