WordPress

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

投稿日:2019年11月22日 更新日:

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

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

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

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

段落ボックス

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

カスタムHTMLボックス

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

矢印の先の斜め線部分をドラッグ・アンド・ドロップしてリサイズできます

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

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

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

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

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

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

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

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

  1. resize プロパティ:値が “none” になっているのを “vertical” に変更する(縦方向のみリサイズ可能にする)。
  2. max-height プロパティ:具体的な数値がセットされているが、これを “none” に変更する(縦方向の高さに上限を設定しない)。
<textarea> タグの resize プロパティ と max-height プロパティ (Chrome 開発者ツールで確認)

この変更を実現する 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 キーを押すだけです。

[Console] パネル上でコードを実行することができます

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

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Vitals

WordPress: 特定の記事に特定のCSSを出力する方法

WordPress: 特定の記事に特定のCSSを出力する方法

WordPress

WordPress 5.4 以降で記事にリンクを貼る際のオプション

WordPress 5.4 以降で、記事にリンクを貼る際のオプションについて説明します。

WordPress

WordPress テーマ STINGER 8 で、style.css の変更をすぐに反映させる方法

WordPress の無料テーマである STINGER 8 のカスタマイズのお話です。 スポンサードリンク 目次1. 問題点2. 対策準備作業style.css に変更を加えた後に必要な作業3. まと …

WordPress

【WordPress】Gutenberg をカスタマイズするための情報

WordPress の Gutenberg をカスタマイズするための情報を紹介します。

WordPress

【WordPress】Gutenberg の 画像ブロック(core/image)で相対URLをセットする

WordPress の Gutenberg において、「 画像ブロック (core/image)」で相対URLを使用するプラグインを作りましたので紹介します。