ブロックエディターがビジュアルエディターにできない。

  • 解決済 mashikaku

    (@mashikaku)


    6ヶ月、 2週前

    投稿や固定ページなどで、ブロックエディターに入るとコードエディターになってしまいます。
    右上のメニューからコードエディター←→ビジュアルエディターを切り替えようと思ったのですが、ビジュアルエディターがグレーアウトされてしまい選択ができず、直下に「プロフィール設定でビジュアルエディターを有効化できます。」というメッセージが表示されていました。

    メッセージに従って【ユーザー】→【プロフィール】を確認しても項目表示されず（これはWPが最近のバージョンだからだと思います）。
    直接DB内の wp_usermetaテーブルを見ると、
    rich_editing = “true”
    となっています。

    どなたか、ビジュアルエディターに切り替え可能にする方法を御存知の方はいらっしゃらないでしょうか？
    あるいは、上記のメッセージがプロフィールの設定以外の理由で出る条件を御存知の方はいらっしゃらないでしょうか？

    ■サーバ環境：AWS LightSail + bitnami インスタンス。サーバのセットアップは別の方がされたので詳しい事情はわかりません。SSH可能ですので調べることはできます。

    ■WP環境：WordPress6.8.2 + Twenty Twenty-Five + 有効化したプラグインなし

    ■試したこと：
    * ブラウザの開発者ツールを見て、ブロックエディター表示中にエラーが出ていないことを確認済み。
    * 他の管理者ユーザーを作成してそちらでログインし直すも同じ結果に。
    * BASIC認証を設定したため、それを外してみるも結果は変わらず。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • モデレーター Yukinobu Asakawa

    (@yukinobu)

    6ヶ月、 2週前

    こんにちは。

    対象のサイトはご自身で構築されたものですか？それとも開発者・制作者は別にいますか？

    おそらく、コードエディターしか使えない制限をかけているということは、ビジュアルエディターでの使用を想定していないように推測します。

    元々、対象のサイトを開発された方に「ビジュアルエディターを使いたい」と確認された方が良いと思います。
    切り替えて問題なく使えるか（レイアウトが崩れてしまうなど）どうかは別問題なので、

    • 本番環境のバックアップを行う
    • 開発・検証環境を作って試す

    など、慎重に作業すべきです。

    参考ページ
    https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/curating-the-editor-experience/disable-editor-functionality/

    /wp-content/themes/あなたのテーマ/functions.php などに機能制限するコードが記述されていることが多いです。

    トピック投稿者 mashikaku

    (@mashikaku)

    6ヶ月、 1週前

    Yukinobu Asakawaさん、ありがとうございます。

    まず、WordPress関係の開発者は私になります。
    ただし、AWS上にサーバおよびWordPerssのインスタンスを構築していただいた方は別となります。

    現状ですが、有効化したプラグインなし、テーマは標準のTwenty Twenty-Fiveと、ほとんどインストールされたままの状態です。
    念の為サーバ上のTwenty Twenty-Fiveと別途ダウンロードしてきたTwenty Twenty-Fiveを比較してファイルに変更がないことを確認しました。

    モデレーター Yukinobu Asakawa

    (@yukinobu)

    6ヶ月、 1週前

    なるほど。以下の点をご確認いただけますか？

    • エディターはJavaScriptで動作します。管理画面のエディター画面でエラーが出ていないか（ブラウザの開発者ツール[Console]で確認）。
    • サーバーやCDNの設定で必要なJS/CSSファイルがブロックされていないか確認。
    • AWS環境で権限やセキュリティグループ、WAF, S3, CloudFront等でJS/CSSの読み込みが制限されていないか確認。
    • WordPressのファイルパーミッションが正しく設定されているか（通常は644/755）。
    • ブラウザのアドブロッカーやセキュリティ拡張がJSをブロックしていないか。
      (別ブラウザやシークレットモードで試してみてください。)

    お使いの手元のパソコンはそのままで、ローカル開発環境や別のレンタルサーバーの WordPress でビジュアルエディターが使えるかも確認してください。
    そうすれば、ブラウザに起因する問題なのか、サーバーの問題なのか、切り分けることが容易になると思います。

    トピック投稿者 mashikaku

    (@mashikaku)

    6ヶ月、 1週前

    Yukinobu Asakawaさん、様々な確認事項ありがとうございます。
    自己解決と申しますかサーバを構築していただいた方に教わった方法で解決しました。

    ■結論
    add_filter('user_can_richedit', '__return_true');
    をfunction.phpなどに書く。

    ■原因
    以下、回答からソースを追って導き出した内容です。

    use_can_richedit() は、ユーザーエージェントを参照しビジュアルエディターを使えるか判定する。
    https://developer.wordpress.org/reference/functions/user_can_richedit/
    ↓
    サーバへはCloudfront経由でアクセスしていたため、ユーザーエージェントがAmazon CloudFrontとなってしまい、ビジュアルエディターが使えない判定となってしまう。

    ユーザーエージェントが大事だということ、CloudFront越しのアクセスということ、この2点を蔑ろにしていたために沼にハマってしまってました。
    Cloudfront経由であるという部分、情報の後出しになってしまい申し訳ございませんでした。

    Yukinobu Asakawaさん、お付き合いいただき、誠にありがとうございました。

    モデレーター Yukinobu Asakawa

    (@yukinobu)

    6ヶ月、 1週前

    ご報告ありがとうございます。

    add_filter('user_can_richedit', '__return_true');
    をfunction.phpなどに書く。

    テーマの function.php に直接記述されていますか？
    アップデートがあると上書きされてしまうので、子テーマを作成するか、「Code Snippets」などのプラグインなどを使うことをお勧めします。

    Code Snippets
    https://ja.wordpress.org/plugins/code-snippets/

    トピック投稿者 mashikaku

    (@mashikaku)

    6ヶ月前

    解決したと思ってチェックし忘れていました。
    申し訳ございません。

    おっしゃる通り、Twenty Twenty-Fiveに直接記述する訳にはいかないですね。
    ご忠告ありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)

トピック「ブロックエディターがビジュアルエディターにできない。」には新たに返信することはできません。