Gutenberg is … Awesome
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.
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.
All the common post settings you can find if you click on the cog button 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).
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:
But how to use this feature in your theme? Well, it is very simple actually, just operate with classes
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.
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
I think that some shortcodes should better be blocks, just like gallery shortcode, but some things it is better to do with shortcodes.
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.