After decades of gaining popularity as the most versatile and easy to use CMS, WordPress has always been able to impress its users with frequent technical upgrades. In the latest version 5.0, WordPress has come up with its new visual editor “Gutenberg”. So, let’s demystify Gutenberg and Blocks. How does the new system work? Is it better than the editor we had before? We will go into Gutenberg and a short tutorial in order to help you get all the advantages out of the Gutenberg editor.
What is “Gutenberg”?
Matt Mullenweg came up with a new approach for replacing the classic WordPress editor at WordCamp Europe 2018. It was called “Gutenberg”, which was meant as a project name while it was under development. Released with WordPress 5.0, the Gutenberg project was now called “WordPress Editor” or “Block Editor” to be more specific. The classic editor had become a bit outdated according to today’s trends of drag and drop web builders. The result was WordPress Gutenberg and a completely new WordPress editor which is designed to be similar to website and page builder tools.
Themes that work with Gutenberg
There’s thousands of themes available, but many are outdated. Here’s some of the new, awesome shops that release themes for Gutenberg.
Plugins that work with Gutenberg
There are a bunch of plugins available on the WordPress market, but not all of them work with the Gutenberg editor. Here’s some that do.
What are “Blocks”?
Blocks are simply chunks of content. It could be a paragraph of text, an audio file, photo or photo gallery, or even a video. It is the foundation of the Gutenberg editing experience. Blocks are used to create posts and web pages. What users normally get packed into WordPress is the standard blocks built in Gutenberg and it is available to any WordPress site that is using the Gutenberg editor. Gutenberg was created in such a way that it allows programmers to extend and expand available blocks. Blocks can be added using plugins or themes. Therefore, users have access to additional blocks rather than being limited to standard blocks.
Using Gutenberg as a WordPress Editor
When you are on WordPress 5.0, you will get the “Block Editor” or “Gutenberg Editor” baked in as the default text editor for 5.0. Today we will help you become familiar with the new block editor. Let us dive in. First things first, for creating a new post as usual press “Add New” under Posts. You now have a new block to work with.
This looks very different doesn’t it? There is no toolbar present up there from the classic editor. Let’s get familiar with the features and those buttons.
Using this Top Section, you can add new blocks and also perform actions like undo and redo to any block changes. You can also view your content structure information like the number of words, headings, paragraphs and blocks. You can even navigate around blocks using the “i” button.
Some of the basic post editing functions such as Save to Draft, Preview Post and Publish a Post are accommodated in the top section. The cogwheel icon reveals the setting that is visible in the right sidebar. Here you can switch between “Document” and “Block” setting view.
The document section view is very similar to classic editors. Here also you can select the status and visibility, categories, tags, feature images, and attributes. The block section view lets you change the settings of any block once it is added. This function makes it very easy to change the settings for any block and change features such as font size, drop caps and a lot more. Individual background colors for each block and even enabling additional CSS classes for each block individually can be added from here.
Lastly, the three dots present in the top section reveal additional settings. From here you can customize the look and feel of your block editor. You can choose the tools view of blocks. You can even choose between “visual editor” & “code editor”. There are also some tools to manage reusable blocks, making keyboard shortcuts, and copying content.
Here comes the main idea on the new editor i.e. adding blocks. As already mentioned before, blocks are the core part of the new block editor. Look at the top left of the editor page. This will give you a drop-down menu from which you can choose the desired type of block designed for specific purposes. Using the search bar, you can find the correct blocks that fit your needs.
Furthermore, scroll down on the menu and you will see some more blocks based on their basic functions. These are Common blocks, Formatting, Widgets, and Embeds etc. Simply choose the appropriate block that you desire with just a click.
Next, you will also be introduced to a small toolbar once you start adding content in your block. This toolbar’s function depends on the type of block you choose. These toolbars are there to perform editing for the contents’ styling such as alignments, style, linking and more. The change block type button is there to change the current block style. For example, you can change a paragraph block to a Heading, Preformatted block, List, Quote or Verse. The last three dots will provide you with some more options like hiding the block setting, making it a duplicate, editing it as HTML, adding it to reusable blocks and of course removing the block. You can also insert more blocks using the options insert before and insert after. This comes in handy when you need to add content or make a few quick corrections. Depending on the option you choose, this will simply add a block before your selected block or after it. The system is very intuitive and will make sense instantly.
Changing block settings
Every block can be customized to meet your requirements. Simply clicking on the block you want to customize, you’ll be given various scopes in which you can customize your block on the right sidebar. Remember that you can show or hide this option either using the cogwheel in the top section or the toolbar of the specific block. Block settings also depend on the type of block you choose. For example, if you are using a paragraph block then the block settings will let you choose the font size, font type, or background color. You will have all the options to customize your block that you would normally assume would be there. Gutenberg is very user friendly and easy for new developers to pick up.
Wrapping up the WordPress Gutenberg Tutorial
We hope that this short WordPress Gutenberg tutorial has helped you become familiar with the new editor packed with WordPress 5.0. It is our firm belief that after reading this guide, you’ll no longer be a newbie with “Gutenberg”. The new block editor is not only easy to use, but also powerful since it can create sites so fast with so many options. Creating custom blocks and using tools to customize the look and feel are powerful features of this block editor. There is also the easy to use interface to add new blocks and add content. If you find that you actually like the old editor better and you don’t like the new editor, then don’t worry. You can switch back to the classic editor at any time. This is the best of both worlds and will allow people to use the editor that makes them most productive.