ブロックエディターの編集画面に閲覧画面と同じスタイルを適用する

ブロックエディターは、見出し・段落・画像・テーブル・カラムなどを「ブロック」単位で組み立てる本文エディターです。標準では、管理画面の編集画面と閲覧画面で見た目が揃うように設計されています。このドキュメントでは、その結論（やること）を先に示し、続いてなぜそれで揃うのかを仕組みの流れに沿って解説します。

ブロックエディターそのものの基本的な使い方は、公式ドキュメント ブロックエディター を参照してください。

結論

編集画面のプレビューと閲覧側の表示を一致させるには、次の 3 点を押さえます。

• ラッパークラスを揃える — 編集領域と閲覧画面の本文を同じクラスで囲む。標準は acms-entry。変えたい場合は include/edit/custom.js 等で上書きする。

• そのクラスを起点に CSS を書く — .acms-entry { ... } のように、揃えたラッパークラスを起点にスタイルを定義する。

• 同じ CSS を両画面で読み込む — 管理画面は admin.html の @section("editor-css")、閲覧画面はテーマのテンプレートで、同一の CSS を読み込む。

最短ルートは「ラッパークラスを標準の acms-entry のまま使い、.acms-entry を起点にした CSS を 両画面で読み込む」ことです。標準テーマはこの形になっています。以降で、なぜこれで揃うのかを順に説明します。

仕組みの流れ

1. 編集領域と閲覧画面上の本文が同じラッパークラスを共有する

すべての起点は、編集画面のプレビュー領域と閲覧画面の出力が、同じラッパークラスを共有していることです。

• 編集画面：ブロックエディターの編集領域に、ACMS.Config.blockEditorConfig.editorProps.editorProps.attributes.class で指定したクラスが付与される。デフォルト値は acms-entry。

• 閲覧画面：エントリー本文（ブロックエディターのユニット出力を含む）が、同じ acms-entry クラスでラップされる。

            .acms-entry を起点にした CSS（例: editor-style.css）
                          │
        ┌─────────────────┴──────────────────┐
        ▼                                     ▼
  管理画面の編集領域                      閲覧画面のエントリー本文
  （editorProps の class = acms-entry）   （テンプレートで .acms-entry でラップ）

両者が同じクラスを持つので、そのクラスを起点にした 1 つの CSS が両方に等しく効きます。これが「揃う」ことの本質です。

2. スタイルは acms-entry を起点に記述する

CSS 側は、この acms-entry を起点にしたセレクタで記述します。

.acms-entry {
  /* 本文領域用のスタイル */
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  p {
    font-size: 16px;
  }
}

3. 管理画面でその CSS を読み込む

管理画面のレイアウトでは、テーマ側で admin.htmlをカスタマイズします。 editor-css セクションでエディター用 CSS を読み込んでいます。

<!-- themes/ご利用テーマ/admin.html -->
@extends("/_layouts/admin.html")
@section("editor-css")
<link rel="stylesheet" href="/path/to/editor-style.css">
@endsection

ブロックエディターの編集画面プレビュー領域を囲むHTMLのクラス属性に acms-entry が適用されて出力されるため、同じCSSを共有することができます。

.acms-admin-block-editor-container
  └─ .acms-admin-block-editor
       └─ .acms-admin-block-editor-content   ← ここに acms-entry が付く
            └─ .ProseMirror                   ← TipTap (ProseMirror) の編集領域

4. 閲覧画面でも同じ CSS を読み込む

閲覧画面では、ブロックエディターのHTMLをacms-entry クラス属性をつけたHTMLで囲みます。

<!-- 標準テンプレートの場合 -->
<div class="acms-entry">
<!-- BEGIN unit:veil -->
@include("/include/unit.html")
<!-- END unit:veil -->
</div>

<!-- Twigテンプレートの場合 -->
<div class="acms-entry">
{% if entry.body %}
  {{ entry.body|raw }}
{% endif %}
</div>

閲覧画面のテーマでも .acms-entry を起点にしたスタイルを読み込むことで、手順 1〜3 と合わさって、編集画面と同じ見た目が再現されます。

テーマ独自のスタイルを反映する

「閲覧画面でブロックエディターのコンテンツに独自スタイルを当てている。それを編集画面のプレビューにも反映したい」という場合も、流れは結論の 3 点と同じです。状況に応じて次のいずれかを選びます。

ラッパークラスを変えずに済む場合（推奨）

標準のラッパークラス acms-entry をそのまま使うなら、追加設定は不要です。.acms-entry を起点にしたCSSを用意してください。同じ CSS を閲覧画面のテンプレートでも読み込めば、両画面で一致します。

/* 例: css/editor-style.css */
.acms-entry {
  h2 {
    padding-block-end: 0.25em;
    border-block-end: 2px solid currentcolor;
  }
}

ラッパークラスをテーマ独自のものに変える場合

閲覧画面側で acms-entry 以外のクラス（例：custom-content-style）でスタイルを当てている場合は、編集画面のラッパークラスもそれに合わせます。テーマの include/edit/custom.js 等で editorProps のクラスを上書きしてください。

/* themes/ご利用テーマ/include/edit/custom.js */
ACMS.Ready(function () {
  ACMS.Config.blockEditorConfig.editorProps.editorProps.attributes.class = 'custom-content-style';
});

設定したクラスはエディターの編集領域に付与されます。

クラス名を変えたら、include/edit/custom.js 等のラッパークラスカスタマイズ処理を記述したJavaScriptと本文領域のCSS をテーマ直下 admin.html で読み込むようテーマ側をカスタマイズします。

/* 例: css/editor-style.css */
.custom-content-style {
  /* 本文領域のスタイル定義を書く */
}

<!-- /themes/ご利用テーマ/admin.html -->
@section("editor-css")
<link rel="stylesheet" href="/css/editor-style.css">
@endsection

@section("admin-js")
@parent
<!-- 編集画面用カスタムJSを読み込み -->
<script src="/include/edit/custom.js"></script>
@endsection

管理画面でのみ調整したい差分

レイアウト上、編集画面と閲覧画面で完全に同一にはできない部分（操作 UI のための余白など）は、管理画面のラッパー .acms-admin-block-editor を起点にしたセレクタで個別に上書きできます。標準テーマでも、カラムの間隔を管理画面だけ固定値にしている例があります。

/* 閲覧画面側 */
.acms-entry [data-type='columns'] {
  gap: var(--unit-gap-x);
}

/* 管理画面側（操作しやすいよう余白を固定） */
.acms-admin-block-editor [data-type='columns'] {
  gap: 1rem !important;
}

主なクラス名・設定キー