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を使ったのです。 因みに、セレクタ親セレクタを追加したり、直下を使ったり色々試してみたのですが効果なしでした。
コメント