Gutenberg is new editor which is going to be default visual editor in WordPress 5.0. It’s made for building more complex layout by visual editor with more ease. It’s available with plugin on wordpress 4.9 so far. Here, we explain quick introduction of new features of it.
See article below if you like to keep using old editor on WordPress 5.0.
Next: Setup To Stop Enabling Gutenberg As Your Default Visual Editor in WordPress Website.
Installation
Click “Install Gutenberg” on your dashboard.
Make your page by Gutenberg Editor
After activation, your edit post page changes like the picture below. On Gutenberg editor, Everything is started with blocks that unify evolution of what is now covered, in different ways, by shortcodes, embeds, widgets, post formats, custom post types, theme options, meta-boxes, and other formatting elements. They embrace the breadth of functionality WordPress is capable of, with the clarity of a consistent user experience.
Let’s add a block
When clicking plus button, a dialog that contains blocks appears and you can see the list of block types such as images, paragraph, button, social media card and so on.
Here, let’s choose image block for an instance.
Move and Edit Blocks
Now, you can change image size, alt text, link url and classes. Thanks to it, you can change image size as you see its appearance on the article. It’s awesome.
When you hover on the top right corner of the image, “More Options” dialog appears so that you can insert new block, duplicate it and edit it as HTML.
When you hover on the opposite corner, upward and downward arrows appear so that you can move block just by drag and drop.
Tips : Document and Block
In Gutenberg Editor, The right sidebar consists of two tabs, Document and Block unlike old visual editor. In “Document” tab, you can change settings of entire page like old editor. On the other hand, “Block” tab make you change attributes of the block which is focused.
New Features
Cover Image
On Gutenberg Editor, you can add cover image and put some texts on it. You can also put overlay background color on it to make it cool.
Column
Column is now available in Gutenberg Editor. It’s still under development(Beta), you cannot change the width of each column or define responsive layout like optimal number of columns in a row with different window width. Let’s look forward to future updates.
Button
Reusable Block
Reusable Block can be used anytime in the entire of your website. register the block you often use as “Reusable Block” and add it anywhere with few clicks.
Other Changes
Add CSS Class to Block
You can add css class for each block from the bottom of “Block” tab in the right sidebar. It’s helpful especially for developers to design page with css.
Drop Cap
Drop Cap is available in paragraph block. Add paragraph and turn on “Drop Cap” on the “Block” tab in the right sidebar.
Summary
Gutenberg Project is just began to become the GUI Page Builder which enables us to make beautiful page with simple and easy manipulation. I hope it gets the capability of flexible and responsive column layout soon because I want to be relieved by non-creative coding such as building layout.
Next: Setup To Stop Enabling Gutenberg As Your Default Visual Editor in WordPress Website.