Snow Monkey でこれまでにおこなった Gutenberg 対応についてまとめてみた

テーマサポート編

Gutenberg には、テーマの PHP でカスタマイズできる初期設定がいくつかあります。詳しくは下記を参照。

全幅/幅広のサポート

Snow Monkey は全幅/幅広をサポートしています。1カラムのときに画像を画面いっぱいに表示させたり、画面いっぱいまではいかなくても文章よりも広めの幅で表示させたり、というようなものです。これは次のようなコードをテーマの functions.php に貼り付けることで実現できます。

add_action(
	'after_setup_theme',
	function() {
		add_theme_support( 'align-wide' );
	}
);

そうすると、下記のように幅広/全幅に対応したブロックに、設定ボタンがでるようになります。

実際には、.alignfull や .alignwide という class をつけたり外したりするだけなので、全幅にしたり幅広にしたりするスタイルは自分で書かないといけません。これについては後述します。

デフォルトブロックスタイル（theme.css）の読み込み

add_action(
	'after_setup_theme',
	function() {
		add_theme_support( 'wp-block-styles' );
	}
);

上記のコードを追加することで、Gutenberg のデフォルトブロックに対する色や線などの装飾的なスタイルが読み込まれるようになります。

僕はそのデフォルトスタイルを打ち消すのが面倒だったので上記のコードは追加しませんでした。ただ、Gutenberg 上では強制的にデフォルトブロックスタイルが読み込まれるので、実際の表示と合わせるために次のコードを追加して Gutenberg 上でもデフォルトブロックスタイルが読まれないようにしました。

add_action(
	'enqueue_block_editor_assets',
	function() {
		gutenberg_override_style( 'wp-block-library-theme', null );
	}
);

エディタースタイル読み込み編

これまで、クラシックエディター用の CSS は add_editor_style、Gutenberg 用の CSS は enqueue_block_editor_assets で読みませるようになっていましたが、Gutenberg 用の CSS も add_editor_style でいけるようになったので今は Gutenberg 用の CSS も add_editor_style で読み込ませています。

別に enqueue_block_editor_assets のままでも良いのですが、add_editor_style の何が便利かというと、Gutenberg 用の CSS を書くときに面倒くさくなりがちな CSS の詳細度の問題を自動的に解決してくれるんですよね。具体的にどのような処理をしているかは下記の記事が詳しいです。

クラシックエディター、Gutenberg、どちらも add_editor_style で対応できるようになったので共通の1つのエディタースタイルを用意してそれを使ってもよいのですが、Snow Monkey では一応クラシックエディター用、Gutenberg 用、2つのエディタースタイルをつくり、クラシックエディターの場合はクラシックエディター用を、Gutenberg の場合は Gutenberg 用のエディタースタイルを読み込ませるようにしています。こんな感じ。

/**
 * Support editor styles
 *
 * @return void
 */
add_action(
	'after_setup_theme',
	function() {
		add_theme_support( 'editor-styles' );
	}
);

/**
 * Use main stylesheet for visual editor
 *
 * @return void
 */
add_action(
	'admin_enqueue_scripts',
	function() {
		if ( function_exists( 'is_gutenberg_page' ) && is_gutenberg_page() ) {
			$stylesheet = [ 'assets/css/gutenberg.min.css' ];
		} else {
			$stylesheet = [ 'assets/css/editor-style.min.css' ];
		}

		add_editor_style( $stylesheet );
	}
);

生 CSS を書いているのであれば2つのエディタースタイルを管理するのは大変だと思いますが、Snow Monkey の場合は Sass を使って @import しているのでそれほど大変ではないです。

エディタースタイル編

全貌を書くと長すぎて面倒くさいので、掻い摘んで書きます。

記事内基本要素（見出しとか）のスタイル定義を反映

Snow Monkey は entry-content() という mixin を持っていて、その中で記事の基本要素のスタイルを定義しています。これも詳細は端折りますが下記のような感じ。

@mixin entry-content() {
  > h2 {
    ...
  }

  > h3 {
    ...
  }
}

特徴的なのは、直下セレクタを使っていることです。普通は .entry-content h2 とか子孫セレクタを使いたくなるじゃないですか。

でもそうすると、例えばプラグインでショートコードを追加したときにそのショートコードが h2 を含むコンポーネントだったらそこにまで不要なスタイルが当たってしまうとか、子テーマで独自の HTML/CSS コンポーネントをつくってエディタ内で使ったら不要なスタイルが当たってしまったとか、そういうことって結構ありますよね。でそれを打ち消すコードが溢れて意味がわからなくなってくるという…。

それならば最初から影響範囲を最小限に抑えるようなコードを書けば良いのです。直下セレクタを使っているのはそのためです。これまでのクラシックエディターの場合は何が入力されるのか予想がつかなかったので結構神経を使わないといけなかったのですが、Gutenberg の場合はブロックを入れていく形なのでどのような HTML が入るかきっちり決まります。なのでこのようなスタイルの書き方もかなりやりやすくなりました。

と、ここまでが前置き（長い…）。Gutenberg 上では、入力欄やツールバーをブロックごとに持たせないといけないとかそういう都合で HTML の構造が実際の画面と異なります。なので、Gutenberg 上でもちゃんとスタイルが当たるように、Gutenberg 用のエディタースタイルに次のようなコードを追加しています。

[data-type="core/paragraph"] .components-autocomplete,
[data-type="core/heading"] .components-autocomplete,
.wp-block-freeform {
  @include entry-content();
}

※ちょっとこれも完璧ではないようで、入れ子のときとかに Gutenberg 上の意図しない要素に見出しのスタイルがあたってしまうことがあるようなので、もうちょっと調整が必要です。

Gutenberg の横幅を広めにカスタマイズ

Gutenberg の横幅は、デフォルトでは580pxと狭めです。多分その幅が執筆しやすいとかそういう理由だと思いますが、実際の画面の横幅とあまりにも違うと見た目の印象も変わってきてしまうので、Snow Monkey の実際の画面の横幅にあわせて広めに調整をおこないました。こんな感じ。

$content-width: 1000px;
$border-width: 1px;

.wp-block {
  max-width: $content-width;
}

.wp-block[data-align="wide"] {
  max-width: $content-width + 220px;
}

.wp-block[data-align="full"] {
  max-width: none;
}

.editor-block-list__block {
  @include _media-min(600px) {
    &[data-align="wide"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar,
    &[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar {
      .editor-block-toolbar {
        max-width: $content-width;
      }
    }

    &[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar {
      .editor-block-toolbar {
        max-width: $content-width - $border-width - $border-width;
      }
    }
  }
}

.wp-block-image {
  > div {
    > div {
      max-width: none !important;
      max-height: none !important;
    }
  }
}

フロントスタイル編

全体的な感想

実際の表示画面用のスタイルはですねー、細かいことを書き出すとキリがないので実際に Gutenberg 対応をさせていっての感想ですが、Gutenberg 以前のスタイルと Gutenberg 以後のスタイルの互換性をどうするかは気にしないといけなくて、それがちょっとゴジャゴジャっとなるなーと。

例えば、これまで引用は blockquote 要素だったわけですが、これからは .wp-block-quote になるわけです。.wp-block-quote も blockquote なわけで、そのままでもいけるやん！と最初は思ったのですが、.wp-block-pullquote も blockquote だったりするわけですよね。あと code とか pre、table もそんな感じで。だからどうしてもコードがダブついちゃうというか。

これから新しくつくるテーマであれば Gutenberg に特化してしまって、その辺は気にしないようにするというのはアリかもしれませんが、カスタム投稿タイプとかクラシックブロックとか考えるとうーんという感じ。多分この辺りはまだ皆試行錯誤でベストプラクティスが無い段階だと思いますので、実際にやってみた人たちで知見をシェアしあってベスト語り合いたいなーと思ったりします。

全幅/幅広対応

やり方はいろいろあると思いますが、僕の場合は今は下記のコードで落ち着いています。

@mixin alignfull() {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  width: auto;
  max-width: none;
}

@mixin alignwide() {
  @include _container();
  @include alignfull();
  position: relative;
  right: -50vw;
  transform: translateX(-50%);
  max-width: $_container-max-width;
}

Snow Monkey アドベントカレンダーにご参加ください！

参加しても良いよーという方がいましたらぜひご参加くださいませ。ユーザーさんの声や、他業者さんからみた Snow Monkey などめっちゃ聞きたいので、よろしければぜひ！

Snow Monkey Advent Calendar 2018 – Adventar

有料 WordPress テーマ Snow Monkey のアドベントカレンダーです！Web サイト：https://snow-monkey.2inc.org昨年：https://adventar.org/calendars/2483

adventar.org