Gutenberg vs Elementor
Elementor is the most popular builder on WordPress and one of the most downloadable plugins in the whole WordPress plugins repository. It has over 5 million active instals!
I remember how I enjoyed working with it when it became popular. You can change anything you want and immediately see the effect — you’re working on your actual page, not with some weird blocks, hello Visual Composer! And yes, I know they improved it quite a lot, but still I have those blocks in front of my eyes and how I was presented it to my clients 🙄.
But Elementor is a whole different thing.. Or is it?
Until Gutenberg was introduced in WordPress 5.0 (November 2018), users dealt with TinyMCE WISYWIG Editor — an open source rich text editor. Lot of users still keep using it, that’s why the Classic Editor plugin is one of the most installed plugins in the WordPress plugin repo.
It was very good for quite a long time, but nowadays people often need much more than inserting an image or making a word in a bold font. Users want to have an opportunity to create complex pages with different blocks, reorder them, and all that without programming knowledge. Fair enough, I’d say! When you’re using your smartphone you don’t need an iOS or Android developer next to you, are you? Even if you don’t know how to change some option, the first google link will help you.
Ok, so what’s wrong with Elementor? Seems like it has all you need for the full site editing. Why should you use Gutenberg, which is obviously less powerful?
First of all — Gutenberg is a part of WordPress!
And it keeps evolving. It was quite buggy on its first release, I agree. And I also was one of those people who installed the Classic Editor plugin first thing after starting developing a new WordPress site. But times change and now it’s so much easier and more convenient in use. And as it’s already part of WordPress means themes and plugins developers will provide Gutenberg support in their products more and more.
Gutenberg produces only tags you need!
One of my most favourite things about Gutenberg Editor as a developer — it is so easy to maintain. Ever checked your console using Elementor?
Here’s an example of what you get with placing only ONE paragraph:
And here’s a comparison with the Gutenberg Editor:
Big difference, right? It’s also a big difference for SEO, since the less your page has elements, the lesser size it will have, which means the faster it will load.
It’s also much easier to maintain for developers — you don’t need to use a giant CSS chain to set new styles for elements, your page structure keeps simple and logical.
Users won’t mess it up — they can only change what they NEED to change.
Elementor has too many tools. It scares unprepared users. On one hand they can change via Elementor tools anything I’d say. Not only basic stuff like paddings, margins, borders etc. But also create animations, add pseudo elements (:before and :after), even append custom CSS for elements.
But do they actually need it? If you’re owning some cafe and just want to change a couple of pictures on your site — do you really need those animation options?
There’s a new type of “developers” already — the ones who can build sites only using Elementor (or other builders). So it looks like Elementor was designed specifically for them. Because once a customer wants some extra functionality which isn’t covered by Elementor’s blocks — such “developers” will be helpless.
Imagine such a picture — you have 20 pages on your site and want to change border-radius from 20px to 0px (make them square). If you are a regular user and don’t use global styles (which are only available in the Elementor PRO, btw), you’re gonna spend some time to adjust all your buttons. And what if you have 50 pages? A hundred pages?
Don’t get me wrong, Elementor is not completely useless. It’s very good for quickly building landing pages, for example. But most of the options it provides are quite complex for regular users and for developers it causes extra problems with maintaining markup and styles.
Easy to extend existing blocks!
Want to add a new style for a Gutenberg block? It’s so easy:
/**
* Register custom block styles
*/
add_action('init', 'theme_prefix_register_block_styles');
function theme_prefix_register_block_styles() {
register_block_style('core/heading', [
'name' => 'title-small',
'label' => __('Small title', 'theme-slug'),
]);
}Using render_block hook you can customise content of any block in Gutenberg.
For instance, let’s add lazy-load class to all images from Gutenberg:
/**
* Add custom class for gutenberg images
*/
add_filter( 'render_block', 'theme_prefix_custom_image_class', 10, 2 );
function theme_prefix_custom_image_class( $block_content, $block ) {
if ( 'core/image' === $block['blockName'] ) {
$block_content = preg_replace('/wp-image-/', 'lazy-load wp-image-', $block_content);
}
return $block_content;
}I highly recommend this article from CSS tricks about block filters in Gutenberg — there’s so much stuff you can achieve and extend blocks however you want.
Easy to create new blocks!
Either with ACF PRO or using a traditional method. I wrote about how to build a custom Gutenberg Block using Advanced Custom Fields Pro plugin here:
The “traditional” way might seem a bit complex — you need to set up a dev environment with Node, use React to build the settings panel of your block. But luckily, there’s a package for quick installation and preparing all you need to create a custom Gutenberg block called @wordpress/create-block. So all you have to do is run couple commands in your terminal:
$ npx @wordpress/create-block your-block-name
$ cd your-block-name
$ npm startVoila! You are all setted up and ready to build yet another Gutenberg block 😄.
Learn more about building Gutenberg blocks via @wordpress/create-block here: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/
Conclusion
Nothing is perfect in this world. So is Gutenberg. I can write another article about the cons of the Gutenberg Editor. But the fact is that Gutenberg is a part of WordPress. It evolves and will keep evolving. I don’t know if it will kick out Elementor from the market (I doubt it), but it will become a valuable player for sure. So digging into the Gutenberg ecosystem is one of the needful tasks of modern WordPress developers.
If you find this article helpful — don’t hesitate to clap, subscribe and leave your thoughts in the comments 😊
Thanks for reading!
Stay safe and peace to you!
