ついにWordPress5.0がリリース!BeaverBuilderとGutenbergの関係性を調べてみた

2018/12/11

ついにWordPress5.0がリリース!BeaverBuilderとGutenbergの関係性を調べてみた

2018年12月7日にWordPress5.0がリリースされました!
これに伴い、「Gutenberg」が投稿エディタとして新しく登場しましたので、今回は、「Beaver Builder」を使用する上での「Gutenberg」との関係性についてご紹介したいと思います。

BeaverBuilderの動作について

WordPress5.0にアップデートした状態で、新規の固定ページや投稿を追加すると「Beaver Builder」または「Gutenberg」エディタのいずれかを選ぶ画面が出てきます。

BB_GB10

「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

すると、このようにBeaverBuilderのレイアウトが無効になります〜といった警告文が出てきます。
ドキドキするけど、今回はこのまま「OK」をクリック!

BB_GB03

BeaverBuilderで構成されたレイアウトがとってもシンプルに!やばいっ!大丈夫か??と思いながらも、このまま更新っ!!
そうすると、以下のようなレイアウトに更新されます。

BeaverBuider Gutenberg

分かりやすいように、Ultimate AddonのBefore Afterモジュールを使用して・・・。左がBeaverBuilderで構成されたレイアウト。右がそれをそのままGutenbergで保存した場合。

BeaverBuilderで作成したレイアウトが消えた〜!やっぱり戻したい〜!!

・・・と、なっても大丈夫!

先程、Gutenbergで編集したページを、今度はBeaverBuilderで開きます!

すると。

BeaverBuilderで編集保存した最後の状態で復活!

そのまま保存するとページレイアウトが戻ります。

Gutenbergで作成したページをBeaverBuilderで編集

では、逆にGutenbergで作成したページを、BeaverBuilderで編集できるのだろうか?

まず、Gutenbergで簡単な投稿記事を作成。

BB_GB15

この状態でBeaverBuilderを起動してみると、そのままBeaverBuilderで追加編集が可能です。
BeaverBuilderのモジュール機能もそのまま追加できます。

BB_GB16

また、同じようにGutenbergの編集画面途中からBeaverBuilderへ切り替えることも可能です。

Gutenbergの編集画面で、左上の+ボタンをクリックすると、よく使うものとしてBeaverBuilderが表示されるので、それをクリック。

BB_GB18

すると、再びエディタの選択ボタンが出てきます。
ここで、「Convert to Beaver Builder」をクリックするとBeaverBuilderの編集画面に切り替わります。

BB_GB19

そしてそのままBeaverBuilderで編集可能です。


ここで、注意したいのは、Gutenbergで作成したページを一度でもBeaverBuilderで編集してしまったら、Gutenberg編集レイアウトには戻れません。
もう一度、Gutenbergで編集をしようとすると、Gutenbergで整えたレイアウトも、BeaverBuilderで整えたレイアウトも両方崩れてしまいます。

しかし、その崩れたレイアウトでも、再度BeaverBuilderで開くと最後の保存した状態に戻ることは可能です。

つまり、一回でもBeaverBuilderで編集しちゃうとGutenbergでは編集できなくなっちゃうよ!ということです。

 

BeaverBuilderとGutenberg

「Beaver Builder」と「Gutenberg」ではどっちが良いか、という話もありますが、私はサイト制作にBeaverBuilderを使用していますので、ページデザインという面では、Gutenbergは難しいと思います。

ただ、Gutenbergでワイヤーを入れてBeaverBuilderでデザインを行っていくということは可能かもしれないと感じました。

まだリリースされたばかりですが、今後Gutenbergに対応したプラグインが増えていくとデザインでの使用も可能にもなるかもと期待はしています!

この記事を書いた人

Ryoko Nakashima

デザイナー / 熊本県八代市出身 / 神戸医療福祉専門学校言語聴覚士科卒業

卒業後は、医療機関・福祉施設へのサービス業務を行う会社にて、企画営業として勤務。
2008年にAQMへ入社。 子どもの頃からものづくりが大好きで、デザインについてはAQM入社後に独学で学ぶ。
企画営業で培ってきた経験や知識をデザインに活かし、ページ全体にストーリーを持たせたデザインがお客様より高評価を頂いている。
現在はBeaverbuilderを用いたサイト制作を中心とし、Webアセンブラーとして活動中。