How to use the Wordpress Gutenberg Block Editor (full tutorial)

🔥🔥 Save 40% on the SUPERFAST Cloud hosting I use (Today only)

In this video you'll learn how to use Gutenberg, the WordPress Block Editor to build beautiful, seo-friendly blog posts and pages. Gutenberg is a transformational step in the evolution of WordPress and I'll help you get the most out of it.

You'll learn how to insert, configure and style the best Gutenberg blocks. You'll also learn to move, group, and re-arrange blocks.

Finally, we'll look at some quirks of the block builder as well as useful shortcuts to speed up your workflow.

Blocks used in this Gutenberg tutorial:
• Paragraph
• Lists (UL & OL)
• Heading
• Image
• Block Quote
• Shortcode
• Button
• Columns
• Group

====================================
Video Chapters
====================================

00:00 - Intro & What you'll learn
0:34 - How to add a block
1:33 - Paragraph block
2:50 - List block
4:36 - Heading
6:00 - Image block
7:57 - Blockquote
8:27 - Shortcode block (including nesting blocks in shortcodes)
10:50 - Classic block
11:23 - Embed/Video block
12:22 - Cover block
13:54 - Columns block
14:47 - Table block
16:15 - Separator/Horizontal Rule
16:39 - Button block
18:00 - Group block
20:00 - Adding custom CSS to blocks
21:19 - Reusable blocks

Advantages of Gutenberg vs other Page Builders like Elementor or Beaver Builder?
- Clean, lightweight code
- Lower page size (and faster speed scores)
- Faster for writing content-heavy pages (blog posts)
- Native WordPress support (won't break your site on updates)
- Blocks still display even if a Gutenberg is deactivated
- It's FREE
- Large library of 3rd-party extensions and blocks

👉 Tools & Plugins I Use
-----------------------------------------------

This video contains affiliate links for Cloudways

#Gutenberg #Wordpress #wordpressblockeditor

[PeterGoesINya]

Finally a good video explaining things. I was going nuts with this editor. Great job and thank you!

[bigballsmarketing]

brother you saved me, ive been looking for the cover feature for so long, . i could find it on templates but didnt know its name, you literally saved me, take my

[MrCQrity]

This was great, thanks so much for doing this! I especially loved the tip with nesting blocks in the shortcode blocks at 10:00.

[BA-rtdp]

Super helpful, especially from the perspective of a front-end dev who rarely uses WP but is creating a child theme that has to match an agency design. This helps me understand how to envision their design fitting in a lot better.

[ivarssykkelsjappe]

Great stuff, thank you! Keep up the good work! 😀 I made a WP page 10 years ago, want to make a new one now with the block editor. Will deffinitely check your other videos!

[EM-zjgv]

This is the most useful tutorial video I watched today. Most of other videos would teach you to install plug-ins but I don't have the business plan subscription so I was stuck. Thank you very much for making this!

[KittenParadise]

you teach way my husband is a swe and he refuses to build a website for me on wp --.- :(

[the.marriage.coach.youtube]

nice video thanks! after adding a lot text at some point my blocks getting locked and i cant edit anything anymore. Only if i copy and paste some rows i can edit those rows... do you know why and how to avoid this? its super annoying..:)

[chrisbridgeshome]

Dude you kick ass, and I am officially in nerd love

[TheJRockett]

Ahhaha (and other surprised happy sounds). That was perfect... now I can build out my sales page which involves a lot of styling including a video. I've relied on Elementor before but it breaks my Blocksy header styling. hugs.

[rich]

Hi, great info. Hi, great video. Is there a way to reduce or elimate spacing between different blocks?

[TheJRockett]

Is it possible to make curved or slanted divisions between sections?

[PureTalkNetwork]

Fantastic tutorial 👌 Any suggestions on how to setup a Google Map and how to position it using Gutenberg and is there a plugin to add this feature? Also are there options for a Gallery feature as well as a contact form and how would the contact form be setup and linked to an email address? Still new to Gutenberg so a bit unsure about these 3 features mentioned.

[sharonsarles]

Well, best vid I've seen, but doesn't seem to match the new (horrible) 5.7. I hope they make it functional and you do a new video. Thanks.

[markmanning]

yup so easy almost everyone hates them

[fredberri]

I find WP extremely complicated. I am not a computer person but there must be a simpler way.