WordPress Gutenberg Block Editor Guide

Welcome to my Gutenberg Block Editor learning library. Here you’ll find my growing collection of free Gutenberg tutorials. If you would like to be notified every time I release a new WordPress Gutenberg tutorial video, click here to subscribe to my YouTube channel.

Table of Contents

The Ultimate Guide to Gutenberg

In this Gutenberg WordPress tutorial, I’ll take you step by step through WordPress Gutenberg Blocks and how to use the Gutenberg WordPress Editor.

What is the Block Editor? (source wordpress.org)

Gutenberg is a codename for a whole new paradigm in WordPress site-building and publishing, that aims to revolutionize the entire publishing experience as much as Gutenberg did the printed word.

The project is right now in the second phase of a four-phase process that will touch every piece of WordPress — Editing, Customization (which includes Full Site Editing, Block Patterns, Block Directory and Block based themes), Collaboration, and Multilingual — and is focused on a new editing experience, the block editor (which is the topic of the current documentation). Blocks treat Paragraphs, Headings, Media, and Embeds all as components that, when strung together, make up the content stored in the WordPress database, replacing the traditional concept of freeform text with embedded media and shortcodes.

The new editor is designed with progressive enhancement, meaning that it is back-compatible with all legacy content, and it also offers a process to try to convert and split a Classic block into equivalent blocks using client-side parsing. Finally, the blocks offer enhanced editing and format controls. The Editor offers rich new value to users with visual, drag-and-drop creation tools and powerful developer enhancements with modern vendor packages, reusable components, rich APIs and hooks to modify and extend the editor through Custom Blocks, Custom Block Styles, and Plugins.

WordPress Beginners Guide – Build a website with the Gutenberg Block Editor and Full Site Editing

In this video, I will show you step by step how we are all going to be building WordPress websites in 2022, using the Gutenberg Block Editor and a Theme that supports full site editing (FSE).

When full site editing is rolled out in 2022 there will be a brand new way of building your navigation. In this video I walk you step by step how the new WordPress menu system works.

  • How to add an existing menu
  • How to create a new menu
  • How to add drop down menus
  • How to remove or move menu items
  • How to add space between menu items
  • How to add social media icons to your menu
  • How to add your phone number to your menu
  • How to add your email to your menu
  • How to style your menu
  • How to add sidebars to Block Themes
  • How to style sidebars
  • How to make a sticky sidebar
  • How to create dynamic sidebars
  • How to add a left sidebar
  • How to have different content in sidebars

👉 Click here for your FREE training website with the 2022 Block Theme pre-installed 🔥

My Top 10 Gutenberg tips

  • An easy way to move Blocks in long pages
  • How to wrap text around an image
  • How to align the Gutenberg Block Editor Button Block
  • How to create a smooth scroll with Anchor Links within a Gutenberg Page
  • How to find out what Blocks other websites are using
  • How to use Edit Modes in the Gutenberg Block Editor
  • How to create Awesome Grid Layouts using the Media and Text Block
  • How to bring back WordPress Menus when Editing Pages with Gutenberg
  • How to fix the toolbar to the top of the screen
  • How to use Re-usable Blocks

WordPress Full Site Editing – A beginners guide

With Full Site Editing, you will be able to edit your entire website using the WordPress Gutenberg Block Editor. Full site editing is coming to WordPress very soon, and it has huge implications for how we are going to build websites in the future.

It also has big implications for themes like Divi, and for page builders like Elementor. In this video, I walk you through the main concepts of how FSE is going to work. The key concepts behind Full Site Editing are Theme Blocks, Templates, Template Parts, and Global Styles.

Top 20 WordPress Gutenberg Full Site Editing tips and tricks!

Full Site Editing is very powerful, but can be a little confusing when you are just getting started. In the video below, I share 20 simple but powerful tips that will help you get the hang of Full Site Editing in no time at all.

Are you using the Best Free Gutenberg Block?

In this video, I take you through my favourite Block Editor Block, the Cover Block.

Top 5 Gutenberg Block Editor Tools and Utilities for WordPress websites

Here are my Top 5 Gutenberg Block Editor Tools and Utilities that will turn you into a Gutenberg Ninja. Gutenberg Block Editor Tools I reviewed Editor Block Outline – https://wordpress.org/plugins/editor-… This is a Gutenberg plugin that adds an outline around each block. Outline settings are based on user meta. Each user can change the settings according to their needs and it will applied only to their account.

Find my blocks – https://en-gb.wordpress.org/plugins/f… Find My Blocks is a WordPress plugin built to help (as it says in the name) find where you have used specific Gutenberg blocks on your WordPress website.

Block Navigation – https://wordpress.org/plugins/block-n… Block Navigation provides a sidebar with the current post/page’s blocks and some tools to facilitate the editing process in the new Gutenberg editor.

Detective Wapuu – https://chrome.google.com/webstore/de… What Detective Wapuu does is it scans the site you are currently on and let’s you know which blocks they are using and where. Not only can you discover new blocks but you can get ideas on how to put blocks together in new and interesting ways.

WP Theme Detector – https://www.wpthemedetector.com/ WordPress Theme Detector is a free tool that allows you to find all the details about the WordPress theme and plugins currently being used by a site.

10 WordPress Gutenberg Block Editor Tips That Save You Time

Here’s ten easy to implement Gutenberg tricks that will save you time

Gutenberg Yes or No, I asked the Pros

The WordPress Block Editor has split opinion over the past two years, and in this video I asked the top WordPress Pros what they think.

Create an awesome Glassmorphism Effect using the Gutenberg Block Editor

How to add this cool Glassmorphism effect with the WordPress Gutenberg Block Editor. This tutorial shows how to add a frosted glass effect to your website using the Gutenberg Block Editor, the Cover Block and the Columns Block.

Glassmorphism CSS generator – https://hype4.academy/tools/glassmorphism-generator

CSS used in this tutorial https://gist.github.com/jamiemarsland/4af06d5cb0e67b2e4903f49b7ba8adeb

Magazine Layout with Gutenberg

How to create a Magazine Layout for your website or blog with the WordPress Gutenberg Block Editor, full site editing, no plugins and no code!

Sticky Scrolling effect with the Gutenberg Block Editor

The Gutenberg Sticky Block plugin lets you Stick any Gutenberg block to the top of the page as you scroll. In addition you can also choose when to unstick the sticky block. It’s a really cool effect that can be used on WooCommerce or Blog site, and no css or javascript is needed. Now it’s easy to create a Sticky Scrolling effect using the Gutenberg Block Editor and the Sticky Block plugin. Plugin Description The Gutenberg Sticky Block can be added to any Post or Page and will be sticky as soon as it hits the top of the page after you scroll down. The Sticky Block can contain any other Blocks (Paragraphs, Images, etc.), and can also be used in other Blocks (e.g. Column or Table).

Sticky Block free plugin for Gutenberg

Working with Widgets and the Block Editor

In this tutorial, I show you how to use Gutenberg Block Widgets and Classic Widgets on the same website.

Advanced Custom Fields & Gutenberg Beginners Guide

Beginners Guide to build a directory/listings website using Gutenberg FSE + ACF + Custom Post Type UI + Stackable Blocks. Learn how to create a directory or listings website using WordPress Full Site Editing. This step-by-step guide is aimed at beginners who want to build more complex WordPress websites, without touching any code. In addition, you won’t need to use a page builder like Elementor, because this functionality is now being built into WordPress core. There are three main steps that I’ll take you through Step 1 – Create the custom post type Step 2 – Create the custom fields Step 3 – Create the custom page layouts

Custom Post Layouts with Gutenberg

How to build a custom layout for your WordPress posts using the WordPress Gutenberg Block Editor and Full Site Editing.

How to build a WordPress Full Site Editing Theme

How to Build your own WordPress Gutenberg Full Site Editor (FSE) Starter Theme in 10 minutes with no coding. The Theme we build won’t have any in-built styles but it will have all the full site editing parts. It’s a good demonstration of how blocks make up themes in a full site editing world.

Animate Gutenberg Blocks

How to add awesome animations to Gutenberg Blocks using this free WordPress plugin.

Awesome Gutenberg Image Galleries – how to create blob shapes and open images in a lightbox

  • How to create Blob shapes for your images
  • How to open images in a lightbox

Free Blob shape generator https://9elements.github.io/fancy-border-radius/

The CSS I used in the tutorial https://gist.github.com/jamiemarsland/ee6f765b46bbd63ef992d6667fbccc06

The Free WordPress Photo Gallery Lightbox plugin that I used https://en-gb.wordpress.org/plugins/simple-lightbox/

Meet the future of WordPress Themes

In this video I show you the future of WordPress Themes when I take the new Wabi Block Theme for a spin.

This is what you’ll learn about.

  1. Global Style Variations
  2. Post Accent Colours
  3. Block Patterns
  4. Theme Builder
  5. Why Block Themes are so fast

I’ve created you a free WordPress website with Wabi pre-installed, so you can take it for a spin! Your free website can be accessed here.

CTA Boxes with Gutenberg

How to build three awesome designed Call to Action Boxes using the Gutenberg Block Editor and no extra plugins.

Gutenberg Tutorial – How to add a animated gradient colour background section to wordpress

How to add a animated gradient colour background section to the WordPress Gutenberg Block Editor.

SEO and the Block Editor

How to use Rich Snippets and the WordPress Block Editor, Gutenberg, to take your Google Search Ranking to the next level.

A new way for designers to make money with Gutenberg

A new way for designers (who don’t code) to make money with WordPress and the Gutenberg Block Editor. This video talks about Gutenberg Block Patterns and how you might sell use these to sell your own designs to your customers or new customers.

How to move from Divi to Gutenberg

This guide will show you how to move from the Divi Theme to the Gutenberg Block Editor.

How to build a custom blog with Gutenberg

This tutorial will show you how to create a Custom Blog using the WordPress Block Editor Gutenberg, and no coding, and no extra plugins. The normal WordPress Blog is dynamically generated, and the design is controlled by your Theme. This guide will show you how to get 100% control over your WordPress Blog, using Blocks.

How to create a Magic Text effect with Gutenberg

How to create this amazing Magic Text effect with the WordPress Block Editor. This effect is built using the Gutenberg Block Editor and the Cover Block, and a little imagination.

Awesome Parallax Gutenberg effect

I discovered this really cool Fixed Parallax Effect with Block Editor (Gutenberg) and here’s what I built https://wp-skins.com/streamliner/para…

How to send Mailchimp Newsletters with Gutenberg

This tutorial shows you how to send Mailchimp Newsletters using Newsletter Glue Plugin and the Gutenberg Block Editor

5 Big Improvements coming to Gutenberg when WordPress 5.9 is released

  1. Drag and Drop List view
  2. Text highlights
  3. Automatic Anchor points
  4. Improved Columns control
  5. New Block Pattern Explorer

Block of the Week

Awesome icons with Gutenberg

Overlapping columns with Gutenberg

Block Visibility

Control which Gutenberg blocks are visible on your website and who can see them. Schedule content to show or hide at a specific time.

The free Block Visibility WordPress plugin

The Query Loop Block

The WordPress Gutenberg Query Loop Block is the most important Gutenberg Block, as it lets us create custom and dynamic pages, for example, a custom blog page. In this video, I’ll show you how to use the Query Loop Block to create the following dynamic pages. 1) Custom Featured Post Blog Page template 2) Custom Masonry Blog Page template 3) Custom WooCommerce Shop Page template What is the Query Loop Block? The Query Loop block is an advanced block that allows you to display posts based on specified parameters; like a PHP loop without the code. You can think of it as a more complex and powerful Latest Posts Block. With various block patterns integrated into the block setup, you can do things like create a portfolio or a page full of your favorite recipes. source: wordpress.org

Create Content Templates with Gutenberg

This video shows you how you can create Content Templates, using Block Patterns and the WordPress Gutenberg Editor.

The RSS Block

Use the RSS Block to create an industry news page on your WordPress Website.

Scroll to Top