ブロックにオリジナルのCSSをあてよう - ブロックエディター私的マニュアル（α）

テーマにCSSを用意することで、ブロックにもCSSを当てることができます。

どんなブロックがあるか、どういうHTMLが生成されているのかは当サイトのブロック一覧でまとめていますので、ぜひ参考にしてくださいね。

基本的にオーバーライドでOK

ブロックのデフォルトCSSファイルよりもテーマのCSSの読み込みの方があとなので、テーマのCSSでブロックのクラスに対してスタイルをあてればデザインは適用できます。

たとえば、ボタンのデフォルトのカラーやマージンを変更しようと思ったら以下のようになります。

.wp-block-button {
	margin: 20px 0;
}

.wp-block-button__link {
	background-color: #ff3866;
}

なお、テーマ内の特定のクラス内のボタンブロック、といった指定の方法はしないほうがいいです。

例えば以下のようなコードです。

.entry-content .wp-block-button {
	margin: 20px 0;
}

.entry-content .wp-block-button__link {
	background-color: #ff3866;
}

こうしてしまうと、エディター画面には.entry-contentがないのでCSSが適用されなくなり、どういうデザインになるのかがプレビューしないとわからなくなってしまいます。

editor-style.cssはより重要に

クラシックエディターのときは、カスタムフィールドを駆使して「このフィールドに入力したら、Webサイト上では横並びのレイアウトで表示される」といったような作り方が主だったと思います。

ブロックエディターになると、エディター上でレイアウトを組み立てながらコンテンツを作るので、editor-style.css で管理画面にデザインを適用するのはほぼ必須と考えて良いと思います。（弊社は標準で対応しています）

add_theme_supportでエディタースタイルをサポートして、editor-style.cssを作ることを意識しましょう。

add_theme_support( 'editor-styles' );

私はPostCSSで制作しているので、editor-style.cssの中身はエレメントに当てるCSSとブロックのCSSをインポートしています。

@import '_elements.css';

@import 'component/blocks/_image.css';
@import 'component/blocks/_media-text.css';
@import 'component/blocks/_gallery.css';
@import 'component/blocks/_quote.css';
@import 'component/blocks/_table.css';
@import 'component/blocks/_group.css';
@import 'component/blocks/_columns.css';

テーマ用、エディター用のCSSとして使い回すために、エディター上に存在しないクラス（およびid）の中のブロックという書き方をしない、ということです。

インナーブロック系はちょっとクセあり

特にカラムやギャラリーはデフォルトのCSSに少しクセがあります。

例えばカラムは、メディアクエリーによりマージンのとり方が.wp-block-column:not(:first-child)だったり、.wp-block-column:nth-child(2n)だったりと複雑になっています。

カラム同士のマージンを変えたいときはよくデフォルトのCSSを見てみてください。

/* WP5.3時点のカラムのCSSを一部抜粋 */
@media (min-width: 782px)
.wp-block-column:not(:first-child) {
    margin-left: 32px;
}

@media (min-width: 600px)
.wp-block-column:nth-child(2n) {
    margin-left: 32px;
}

@media (min-width: 600px)
.wp-block-column {
    flex-basis: calc(50% - 16px);
    flex-grow: 0;
}

.wp-block-column {
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

CSSがうまく適用されないときは優先度をチェック

おおよそのブロックは単一のクラスに対してスタイルがあたっているのですが、例えばメディアと文章では.wp-block-media-text .wp-block-media-text__mediaといった入れ子で書かれていることがあります。

スタイルを新たに足すときは入れ子にする必要はありませんが、もし上書きして値を変えたいときはどういうクラスに対して上書きしたいスタイルがあたっているのかもチェックしてみるといいですよ！