WordPress Gutenberg Tutorial

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.

WordPress Gutenberg Tutorial

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.

WordPress-Gutenberg-welcome

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.

Brand
Offer
Claim Coupon
logo
Elegant Themes
20% Discount ElegantThemes has a secret landing page where you get a 20% discount applied automatically to your next purchase.
logo
Theme Isle
10% Discount Click the Claim Discount Button & use the coupon code newpirate10 to save 10% on your next purchase.
logo
Template Monster
7% Discount TemplateMonster currently has a 7% discount on all their WordPress themes, you do not need to use any code, just click the link to access the promotion discount.
logo
SuperbThemes
25% Discount SuperbThemes currently have a 25% discount on all their pricing plans, including subscriptions & one-time purchases on both plugins and themes.
logo
Templatic
15% Discount Save 15% on your next Templatic purchase by using the code Superb15. Templatic sells high quality themes and plugins.
logo
WordPress.com
No Discounts Currently WordPress.com adds discounts to their products during events such as Cyber Monday, visit their website to see if they have a discount currently.

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.

Brand
Offer
Claim Coupon
logo
Divi
20% Discount ElegantThemes has a secret landing page where you get a 20% discount applied automatically to your Divi purchase.
logo
Perfmatters
10% Discount Click the Claim Discount button and enter code PERFMATTERS for a 10% discount on all their pricing plans.
logo
OptinMonster
40% Discount On All Products Click the Claim Discount button to visit OptinMonsters website and enter the coupon code VIP20OFF to get a 40% discount on your next purchase.
logo
SuperbThemes
25% Discount SuperbThemes currently have a 25% discount on all their pricing plans, including subscriptions & one-time purchases on both plugins and themes.
logo
WordPress.com
No Discounts Currently WordPress.com adds discounts to their products during events such as Cyber Monday, visit their website to see if they have a discount currently.

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.

What are WordPress 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.

Using Gutenberg as WordPress Editor

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.

Top Section:

WordPress-Gutenberg-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 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.

Adding Blocks

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.

Adding Blocks WordPress Gutenberg

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.

Gutenberg Blocks Settings

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.

Leave a Reply

Hi there, all comments are reviewed & your email address will not be published. Let's have an awesome conversation.