WordPressの標準エディターが、Gutenberg（グーテンベルク）に変わるようです。しかも、ブロックという新しい概念が用いられる大幅な変更らしい。変わるのが確定ならば、新しく作る記事はできるだけ新しいエディターに対応させた方がいいということで、Gutenbergをインストールしました。
１．この記事の目的
Gutenbergのインストール方法や、網羅的な解説はしません。私がホームページを作成するときに、困ったところを、メモとして書き留めたものです。
なお、この記事は2018/10/28に作成したものです。プラグインも対応していないものが多く、今のタイミングに特有の問題点も多いのではないかと思います。数ヶ月後には、違った解決法があると思います。
クラッシックブロックを使用すると、今までのプラグインなども使用できますが、クラッシックブロックを、できるだけを使わない方向でホームページを作成したいと思います。
２． 私のホームページ作成環境
(a) WordPressのテーマ： Cocoonを使っています。2018/10/28の段階で既にGutenbergに対応しているテーマです。
(b) ソースコードをWeb上で見やすくするソフトとして、Cocoonにはディフォルトで「highlight.js」が簡便に利用できる機能が備わっていますが、行番号が表示できないので「Prism Syntax Highlighter」を使用しています。
３．記事を作成する上で困ったこと
私がGutenbergをインストールしたあとに、まずは、記事を１つ作ってみました。最初に作った記事は以下の記事です。使ってみると、いろいろ違いが見えてきました。
基本：importで読み込むのはパッケージ？モジュール？関数？
(1) 部分的に文字の色が変えられない
ビジュアルエディターにおいて、全体の色の設定は可能です。設定は、「設定（右上の歯車マーク）→色設定」により行います。しかし、ブロックの一部の文字だけの色を変更することができません。今後、対応する（？）ことを期待します。
(2) プログラムのコードをweb上で見やすくするソフトが使えない
上でも述べましたが、ソースコードをWeb上で見やすくするソフトとして、Cocoonにはディフォルトで「highlight.js」が簡便に利用できる機能が備わっています。また、Gutenbergの「ブロックの追加→フォーマット→コード」でも、その機能が追加されました。しかし、これらは行番号が表示できないので、継続してプラグインの「Prism Syntax Highlighter」を使用したいと考えています。
私はプログラミング言語Pythonの記事をメインにしているので、Prism Syntax Highlighterが使えないのは困ります。また、別のプラグインに変更するのもできるだけ避けたい。しかし、Gutenbergのビジュアルエディターでは、今まで使っていた「Prism Syntax Highlighter」のボタンがでてこないんです。そこで、以下の方法をとることにしました。
(a) ブロックの追加（左上の＋のマーク）より、「カスタムHTML」ブロックを追加します。
(b) 次に「Prism Syntax Highlighter」の書式に従って、htmlで表記します。
「Prism Syntax Highlighter」の場合、表示させたいコードの前に「<pre class="line-numbers"><code class="language-python">」、表示させたいコードの後ろに</code></pre>を記述すれば完了です。
#コード01
print("aaa")
print("bbb")(3) 半角シングルクォーテーションマークが使えない
半角のシングルクォーテーションマークが使えないのです。使うと、更新ボタンをおしても、「更新に失敗しました」と表示されます。一方、ダブルクォーテーションマークでは問題ありません。
プログラミング言語のPythonでは文字列にシングルクォーテーションか、ダブルクォーテーションを使いますが、シングルクォーテーションで記述する人が多いです。ダブルクォーテーションマークの使用は違和感があります。
最初にこのエラーが発生したときは、「Prism Syntax Highlighter」との相性が悪いのだと思っていました。しかし、「Prism Syntax Highlighter」を使った時だけではなく、段落ブロックなどでも使用できないことがわかりました。
(a) シングルクォーテーションが使えない場所
シングルクォーテーションは、カスタムHTMLブロックだけではなく、見出しブロック、段落ブロックでも使えません。また、新規で作成したクラッシックブロックでは、使えません。
(b) シングルクォーテーションが使える場所
タイトルでの使用は可能です。
(c) 解決法は？
(方法1) プラグインとの干渉
特にセキュリティー系のプラグインと干渉することがあるらしいです。私の場合は、プラグインを一時無効にして、検証してみましたが、原因はプラグインではありませんでした。
(方法2)海外アタックガードの干渉
海外アタックガードが干渉することがあるらしい。これは、レンタルサーバーlolipopの場合、「ユーザー専用ページ」→「セキュリティ」→「海外アタックガード」の画面にアタックガードの有効、無効の切り替えをするところがあります。ただ、私の場合には海外アタックガードが原因ではありませんでした。
(方法3)WAFの干渉
WAFは不正アクセスを防ぐアプリケーションで、私はこれが原因でした。「ユーザー専用ページ」→「セキュリティ」→「WAF設定」→Gutenbergで作業を行っているドメインの右側に「無効にする」というボタンがあるのでクリックします。設定の変更が反映されるのに5～10分ほどかかるそうですので、しばらく待ちます。すると、シングルクォーテーションを入力してもエラーが発生しなくなりました。原因は特定できました。
そこで、さっそく、この状況をlolipopさんのサポートに問い合わせてみました。すぐに回答をいただきました。（対応が早くてびっくり！）
お問合せいただきました件について、WAFによる制限は、「.htaccess」を使うことで、WAFを有効にしたままでも個別に制限解除を行うことが可能ですので、ご安心ください。
制限解除をご希望の場合は、以下の内容をサーバー上の「.htaccess」ファイルの一番下に追記していただきますようお願いいたします。
#### ここから ####
SiteGuard_User_ExcludeSig XXXXXXXXXXX
#### ここまで ####
※「XXXXXXXXXXX」部分には、ユーザー専用ページ内〔セキュリティ〕→〔WAF設定〕の「■ WAF検知ログ」で【検出されたシグネチャ】部分に表示されている文字列（【sqlinj-xx】など）をご記載ください。
※アクセス元IPをご確認いただき、お心当たりのないものを制限解除してしまわないようご注意くださいませ。
ご案内は以上となりますが、ご利用に関してご不明点やお困りの点等ございましたら、お気軽にお問合せくださいませ。
つまり、Gutenbergの更新作業を、WAFが悪意あるアクセスと判断しているので、GutenbergのIPアドレスを具体的に設定し、そのIPアドレスのみ許可するということです。私は、この設定で解決しました。うれし～！lolipopでの具体的な設定方法は、以下の通りです。
(1) Gtenbergのアクセス元IPを特定する
「ユーザー専用ページ」→「セキュリティ」→「WAF設定」→Gutenbergで作業を行っているドメインの右側に「ログ参照」というところがあるので、そこをクリック→日付指定で日付を指定する。すると、WAFGあ悪意あるアクセスと判断したアクセス一覧が表示されます。この中から、Gutenbergのアクセスを見つけます。一覧表には「日時」「URL」「アクセス元IP」 「検出されたシグネチャ」が表示されているので、グーテンベルクで故意にエラーを発生させて、その時刻との比較から特定します。ここで、間違えて、悪意あるアクセスを選んでしまうと大変ですので、気をつけてください。なお、この中で使うのは「検出されたシグネチャ」ですので、これをメモ帳などにコピーしておきます。「検出されたシグネチャ」は「sqlinj-xx」のような表記で、xxの部分は数字です。
(2) 「.htaccess」ファイルの変更
「ユーザー専用ページ」→「サーバーの管理・設定」→「ロリポップ！FTP」を選ぶと、ファイルの一覧が表示されますので、その中の「.htaccess」を選びます。すると、下の方にコードが表示されます。そのコードの一番後ろに、「SiteGuard_User_ExcludeSig XXXXXXXXXXX」と追記します。ここで、「XXXXXXXXXXX」の部分は、先ほど調べた「検出されたシグネチャ」です。
最後に「保存する」ボタンを押して終了です。
以下のホームページでも、同様の方法で解決されていました。
gutenbergでシングルクォーテーションが入力できなかったのはWAFのせい
(d) 解決方法が、もっと周知になればよいと思います。
初心者の私にはサーバーのファイルを変更するといったことは、とても緊張することです。ですから、その方法が正しいことが確信できなければ、なかなか実行に移せません。この解決方法が、もっと周知になれば、私のように問題解決に無駄な時間を費やす人も減るのでは無いかと思います。
(4) 自分のホームページ内へのリンクの設定
私の記事では、ページ内リンクを多用しているものがあります。ページ内リンクについて、最初はコードに直接idを書き込んでいましたが、途中から便利なTinyMCE Advancedのアンカーを使うようになりました。
でも、現在、TinyMCE Advancedは、Gutenbergに対応していません。そこで、この機会にGutenbergに標準機能になった、リンク設定の機能を使うことにしました。
では、リンク設定の手順を以下に示します。
(a) id名の設定
リンクさせたい見出しを選択し、「設定（歯車マーク）→詳細→HTMLアンカー」で表示される入力欄に、任意のid名を入力します。標準搭載されたのはうれしいです。なお、見出しブロックには「HTMLアンカー」は設定できますが、段落ブロックには「HTMLアンカー」は設定できません。
(b) id名を設定した見出しへのリンク
リンクを張り付けたいテキストの部分を選択し、ブロックの上のリンクボタンを押します。次に、入力欄が現れるので、リンク先を入力します。この時、リンク先のid名の前に「#」をつける必要があります。
(c) 絶対パスでリンクを指定したい場合
ページ内リンクでは絶対パスにする必要はありません。でも、ページ内ではなく、他のページからリンクを設定する場合、リンクを張り付けたテキストをコピー＆ペーストするだけでよいので、私はページ内リンクであっても絶対パスで指定するようにしています。絶対パスでのリンク設定手順は2つあります。
（方法1）リンク先のページのアドレスをhttps:から入力し、最後に「/#ID名」を追記する。
（方法2）ブロックの上のリンクボタンを押したときに現れる入力欄に#なしでid名を入力すると、プルダウンメニューで、そのIDが存在するページが表示されます。ここで、リンクしたいページをクリックすると、そのページのアドレスが自動入力されるます。ただし、ID名は自動入力されていないので、アドレスの末尾に「#IDの名称」を追記します。この機能は大変便利です。
今は、id名は、単純に番号をつけているのですが、（方法2）を使うのであれば、よく使うリンクは、意味のあるid名にすれば使いやすいかもしれません。
(6) クラッシックブロックをGutenbergの書式に変換
Gutenbergをインストールすると、今までの記事は、記事全体がクラッシックブロックという大きなブロックになります。この古い書式（クラッシックブロック）をグーテンベルクの書式に変換する方法があります。そこで、過去に書いた以下の記事を新しい書式に変換してみました。
(a) 変換の方法
変換の方法は簡単です。ブロックの上の・が縦に三つ並んだボタンをクリックし、「ブロックへ変換」をクリックすれば、終了です。
(b) id名が消えた
変換後のホームページを開いてみたら、リンクがおかしくなっていてショックでした。変換したホームページは用語集なので、すごい数のページ内リンクが貼ってあります。一番、いやなところに不具合がでてしまいました。
調べてみると、リンクがおかしくなったところは、リンク先のid名が消えていました。ただ、すべて消えていたのではなく、後半に書いた記事の部分だけです。たぶん、TinyMCE Advancedを使ってアンカーを設定していたところではないかと思います。
でも、見出しをクリックして、画面右の詳細のHTMLアンカーの入力欄にid名を入力するだけなので、作業は簡単でした。むしろ、id設定よりも、原因の調査とリンクのチェックの方が時間がかかりました。
(5) 解答を隠したい
Pyhonの記事の例題では、最初は解答を隠しておいて、クリックすると解答が表示されるようなコードを、よく使っています。これも、カスタムHTMLを使って、コードを記述することにしました。
(a) 隠したい記事を書く
まずは、ビジュアルエディターを使って、隠したい部分の記事を書きます。複数のブロックに分かれていてもかまいません。
(b) コードエディタに切り替え
WordPressの画面の右上にある・が縦に3つ並んだところ（詳細）をクリックし、エディタの中のコードエディタをクリックし、チェックを切り替える。そして、先ほどビジュアルエディターを使って記述した部分のコードをメモ帳などにカット＆ペーストする。
(c) カスタムHTMLを使用
カスタムHTMLに、以下のコードを記述し、「<p>最初に・・・・記入する</p>」の部分に先ほどメモ帳にコピーしたコードを貼り付ける。
<details>
<summary><span style="color: #0000ff;">解答を表示する</span></summary>
<p>最初にかくしておきたいテキストをここに記入する</p>
</details>すると、以下のように解答を隠すことができます。※2018/11/16の段階で、google chromeでは使用可能ですが、Microsoftのインターネットエクスプローラではこの機能を使用できません。
解答を表示する
最初にかくしておきたいテキストをここに記入する
また、プログラムコードを隠した場合の例は、以下の通りです。
<details>
<summary><span style="color: #0000ff;">解答を表示する</span></summary>
<p>下記のコードの説明をここに記入</p>
<pre class="line-numbers"><code class="language-python">#コード01
print("aaa")
print("bbb")</code></pre>
<p>上記のコードの説明をここに記入</p>
</details>解答を表示する
下記のコードの説明をここに記入
#コード01
print("aaa")
print("bbb")上記のコードの説明をここに記入
(6) 複数ブロックをまとめて移動
単一のブロックの移動は、ブロックの左上の角にマウスを近づけると、「上に移動」「手のマーク」「下に移動」が表示され、ブロックを移動することができます。「手のマーク」は、自動スクロールできない（？）ので、画面表示外の位置に移動するのは不便です。
なお、シフトを押しながらスクロールボタン（上矢印、下矢印）を使ったり、マウスで別のブロックをクリックすると、複数のブロックを選択できますので、まとめて移動できます。最初、選択の仕方がわからなくて、少し悩みました。直感的にわかる操作法なのに、なぜ分からなかったんでしょう・・・
(7) 再利用可能ブロックは便利
カスタムHTMLで、ここでも紹介した「Prism Syntax Highlighter」や、解答を最初に隠しておく<details><summary>などのコードを記述するときは、定型フォーマットを呼び出せると大変便利です。Gutenbergでは、再利用可能ブロックを使うことで、自作の定型フォーマットが呼び出せるので、その使い方を簡単にまとめてみました。
(a) 再利用可能ブロックの作成
再利用可能ブロックは、以下の手順により作成できます。
ブロックの上の・が縦に三つ並んだボタンをクリック。
→ 「再利用ブロックに追加」をクリック
→ ブロック名を入力する欄が表示されるので、ブロック名を入力し保存
(b) 再利用可能ブロックの呼び出し
作成した再利用可能ブロックは以下の手順により、呼び出すことができます。
(方法1) ブロックの追加（左上の＋印）
→再利用可能をクリック
→再利用可能ブロックの一覧が表示されるので、それをクリック
(方法2) ブロックの追加（左上の＋印）
→ブロックの検索の欄に再利用可能ブロック名の一部を入力
→すると、検索された再利用可能ブロックの一覧が表示されるので、それをクリック
(c) 再利用可能ブロックを元のデータと連動しないブロックに変更
再利用可能ブロックをフォーマットとして、新しい内容のブロックを作成するときには、この方法を用いて元のデータと連動しないブロックに変更しないと、元のデータも内容が変わってしまいます。
ブロックの追加（左上の＋印）をクリック
→通常のブロックへ変換
(d) 再利用可能ブロックを完全に削除
この削除方法は、再利用可能ブロックを完全に消去することができます。完全に削除するので、ブロックを検索しても検索できなくなります。
ブロックの上の・が縦に三つ並んだボタンをクリック
→再利用ブロックから削除
(e) 元の再利用可能ブロックは残したまま、現在表示されているブロックをページから削除
この削除方法は、再利用可能ブロックの元データは残っているので、再利用ブロックを検索して、元の再利用ブロックを再び呼び出すことができます。
ブロックの上の・が縦に三つ並んだボタンをクリック
→ブロックを削除
(f) 再利用可能ブロックの編集
同じ再利用可能ブロックを複数呼び出している場合に、ある再利用ブロックを変更すると、他の再利用ブロックにも変更内容が反映されます。
なお、再利用可能ブロックを変更しても、同じページの再利用可能ブロックの表示にすぐには反映されません。表示に反映したい場合は、他のブロックも編集ボタンを押して、何もせずに保存ボタンを押します。しかし、表示だけの問題なので、気にする必要はありません。
再利用可能ブロックの右上の編集ボタンをクリックする。
→再利用可能ブロックの名称や、内容を変更する。
→右上の保存ボタンをクリック。
※再利用可能ブロックは、「再利用可能ブロックを元のデータと連動しないブロックに変更」した後でなければ表示されませんでした。再利用可能ブロックの設定の記述では「・・・ブロックを更新すると、使用中のすべての場所に変更を適用します。」とあるので、再利用可能ブロックのまま表示できないはずはないのですが・・・。私の勉強不足だと思います。
(g) 再利用可能ブロックの一覧表示
以下の手順で再利用可能ブロックのすべてが、一覧が表示されます。
詳細（「・」の縦３つ表示）
→ツール→すべての再利用可能ブロックを管理
(h) 再利用可能ブロックの使用例
私は以下のような、再利用可能ブロックを作りました。これで、作業が楽になるはず。
再利用可能ブロック例1（「Prism Syntax Highlighter」を使ったコードの記述）
<pre class="line-numbers"><code class="language-python">#コード01
print("aaa")
print("bbb")</code></pre>再利用可能ブロック例2（解答を隠したいときの表示）
<details>
<summary><span style="color: #0000ff;">解答を表示する</span></summary>
<p>最初にかくしておきたいテキストをここに記入する</p>
</details>４．感想
私は、あまり、複雑な機能を使っていないので、なんとか、今まで通りに記事を書くことができそうです。しかし、シングルクォーテーションが使えないのだけは、大きな問題でした。時間がかかりましたが、なんとか解決することができました。本当にうれし～。lolipopさん。迅速な対応ありがとうございます。
Gutenbergの使い勝手は、全体的に好印象です。特にカスタムHTMLは、ビジュアルエディターとコードエディターを行ったり来たりする手間が省けるし、コードを記述した範囲が明確になるので、便利だとおもいました。再利用可能ブロックや、idの設定など、今までプラグインに頼っていた機能が追加されたのもよいです。
しかし、ブログ作成の環境の変化はめまぐるしいですね。「httpから、httpsへの移行」「WordPressテーマsinplicity2からCocoonへの移行」「Gutenbergへの移行」などなど、
便利な機能が追加されてうれしいのですが、落ち着きませんね。
私は、ブログを立ち上げて4ヶ月ぐらいしかたっていないのですが、たまたま、重なっただけなのでしょうか？それとも、ブログ環境って、たえずこんな感じで変化するのでしょうか？
５．またまた、「更新に失敗しました」
2018/12/16追記
「'+'」「'abc'+'def'」のように半角のプラスの両側に半角シングルクォーテーションマークの組み合わせで、同じように「更新に失敗しました」となる場合がありました。記事によって、エラーになる場合とならない場合があります。また、同じ記事の中でもN.G.になる場所とそうでない場所があったりと、エラーになる場合を特定できていません。
エラーになるケース
「'+'」「'abc'+'def'」
「' + '」（+と'の間に半角スペース１つ）
エラーにならないケース
「' + '」（+と'の間に半角スペース2つ）
「'-'」（プラスではなく、マイナスだとエラーにならない）
完全に解決だと思っていたので、悲しいです。やはり、シングルクォーテーションマークは、問題になりやすい表記ですね・・・ロリポップのWAFの検知ログをのぞいてみても、新しい番号のシグネチャは検索されていないので、違う原因のようです。
