Wordpress Gutenbergエディタで本文欄の表示・非表示を切り替える方法

はじめに

以前、以下の記事で本文欄を非表示にする方法を説明しました。

今回の要望は、ボタンを押したら表示・非表示を切り替えられるようにしてほしいとのことでした。

実装

Advanced Custom Fieldを使います。
使用するフィールドは、「メッセージ型」です。

「メッセージ型」は、任意のHTMLタグが使用できるので、
見た目(クラス)を他のフィールドと合わせれば、
まるで最初から用意していたかのようなデザインでボタンを表示できます。

フィールドタイプ: メッセージ
フィールド名: (入力しない - 入力してもなぜか自動で削除されます)
メッセージ:

<p class="description">本文の表示／非表示を切り替えます。本文欄を編集したい時のみお使いください。</p>
<button type="button" class="button acf-toggle-post-content">本文欄を<span>表示する</span></button>

HTMLをエスケープ: チェックしない

管理画面でのみ実行されるjavascriptファイルを用意し、以下のような記述をします。
jsファイルを用意する方法は各自お調べください。
もしかすると、上のメッセージ欄に直接scriptタグで入れても動きそうな気もします。

admin.js

jQuery(function ($) {
  // 編集画面 本文トグルボタン(ボタン自体は ACFのメッセージ型で実装)
  $(".acf-toggle-post-content").on("click", function () {
    const $article = $(".editor-styles-wrapper > .article-content");
    const $button = $(this);
    const $label = $button.find("span");

    // ラベル切り替え
    if ($article.is(":visible")) {
      $article.hide();
      $label.text("表示する");
    } else {
      $article.show();
      $label.text("非表示にする");
    }
  });
});

はじめはヘッダーの部分にボタン追加しようと思ったのですが、
Reactコンポーネントを編集しなければならないようで、学習コストが高いので断念しました。

以上