WordPress Gutenberg - The Ultimate Guide

Welcome to my ultimate guide to the WordPress Gutenberg Block Editor.

In this new 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 WordPress Gutenberg Block Editor?
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.

Timeline
0:00 - Intro
0:33 - The classic editor vs the new Block Editor
1:33 - Gutenberg is also a plugin
2:00 - Making Gutenberg easier to work with
2:45 - Where to find page and post settings in Gutenberg
2:58 - The Gutenberg Block Library
3:15 - How to add Gutenberg Blocks
4.15 - Another way to add Gutenberg Blocks
4:34 - How to customize Gutenberg Blocks
5:20 - The Gutenberg Toolbar
6:31 - Gutenberg List View and Breadcrumbs
7:11 - Simple Blocks and Container Blocks
9:25 - How to work with Simple Blocks
10:40 - How to work with container Blocks
13:23 - How to delete Gutenberg Blocks
13:39 - How to delete more than one Block (in one go)
14:00 - How to move Gutenberg Blocks
14:37 - How to copy page content in Gutenberg
15:00 - How to add social icons to Gutenberg
15:40 - How to add a video to Gutenberg
16:50 - How to add HTML to Gutenberg
17:24 - How to align buttons in Gutenberg
17:52 - How to duplicate Blocks
18:36 - How to transform Blocks into different types of Blocks
19:00 - Transform text automatically in Columns
19:25 - How to group Blocks together
20:00 - Re-usable Blocks in Gutenberg
21:00 - Gutenberg Block Patterns
21:53 - Jump Links in Gutenberg
23:18 - Add CSS to Gutenberg
24:00 - WordPress Gutenberg code view
24:17 - Useful Shortcuts
24:41 - Publishing options
25:12 - Hide Blocks from Block Library
25:35 - WordPress Block Plugins
26:11 - WooCommerce Gutenberg
26:36 - Gutenberg Block Themes
27:00 - Full Site Editing (FSE)
27:25 - Gutenberg Front End Live Demo

[MarkEm]

keeping the left menu and offing fullscreen was SO HELPFUL!! Thank You Jamie!

[jenniferward]

Ok it’s official - IN MY OPINION - for Gutenberg this guy is essential viewing. Terrific teacher.

[simonkerridge]

Another excellent video! Will certainly be recommending this to others who wish to learn about Gutenberg.

[brucebennett]

This tutorial is a very well constructed online and seamless Gutenberg presentation ... Jamie Marsland has nailed it with his pleasant soft voice-over and focused style that will serve anyone considering the workings surrounding Gutenberg. An absolute treasure to continually refer too. [ Bruce - M.E.N.].

[pelemaduragerenciador]

People make this so difficult when it is so simple! And you just proved it. Thank you so much.

[dalelarson]

WP newbie this week. Loaded 5.8 on Monday, 5.9 on Tuesday. Whoa, I gasped, what's up? Well, truth be told, you are — up to the task, indeed, of explaining things elegantly, minimally, clearly. Triple thanks. Your words, voice, and faint piano jazz are superbly helpful. Cheers!

[bangmedia]

Great stuff indeed. Imagine the time we would all save if every YouTube tutorial were this concise.

[jasonji]

Wow! I'm impressed. Your demo is so clear and straight. Thanks

[primitives]

Just the right amount of detail to introduce the block editor and its concepts. Thank you!

[sohailshaikh]

I am building an E-commerce website and just came across your video..At first I wasn't sure if Gutenberg was the right choice to build my woo commerce website but going through your video now has helped clear my doubts.amazing video, great presentation. Thank you so much, looking forward for more of your contents 😄

[stevemcevoy]

Jamie gives the best Gutenberg how-to I have seen. Fantastic, and will transform my website.

[demmyonline]

This is an excellent tutorial in more ways than one. Combined with the comprehensive index, it takes you directly to a task without any repetition or rambling. Anyone wanting to develop decent Youtube tutorials on any subject should watch this tutorial and use a similar style. I learned more in the past 30 minutes than I've done in three weeks. Excellent!

[mightynutex]

Finally some good content on Gutenberg. So well presented. Thank you so much!

[terencemilbourn]

Excellent overview of how Gutenberg works and how you can use it. Simple, clear presentation of all the steps you need to take in order to create a post/page. Well worth watching.

[gps]

Thank you so much Jamie. That was the best Gutenberg tutorial I have seen so far. Kudos!!

[helenaananas]

This was by far the best tutorial of Gutenberg I've seen so far!

[geraldheagney]

Outstanding overview of the core blocks and how to customize.

[ericjansen]

Of course depending on your background, but this video has helped me a lot. Would have saved me weeks of puzzling and trying if I had seen your video earlier. Short, powerful, clear and to the point! Will definitely share this info with a lot of people, thank you so much

[ghanwamalik]

Thank you so much for assembling all the info we need to know. My client wanted me to work on this mode; I had no idea about this editor. But you appeared as my savior. You saved my time; I am grateful for it. Thanks for the great work, and best of luck with your future endeavor.

[two]

This is by far the best guide on Gutemberg I've ever seen. Ever!