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.
(source wordpress.org)
👉 Contact me at: jamie@pootlepress.com
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