As Gutenberg Editor along with WordPress 5.0 rapidly approach release [now scheduled for November 19th]a number of PageBuilder vendors are promising interfaces with Gutenberg. Site Origins in February was first to announce its compatibility plans. Themify Builder added in May the ability to have Themify blocks interspersed in a Gutenberg session much like it delivers currently with the Classic editor. This is ahead of the curve on the other PageBuilders. For example, Divi in August outlined its interface plans which are still a preemptive approach. Beaver Builder in September has described a switch-between approach to Gutenberg and Beaver Builder, but there are problems with blocks or sections going missing. Thrive Architect has not changed its stance from a nearly a year ago, no major interface with Gutenberg.
In general, most of the PageBuilders also have a preempt strategy for taking over the Gutenberg editor and replacing that with their own tool to do the bulk of the Page or Post editing – see here for a quick summary of the preempt approach. Elementor, which does have a preempt approach, has just announced an Elementor Blocks for Gutenberg plugin that is different – it makes its templates available to Gutenberg edit users directly.
First Signs of Direct Interface in Gutenberg
Most of the PageBuilders so far have taken a preempt approach to Gutenberg, displacing Gutenberg editing with their own PageBuilding. But Themify and Elementor have taken the strategy of interspersing their blocks or templates of code with Gutenberg blocks as seen in this Elementor example:
Notice that the Gutenberg blocks alternate with the the Elementor blocks which show only a portion of the template in the Editor. But watch what happens in the page preview. The Elementor template is completely revealed and so too the Gutenberg block.
One of the problems with Gutenberg is that a block’s true WYSIWYG dimensions are hidden during editing and so user are often surprised when a Gutenberg page is previewed. Notice below how much bigger and wider both the Gutenberg and Elementor blocks are in final full page layout.
The following example shows how much the WYSIWYG display change can be between the Gutenberg Editor and true desktop browser image. The first screenshot below shows the page in the Gutenberg editor. The first Gutenberg block is a Cover Image block followed by a Gutenberg Header block declaring “Well next comes an Elementor Block“. And the Elementor block shows a large thumbnail of the imported template.
Now being able to reuse my Elementor templates is becoming ever more important. I use Elementor templates of pages [or sections of pages] everywhere. Elementor templates have become quick substitutes for custom post types and repetitive codeblocks. But the problem with Gutenberg is that …
…it is very hard to predict what the page will look in full display . However, the resulting output was so much more different than what was expected:
So this is the price to be paid for Gutenberg’s inability to produce a WYSIWYG design area.
Other Limitations of the Interface
There is another problems within the Gutenberg-Elementor interface. There are now two buttons in Gutenberg for editing Elementor – Edit Elementor Template, which takes the user out of Gutenberg and spawns an Elementor template edit, and Edit with Elementor. When using the Edit with Elementor command within Gutenberg, the whole blocks and/or styling may get lost. We encountered this with just a few simple edits that appeared to be working; but when previewed the widgets and elements were simply gone. Yet when we returned to the Gutenberg editor, the missing blocks reappeared?? This appears to echo the warning from Beaver Builder on its Gutenberg interface – “You can start editing a new page in the standard editor and convert to Beaver Builder and vice versa, but beware of switching back and forth after that–you may lose data. “
Despite being warned that their days are numbered as Gutenberg is destined to takeover the WordPress frontend UI, PageBuilder vendors are building interfaces to Gutenberg. This is a positiv e trend, heling to diffuse tension over the status of PageBuilders in light of Gutenberg’s goal of becoming the
But so far two interface strategies appear to predominate. The preemptive approach uses the Gutenberg shell to drive the Pagebuilder UI – Gutenberg blocks are essentially replaced by PageBuilder widgets. The second approach is that used by Elementor and Themify – intersperse your widgets inside Gutenberg code blocks with very limited intercommunication to date. So will a collision between Gutenberg and PageBuilders currently used by over one third of all WordPress websites be avoided? But stay tuned, several PageBuilders have yet to reveal their complete Gutenberg interfaces.