After decades of gaining its popularity as the most versatile and easy to use CMS,WordPress has always been able to fascinate its users with the trending technical upgrades. In the latest version 5.0, WordPress has come up with its new visual editor i.e. “Gutenberg”. So, let’s demystify Gutenberg and Blocks. This is the Story about WordPress Gutenberg and a short WordPress Gutenberg 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 classicWordPress editor at the WordCamp Europe 2018 called “Gutenberg”, which was meant as a project name while it was under development. In relation to the release on December 6th, 2018, packed with WordPress 5.0, the Gutenberg project was now called “WordPress Editor” or “Block Editor” to be more specific.The classic editor has become a bit outdated according to today’s trends of drag and drop web builders. The result was WordPress Gutenberg and a completely new fresh WordPress editor, which is designed to be similar to website and page builder tools.
Themes that works with Gutenberg
Theres thousands of themes available, lots of them are old though. Here’s some of the new awesome up to date theme shops that releases themes for Gutenberg.
Plugins that works with Gutenberg
That is a bunch of plugins available on the WordPress market, but not all of them works with the Gutenberg editor, here’s some that does.
What are “Blocks”?
Blocks are simply chunks of content. It could be a paragraph of text an audiofile, photo or photo gallery, possibly even a video or some more dynamic type like a list of posts. It is the foundation of WordPress Gutenberg editing experience.Blocks are used to create posts and web pages.What users normally get to see packed in WordPress is the standard blocks builtin Gutenberg and is available to any WordPress site that is using Gutenberg editor. But Gutenberg was created in such a way that 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 WordPress Editor
When you are on WordPress 5.0, you will get the “Block Editor” or “GutenbergEditor” baked in as the default text editor for 5.0. Today here we will be putting some effort into making you familiar with the new block editor. Therefore, without making any delay let us dive in. First things first, for creating a new post as usual press “Add New” under Postsand bang! what you will see is the very new block.
This looks very different, doesn’t it? There is not any toolbar present up there and also all that outmoded stuff from the classic editor. Without any further delay let’s get familiar with the concealed features and those tiny buttons.
Top Section:
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 a number of words, headings, paragraphs and blocks and 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 is also 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 much similar to classic editor. Here also you can select the status and visibility, categories, tags, feature images, attributes etc. 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 entire settings of any block and change features such as font size, drop caps and a lot more. Individual background colors to each block and even enable additional CSS classes to each blocks individually can be added from here.
Lastly, the three dots present in the top section reveals 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 contents and options to show and hide panels items.
Adding Blocks
Here comes the main game on the new editor i.e. adding blocks. As already mentioned before, blocks are the core part of the new block editor. Every part of 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 fits 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, very easily, 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 the editing of the contents’ styling such as alignments, style, linking and more. 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. And the last three dots will provide you with some more options like hiding the block setting, making it duplicate, editing it as HTML, adding to reusable blocks and of course removing the block. You can also insert more blocks using the options, insert before and insert after, present here. Depending on the option you choose this will simply add a block before your selected block or after it.
Changing blocks 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 even the toolbar of the specific block. Block settings also depend on the type of block you choose. For example – if you are using paragraph block then the block settings will let you choose font size, background color of the block etc.
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 believe that after this guide, you’ll no longer be a newbie with “Gutenberg” or “Block Editor”. We are aware that we have mostly talked about the block and how to use the block. The new block editor is not only easy to use, but also more powerful. Creating custom blocks and using settings tools to customize the look and feel are the powerful features of this block editor, including the easy to use interface to add new blocks and adding content makes it handy. If you find yourself a traditional type and don’t like the new editor at all, then don’t worry, you can switch back to the classic editor at any time.
Leave a Reply