Gutenberg for Elementor Developers

Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on whatsapp
Share on email
Share on print

Gutenberg plays nicely with Elementor today. Today I will show you how Gutenberg and Elementor play together quite nicely and send you on the path to becoming a Gutenberg Developer. It is not Elementor vs Gutenberg, it is Gutenberg in Elementor.

I believe that Gutenberg will quickly become the standard content editor for those that are not and site builders and designer once it becomes part of the core. It is just too easy to create sufficiently rich content without having to know how to work work a page builder. 

How I use Gutenberg with Elementor Today

I’m already using Gutenberg for posts that do not necessarily benefit from the “extra” stuff you get with Elementor that works great for me as a theme builder and page builder. Even this post is written in Gutenberg, but is displayed via an Elementor Template for Singles. I also use Elementor with Gutenberg created posts where custom post types and custom fields are used with Elementor Template for Singles of a specific Category, Tag or CPT to display the special content 

If I want to do something “fancy” that would otherwise require an Elementor widget or even section, I can always pop in a Gutenberg /shortcode block with an Elementor Pro (or Anywhere Elementor) shortcode. Like this:

I use .

So my processes uses Elementor to build out a templated page formatting and structure, and Gutenberg to generate the content that sits in that format and structure.

Elementor is not for Post Content

That will get me some fast hate. Sure, you can create post content, but it is overkill for the vast majority of posts, specifically in the context of Gutenberg as the standard post/content editor. 

Gutenberg gives me the rich editing sufficient for most posts and provides the flexibility and extensibility needed to keep us from putting the burden of learning a page builder on content professionals. They’s better off focusing on SEO related additions than using Elementor Widgets and formatting tweaks. 

Don’t get me wrong! Elementor and other page builders are massive productivity enhancers and design champions for building out templates for Gutenberg content and almost necessary for great landing pages and similar content. I do not see abandoning Elementor for at least five years. Period. 

Gutenberg: Beyond Basic Content

When Gutenberg becomes core shortly, I want to take things to another level and split out creation of rich content to work better with other data from CPTs I have created for clients who have many people who specialize in highly specific, structured content. In this pursuit, I have been working to develop my own custom Gutenberg Block types.

I think Gutenberg custom block plugins will be one of the next big 3rd party markets in WordPress Plugins and it will be a needed differentiator in the custom WordPress developer marketplace. I agree with this quote from CSS Tricks article on Gutenberg:

In the far future, it’s possible that themes will consist of *just a stylesheet*, while all custom functionality and content structure come from blocks in plugins.

CSS Tricks: Learning Gutenberg

Get Started with Gutenberg

I just discovered a cool CSS Tricks long form series “Learning Gutenberg” that covers what Gutenberg and then jumps right into the technologies used and how to build a custom block in a very short period of time. It is a great lab-driven introduction and the tech stack understanding you need to jump in the pool before you swim out into the Gutenberg deep end.

Make your way to the Deep End

Went through all that and now you need to take the next step? I really like Zac Gordon’s e-courses because his content looks at the practical edges of technologies to give you real world understanding within the context of making something real in WordPress. 

If you need to get up to speed on JavaScript, check out Zac’s great course on Vanilla JavaScript. Get a taster of that course for free to get first hand experience with Zac’s great teaching style by taking the free “Intro to JavaScript Language Basics” course.

I suggest Zac Gordon’s “Gutenberg Development Course” if you already have a foundation in WordPress development and a decent JavaScript background. 

Well, that’s it! A few steps you can take to both begin to use Gutenberg with Elementor and start the quest to become a Gutenberg Plugin Developer!