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

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

関連記事

WordPress

WordPress プラグイン開発における多言語対応(gettextを利用する場合)

目次1. はじめに2. 想定している開発環境3. gettext のインストール4. 多言語対応の作業1. プログラム中の翻訳文字列を使用する箇所で、専用の関数を使うようにします。2. 翻訳ファイルを …

WordPress

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

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

WordPress の Attitude テーマに日本語翻訳ファイルを使用する(子テーマ利用)

WordPress の Attitude テーマに日本語翻訳ファイルを追加する方法です。 子テーマを利用していることを前提としており、子テーマのディレクトリ側に翻訳ファイルを追加します。 目次前置き( …

WordPress

WP Cerber Security で「jQuery is not defined」エラーが発生した場合の対処法

WordPress のプラグイン「WP Cerber Security」で「Uncaught ReferenceError: jQuery is not defined」というエラーが発生した場合の対処法を紹介します。

WordPress

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

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