New Plugin Adds Elementor Templates as Gutenberg Blocks

One of the most pressing concerns for users in the Gutenberg era is how page builder plugins will respond. Speculation about the new editor “killing off page builders” has run rampant, but these plugins are slowly evolving ahead of Gutenberg’s imminent inclusion in WordPress 5.0.

In February, Elementor, one of WordPress’ most popular page builders, announced the plugin would be completely compatible with Gutenberg beginning with its 2.0 version that was released a few months later. Like many other plugins, that meant a nominal compatibility without any custom blocks built specifically for the new editor.

This week marks a major milestone for the page builder, as Elementor introduced its new Elementor Blocks for Gutenberg plugin. The plugin goes beyond basic compatibility, allowing users to insert any Elementor template into Gutenberg with one click. Its custom block functions as a pipeline to the Elementor library, pulling in content and designs the user has already created in the Elementor interface.

Elementor Blocks for Gutenberg lets users compose with the new editor while maintaining convenient access to items designed in the page builder. It makes it possible to bring more advanced layouts into Gutenberg and preview them inside the editor. Users can select from more than 300+ pre-designed blocks and 100+ pre-designed pages. The plugin will eventually be incorporated into Elementor’s core plugin.

The availability of this new plugin demonstrates Elementor’s commitment to evolving with WordPress as it adopts the editor and tackles customization in Phase 2. The page builder has more than a million active installations and a 4.8-star average on WordPress.org. Achieving this level of success in the page builder market has required a certain level of tenacity and perseverance. Elementor CMO Ben Pines made it clear their product is not going to be sidelined by Gutenberg.

“Elementor was launched in a saturated market, with many page builder and website builder alternatives,” Pines said. “We managed to become the leaders of our market by offering the best solution, and we plan to continue to lead the way. We will continue in our mission in full collaboration with WordPress.”

Elementor and Gutenberg share similar goals in helping WordPress users design their websites without having to touch the code. Pines also emphasized the benefits for developers.

“Elementor, Gutenberg, and the veer towards code-free website customization, presents a huge improvement for developers,” he said.

“Instead of being tied up in endless menial tasks like button or headline customization, and having to hand-hold the designer every step of the process – developers can now focus on greater challenges.

“This improvement creates a positive loop. Developers have time to build more tools, which in turn help the designers workflow.”

Other popular page builder plugins, like Divi Builder (500k+ installs) and Beaver Builder (500k+ installs), have announced initial support for Gutenberg but in both instances this constitutes a button that lets users toggle between the builder and the new editor.

Elementor is leading the way among page builders by making its content available inside Gutenberg. It essentially builds in an extra step so users can continue with their existing workflow in the page builder and insert those designs into the new editor.

Gutenberg’s current customization capabilities pale in comparison to what popular page builders offer, but phase 2 of the project may precipitate another avalanche of blocks pouring into the WordPress ecosystem – the same way it did after Gutenberg’s roadmap was unveiled in June at WordCamp Europe.

Page builders may not reproduce all of their exiting features in custom blocks until WordPress core is more advanced on its road to Gutenberg-powered customization. This would split the creation interface across two admin screens. At some point users may want to see a deeper integration between the editor and page building capabilities. The exciting thing about Elementor’s new blocks plugin is that its users don’t have to choose between Gutenberg and their favorite page builder.

10 Comments


  1. This makes me wondering. It seems like embedding a block that is built elsewhere in Gutenberg, where it should be built. Gutenberg will shortly become a hub for elements like this. Users won’t see the benefit of the UI/UX for elements that the team is trying to provide, but more steps to complete a same thing.

    Report

    Reply

    1. Regular users won’t know how to build a block (and never will). I’m not a fan of this solution (nor of page builders, tbh) but I understand its use.

      Gutenberg has this paradoxical thing of being developed to make life easier for regular users to customize their pages but, at the same time, it alienates a great part of WordPress users that depend on its flexibility, plasticity and easy extendibility.

      Report

      Reply

  2. Page builder manufacturers are struggling to keep relevant in the Gutenberg era. I also don´t see any good reason why someone would use a page builder next to Gutenberg. Maybe for backwards compatibility with existing sites but in all other cases I would definately recommend not using page builders any more, but only using Gutenberg and lightweight Gutenberg extending plugins with extra blocks.
    No sense in slowing down your sites with page builder monster plugins any more … halleluya!

    Report

    Reply

    1. Well… yes, in theory.
      However, at the moment Gutenbergs Columns Block is very nearly unusable in any real-life situation, IMHO, unless you enjoy frequent mails and/or phone calls from irate and understandably frustrated clients.

      Usability for simple pagebuilding tasks is simply miles away from what any pagebuilder I’ve ever tested offers.

      As much as I dislike the unholy mess of shortcodes and metadata that these plugins use and even worse sometimes leave behind after disabling, Gutenberg is not yet able to step in, unfortunately.

      Report

      Reply

  3. I find this step very cumbersome and somehow superfluous. What this innovation brings could already be solved via shortcodes. Why should I install a new plugin? Superfluous!

    I think this is just an answer to the despair of the whole Page Builders. There is no clear answer to the question Gutenberg asks.

    Phase 2 and the comment of @alexislloyd are even more interesting:

    I would also suggest that we refer to these as “complex blocks” (i.e. blocks containing multiple blocks to achieve a common pattern), to distinguish them from “simple blocks” (blocks that contain only one block) and from “templates” (which apply to the entire page layout).

    The future will be interesting.

    Report

    Reply

  4. I now feel confident buying a pagebuilder license, using Gutenberg has actually convinced me to do so!

    I’ve never been an enthusiastic page-builder user, at the very most been forced to extend Visual Composer for client sites. I’ve made large site themes & plugins from scratch (by necessity) but certain clients are actually a good fit for pagebuilders. Some clients have fussy commisioning processes, low budgets, and a need for “rich layout editing”. So, I’ve been looking forward to Gutenberg since it was first announced as it would certainly help me sell sites (to those clients).

    The current Gutenberg implementation has made me look around at the pagebuilder landscape to evaluate the competition. I was surprised to find that one of the competitors really was sleek, fast and intuitive with a lot of tools which would help me. The UX and UI are good, it had a decent API and extendibility. Importantly my annoying clients are seduced by it, making my job easier. In comparison to that builder I find Gutenberg buggy, unlovely and unreliable. I cannot see Gutenberg replacing a pagebuilder in the next 2 years, based on the current UI, and UX.

    A single simple example of “unlovely / unreliable”: Setting the width of the WP-GB editor. Most clients want it full width because it is very narrow. There are docs for making the editor full width, and they are wrong. The issue is tracked (#9894, #10067) . Editor width setting used to work, it broke a couple of months back, the docs remain incorrect.
    A small issue, it could be dismissed as unimportant, but compare the user experience (and agency experience) versus a competitor page builder. When trying to deliver a “rich editor” solution to a fussy client these sort of issues compound to create a storm of costly dissatisfaction.

    The user experience is worlds apart.

    Report

    Reply

    1. Which makes me wonder why Automattic spent so much time and money (at the same time alienating a good part of the wp base) on GB when they could have bought one of the companies making good page builders, and adapted the code to their needs.

      Report

      Reply

  5. From my perspective, the difference between Gutenberg and Page Builders is architectural intent. Gutenberg is a block manager / editor model. A Page Builder is an integrated design studio.

    Differences:

    – GB is a component, Page Builders are applications
    – GB is a block manager / editor, Page Builders are integrated design studios
    – GB focus is narrow so risk to the operational WordPress server is minimised, Page Builders are complex applications that add unnecessary risk to an operational server relative to an arms-length design studio
    – GB has a reasonably bounded server footprint (RAM / Disk), Page Builders are unbounded and could grow to dwarf the size of the WordPress CMS.
    -GB is a 2-way model (well…as far as I have seen), page-builders are 1-way model. You can manually edit a GB component and save it as a new GB component. Page builders are 1-way…use their visual interface for everything because any manual adjustments are unlikely to survive more than a few page builder updates…if any.

    The WordPress landscape is littered with the corpses of WordPress design studios…arms-length (e.g. Artisteer) and integrated (e.g. Headway).

    As long as Gutenberg remains a block manager / editor…it will have my full support. Go Gutenberg :-)

    Report

    Reply

    1. @photomatt: “Gutenberg will definitely be a whole-page builder, that’s the entire point of phase 2. All of the infrastructure is built to support that, so it will happen much faster than phase 1.”

      https://twitter.com/photomatt/status/1037843717070057472

      Note: @photomat is release lead of WordPress 5.0 and CEO of Automattic which owns wordpress.com, WooCommerce, Jetpack, Gravatar, …

      Note: There is more, phase 3 and phase 4 of Gutenberg project are next. Nothing in WordPress will be the same…

      Report

      Reply

      1. It all depends on your definition of a “Page Builder”.

        If Gutenberg phase two restricts itself to Header / Footer / Sidebar constructs then it remains consistent with a componentised block manager / editor architecture.

        I would agree that is the natural and historic definition of a “page builder”.

        But…

        The term Page Builder used in the industry is more representative of the term “Integrated Design Studio”. Most, if not all of today’s “Page Builders”, began as…well…page builders (much like Gutenberg of today). They have, however, grown into full blown integrated design studios or are on their way to being so.

        Perhaps in the new 5.0 world existing Page Build vendors should rebrand to being WordPress Integrated Design Studios and recognise that the term “Page Builder” is now a core feature.

        Just a thought… :-)

        Report

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.