How To Use The WordPress Block Editor & Kadence Blocks Tutorial For Beginners

Share this post or save it for later!

Are you new to using WordPress? Or have you been using the classic editor and need help learning the ins and outs of using the Gutenberg WordPress block editor experience?

In this tutorial, we’ll walk you through the essential features of the Gutenberg block editor, so you can unlock its full potential and improve your content creation workflow.

What is Gutenberg?

Gutenberg is the drag-and-drop “block editor” for WordPress that offers a modular way to edit your website. This was introduced in 2019 in the WordPress 5.0 update and equipped site owners with a diverse range of content blocks that made it significantly easier to create professional-looking posts and pages with less reliance on custom CSS and plugins.

How is Gutenberg different from the Classic Editor?

CLASSIC – Prior to 2019, WordPress used the classic editor interface which had a single text box with a WYSIWYG editor. If you ever wanted to add a unique feature to your page or post, that required custom coding or adding in WordPress plugins. 

GUTENBERG BLOCKS – The block editor, on the other hand, revolutionized how we design and edit websites on WordPress. The individual blocks now give you separate content elements that can be stacked and seamlessly arranged, customized, and styled.

How to enable the block editor in WordPress

Gutenberg is the default WordPress editor! As soon as you get access to your WordPress installation, you can begin using the block editor. 

There is one exception to this rule and that relates to the WooCommerce plugin. WooCommerce has a new user interface (UI) update coming soon, but until then, WooCommerce depends on the classic editor. 

If you want the Gutenberg blocks on your WooCommerce product pages, you’ll need to follow this tutorial: How To Enable The Gutenberg Editor On WooCommerce Product Pages to turn that on.

If you wish to revert back to the old way of editing on WordPress, you can install the Classic Editor plugin from the WordPress plugin directory.

There were rumors that WordPress would discontinue the Classic Editor plugin and stop supporting it in 2022, but since so many sites are still using it (over 5+ million active installations at the time of this post), it sounds like they’ll continue to support it as long as necessary.

If you’re hesitant to start using Gutenberg blocks; it’s time to make the switch! The future of WordPress is block-based editing! WordPress and third-party plugin developers are continuously innovating and iterating on the block builder concept.

If you are on an outdated theme that comes with the classic editor built in, it’s time to switch themes! 

• I highly recommend switching to the Kadence Theme. The free theme coupled with Starter Templates plugin is a great place to start for newbies.
• If you want a premium theme design, you can shop our Kadence child themes at DIYdreamsite.com. My team and I have strategically designed these to make it easier to get a beautiful website online fast without all of the tech headaches.
• We’re also happy to work with established content creators and online business owners to design custom websites. You can learn more about custom website design services here.

Tour The Block Editor Interface

Now that you know all about the Gutenberg block editor, let me show you around the interface so you can speed up your site editing workflow. 

To follow along, pull up a new post or page on your own WordPress website.

The Main Toolbar –

With a blank page on your screen we’ll take a look at all of the tools you have at your fingertips in the top main toolbar:

1) Black Box/ Logo Icon – Return To Pages

If you click on the black square in the top-left-hand corner, this will take you back to view your pages on your dashboard. 

You may see the WordPress logo in this black square, or if you have customized your site identity, you may see your logo here instead.

2) Blue Plus Icon – Toggles the Block Inserter

If you click on the square blue plus icon, this will open up the block library, which consists of a list of all the blocks, patterns, media files, and synced patterns/ reusable blocks you have available at your disposal.

What are Gutenberg Patterns?

If you’re not familiar with Patterns, they are predefined layouts made up of regular Gutenberg blocks (so you won’t find the Kadence Blocks here). 

The block pattern acts just like a regular block –  meaning that you can edit them after you insert them; the purpose of these predefined layouts is to make it easier for you to create an attractive page.

If you are using the Kadence theme with Kadence blocks, I recommend using the Kadence Design Library instead as their templates will be built with Kadence blocks – not Gutenberg. 

We’ll talk more about the Kadence Design Library in section #6 and talk about the difference between Gutenberg and Kadence blocks towards the end as well.

What are Synced Patterns/ Reusable Blocks?

In the WordPress 6.3 update, reusable blocks have been renamed to synced patterns. 

You’ll be able to arrange blocks in whatever combination you choose inside of the block editor and store them as patterns (or reusable blocks) to use across your site. 

You can also choose whether you want to sync the pattern and apply your changes to all parts of your site that use this block or to keep them unsynced to edit each instance. We’ll talk more about this later. For now, I just want you to know what they are and where you can find them. 

3) Pen Icon – Tools

If you click on the pen icon, you can toggle between edit and select options. 

• EDIT – This is the tool used by default and will show the block toolbar when you click into a block element on the post or page.
• SELECT – This hides the block toolbar and transforms it into a block that you can only pick up and move. To move the block in select mode, you’d click on the 6 dots and drag the block to a new location and drop it in place.

4) Undo & Redo Options

Next to the pen icon, you’ll find a backward arrow icon to undo changes you make to your page and a forward arrow icon to redo changes.

You can click either button to undo or redo the most recent action you made. Click it as many times as you need until you recover the changes you wish. 

You can also use keyword shortcuts for these actions as well: 

• Windows – “Ctrl + Z” to undo changes / “Ctrl + Y” to redo changes.
• macOS – “Cmd + Z” to undo changes / “Cmd + Shift + Z” to redo changes.

Keep in mind, this only work for changes that you just made in your current editing session. 

BONUS TIP: If you want to recover changes you made in a previous editing session, you’ll need to refer to the revisions section by clicking on the settings panel > click the page tab > click revisions just below the move to trash button.  

A revision is stored each time you manually save a document or click Update. If ‘Revisions’ does not show, then no revisions have been saved yet.

5) Icon with three stacked horizontal lines – Document Overview

The document overview is like your table of contents for all of the blocks that are on the page. This is very handy to reference especially as your pages and posts get longer and longer. 

There are actually two tabs in this overview:

List View

Once you open the List View, you’ll find a list of all of the blocks on the page in order. 

You may notice that some blocks are nested under other blocks; you can click the > icon to expand the blocks or click it again to collapse the list.

My favorite features about this list view are that you can: 

• Drag and drop the blocks around in the list view and it will move it on the page. 
• You can also drag and drop blocks to nest them inside the columns block in Gutenberg or the Row block and Section block in Kadence.
• Access more block controls via the icons with the three dots. Simply click the three dots menu on your desired block and you’ll find options to copy, duplicate, add blocks before or after, copy or paste styles between blocks, group, lock, create pattern/ reusable block, edit as HTML or delete the block.
• If you are using Kadence Blocks, you can also rename the blocks in your list view to make editing your page or post so much easier!

Outline

If you click on the outline tab under the document overview setting, you can view: 

• How many characters and words exist on the page.
• How long it will take to read the content on the page
• Get a visual outline hierarchy based on your heading tags (H1, H2, H3, H4, H5, & H6). This will even show you errors if you have incorrect heading levels – a great tool for SEO!

6) Design Library Button (Kadence Blocks Plugin Feature)

If you are using the Kadence Blocks plugin, you’ll also see a Design Library Button next to the document overview icon. If you are not using Kadence Blocks, you can skip over this section.

When you click on this button, a pop-up window will appear with access to the Kadence template library. This includes ready-made sections and pattern designs that you can one-click import directly into your site for faster page designs.

Some of the templates are built with the Kadence Pro features, to use all of the pro templates you’d need to invest in one of their Kadence Bundles and install their pro plugins. I HIGHLY recommend upgrading when you decide Kadence is your WordPress theme and plugin suite of choice! 

If you want access to more website templates than what Kadence provides, here are a few options:

1. Purchase a DIY Dream Site child theme – You’ll get your own custom design library which includes all of the full pages and section designs that match your theme!
2. Join the DIY Dream Site Membership – You can also access our DIY Dream Site template library when you join the membership. This template library includes over 200+ Kadence sections and full-page designs. Plus, your membership comes with a library of self-paced courses to help you with planning, building, and launching your website and implementing sustainable marketing strategies.
3. You can also explore this post to discover Where To Find The Best Kadence Child Themes & Kadence Block Templates

7) Save Draft/ Saved Status

If your page is not yet published and you begin editing it, you’ll see a “save draft” hyperlink. 

If you publish the page, the save draft hyperlink will animate to let you know it’s saving your changes, then will disappear.

If your page or post is in draft mode, and all changes have been saved, this hyperlink make say “saved” instead of “save draft”

If you publish your page and wish to switch it back to draft, you’ll need to click the settings panel > click the page tab > click the Switch to draft button beneath the author dropdown. 

8) Laptop Icon – Preview

If you click on the laptop icon, you’ll see a pop-up menu with options to switch the editor view to other device views like tablet and mobile or to preview the page in a new tab.

When you click on another device view – like mobile, for instance, it not only lets you view your content on that size of device, it also lets you make changes to certain block settings on each device view as well. 

One thing to note about these views… they are not entirely accurate.

I find that the tablet and mobile views look more squished on the WordPress editing screen than they do in real life. I highly recommend viewing your page or post on an actual device before you hit publish.

You can view your site on different device views by using the inspect tools on your browser for free. 

Or you can get the Polypane browser that allows you to view a website in multiple device views at the same time. This has been a game changer for me as a designer. Even if you are someone who is DIYing your own website, using the Polypane browser for a month or two while you’re designing your website could be a big time saver! 

9) Publish/ Update Button

The post or page’s publish button is located at the right top. This is pretty self-explanatory – the blue button will allow you to publish your page or blog post. 

When you hit publish, you may see a pre-publish checklist. This is turned on by default and provides some prompts to make sure you have the correct visibility settings and allows you to modify when you want the post or page to be published. If you like this checklist that appears, you can simply click the publish button. If that annoys you, you can deselect the checkmark at the bottom of that screen to turn the pre-publish checklist off.

Once you publish the page, the blue button will turn into an update button instead of a publish button. If the update button is grayed out, that means there are no changes on your screen to save or update. If that update button is not grayed out, that means there are changes that you can save. 

10) Page Icon – Settings Panel

Next to the publish button, you’ll see an icon that looks like a page with a right column. (This was formerly a gear icon in version 6.1.) This is your settings panel. You’ll use this to manage both your page settings and your block settings.

Page Tab

The Page tab allows you to: 

• Modify your page visibility – you can set it to public, private, or password protected.
• Change the publish dates and even schedule the post to go live on a future date
• Update your URL (also called page slug)
• Change the author
• Move the page to the trashcan
• Review revisions
• Set a featured image which is often used as your post or page thumbnail in various places on your website. This is also the thumbnail that shows when someone shares it on social media.
• Modify discussion settings to allow or disallow comments
• Configure page attributes including choosing a parent page

Block Tab

The settings within the block tab will change based on the block you have selected to edit. 

If you click on this panel and see a message that says, “No block selected”, you need to click on a block in order to view the settings.

Click on a block and then view the block settings panel to play around with various settings available to you! This is where you’re going to the bulk of your editing and customizations for each individual block.

11) Page & Pen Icon – Page Settings Control (Kadence Theme Feature)

If you are using the Kadence Theme, you’ll see a page and pen icon that allows you to change the individual page settings of a particular post or page that’s otherwise controlled by your global theme settings. 

You can change the transparent header, page title settings, page layout settings, content style, content vertical padding, and settings to show featured images. You even disable the site-wide header navigation bar and footer!

This Kadence theme feature is a game changer and really gives every site owner the flexibility they need to design and edit pages quickly.

If you are not using the Kadence theme, this icon will not be visible to you.

12) Kadence Blocks Controls (Kadence Blocks Feature)

If you have the Kadence Blocks Plugin installed, you’ll see the Kadence logo in the top right-hand corner of the screen. 

This pulls up the Kadence Blocks controls that allow you to add more colors to the color palettes, change the block visibility, import or export block settings from one site to another, and reset block defaults.

13) Three Dots Icon – Expands Additional Options

View – This allows you to change how you view aspects of the block editor, including:

• Top Toolbar – You can move the block settings up to the top toolbar rather than having the toolbar pop-up next to the block
• Spotlight Mode – This will gray out all other elements on a page so you can focus the block you’re currently editing.
• Fullscreen Mode – Fullscreen mode is on by default. When it’s turned on, it hides the WordPress dashboard settings panel and admin toolbar. If you turn this setting off, it will feel like you’re editing your post or page right in the WordPress dashboard.
• Distraction Free – Turning on the distraction free mode will eliminate all setting panels so you can write without distractions and just focus on the words on the page.

Editor – Allows you to switch between the visual block editor and the code editor

Tools – Give you some quick links to manage patterns, access keyboard shortcuts, relaunch the WordPress welcome guide, copy all blocks, and visit WordPress’s help center.

Preferences – These settings allow you to modify your default block editor experience. Many of these settings help with accessibility! Here are the some of settings you can manage:

General Tab

In the general tab, you can… 

• Toggle the pre-publish checklist settings on or off. I personally like to turn this off.
• Set your preferred default view to the distraction-free or spotlight modes. 
• Change the toolbar to show button text labels instead of icons.
• Toggle the “always openlist view” sidebar on or off
• Toggle the “use theme styles” off
• Toggle the display block breadcrumbs off

Blocks Tab

In the blocks tab, you can customize how you interact with blocks in the block library and editing canvas. You can:

• Choose to show the most frequently used blocks in the library first
• Choose to contain text cursor inside of the block. This will help screen readers by stopping text carts from leaving blocks.
• Modify the block visibility. For example, if you know you’re not going to use the pull quote block, you can uncheck it and it will hide that block from the block library.

Panels Tab – 

In the panels tab, you can control what displays in the page settings. You can…

• Turn off the featured image
• Turn off the discussion options
• Turn off the page attributes options
• Turn on extra areas to the editor such as custom fields.

Using Gutenberg Blocks

Now that you know where all of the settings are, let’s talk about how to actually build your posts and pages with blocks.

Three ways to add a block to the content editor

There are 3 primary ways to add a block:

1) Browse the block library

You can open the block library by clicking on the blue plus icon. You can scroll through the entire library or you can use the search bar to search for a specific block name.

For example, if you type the word “image gallery” in the search bar, all of the irrelevant blocks will be filtered out of this view, leaving you only with the blocks that match your search criteria, including third-party block plugins. 

Once you find the block you want to insert, you can either click on the block name to be inserted whenever your cursor is located on the screen. Or you can click and drag the block onto the page in whatever position you want. When you drag a block onto your page, you should see a blue line that indicates where the block will go on the page.

2) Click the plus icon on the page as you edit

You may also see a black plus icon on the right side of the content viewer. You can click this and it will pull up with a pop-up that has a mini version of the block library. In this view, you’ll see recently used blocks and you can type a keyword in the search bar to filter out results. Once you find the block you want, click it to insert it onto the post or page.

3) Type a backslash “/” + the block name

Lastly, you can start typing a backslash “/” followed by the block name to quickly insert the block of your choice. For instance, to insert an image block I would type “/image” and a short list of blocks that meet that criteria will appear. Select the block you want and it will get inserted into the post or page.

How to rearrange blocks on your page or post

Option 1. Move Up or Down Arrows – If you want to move a block up or down on a page, click on the block and choose the up or down arrow on the block toolbar.

Option 2. Click the 6 dots & drag the block around – For this to work, you’ll need to unpin the toolbar from the top. When you click on a block you want to move, the block toolbar will pop up near it. Click on the 6 dots icon and you should see a closed fist icon which indicates you can move it around. Simply drag your mouse to the new location you want to put the block and let go.

Option 3: Rearrange blocks view the document overview

We talked about this in section #5 when we discussed the main toolbar settings. 

Anytime you want to move blocks around on a page, you can drag and drop the block from the list view instead of directly on the page. This comes in handy when you have really big sections of content or long pages.

Why use a third-party block plugin?

If you want extended editing capabilities at your fingertips, you may want to use a free or premium third-party blocks plugin. 

These block plugins give you custom blocks with additional settings you’d otherwise have to manipulate with code if you were just using the Gutenberg block version alone.

There are tons of block plugin developers out there, but I personally use the Kadence Blocks plugin for my own site and all of my client websites. 
There’s a lot you can do with the free version alone, but if you really want to take your website to the next level, getting one of the Kadence Bundles is the way to go!

Share this post or save it for later!