【WordPress】このブロックでエラーが発生したためプレビューできません

wordpress_logo

WordPressのGutenbergを使っている時にエラーが出ました。

cant_preview_for_error

これ、結構めんどくさくないですか?

なんなんですか?これ。

しかもめんどくさいことに・・・・。そのまま修正できないんですよ!

手順を踏まないと直せませんので、皆さん気をつけてください。

今回は、「このブロックでエラーが発生したためプレビューできません」について
エラーの直し方引き起こし方(!)について説明したいと思います。

投稿時のバージョンはwordpress 5.2.2でしたので参考にしてください。

目次

  1. 「このブロックでエラーが発生したためプレビューできません」を元に戻す
  2. このエラーの原因

「このブロックでエラーが発生したためプレビューできません」を元に戻す

元に戻すのは難しくありません。以下の2ステップで元に戻せます。

エラーを元に戻す2つのステップ

  1. 設定の文書リボンのリビジョンをクリック
  2. 元に戻すリビジョンを選択して復元

設定の文書リボンのリビジョンをクリック

もし、設定が表示されていなかったら、左上の歯車ボタンを押しましょう!

設定画面が表示されたら、文書のリボンを選択します。

○件のリビジョンをクリックしましょう。

wordpress_cant_preview_for_error_how-to-fix_1

元に戻すリビジョンを選択して復元

どのくらいまで戻すかを上バーで選択しましょう。

選択したら、「このリビジョンを復元」のボタンを押しましょう。

wordpress_cant_preview_for_error_how-to-fix_2

これでエラーが発生する前に戻っているはずです。

このエラーの原因

おそらく、Gutenbergのバグではないかと思います。

あまりにやるせないので再現のための操作をここに記しておきたいと思います。

以下の5つのステップで確実に再現可能です。

エラーを確認してみたいあなたへ

  1. ブロックの段落を選択する
  2. 文字を入力する
  3. HTMLとして編集する
  4. クラスの書き方を間違える
  5. フォーカスをはずせばエラー発生

ブロックの段落を選択する

はい、まずはブロックの「段落」を選択しましょう。

これ、大事です。

wordpress-gutenberg_bug1

文字を入力する

なんでもいいので文字を入力してください

wordpress-gutenberg_bug2

HTMLとして編集する

はい、それではこのブロックに対して「HTMLとして編集」しましょう

wordpress-gutenberg_bug3

クラスの書き方を間違える

キモはここです。クラスの指定を間違えましょう。

この例だと”(ダブルクオテーション)が余計に入っています。

wordpress-gutenberg_bug4

フォーカスをはずせばエラー発生

はい。おめでとうございます。無事エラーが発生いたします。

wordpress-gutenberg_bug5

ちなみに・・・・・最初からカスタムHTMLとして編集すれば問題ありません。

まとめ

エラーが発生して、いじれなくなったらリビジョンを戻そう!

cssをいじるなら最初からカスタムHTMLとして編集しよう!