WordPress Gutenberg Block Editor Guide

Welcome to my Gutenberg Block Editor learning library. Here you’ll find my growing collection of free Gutenberg tutorials.

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).

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

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.

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

The Query Loop Block

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