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

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

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

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

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

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

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

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

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

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

2. カスタムHTMLボックスをリサイズ可能にする

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

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

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

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

1. resize プロパティ：値が “none” になっているのを “vertical” に変更する（縦方向のみリサイズ可能にする）。
2. max-height プロパティ：具体的な数値がセットされているが、これを “none” に変更する（縦方向の高さに上限を設定しない）。

この変更を実現する 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つのプロパティ値を書き換えています。

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

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

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

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

📂-WordPress

執筆者：labo