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

説明

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

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

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

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

具体的なコード次の通りで、投稿編集ページがリクエストされた際に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）が動的に生成されており、クラス名の一部〇〇〇は流動的である。そのためブラウザの検証機能でクラス名を確認しなければならないのが難点といえる。

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