この記事は最後に更新してから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

お勧め

get_block_editor_settings(2021年8月17日 更新)

array get_block_editor_settings( array $custom_settings, WP_Block_Editor_Context $block_editor_context )
ブロックエディター設定内容を取得する。

urldecode_deep(2019年3月13日 更新)

mixed urldecode_deep( mixed $value )
変数内の文字列についてURLデコード処理を行う。

user_can(2018年5月27日 更新)

bool user_can( mixed $user, string $capability )
ユーザの権限を調べる。

get_locale(2019年1月15日 更新)

string get_locale( )
現在のロケール情報('ja'や'en_US'など)を取得する。

get_comment_time(2023年4月3日 更新)

string get_comment_time( [ string $format = '' [ , bool $gmt = false [ , bool $translate = true [ , int | WP_Comment $comment_id = 0 ] ] ] ] )
コメント投稿日時を取得する。