Gutenberg is … Awesome

Updated on December 27, 2020

So, I have no reason to be overinterested in Gutenberg, but I understand that changes are important part of the progress and default WordPress editor must have changes.

Currently Gutenberg has only 2.5 stars in plugin rating, so who are the haters? I think it is just people who are afraid of changes. And it is normal to humankind. I just want to say those people – everything will be ok, do not worry.

Another haters – are the ones, who are running their businesses around Divi (Nick, sorry, I love your work), Visual Composer etc. What can I say to them? Guys, sorry for my honesty but visual builders always suck. So, they are dying now and it is the good news for WordPress.

I clearly understand that at this moment Gutenberg has bugs. And it is normal, because it is in beta! If you’re looking for bugs, better look at iOS11 😅

Hi, Gutenberg! First look.

I began with installing WordPress 4.9 beta 3. Gutenberg is still a separate plugin but WordPress 4.9 recommends to install and activate it just from the welcome screen.

If you go to All Posts page, you will see the options to create and edit posts with Gutenberg or with Classic Editor — If you go to **All Posts** page, you will see two options – to create and edit posts with Gutenberg (which is default) or with Classic Editor

Gutenberg is about writing content “medium-like” using blocks. And it shows you the result immediately. On my website you can see that some images in posts are wider than text, so for me it would be much easer to write and edit posts with Gutenberg than default HTML-editor and every-minute checking the preview.

Gutenberg First Look - content with blocks. — The good news is that we can create our own blocks.

All the common post settings you can find if you click on the cog button in the top right part of the screen.

The post settings appear of you click on the cog in the top right part of the screen.

Can not edit post permalink! 😢

The first thing I faced with – that I can not edit post permalink (of course I configured custom permalinks in Settings > Permalinks).

Currently there is no edit permalinks button but it is going to be added just near the Copy button. — Currently there is the only way to edit permalinks – via Quick Edit link or with Classic Editor. But the Edit button is going to be added just before the Copy button. The discussion #1285.

How to make my image block fullwidth?

When you switch to Demo ( from menu Gutenberg > Demo ), you will see, that some of the blocks have 100% width. But how to make your own block fullwidth? There is no option for that.

This option is turned off by default just like featured images or custom header. So, add_theme_support() will help you. Note, that it is recommended to use it inside after_setup_theme action hook.


add_theme_support( 'gutenberg', array(
	'wide-images' => true
) );

After inserting the code to your current theme functions.php, the following buttons will appear:

Full width images feature in Gutenberg — So, in your theme you can use wide and fullwidth images.

But how to use this feature in your theme? Well, it is very simple actually, just operate with classes alignwide and alignfull.

Your Custom Colors for Blocks

Blocks in Gutenberg can be styled with custom background colors and text colors. But what if you do not want users to use green color because there is no place for it in your theme design. In this case you can change the defaullt color swatches.


add_theme_support( 'gutenberg', array(
	'colors' => array(
		'#42A2CE',
		'#ebebeb',
		'#000',
	),
	// 'wide-images' => true,
) );

Once you insert this code into your functions.php file, the colors will be changed. You can see it on screenshot below.

Please note, if you want to use both custom colors and wide/fullwidth blocks, you shouldn’t use add_theme_support() two times, just add the parameters to the same array.

How to edit HTML in Gutenberg

Actually there are two ways – you can open the whole content in HTML or just a specific block.

In the top right corner there is a button that allows to show and edit the whole content in HTML. — Well, most of the buttons in HTML editor don’t work at this moment, but it is temporarily of course.

You can also edit specific blocks HTML in Gutenberg.

Gutenberg vs Shortcodes

My subscribers ask me, what will happen with shortcodes when Gutenberg will be added to WordPress core. Will the blocks replace shortcodes?

I think shortcodes won’t disappear, at least for a very long time. Many and many plugins and themes are using the shortcodes right now. And what if you need just to print the current year with your custom [current_year] shortcode?

I think that some shortcodes should better be blocks, just like gallery shortcode, but some things it is better to do with shortcodes.

Gutenberg has the block specially for inserting WordPress shortcodes. — Gutenberg block specially for inserting a shortcode.

Gutenberg and Metaboxes (Custom Fields)

I’m more than sure that you’re using at least one plugin that adds its own custom metabox to the post edit page. So, here is the test – I have installed Yoast SEO. All its post settings went to the Extended Settings tab.