WordPress 5.3 のエディターで、カスタムHTMLのボックスをリサイズ可能にする

1. WordPress 5.3 のエディタにおける問題点

WordPress 5 の新エディター「Gutenberg」では、記事内の各要素が「ボックス」として扱われます。

この「ボックス」は要素の種類によって性質が異なっており、「1行にしかならないボックス」と「複数行になるボックス」とがあります。

例えば、「段落ボックス」は 1行しかありません。

それに対して「カスタムHTMLボックス」は、複数行になります。

つい先日まで、この「複数行になるボックス」はリサイズすることができました（下画面）。

ところが WordPress 5.3 になった途端、このリサイズができなくなってしまいました。

「ボックス内の一部分しか見れない」状態で編集するのは、結構ストレスが溜まります。

本記事では、この複数行あるボックスをリサイズできるようにする方法を紹介します。

カスタムHTMLボックスを例として、リサイズを可能にする方法について説明します。

※ Chrome ブラウザを使います。

まず、Chrome の開発者ツールで、このカスタムHTMLボックスがどのような HTML で記述されているかを確認すると、予想通り <textarea> タグになっていました。

ざっとこのタグのプロパティを見ると、リサイズを妨げている2つのプロパティが見つかりました。リサイズを可能にするには、これらのプロパティの値を変更する必要があります。

この変更を実現する JavaScriptコードが以下です。

document.querySelectorAll('textarea.block-editor-plain-text').forEach((elm)=>{
  elm.style.resize = 'vertical';
  elm.style.maxHeight = 'none';
});

<textarea> タグに指定されている “block-editor-plain-text” というCSSクラス名を利用して要素を取得し、2つのプロパティ値を書き換えています。

「他のボックスに対してもリサイズ可能にしたい」という場合は、querySelectorAll() メソッドの引数に指定しているCSSセレクタを変更してください。

編集ページ上でこのコードを実行すれば、画面上に追加されているカスタムHTMLボックスがリサイズ可能になります。

但し、これから追加するカスタムHTMLボックスは対象とならないため、新しくカスタムHTMLボックスを追加したら、再度このコードを実行する必要があります。

どうやって実行するのかというと、編集ページを開いた状態で Chrome の開発者ツールを開き（Ctrl + Shift + I キー）、[Console] パネル内に上の JavaScriptコードを貼り付けて Enter キーを押すだけです。

ただ、この方法は面倒ですので、今回はブックマークレットを用意しました。

以下のリンクをブックマークに登録してください。
📑 3. おわりに

それでも本記事のブックマークレットは便利だと思いますので、よければ使ってください。私は使います。

この方法でリサイズ可能にしても、カスタムHTMLボックスの内容をクリックしたときに最大サイズに広がってしまうようです。よい方法が見つかったら、本記事に追記します。

もう１つブックマークレットを追加します。

こちらをブックマークに登録して実行すると、画面上のカスタムHTMLボックスに対して、内容が多ければ高さを 500px に変更します（元の高さは最大で 250px です）。

執筆者：labo