グーテンベルグの開発者たちは、どんなテーマを使って「新しい編集体験の先にある、将来的に基本になるサイトのゴールを示すのでしょうか？
Gutenberg editor loaded with the Twenty Seventeen theme
現在のところ、グーテンベルグのためのテーマが公式に発表されていないので、デフォルトテーマで試されているようです。
グーテンベルグのコア実装が近づくにつれ、グーテンベルグブロックの作成等、技術的な関心が深まっているように思いますが、
グーテンベルグを適用した場合に、サイトの見た目が変更されたりしないかどうかチェックしておくといった作業も必要と思いますので、簡単なメモを残したいと思います。
フロントエンドでは、多かれ少なかれ、スタイルの干渉は発生する
既存テーマは、グーテンベルグが実装されたときに、生き残れるのだろうかと心配している。グーテンベルグの諸機能を実際にテーマで表示しようとしても、グーテンベルグをサポートするテーマはなかなか見つかりませんし、プラグインを有効にしただけでは、メディアクエリーを新たに追加するなどしないと、モバイルではうまく表示できなかったりします。
クラッシックエディタを使い続けることもできますが、どちらをとるかは簡単に決められないと考えている人も少なくないと思います。
グーテンベルグを選んだ場合、どのくらいの手間をかけると、自分のサイトがうまく動くようになるのか、見積もっておくといいかもしれません。
運営するサイトは、グーテンベルグでもうまく動き続けるのか？
現在、グーテンベルグは、2種類のスタイルシートをロードする仕組みになっています
一つは、グーテンベルグの基本スタイル
<link rel='stylesheet' id='wp-block-library-css' href='https://example.com/wordpress/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1535769794' type='text/css' media='all' />
functions.phpで、以下を追加すると
add_theme_support( 'wp-block-styles' );
次のような、スタイルが追加される。
<link rel='stylesheet' id='wp-block-library-theme-css' href='https://example.com/wordpress/wp-content/plugins/gutenberg/build/block-library/theme.css?ver=1535769794' type='text/css' media='all' />
中身は、(gutenberg3.7)以下のような、色とボーダーの指定が含まれる。
色や枠線は、テーマのCSSとコンフリクトしやすいため、ブロック構造をコントロールするCSSと分離されています。
つまり、コンフリクトするわけです。
なぜコンフリクトするのか？
ブロックには、wp-block-ブロックタイプといった。特有のクラスがセットされ、そのブロッククラスに対してスタイルが指定されているため、コンフリクトしないはずですが、Gutenberg以前（現在のテーマ）の場合、多くは要素に対してスタイルが指定されます。投稿本文はメニューやサイドバーを除けば、ノードの深さはHTMLの最も深いところにあり、上位ノードに指定されたスタイルの影響を受けやすくなっています。
例えば、blockquoteならば、左側にボーダーの指定がよくあります。幅も色も、テーマによって異なります。
gutenbergのblockquoteのタイプに、pullquoteというタイプがありますが、グーテンベルグは、上下にボーダーをセットします。
こうなると、blockquoteのボーダーは、逆コの字のボーダーがついてしまいます。
さらに、テーマがサイドバーをサポートしているような場合は、テキストウィジェット用のスタイルと、投稿本文用のスタイルを別に持っているかもしれません。
こうなると、投稿本文に適用されるスタイルの指定は、クラスと要素の組み合わせで指定されます より複雑になりますね。
スタイル指定が、要素をターゲットにして指定されていなければ、（wp-classic-block-ブロックタイプ なんてクラスがついていれば）それぞれのスタイルは干渉せずに済みますが、要素をターゲットにしてスタイルが指定されている以上、ある程度の干渉は避けられないのです。
gutenbergは、この点について2つのスタイルシートをロードすることで、できるだけコンフリクトしない工夫をしていますが、テーマやプラグインで、詳細度の高いスタイル指定がされている場合は、marginやpadding等基本構造を指定しているようなプロパティでも、コンフリクトは発生するでしょう。
グーテンベルグが、より影響の少ないスタイル指定を模索すればするほど、ぱっと見で壊れていないスタイル（運営者や、テーマ製作者は、目が慣れてしまっているため）も、微妙に問題を含んだ厄介なスタイルの見直しが発生する可能性はあるのではないかと思います。
ネガティブな情報を提供するつもりはありません。ただ、そんなことが予想されるので それに出会ったら「やっぱりいたか」ぐらいの軽い気持ちで、乗り切っていきましょう。
ただ、ブロックには特別なクラス名をつけて、スタイルをしているため、ドンと大きく崩れて、読めなくなるといった事ではなく、運営者からは、目の届きにくい部分で、特定の要素のデザインが壊れるといった事柄です。 運営者から見ると、一番いやらしい形での不具合ですね
@keyframes fade-in {
0% {
opacity:0
}
to {
opacity:1
}
}
@keyframes editor_region_focus {
0% {
box-shadow:inset 0 0 0 0 #33b3db
}
to {
box-shadow:inset 0 0 0 4px #33b3db
}
}
@keyframes rotation {
0% {
transform:rotate(0deg)
}
to {
transform:rotate(1turn)
}
}
.wp-block-code {
padding:.8em 1em;
border:1px solid #e2e4e7;
border-radius:4px
}
.wp-block-code,.wp-block-preformatted pre {
font-family:Menlo,Consolas,monaco,monospace;
font-size:14px;
color:#23282d
}
.wp-block-pullquote {
border-top:4px solid #555d66;
border-bottom:4px solid #555d66;
color:#40464d
}
.wp-block-pullquote cite,.wp-block-pullquote footer {
color:#40464d;
text-transform:uppercase;
font-size:13px
}
.wp-block-quote {
margin:20px 0
}
.wp-block-quote cite,.wp-block-quote footer {
color:#6c7781;
font-size:13px;
margin-top:1em;
position:relative;
font-style:normal
}
.wp-block-quote:not(.is-large):not(.is-style-large) {
border-left:4px solid #000;
padding-left:1em
}
.wp-block-separator {
border:none;
border-bottom:2px solid #8f98a1;
margin:1.65em auto
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
max-width:100px
}
.wp-block-table {
overflow-x:auto;
display:block;
border-collapse:collapse;
width:100%
}
.wp-block-table tbody,.wp-block-table tfoot,.wp-block-table thead {
width:100%;
min-width:240px;
display:table
}
.wp-block-table td,.wp-block-table th {
padding:.5em;
border:1px solid currentColor
}
.wp-block-video figcaption {
margin-top:.5em;
color:#6c7781;
text-align:center;
font-size:13px
}
Blocks and Theme Styling Overview · Issue #5360 · WordPress/gutenberg
7/13追記
テーマ用に準備されているブロックエディタ関連の機能
add_theme_support()という関数を使って、コアで準備されている機能を有効にすることができます。WordPress5.0では、以下の機能が準備されています。
responsive-embeds
oEmbedを使って、youtubeなどのメディアをページに挿入した場合、figure要素に、wp-embed-aspect-16-9 といったアスペクト比を表すクラスが追加されます。
この機能を有効化すると、body要素に、wp-embed-responsiveクラスが追加され、アスペクト比を表すクラスのスタイルが有効になります。
block-library/style.css(ver6.2) スタイル抜粋
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper {
position: relative
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before {
content: "";
display: block;
padding-top: 50%
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before {
padding-top: 42.85%
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before {
padding-top: 50%
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
padding-top: 56.25%
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
padding-top: 75%
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before {
padding-top: 100%
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-6 .wp-block-embed__wrapper:before {
padding-top: 66.66%
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before {
padding-top: 200%
}
有効になるスタイルは、おおむね上記のようなスタイルです。メディアによっては、複数のアスペクト比を持つものなどもありますので、これを有効にするとみんなOK！というわけにもいかなそうなので、テーマでの検証は必須です。
align-wide
有効にすると、ブロックエディタに広幅用のボタンが追加されます。このボタンを使う事で、alignwide,alignfullクラスがブロックに追加されるようになるので、
テーマでは、それに見合うスタイルを追加することになります。
dark-editor-style
有効にすると、ブロックエディタのbodyに、is-dark-themeというクラスが追加され、黒系の背景で、ツールバーが適切に表示されるようスタイルが調整されます。
block-library/editor.css
block-library/style.css(ver6.2) スタイル抜粋
.is-dark-theme .wp-block-cover-image.components-placeholder,
.is-dark-theme .wp-block-cover.components-placeholder {
background: hsla(0, 0%, 100%, .15)
}
.is-dark-theme .editor-block-list__layout .is-selected .reusable-block-edit-panel {
border-color: hsla(0, 0%, 100%, .45) hsla(0, 0%, 100%, .45) hsla(0, 0%, 100%, .45) transparent
}
disable-custom-colors
カラーパレットを、使用できなくします。
disable-custom-font-sizes
ブロックエディタの、カスタムフォントサイズを使用停止します。
editor-color-pallete
カラーパレットを有効にします。
editor-font-sizes
カスタムフォントサイズを有効にします。
editor-styles
ブロックエディタで、ユーザースタイルを有効にします。
wp-block-styles
色と枠線のコア標準のスタイルを有効にします。
では、主要なものを見ていきましょう。
ブロックエディタの目玉
functions.phpで、align-wideを有効にすると、コンテンツ幅を上回る幅で、画像やギャラリーを表示できるようになります。
function gutenberg_test_setup() {
add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'gutenberg_test_setup' );
この機能のスタイルは、それぞれのテーマでCSSを調整することになります。
この機能を TwentySeventeenで有効にしてみましょう。テストは、サイドバーのない固定ページで試してみてください。
(gutenberg プラグインはインストール済みであるとして、インストール方法等は省きます）
function gutenberg_test_setup() {
add_theme_support( 'align-wide' );
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'gutenberg_test_setup' );
functions.php二畳紀の設定を追加すると、グーテンベルグエディタの、画像ブロック、ギャラリー、動画等のブロックに「全幅、幅広」といったボタンが追加されます。
このボタンを選択した場合、それぞれのブロックには、aliginwide(幅広の場合)、fullwidth(全幅の場合)というクラスが追加されます。
style.cssに以下のサンプルスタイルを追加します。
.alignfull{
width:100vw;
margin-left: calc((100vw - 740px) * -0.5);
max-width:100vw;
}
.alignwide{
width:calc( 740px + 200px );
margin-left: -100px;
max-width:100vw;
}
以上で、TwentyseventeenのPC（画面サイドバーなし）では、全幅で表示されるようになります。ブラウザ幅が小さい時、サイドバーありの調整は別途行ってください。
740pxというのは、テーマの $content_widthです。width:100vw;を指定すると、entry-contentの左端から表示されるので、100vwと$content_widthから、ネガティブマージンの量を計算して、ブラウザ左端から表示するように調整しています。
同様のことを、テスト用のサイトに適用すると、ご自身のテーマでどのような感じになるのか、感覚がつかめるのではないかと思います。
グーテンベルグのブロックを一通り表示してみたい場合は、
Block Unit Test for Gutenberg | WordPress.org
というプラグインで、インストールすると、一通りのブロックを表示するページが自動的に作成されるといったものもありますので、お手軽に試験もできそうです。
カラーパレット
gutenbergでは、段落 ボタンブロックで、背景色 テキストカラーをテーマ側でカスタマイズ可能にするために、カラーパレットをテーマ独自のものに変更する機能があります。
以下のように、カスタムカラーを指定できます。
指定した色は、テキスト色と背景色として反映します。（両方とも同じパターンの色）
add_theme_support(
'editor-color-palette', array(
array(
'name' => esc_html__( 'Black', 'petrusschoeffer' ),
'slug'=> sanitize_title('black'),
'color'=> '#2a2a2a',
),
array(
'name' => esc_html__( 'Gray', 'petrusschoeffer' ),
'slug'=> sanitize_title('gray'),
'color'=> '#727477',
),
array(
'name' => esc_html__( 'White', 'petrusschoeffer' ),
'slug'=> sanitize_title('white'),
'color'=> '#eeeeee',
)
)
);
それ以外に、カラーピッカーで選択できる項目も追加されます。
カラーピッカーで選択した場合、背景色 前景色は、インラインスタイルで追加されますが、カスタムカラーの場合は、slugを含んだカラークラスが追加されますので、
それらのクラス用のスタイルをテーマで追加する必要があります。
クラス名は、以下のようなパターンで追加されます。
.entry-content .has-#{$slug}-color {
color:#{$color};
}
.entry-content .has-スラッグ-background-color {
background:#{$color};
}
段落のフォントサイズのカスタマイズ
グーテンベルグのデフォルトの段落要素のフォントサイズは、ちょっと大きめなので、カスタマイズをしておくといいかもしれません。
functions.phpに以下のように追加します。
add_theme_support( 'editor-font-sizes', array(
array(
'name'=> esc_html__( 'extra small', 'petrusschoeffer' ),
'shortName'=> esc_html__( 'XS', 'petrusschoeffer' ),
'size'=> 8,
'slug'=> sanitize_title('extra-small')
),
array(
'name'=> esc_html__( 'small', 'petrusschoeffer' ),
'shortName'=> esc_html__( 'S', 'petrusschoeffer' ),
'size'=> 12,
'slug'=> sanitize_title('small')
),
array(
'name'=> esc_html__( 'regular', 'petrusschoeffer' ),
'shortName'=> esc_html__( 'M', 'petrusschoeffer' ),
'size'=> 16,
'slug'=> sanitize_title('regular')
),
array(
'name'=> esc_html__( 'large', 'petrusschoeffer' ),
'shortName'=> esc_html__( 'L', 'petrusschoeffer' ),
'size'=> 36,
'slug'=> sanitize_title('large')
)
) );
フォントサイズのカスタマイズを行った場合は、カラーパレット同様 クラスを追加する必要があります。
（段落で、フォントサイズを「カスタムサイズ」で指定した場合は、クラスではなく、インラインスタイルでフォントサイズが指定されます。）
フォントサイズクラスのクラス名パターンは、以下のようになります。
.entry-content .has-スラッグ-font-size {
font-size:サイズpx;
}
カラーパレットや、フォントサイズのクラスは、エディタの詳細/追加CSSクラスで、直接クラスを指定することもできますので、見出しタイトル等でこれらのクラスも使用することができるので、うまく使うことで、統一感のある指定ができるかもしれません。工夫しておくと便利かもしれません。
今後さらなる変更もあるでしょうけど、、、