ブロックエディター対応のテーマをそのまま使ってる分にはテーマ独自の装飾効果でたとえば”囲み装飾”とかがあった場合は、編集画面上でもサイト表示上でも同じ装飾効果を確認することができます。
しかしながらカスタムで追加したオリジナルのスタイル等はサイト表示時にはその効果を確認できても、編集画面上では確認できず素の状態で表示されることになります。
旧エディター時代ならしょうがないですが、せっかくのブロックエディターなんですから編集時にもリアルタイムで効果を確認できた方が編集作業も捗るというものです。
そこでここではサイトに反映されるスタイル（効果）をブロックエディタ―の編集画面にもリアルタイムで反映（確認）させるやり方をご紹介します。
やり方
| 使い勝手 | 設置レベル |
|---|---|
| かなり便利 | オリジナルフィルをいじるので 作業工程・難 |
これ以降の内容に関してはご利用の環境や使い方次第で「サイトが正常に表示されなくなった」などの障害が生じる可能性もありますため、ご利用に際しては自己責任にてお願い申し上げます。
またトラブルが生じても元の状態に戻せるようテーマのオリジナルファイルをカスタマイズする際は事前にバックアップ（コピー等）しておくことをおススメします。
なおテーマ内包のオリジナルファイルに加えた変更（カスタマイズデータ）はテーマのアップデートで元に戻ってしまいますため、カスタマイズ内容も併せてコピーするなどしておいてください。
（子テーマであればその心配はありません）
まずは契約しているレンタルサーバーのファイル編集画面を開きます。
そして子テーマが保存されてるディレクトリ（フォルダ）まで開いたら、同じ階層に「editor-style.css」というファイル名でファイルを新規作成します。
親テーマだとアップデートの時に初期化されて（消えて）しまうので、子テーマを推奨します。
SWELLには子テーマが用意されており、ダウンロードすると子テーマ内にあらかじめ「functions.php」と「style.css」が同梱されてます。
たとえばエックスサーバーを使ってテーマ「SWELL」を利用している『sample.com』というサイトの編集画面用のスタイルシートであれば、
sample.com→public_html→wp-content→themes→swell_child
となります。
「editor-style.css」というファイル名は別のものでも構いませんが、その場合はこのあと説明するfunctions.php内のファイル名も変更する必要があります。
「editor-style.css」と同じ階層にある「functions.php」を開き、最下段に以下のコードをコピー＆ペーストします。
（意味は”編集画面ではeditor-style.cssを読み込んでね”というものです）
//編集画面にオリジナルスタイル反映
function add_block_editor_styles() {
wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/editor-style.css' );
}
add_action( 'enqueue_block_editor_assets', 'add_block_editor_styles' );他のテーマで子テーマを自作する場合は必ず「functions.php」という名称で新規作成します。
上記ファイルを開いたらとりあえず「<?php」と記入しておきます。
実際のコードは「<?php」の後ろでEnterキーを数回押してから記入すれば問題ないかと思います。（※動作未検証）
あとは充てたいスタイルを「editor-style.css」内に書き込むだけです。
一部のスタイルはそのまま書いても編集画面に反映されない場合があります。
たとえば見出しH2にオリジナルのスタイルを追加する場合、通常は
h2 {
color:red;
}のように書きますが、実際には
.post_content h2 {
color:red;
}のように書かないと反映されなかったりします。
この辺は使ってるテーマによっても異なってくるのでご注意ください。
コメント