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.
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).
Master the new Gutenberg Menu System
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
Master Sidebars with WordPress Gutenberg Block Themes
- 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
Are your WordPress Gutenberg designs too boxy?
5 tips to make your WordPress Gutenberg designs less boxy.
- Add beautiful shapes into pages
- Create stylish galleries
- Add seamless Photo cut outs
- Improve readability with snazzy sticky backgrounds
- Mirror text with shape design
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
Make Better WordPress Content
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.
- Global Style Variations
- Post Accent Colours
- Block Patterns
- Theme Builder
- 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
- Drag and Drop List view
- Text highlights
- Automatic Anchor points
- Improved Columns control
- 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.