アンカーや追加CSSクラスをちょいちょい設定する関係で、ブロックエディターの高度な設定を開いたままにしたいと考えた。
この高度な設定は、英語だと「Advanced」とだけ表示される。
こちらで同じことを聞いている方がいた。
WordPress.org Support / Can I expand the “Advanced” tab in Gutenberg blocks by default?
いやー、そうですよね、ちょっと手間が掛かります。
解決策
これに1つの解決策を提示してくださる方が!
Github Gist / brandonjp / block-editor-open-advanced-on-mouseenter-code-snippets.json
Advancedを開いたままにすることはできないけれど、マウスが右ペインに入ると勝手に「高度な設定」が開く。
開いたままになるわけではないけれど、クリックしてからスクロールするよりはだいぶ簡単。
実装
提示されているのはソースコードで、それをどうにかしてWordPressに組み込まなければならない。
どうやればいいかなーとディレクトリを眺めていたのだが、結論からすると、
<WordPress home>/wp-content/themes/cocoon-child-master/functions.php
に提供していただいている関数を貼り付ければOK。
具体的には…このサイトでは、テーマに「Cocoon」を使わせていただいている。
Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
WordPress無料テーマ Coccon より抜粋
見た目はシンプルですが、初めての方でも感覚的に使えるように
便利な機能を織り込んで作りました。
100%GPLテーマなので自由にご利用いただけます。
WordPressがよく分かっていないろっひーでも、簡単かつ快適に使える素晴らしいテーマである。
今回の場合、block-editor-open-advanced-on-mouseenter-code-snippets.phpのソースコードから、
/** * Block Editor: Open Advanced on Mouseenter から add_action( 'admin_print_footer_scripts', 'block_editor_open_advanced_on_mouseenter' );
までをコピーしてくる。
それを、Cocoonに用意されているfunctions.phpに貼り付ける。
<WordPress home>/wp-content/themes/cocoon-child-master/functions.php
<?php //子テーマ用関数
if ( !defined( 'ABSPATH' ) ) exit;
//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();
//以下に子テーマ用の関数を書く
/**
* Block Editor: Open Advanced on Mouseenter
…
add_action( 'admin_print_footer_scripts', 'block_editor_open_advanced_on_mouseenter' );
一旦エディタを閉じて、もう一度エディタを表示させれば動き出す。
たったこれだけ。
さいごに
アンカーや追加CSSクラスの設定をもっと簡単にしたい、と思ったとき、もう少し違ったアプローチもあるのかもしれない。
それはそれでゆっくりと探していこう。
コメントはこちらから お気軽にどうぞ ~ 投稿に関するご意見・感想・他