ブロック追加時の表示を1列にして見やすくする方法

WordPressのブロックエディタで、ブロックを追加しようとするとき、変に複数行表示されるし、アイコンが目立つしで見づらくないですか？

特に私のような旧人類には、アイコンで判断というよりは「段落」とか「画像」などの文字の方が判断がつきやすいです（笑）。

特に再利用ブロックで長いタイトルを付けた場合には、何が何だか分からないなんてことにもなってしまうかも知れませんね。

再利用ブロックをブロックパターンのようにカテゴリー分けできればまだいいとは思うものの、Githubのカテゴリなどで再利用可能なブロックを整理するでも議論されているようにちょっと難しいようです。

そこで今回は、以下の画像（左がBefore、右がAfter）のように、1列表示にして、少し文字を大きくして見やすくするための方法を紹介します。

一応他の部分に影響がないかは簡単にチェックしましたが、ひょっとすると何かあるかも知れませんのであしからず．．

ブロック追加時の表示を1列に変更する方法

今回のカスタマイズは、管理画面側のCSSを上書きして行いますので、通常のデザイン調整のように、子テーマやカスタマイザーのCSSへスタイルコードを追加しても適用されません。

紹介するスタイルコード自体は共通ですが、管理画面側のスタイルを上書きするには2通り方法がありますから、自身のスキルにあった方法で実装してください。

子テーマのfunctons.phpへ追記して適用する方法

この方法で適用するには以下のスキルが必要です。

• FTPクライアントツールで子テーマフォルダの中へファイルの転送ができる
• 子テーマのfunctions.phpへコードの追記ができる
• 万が一トラブルがあった際に自身で対処できる

子テーマのfunctions.phpへ以下のコードを追加するだけで、今回のカスタマイズについては簡単に適用できます。

今後管理画面側にいろいろとデザインカスタマイズをしたい（する可能性がある）という方は後述する方法で適用させることをおすすめします。

function ha_admin_editor_add_block_1column(){
echo '<style>
.components-button.block-editor-block-types-list__item {
    display: flex;
    flex-direction: unset;
    width: 100%;
    font-size: 17px;
    color: #1e1e1e;
    padding: 0px;
    align-items: unset;
    justify-content: unset;
    cursor: pointer;
    background: transparent;
    word-break: break-word;
    border-radius: 2px;
    transition: all .05s ease-in-out;
    position: relative;
    height: auto;
}

.block-editor-block-types-list__list-item {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}

.block-editor-block-types-list__item-icon {
    padding: 0px 20px;
    border-radius: 2px;
    color: #1e1e1e;
    transition: all .05s ease-in-out;
}

.block-editor-block-types-list__item-title {
    padding: 0px 2px 8px;
    font-size: 16px;
    text-align:left;
}
</style>';
}
add_action('admin_head','ha_admin_editor_add_block_1column');

管理画面用のファイルを用意して読み込ませる方法

この方法で追加するには、以下のスキルが必要です

• FTPクライアントツールで子テーマフォルダの中へファイルの転送ができる
• 子テーマのfunctions.phpへコードの追記ができる
• 万が一トラブルがあった際に自身で対処できる

以下の手順で適用します。

管理画面スタイル用のファイルを作る

パソコン上でテキストエディタ（Emeditorなどのエディタ推奨）を開き、以下のコードをコピーします。

.components-button.block-editor-block-types-list__item {
    display: flex;
    flex-direction: unset;
    width: 100%;
    font-size: 17px;
    color: #1e1e1e;
    padding: 0px;
    align-items: unset;
    justify-content: unset;
    cursor: pointer;
    background: transparent;
    word-break: break-word;
    border-radius: 2px;
    transition: all .05s ease-in-out;
    position: relative;
    height: auto;
}

.block-editor-block-types-list__list-item {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}

.block-editor-block-types-list__item-icon {
    padding: 0px 20px;
    border-radius: 2px;
    color: #1e1e1e;
    transition: all .05s ease-in-out;
}

.block-editor-block-types-list__item-title {
    padding: 0px 2px 8px;
    font-size: 16px;
    text-align:left;
}

「admin-style.css」という名前・拡張子でファイルを保存します。

管理画面スタイル用のファイルを子テーマへ転送する

FTPクライアントツールを使って、子テーマのstyle.cssと同じ階層へ先ほど作ったadmin-style.cssを転送します。

子テーマ内に同名ファイルがある場合は上書きされてしまいます。誤って上書きしてしまわないようファイル名を変更してアップロードしてください

管理画面スタイル用を読み込ませる

子テーマのfunctions.phpへ以下のコードを追加します。

function ha_admin_style_init(){
//登録
wp_register_style( 'admin-custom-style', get_stylesheet_directory_uri() .'/admin-style.css', array(), filemtime(get_stylesheet_directory() .'/admin-style.css'), 'all' );
//読み込み	
wp_enqueue_style('admin-custom-style', '', array(), '1.0', false);
}
add_action('admin_head','ha_admin_style_init');

前述したように、この方法で追加しておくと、後々管理画面側へ何かのデザインカスタマイズをする際、今回作成したadmin-style.cssへスタイルコードを追加するだけで済みますから便利です。