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

お勧め

wp_suspend_cache_addition(2023年6月8日 更新)

bool wp_suspend_cache_addition( [ bool $suspend = null ] )
キャッシュの追加を一時的に停止する。

wp_json_file_decode(2022年1月26日 更新)

mixed wp_json_file_decode( string $filename [ , array $options = array() ] )
JSONファイルをデコードする。

get_metadata_by_mid(2018年12月14日 更新)

object|bool get_metadata_by_mid( string $meta_type, int $meta_id )
IDを指定してメタデータを取得する。

human_time_diff(2019年11月18日 更新)

string human_time_diff( int $from [ , int $to = '' ] )
時間差を'5分'や'2日'のような感覚的な表現で取得する。

get_current_user_id(2013年9月18日 更新)

int get_current_user_id()
現在のログイン済みユーザーのIDを取得抽出する。