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

[@bigballsmarketing3639]

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 money!!!!!!!!!!!

[@PeterGoesINya]

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

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

[@kdesignmail]

Great tutorial! Thanks

[@ivarssykkelsjappe6514]

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!

[@BA-rt9dp]

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.

[@BuildThatWebsite]

Awesome! If you're a dev, you should definitely check out lazyblocks or genesis custom blocks. It's the easiest way to build custom blocks for your clients without messing with React or building a block from scratch. Lazyblocks is completely free.

[@EM-zj5gv]

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!

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

[@BuildThatWebsite]

Elementor shouldn't override theme styles unless you've either checked the global styles option in Elementor settings or you're using the theme-builder features in Elementor Pro. That said, Gutenberg makes faster leaner pages if you're comfortable with it.

[@chanelalgrabli884]

Amazing! Thank you so much!

[@chrisbridgeshome]

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

[@BuildThatWebsite]

I'm glad you found it useful! Let me know if you have any suggestions for future video topics!

[@rich5759]

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

[@BuildThatWebsite]

Yes, you can override default spacing with CSS. If you only want to do it occasionally you could create a custom CSS class like 'margin-zero' with a rule: .margin-zero { margin: 0 !important; } And then just add the class 'margin-zero' to any blocks you want to eliminate spacing on. Some blacks have additional padding as well, like the group block, but you can do the same thing for that. Other options would be to use the GenerateBlocks plugin (free) and put your block inside a generateblocks container, and then manually set the spacing. you could use negative margin if necessary.

[@rich5759]

@@BuildThatWebsite Good to know, thanks!

[@TheJRockett]

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

[@BuildThatWebsite]

Not with the core blocks, but there are numerous free addons that include row separators. One good one is GenerateBlocks (shape divider): generateblocks.com Also, Kadence Blocks (which I love) has a row separator option for the row block: buildthatwebsite.com/go/kadence-blocks (affiliate link)

[@toddogryzlo2433]

loved it

[@theanxioustosecurecoach]

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

[@BuildThatWebsite]

Are you using core blocks? Or a 3rd-party plugin like Stackable with lots of nested blocks?

[@english808forjapanese3]

Well done. 💪Thanks!

[@BuildThatWebsite]

Glad you liked it!

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

[@BuildThatWebsite]

There are several Google Maps blocks, including this one: wordpress.org/plugins/map-block-gutenberg/ There dozens of Gallery plugins in the WordPress repository. Many of them now included Gutenberg blocks. Alternatively, you can use a lightbox plugin that integrates with the default WordPress gallery block. For contact forms, you can use pretty much any form plugin. They'll either include a Gutenberg block, or more likely a shortcode that you can stick in the shortcode block. There are also standalone contact form blocks like this: wordpress.org/plugins/contact-form-block/ The developer community has really embraced Gutenberg as the future of WordPress and it's capable of pretty much everything you can do with a Page builder like Elementor or Beaver Builder.

[@PureTalkNetwork]

@@BuildThatWebsite Thank you very much for that, I will definitely go ahead and look into these solutions that you have provided. It would be fantastic to move away from Elementor completely, I have used Elementor for a few years and it works well however I would prefer Gutenberg considering the difference in speed and it seems to be more native to WordPress. I look forward to more of your tutorials, excellent work and thank you 👍⭐

[@BuildThatWebsite]

Let me know if you have any suggestions for future videos, especially Gutenberg. Gutenberg is going to become even more powerful when WordPress releases 'full site editing'. The one area where it lags behind Elementor/Beaver Builder is the positioning and styling of blocks. But if you know CSS, this isn't really a limitation. Eventually, I think there will be extensions that add styling controls to Gutenberg blocks (border, box-shadow, etc). But yes, I agree that Gutenberg creates cleaner code and the pages load superfast. Elementor and Beaver themer make it so easy to design custom templates and archives, that I continue to use them for that purpose. But all my blog posts are written with Gutenberg, and my main site template is handled by my theme (GeneratePress or Genesis usually).

[@PureTalkNetwork]

@@BuildThatWebsite Gutenberg is fantastic from what I have seen so far, honestly I would like to see a full tutorial on how to build a basic website from scratch. Home page with a slideshow, content as well, 2nd page perhaps a gallery(filterable gallery if possible), 3rd page a contact page with a google map, contact form etc. all of this setup with Gutenberg, also how to make sure the mobile version is setup as expected as well. When I started using Elementor I just watched a few step by step tutorials of how to use Elementor and I could design pretty much any type of basic website, of course just change the design of these pages but the functionality would be more or less the same. If we have a good idea of how to build this basic website step by step using Gutenberg solely then it takes away the use of 3rd party builders like Elementor which would be a huge step in the right direction the way the way I see it. I design websites for clients and I have noticed that on many of these websites that I have built using Elementor I have to cache these websites weekly because areas like text gets aligned differently to one side of the page, sometimes pictures don't show etc., is there a way around this whereby the site can be built and there isn't a need to go back and forth to cache these sites so often? Are GeneratePress or Genesis a solution to this perhaps, what's your take on it?

[@BuildThatWebsite]

This is a good suggestion, and definitely on my to-do list. I'm trying to assemble the right stack of Gutenberg addons to make it a full page builder, without having TOO many plugins. What's cool, is there will eventually be a 'block library' inside the editor where you can just install single blocks that you need, instead of bloated plugin with 50 blocks. As far as the caching issues, this is most likely due to your cache/optimization settings, rather than Elementor itself. I've been using Elementor to build important pages on my sites and they've displayed flawlessly, using both dedicated caching plugins, as well as 3rd-party services like Cloudflare APO. If images aren't displaying, there's a good chance you're either: 1. Loading Jquery too late 2. Need to reconfigure lazy-load settings 3. Not purging the cache (and CDN cache) properly after an update.

[@KittenParadise]

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

[@sharonsarles2366]

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.

[@BuildThatWebsite]

I'm running 5.7 on most of my sites and I haven't noticed a big difference in the Editor other than the 'save Reustable blocks on update' feature which appears to be a bit glitchy. There's also a new 'conditional display' option in the block settings which I think is great. What changes have you noticed?

[@markmanning2921]

yup so easy almost everyone hates them

[@fredberri7225]

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

[@BuildThatWebsite]

WordPress does have a learning curve, but it also gives non-developers the capability to create incredibly powerful, dynamic websites. There are definitely simpler tools with more limited features, such as Weebly or Godaddy site builder.