ついにWordPress5.0がリリース!BeaverBuilderとGutenbergの関係性を調べてみた
2018年12月7日にWordPress5.0がリリースされました!
これに伴い、「Gutenberg」が投稿エディタとして新しく登場しましたので、今回は、「Beaver Builder」を使用する上での「Gutenberg」との関係性についてご紹介したいと思います。
BeaverBuilderの動作について
WordPress5.0にアップデートした状態で、新規の固定ページや投稿を追加すると「Beaver Builder」または「Gutenberg」エディタのいずれかを選ぶ画面が出てきます。
![BB_GB10 BB_GB10](https://i0.wp.com/aqm.jp/wp-content/uploads/bb-plugin/cache/BB_GB10-panorama-5a067c77bf525c3148365f779c0a18f1-5c0f3bd297682.jpg?ssl=1)
「Beaver Builder」で作成する場合は、”Launch Beaver Builder”をクリックすると見慣れたBeaverBuilderの編集画面に切り替わります。(Gutenberg使用の場合は"Use Standard Editor"をクリック)
この選択ボタンは、新規作成の他に通常の編集を行う場合も出てきます。
BeaverBuilderで作成したページをGutenbergで開く
BeaverBuilderで作成したページを、Gutenbergで開いて編集することは可能なのだろうか?
気になったので、実際に試してみました。
BeaverBuilderで作成したページを開いた状態で、「固定ページの編集」をクリックすると、先程の、「BeaverBuilder」か「Gutenberg」を選ぶボタンが出てきます。
そこで、"Use Standard Editor"(Gutenberg)をクリック。
![スクリーンショット 2018-12-10 15.16.01 スクリーンショット 2018-12-10 15.16.01](https://i0.wp.com/aqm.jp/wp-content/uploads/2018/12/3767e349347e3b552e8b9bb984198c0f.png?resize=535%2C302)
すると、このようにBeaverBuilderのレイアウトが無効になります〜といった警告文が出てきます。
ドキドキするけど、今回はこのまま「OK」をクリック!
![BB_GB03 BB_GB03](https://i0.wp.com/aqm.jp/wp-content/uploads/2018/12/BB_GB03.png?resize=1243%2C944)
BeaverBuilderで構成されたレイアウトがとってもシンプルに!やばいっ!大丈夫か??と思いながらも、このまま更新っ!!
そうすると、以下のようなレイアウトに更新されます。
分かりやすいように、Ultimate AddonのBefore Afterモジュールを使用して・・・。左がBeaverBuilderで構成されたレイアウト。右がそれをそのままGutenbergで保存した場合。
BeaverBuilderで作成したレイアウトが消えた〜!やっぱり戻したい〜!!
・・・と、なっても大丈夫!
先程、Gutenbergで編集したページを、今度はBeaverBuilderで開きます!
すると。
BeaverBuilderで編集保存した最後の状態で復活!
そのまま保存するとページレイアウトが戻ります。
Gutenbergで作成したページをBeaverBuilderで編集
では、逆にGutenbergで作成したページを、BeaverBuilderで編集できるのだろうか?
まず、Gutenbergで簡単な投稿記事を作成。
![BB_GB15 BB_GB15](https://i0.wp.com/aqm.jp/wp-content/uploads/2018/12/BB_GB15.png?resize=722%2C801)
この状態でBeaverBuilderを起動してみると、そのままBeaverBuilderで追加編集が可能です。
BeaverBuilderのモジュール機能もそのまま追加できます。
![BB_GB16 BB_GB16](https://i0.wp.com/aqm.jp/wp-content/uploads/2018/12/BB_GB16.png?resize=1603%2C901)
また、同じようにGutenbergの編集画面途中からBeaverBuilderへ切り替えることも可能です。
Gutenbergの編集画面で、左上の+ボタンをクリックすると、よく使うものとしてBeaverBuilderが表示されるので、それをクリック。
![BB_GB18 BB_GB18](https://i0.wp.com/aqm.jp/wp-content/uploads/2018/12/BB_GB18.jpg?resize=1200%2C900)
すると、再びエディタの選択ボタンが出てきます。
ここで、「Convert to Beaver Builder」をクリックするとBeaverBuilderの編集画面に切り替わります。
![BB_GB19 BB_GB19](https://i0.wp.com/aqm.jp/wp-content/uploads/2018/12/BB_GB19.png?resize=888%2C631)
そしてそのままBeaverBuilderで編集可能です。
ここで、注意したいのは、Gutenbergで作成したページを一度でもBeaverBuilderで編集してしまったら、Gutenberg編集レイアウトには戻れません。
もう一度、Gutenbergで編集をしようとすると、Gutenbergで整えたレイアウトも、BeaverBuilderで整えたレイアウトも両方崩れてしまいます。
しかし、その崩れたレイアウトでも、再度BeaverBuilderで開くと最後の保存した状態に戻ることは可能です。
つまり、一回でもBeaverBuilderで編集しちゃうとGutenbergでは編集できなくなっちゃうよ!ということです。
BeaverBuilderとGutenberg
「Beaver Builder」と「Gutenberg」ではどっちが良いか、という話もありますが、私はサイト制作にBeaverBuilderを使用していますので、ページデザインという面では、Gutenbergは難しいと思います。
ただ、Gutenbergでワイヤーを入れてBeaverBuilderでデザインを行っていくということは可能かもしれないと感じました。
まだリリースされたばかりですが、今後Gutenbergに対応したプラグインが増えていくとデザインでの使用も可能にもなるかもと期待はしています!