この記事は最後に更新してから1年以上経過しています。

ブロックエディターをちょっとだけカスタマイズしてみる

説明

ブロックエディターで投稿を編集していると「ここは〇〇だったらいいのにな」と思うところがある。今回は、そんな気になるところをいくつか(自分好みに)調整してみた。

フォントサイズピッカーのリセットボタン

日本語環境のブロックエディターでまず違和感があるのが、段落ブロックなどのサイドバーに表示されるフォントサイズピッカー部分。英語環境と異なり「リセット」ボタンが折り返されているところだ。

日本語環境で折り返されているフォントサイズピッカーの「リセット」ボタンを折り返さないように

対策はいくつか考えられるが、ここではシンプルにサイドバーの幅を調整して折り返さないようにした。

具体的なコード次の通りで、投稿編集ページがリクエストされた際にadmin_footerアクションを使ってインラインスタイルを出力するというものだ。

global $pagenow;
if ( is_admin() && in_array( $pagenow, array( 'post.php', 'post-new.php' ) ) ) {
	add_action( 'admin_footer', 'customize_editor_setting', 999 );
}

function customize_editor_setting() {
	$editor_setting = "
@media (min-width: 782px){
	.interface-complementary-area{ width: 290px; }
	.components-font-size-picker__controls{ max-width: 258px; }
}
";
?>
<style type="text/css">
<?php echo $editor_setting; ?>
</style>
<?php
}

投稿編集ページはレスポンシブ対応により、幅が782px以上の場合にはinterface-complementary-areaクラスが280px、components-font-size-picker__controlsクラスが248pxが適用されているが、それぞれを10px拡張した。なお、適用されるフォントの影響を受けるので、上記でも折り返す場合はさらに幅を拡張してほしい。

フォントサイズのプルダウンメニュー

テーマによって選択できるフォントサイズの種類は異なるが、「Twenty Twenty-One」のように多めの場合はプルダウンメニューの表示が気になる。

各メニュー項目の空きを狭めてすっきり

各項目の間隔はpaddingが8pxと指定されており、その影響で最後の「カスタム」が隠れてしまっている。間隔が広めに設定されている主な理由はタブレットでの操作性を考慮したためであり、タブレットを使用しないのであれば間隔を少し狭めても大きな問題はならないだろう。ということでメニュー項目向けのスタイルとして次の内容を$editor_settingに追加してみた。

.components-custom-select-control__item{ padding: 4px 4px 4px 8px; }

ラベルが「カスタ...」

バージョン5.8にアップデートしたタイミングだったと思うが、自分の環境ではフォントサイズを編集するinput要素向けのラベルが「カスタ...」と表示されるようになった。機能的な不具合ではないが、常に目にとまり気になってしまう。

カスタ...をカスタムに

このように表示される理由はlabel要素に text-overflow: ellipsis; が指定され、その親要素であるdiv要素に次のようなクラススタイルが適用されているためだ。

.css-〇〇〇-View-LabelWrapper {
	max-width: calc( 100% - 10px );
}

自分の環境ではcalc関数内の-10pxを-8px以下に変更することで「カスタム」と表示されるようになった。実際に適用するためこれまでと同じようにスタイルを上書きしたいのだが、このクラススタイルはブロックエディター(JavaScript)が動的に生成されており、クラス名の一部〇〇〇は流動的である。そのためブラウザの検証機能でクラス名を確認しなければならないのが難点といえる。


英語環境のデザイン時にもう少し幅に余裕を持たせ、翻訳テキストは(適用される場所を意識し)状況に応じて略語のような字数の少ないものを採用するようになればいいのかな。。。


最終更新 : 2021年11月03日 15:16

お勧め

set_transient(2019年4月23日 更新)

bool set_transient( string $transient, mixed $value [ , int $expiration = 0 ] )
トランジェントの値を設定する。

wp_should_replace_insecure_home_url(2021年3月19日 更新)

bool wp_should_replace_insecure_home_url()
コンテンツ内のサイトアドレス('home')をhttpからhttpsに書き換えるべきか調べる。

get_oembed_response_data(2018年12月7日 更新)

mixed get_oembed_response_data( mixed $post, int $width )
oEmbedレスポンス情報を取得する。

apply_filters(2022年11月8日 更新)

mixed apply_filters( string $tag, mixed $value [ , ...$args ] )
フィルターを実行する。

get_next_post_link(2015年5月28日 更新)

string get_next_post_link( [ string $format = '%link &raquo;' [ , string $link = '%title' [ , bool $in_same_cat$in_same_term = false [ , mixed $excluded_categories$excluded_terms = '' [ , string $taxonomy = 'category' ] ] ] ] ] )
直後の投稿ページのリンクを取得する。