WordPress　Gutenberg編集モードに自作CSSを追加する方法

2022.03.09

WordPressのGutenbergは便利ですが、detailsを使ったアコーディオンを作りたい時など、カスタムHTMLを多用しますが、textareaの大きさがresize:none;になっており変更できませんでした。　これをresize:both;に変更する際に自作CSSを追加しました。

自作CSSの場所とファイル名

/wp-content/themes/テーマディレクトリ

wp_enqueue_style()内で、get_theme_file_uri()にファイル名を書くと、/wp-content/themes/cocoon-masterディレクトリの下を見に行くので、そこにcssファイルを入れておく必要がある。（注意：このディレクトリはCocoonを使用している場合です。　別テーマを使用している場合はそのフォルダ。）

そのディレクトリには、Cocoonの編集用のeditor-style.cssがあるので、ファイル名を変えて保存しなければ、既存のstyleが全て消えてしまうので、editor-style.cssと違うファイル名で保存しましょう。　私の場合、ichiri-editor-style.cssとしました。

こうする事で、テーマが持っているeditor-style.cssを生かしつつ、必要な部分だけ自作CSSで上書き・変更できます。

書込み方

function.phpか自作プラグインに以下を追記します

CSSを変更後、画面に反映させるには、スーパーリロード(Ctrl+F5)を押すか、phpでバージョン番号を変更するかです。　バージョン番号は下の’1.00.00’と書いてあるところを、’1.00.01’等に変更すれば、ブラウザは変更されたCSSを使ってくれます。スーパーリロードやバージョン番号を変える事をしないと、ブラウザのキャッシュに保存された今までのCSSが使用されます。

function add_gutenberg_editor_style() {
    wp_enqueue_style( 'block-editor-style', 
                       get_theme_file_uri('ichiri-editor-style.css' ),
                       array(),
                       '1.00.00'
    );
  }
add_action( 'enqueue_block_editor_assets', 'add_gutenberg_editor_style' );

ichiri-editor-style.cssは下記にしました。

優先順位を上げようと色々試したのですがelement.style {resize:none;}と.editor-styles-wrapper textarea {max-height:260px;}に勝てなかったので、!importantを付けました。

textarea.block-editor-plain-text{
  resize:both!important;
  max-height:1000px!important;
}

おまけ　ハンドル名を調べる方法

以下のコードをfunction.phpやプラグイン.phpに入れるとEditor時も公開時もハンドル名とURIパスがConsoleに表示されます。　Chromeの場合、F12を押しデバッグツールを表示して、メニューから”Console”をクリックしたら、Consoleを表示できます。

add_action('wp_print_scripts', function(){
		global $wp_styles;
		echo "<script>console.log('＜＜cssのハンドル名＞＞');</script>";
		foreach ( $wp_styles->queue as $val ) {
			echo "<script>console.log(\""."【ハンドル名】".$val."【URI】".$wp_styles->registered[$val]->src."\");</script>";
		}

		global $wp_scripts;
		echo "<script>console.log('＜＜Javascriptのハンドル名＞＞');</script>";
		foreach ( $wp_scripts->queue as $val ) {
			echo "<script>console.log(\""."【ハンドル名】".$val."【URI】".$wp_scripts->registered[$val]->src."\");</script>";
		}
	});

優先順位を上げるために$depに先に読み込ますcssのハンドル名を書こうとしました。　そのハンドル名が分からなかったので、上記プログラムでハンドル名を確認しようとしました。　しかし上記プログラムを実行したらichiri-editor-style.cssは既に一番最後に読み込まれるのが確認とれたので、$depで優先順位の操作は出来ませんでした。　優先順位を上げる事ができなかったので、やむなく!importantを使ったのです。　因みに、セレクタ親セレクタを追加したり、直下を使ったり色々試してみたのですが効果なしでした。

コメント