Gutenberg のためのテーマ対応

Gutenberg

グーテンベルグの開発者たちは、どんなテーマを使って「新しい編集体験の先にある、将来的に基本になるサイトのゴールを示すのでしょうか?

Gutenberg editor loaded with the Twenty Seventeen theme

現在のところ、グーテンベルグのためのテーマが公式に発表されていないので、デフォルトテーマで試されているようです。

グーテンベルグのコア実装が近づくにつれ、グーテンベルグブロックの作成等、技術的な関心が深まっているように思いますが、

グーテンベルグを適用した場合に、サイトの見た目が変更されたりしないかどうかチェックしておくといった作業も必要と思いますので、簡単なメモを残したいと思います。

フロントエンドでは、多かれ少なかれ、スタイルの干渉は発生する

既存テーマは、グーテンベルグが実装されたときに、生き残れるのだろうかと心配している。グーテンベルグの諸機能を実際にテーマで表示しようとしても、グーテンベルグをサポートするテーマはなかなか見つかりませんし、プラグインを有効にしただけでは、メディアクエリーを新たに追加するなどしないと、モバイルではうまく表示できなかったりします。

クラッシックエディタを使い続けることもできますが、どちらをとるかは簡単に決められないと考えている人も少なくないと思います。

グーテンベルグを選んだ場合、どのくらいの手間をかけると、自分のサイトがうまく動くようになるのか、見積もっておくといいかもしれません。

運営するサイトは、グーテンベルグでもうまく動き続けるのか?

現在、グーテンベルグは、2種類のスタイルシートをロードする仕組みになっています

一つは、グーテンベルグの基本スタイル

functions.phpで、以下を追加すると

次のような、スタイルが追加される。

中身は、(gutenberg3.7)以下のような、色とボーダーの指定が含まれる。

色や枠線は、テーマのCSSとコンフリクトしやすいため、ブロック構造をコントロールするCSSと分離されています。

つまり、コンフリクトするわけです。

なぜコンフリクトするのか?

ブロックには、wp-block-ブロックタイプといった。特有のクラスがセットされ、そのブロッククラスに対してスタイルが指定されているため、コンフリクトしないはずですが、Gutenberg以前(現在のテーマ)の場合、多くは要素に対してスタイルが指定されます。投稿本文はメニューやサイドバーを除けば、ノードの深さはHTMLの最も深いところにあり、上位ノードに指定されたスタイルの影響を受けやすくなっています。

例えば、blockquoteならば、左側にボーダーの指定がよくあります。幅も色も、テーマによって異なります。

gutenbergのblockquoteのタイプに、pullquoteというタイプがありますが、グーテンベルグは、上下にボーダーをセットします。

こうなると、blockquoteのボーダーは、逆コの字のボーダーがついてしまいます。

さらに、テーマがサイドバーをサポートしているような場合は、テキストウィジェット用のスタイルと、投稿本文用のスタイルを別に持っているかもしれません。

こうなると、投稿本文に適用されるスタイルの指定は、クラスと要素の組み合わせで指定されます より複雑になりますね。

スタイル指定が、要素をターゲットにして指定されていなければ、(wp-classic-block-ブロックタイプ なんてクラスがついていれば)それぞれのスタイルは干渉せずに済みますが、要素をターゲットにしてスタイルが指定されている以上、ある程度の干渉は避けられないのです。

gutenbergは、この点について2つのスタイルシートをロードすることで、できるだけコンフリクトしない工夫をしていますが、テーマやプラグインで、詳細度の高いスタイル指定がされている場合は、marginやpadding等基本構造を指定しているようなプロパティでも、コンフリクトは発生するでしょう。

グーテンベルグが、より影響の少ないスタイル指定を模索すればするほど、ぱっと見で壊れていないスタイル(運営者や、テーマ製作者は、目が慣れてしまっているため)も、微妙に問題を含んだ厄介なスタイルの見直しが発生する可能性はあるのではないかと思います。

ネガティブな情報を提供するつもりはありません。ただ、そんなことが予想されるので それに出会ったら「やっぱりいたか」ぐらいの軽い気持ちで、乗り切っていきましょう。


ただ、ブロックには特別なクラス名をつけて、スタイルをしているため、ドンと大きく崩れて、読めなくなるといった事ではなく、運営者からは、目の届きにくい部分で、特定の要素のデザインが壊れるといった事柄です。 運営者から見ると、一番いやらしい形での不具合ですね

Blocks and Theme Styling Overview · Issue #5360 · WordPress/gutenberg

ブロックエディタの目玉

functions.phpで、align-wideを有効にすると、コンテンツ幅を上回る幅で、画像やギャラリーを表示できるようになります。

この機能のスタイルは、それぞれのテーマでCSSを調整することになります。

この機能を TwentySeventeenで有効にしてみましょう。テストは、サイドバーのない固定ページで試してみてください。

(gutenberg プラグインはインストール済みであるとして、インストール方法等は省きます)

functions.php二畳紀の設定を追加すると、グーテンベルグエディタの、画像ブロック、ギャラリー、動画等のブロックに「全幅、幅広」といったボタンが追加されます。

このボタンを選択した場合、それぞれのブロックには、aliginwide(幅広の場合)、fullwidth(全幅の場合)というクラスが追加されます。

style.cssに以下のサンプルスタイルを追加します。

以上で、TwentyseventeenのPC(画面サイドバーなし)では、全幅で表示されるようになります。ブラウザ幅が小さい時、サイドバーありの調整は別途行ってください。

740pxというのは、テーマの $content_widthです。width:100vw;を指定すると、entry-contentの左端から表示されるので、100vwと$content_widthから、ネガティブマージンの量を計算して、ブラウザ左端から表示するように調整しています。

同様のことを、テスト用のサイトに適用すると、ご自身のテーマでどのような感じになるのか、感覚がつかめるのではないかと思います。

グーテンベルグのブロックを一通り表示してみたい場合は、

Block Unit Test for Gutenberg | WordPress.org

というプラグインで、インストールすると、一通りのブロックを表示するページが自動的に作成されるといったものもありますので、お手軽に試験もできそうです。

カラーパレット

gutenbergでは、段落 ボタンブロックで、背景色 テキストカラーをテーマ側でカスタマイズ可能にするために、カラーパレットをテーマ独自のものに変更する機能があります。

以下のように、カスタムカラーを指定できます。

指定した色は、テキスト色と背景色として反映します。(両方とも同じパターンの色)

それ以外に、カラーピッカーで選択できる項目も追加されます。

カラーピッカーで選択した場合、背景色 前景色は、インラインスタイルで追加されますが、カスタムカラーの場合は、slugを含んだカラークラスが追加されますので、
それらのクラス用のスタイルをテーマで追加する必要があります。

クラス名は、以下のようなパターンで追加されます。

段落のフォントサイズのカスタマイズ

グーテンベルグのデフォルトの段落要素のフォントサイズは、ちょっと大きめなので、カスタマイズをしておくといいかもしれません。

functions.phpに以下のように追加します。

フォントサイズのカスタマイズを行った場合は、カラーパレット同様 クラスを追加する必要があります。

(段落で、フォントサイズを「カスタムサイズ」で指定した場合は、クラスではなく、インラインスタイルでフォントサイズが指定されます。)

フォントサイズクラスのクラス名パターンは、以下のようになります。

カラーパレットや、フォントサイズのクラスは、エディタの詳細/追加CSSクラスで、直接クラスを指定することもできますので、見出しタイトル等でこれらのクラスも使用することができるので、うまく使うことで、統一感のある指定ができるかもしれません。工夫しておくと便利かもしれません。

今後さらなる変更もあるでしょうけど、、、


新着記事

コメントは受け付けていません