ワードプレスのブロックエディタ（グーテンベルク）でエディタ画面も実際の記事ページと同じような見た目にしてる！という人も多いかもしれませんね。

ウィズウィグというか見たまんまのエディタ画面で記事を書けるほうが記事の出来上がりをイメージしやすいですよね。

んで気になるのがブロックエディタのボタンデザイン。

ぼくも、エディタ画面の見た目を本番の記事ページと同じcssを入れ込んでたんですが、ボタンが表示されない！なんで？とけっこう詰まる。消えてるのはエディタ画面だけで公開する記事ページではボタンはちゃんと表示されてるんでいいっちゃいいんですが、やっぱ気になる。

ということでここではワードプレスのブロックエディタでエディタ画面のボタンを表示させる方法を。

 

このcssを追加で解決

下記cssをエディタに与えているcssに入れ込むだけでボタン表示されない問題が解決します。

 

css

	.wp-block-button__link{
		color: ○○;
		background-color: △△;
		font-size: 1.125em;
		padding: .667em 1.333em;
		text-decoration: none;
	}

 

colorとbackground-colorにはそれぞれボタンの文字色/背景色として設定したい色にしてくださいね。

 

なんでボタンだけ表示されない？

ワードプレスのグーテンベルクで、エディタ画面のボタンだけ表示されない問題は無事解決したんですが、なんで？というのをサクッと。

これはぼくの場合はですがグーテンベルクのエディタに適用してたエディタ用cssにもreset.cssを入れてたのが原因でした。

このボタンてdivタグなんですよね。

んでreset.cssを入れちゃうとdivに対して「padding:0」が設定されちゃう。普通ならreset.cssの設定よりもほかのデザインが優先されるんでいいんですが、エディタ画面の場合は「.editor-styles-wrapper」というのが読み込ましたcssに全部ついて設定されちゃうんです。

言葉だけだとわかりづらいので、例を書くと、

 

グーテンベルクに読み込ませたcss

h2{
}

 

実際にエディタで有効になるcss

.editor-styles-wrapper　h2{
}

 

という風に自動で「.editor-styles-wrapper」がくっつく。

つまりcssの優先度、というかネスト度がクラス名が自動付与されたことにより強くなっちゃうんですよね。

それが原因でワードプレスが自分で用意しているボタン用css「.wp-block-button__link」より優先度が上がっちゃう。だからpaddingがなくなっちゃう、と。

 

ちなみに

ちなみに今回ブロックエディタのエディタ画面に追加するのは、

functions.php

add_theme_support( 'editor-styles' );
add_editor_style( '○○.css' );

でやっています。他にもやり方はあるみたいなんですがこのやり方だと上で書いたように自動で「.editor-styles-wrapper」がつきます。

 

まとめ

ワードプレスのブロックエディタ（グーテンベルク）のエディタ画面でボタンが表示されない！問題の解決方法を紹介しました。

まとめるとエディタ用に用意したcssでresetしちゃってて、そのresetデザインが「.editor-styles-wrapper」のせいで優先度上がっちゃってたのが原因。ブロックのためのcssより優先度上がっちゃうんですよね。

上の解決方法では仕方ないのでボタン用のcssである「.wp-block-button__link」を再度設定することで対応しています。まあボタンの初期色はグーテンベルクの黒色よりも、テンプレート独自にしたかったしいい対応だと思います。

もし黒色のままでいい、というのならそもそも「add_editor_style()」にreset.cssを読み込ませなければそれでもボタンは表示されます。

参考にしてみてくださいね。