WordPress Gutenberg - The Ultimate Guide
VloĆŸit
- Äas pĆidĂĄn 30. 07. 2024
- 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)
đ Sign up for my newsletter www.pootlepress.com/sign-up-t...
đ Contact me at: jamie@pootlepress.com
đ My Free Gutenberg Tutorials www.pootlepress.com/wordpress...
đ My Gutenberg WordPress plugins, including WooBuilder Blocks www.pootlepress.com/wordpress... đ„
đ Test out Full Site Editing and our WooCommerce Gutenberg Plugins, pre-installed app.instawp.io/launch?t=woobu...
đ Join my WordPress club (and help support this channel) clubpootle.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 - VÄda a technologie
The best video about Gutenberg!
Thanks so much Denison :) That might just be the best comment about the best video about Gutenberg :)
@@jamiewp eireofldlp
keeping the left menu and offing fullscreen was SO HELPFUL!! Thank You Jamie!
Glad it helped!
Just the right amount of detail to introduce the block editor and its concepts. Thank you!
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 CZcams 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!
Finally some good content on Gutenberg. So well presented. Thank you so much!
Ok itâs official - IN MY OPINION - for Gutenberg this guy is essential viewing. Terrific teacher.
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.].
thanks so much Bruce :)
Jamie gives the best Gutenberg how-to I have seen. Fantastic, and will transform my website.
Thank you so much Jamie. That was the best Gutenberg tutorial I have seen so far. Kudos!!
Another excellent video! Will certainly be recommending this to others who wish to learn about Gutenberg.
thank you Simon
Wow! I'm impressed. Your demo is so clear and straight. Thanks
thank you - that's great to hear
Great stuff indeed. Imagine the time we would all save if every CZcams tutorial were this concise.
Thank you đ
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.
thanks Terence đ
This is AMAZING! Well presented - to the point. After using classic for years, Gutenberg has gotten me to doubt my abilities. It's been a struggle. Thank you so much!!
that's great to hear - thank you for taking the time to comment đ
This is by far the best guide on Gutemberg I've ever seen. Ever!
Thank you for this video, I was searching for a long time for the Gutenberg WordPress tutorial.
This is the best blocks tutorial I have found. Well done, and thank you.
Thank you so much đ
Excellent video Jamie, thanks for the awesome overview.
People make this so difficult when it is so simple! And you just proved it. Thank you so much.
Thank you , that's great to hear
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 đ
Just wanted to say thanks for the clear explanation and useful videos you put on your channel . Great job . đđ
thank you :)
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!
Great to hear , thanks Dale đ
Excellent tutorial. I really appreciate the hard work you put into making your videos and the way in which you present the information. You have a very pleasant demeanor. I'm looking forward to your deep-dive into WP 5.9. This video gave me a good head start.
Thank you Keith đ
Thank you so much. It is a great video. I subscribed and will definitely watch your other videos.
This has become my goto channel for Gutenburg tutorials ....Excellent presentations Jamie! Cheers!
That's great to hear -thank you , thank you đ
This is a great overview of Gutenberg. Thank you very much for this.
Thanks Hauker, happy it was useful :)
Your videos have been incredibly helpful to me with Wordpress. Great content that is hard to find. Thank you! Love watching your videos and learning so much.
Thank you so much đ
Outstanding overview of the core blocks and how to customize.
Thanks so much Gerald - this one took a few days to put together :)
thank you ;)
Great stuff - thanks for putting this out there.
This was by far the best tutorial of Gutenberg I've seen so far!
super thanks Helena đ
Thanks man. I was out of webdesign loop for several years and this was a great reintroduction!
Cheers Peter :)
you are a wonderful teacher. thank you. people like you make teaching and learning a pleasure
thank you so much đ
GOLD đ„Moving from Classic to Blocks, this is a must video. Love the Editor Block Outline plugin, along with the Block Patterns directory đ Thank you.
Thanks Nigel - good luck in your journey to Blocks
Thanks so much for making this video which was exactly what I was looking for
Great đ
Reading about Gutenberg since a week but this was by far the best tutorial. Thanks
that's great to hear - thanks Artur đ
OMG! Seems I've always had the block editor on Fullscreen Mode and I felt lost and bewildered without the sidebar. You've enlightened me sir, much appreciated!
Great to hear it was helpful Justin :)
Thank you very much for this really ULTIMATE GUIDE!
Glad it was helpful Julio đ
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.
that's great to hear đ
Even though this guide has been out there for a while.....still very useful information...thank you Jamie!
thanks Martyn, tha's great to hear đ
Very nice information supply, thank you.
Great video - youâve demystified Blocks for me. Thanks
tks , that's great to hear
Amazing guide, thank you!!!
Thanks Andreas
Figured it out! All in settings. My ignorance is driving me nuts! Thanks for your support. kaw
So simply explained! So easy to follow! Great Video!
Thank you - it's great you found it useful :)
Thanks for this great video tutorial! Clear and concise. I have put off using this as my theme was great and I really had no need for it. I have had to change themes as it's no longer supported, and I figured it was about time to learn......there are so many tuts out there, I wish I'd found yours first!
Glad it helped đ
I have been struggling to see the point of Gutenberg. This video however is very helpful and goes someway to helping me make sense of the block editor. I was never a big fan of the "classic" editor. Thanks for taking the time to make the video. đđ
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
Thank you so much for your kind words
Thanks, Jamie. Super helpful!
Glad it was helpful!
Very good tutorial, paced extremely well and the piano is calming for my soul.
thank you đ
Awesome! Thank you
Having spent much of the afternoon trying to get used to Gutenberg, I found this a very informative video, with excellent presentation and a logical sequence.
I enjoyed the background music, gently playing as the video went on - my only disappointment was that a waiter hadn't turned up with a Dry Martini by the end!
love it tks for the great comment and so pleased to hear it was useful
Thanks Jamie. Helpful beyond measure.
Fab, thanks Mike đ
great work Jamie! My favorite trick was the paragraph to column layout
Thanks Michael đ
Great explanations. I struggle with deciding my own workflow : should I prebuild out totally with placeholders? Or take the time at each content piece step to find exactly what is needed. Decisions. Decisions.
I am wondering the same thing
so helpful and well-done. and relaxing. thank you.
thank you đ
I'm new to WP and was a bit bewildered, staring at page-builder after page-builder, struggling to see how all the moving parts fit together. What an amazing breath of fresh air your video is, Jamie. So straightforward that I am now coming to the belief that I simply don't need a page-builder. Your video made me feel instantly comfortable with exactly how to develop a day-to-day workflow in WP. Absolutely excellent!
Wonderful, that's so lovely to hear. Thanks Patrick đ
@@jamiewp I do now have one question if you can find time, Jamie.
I decided to use Gutenberg and began my search for a theme. Upon looking at a list of themes (most paid), they all seem to offer functionality that appears almost identical to a plugin such as Elementor.
I'm confused. I like to keep things simple, and am happy to edit using Gutenberg how you demonstrated in your video. Any advice would be a huge help? - Patrick
@@ralfison check out kadence, blocksy, generate press - all free versions should be fine - also we have a theme called 18tags which is worth a look
Very nice. Thank you
You make it look so easy. I am still fighting the no post excerpt bug. Can you tell me what the post conditions must be to have them show up in a page?
Great video thanks for taking the time to make it
thank you đ
A super helpful video.
Thanks for sharing!
~an American in Korea
Thanks Robert đ
Very insightful. Thanks for this video.
thanks Manuel
Great Job i just started to put my hands to it
Great to hear đ
Wonderful. Absolute genius
THANK YOU đ
Cool! Thank you! Very useful video
Great to hear đ
thanks for details video. I searched many many videos on block... but no one is teaching how to create website home page header with navigation. Do you have any video on it? The showcase library has awesome websites made with block.
Nice content. I would like a video ONLY talking about email optin forms and how to place them on page-on/in a blog and most important how to add them into the sidebar.
Wow best tutorial on GB I have seen thank you! I will soon have to move to using Gutenbert for my blogs and podcasts. A few questions...
1. I do a podcast and use Bluberry Powerpress. I have to a command at the start of a podcast post. Do I just create a small block and put the text for Powerpress in it, or do I do something different than that?
2. I am not sure how I set up the Blog or Podcast Title using Gutenberg. Is there a specific block for this, or do I use one of the available blocks?
3. Finally, not yet sure how I change text colors within a block. Often I use at least one different text color for some of the text within a paragraph.
Thanks for the help. Using Gutenberg now seems a lot easier than I expected it to be, because of your video.
many many thanks ! amazing job
Thanks Jeanne :)
Thank you for the great video. A live demo of building all sort of pages would be awesome.
Have you seen my website recreation series of videos?
@@jamiewp No, I haven't. I just found you today. I will be checking out your other videos. Thanks.
Because of this video, I finally understand Gutenberg, and yeah it's great
Thank you -- that's great to hear
So much for thinking outside the box
What is the name of the block outlines plug-in you use? I haven't used WP in a couple years so you're a real help!
Hi Sir! Thanks for this video. Is there an option for us to edit while using a tablet or mobile view?
great thank you
What a wonderful video. Do More
thanks Joaquim - I'm on the case :)
Just feel like jump into another world from elementor ... this seem great, need to learn again and again...
thanks for this tutorial...
my pleasure
Thank you for one of the most straightforward and comprehensive tutorials on Gutenberg. I've been making the painful transition from WYSIWYG editors like Dreamweaver to WordPress and your tutorial made all the difference. Question: Which block outline plug-in were you using? I installed Editor Block Outline and received nothing but errors. Thanks
Thanks Charles - if i remember i used the outline plugin that you used, what errors were you seeing?
@@jamiewp I honestly don't remember, but I tried to activate it a few times. All I got was a white screen and a text bubble with three options. None of them resulted in anything positive and I quickly deactivated and deleted it.
I must add that I've had a few issues with plugins/themes not functioning properly, so I guess it's par for the course. Once I installed a theme - without activation - and it broke the site. I had to do a restore. Thank goodness I did a backup shortly before the install. My learning curve with WordPress has been a trial by fire. Thus, my excitement in discovering your channel. Thanks again for some great content. Your clarity in explaining the various steps is exemplary. My best to you.
Hello great tutorial for a beginner - you talk a bit abut the the block outline plug-in can you tell me which one you use many thanks
This is extremely helpful, thank you so much! Will 3rd party blocks I download like Kadence Blocks work with these same controls?
Hi, yes they will đ
Thanks for all the informative videos, I have been binge watching WP videos.
I'm trying to get back into WP. By background was Drupal, until they had the big issue with all the drupal sites getting wacked. I had a few really cool sites where people could add data and post it. When Drupal sites started crashing I lost around 25 websites, and due to the amount of time it would take to fix them in drupal, I just let them sit idle.
Now I am trying to figure this out with WP on the cheap or free if I can. Get my entrepreneurial mojo going again, because I have really good ideas for some community sites and the domains to back them up. So your videos one has motivated me to get out there and jump back into the game after seven years lol I do have a few questions that would help me if you or anyone else has a few minutes it would be greatly appreciated.
Q1. On the back end to get the framework in it looks like I need WP, ACF
Q2 What is the best free way ( or cheapest plugin for multiple domain use) to Present the custom fields on the custom single post pages?
Q3 What is the best free way ( or cheapest plugin for multiple domain use) Visitor front end to add some custom fields to a post type?
This will keep me from buying elementor just for the dynamic data access. Which seems pointless if I want to lean back away from page builders to blocks
I found a new tool I love for spinning up WP sites locally on IOS "Local Sites". I can now watch a video and locally spin up a wp site to test the plugins, then delete it when I am done. I don't remember which channel I saw it on, but the software is free. It works well and maybe you could do a video on that for everyone thanks again, Roger.
very useful thanks
great to hear - thanks James :)
Thank you for the great video. How do you get the block red outline to appear? I do not see such an option on my end. Thanks again
Hi , thatâs a plugin I was using to help demo
Did I need this! How about a video for Mail Poet forms next?
Great Listen!
Gutenberg, Jamie and Coffee!
In a quiet house!
Build a Strong Day!
Thank you đ
Fantastic video on Gutenberg. Very well explained. Congrats! Are you planning to do a video on Gutenberg website templates? Thank you.
Yes Iâve done a few of Gutenberg site editing and templates- in fact I released one today đ
I was looking for a video like this for more than a year
glad you found it :)
@@jamiewp i was looking for all keywords i could imagine except Gutenberg, (full website using only blocks,zero plugin website wordpress etc etc)
@@iliaskyvos953 ah interesting, glad you found it in the end (i'll add some of your searches into my description)
Awesome video.. so informative and knowledgable.. Thanks for the effort of making this video.
Can you show how to enable outline aroung the block as you show in video?
Thanks - thats a plugin i find useful for demos called Block Outline
Hey, thanks for putting a lot into layman terms. I had a website designed for me and now he has disappeared and I have no idea how to change the look of my site. It looks ok but some of the writing isn't sitting right and no matter what I can't get it to look right. I have 2 pictures with writing underneath but one block of writing is lower than the other and makes the page look out of sync, I've tried everything like backup, enter and even putting spaces between them but it will not change. Any ideas ??
Hi Paul, can you share a link to the page?
Great Video as always. Putting the toolbar at the top is good but it has an issue. You can't seem to drag/move a block when it's at the top. The toolbar for the block also doesn't allow moving up or down if it's in a column or group so you can't move it all the way up or down. Sometime moving a block around the page causes the page to move up and down and you have to just drop it and then move using the arrows to get it where you want.
Hi Stuart, good point. I personally would use the new drag and drop list view for moving blocks (once wp 5.9 is released next week)
@@jamiewp Great Idea! - Didn't think about that!
Yes, this was helpful. I easily understood the block process because I learned DOS way back when (1980s) and associated it with a file cabinet with files. So that part was easy. And being a Wix user for so long almost everything else looked easy too. But what I don't get is why I am not seeing this block process with my template. I installed Gutenberg plug-in but its not working with my template. I open Glutenberg and I get the demo page not my site to fix like in your migrate video. When I first installed WP I followed another YT video and deleted all plugins and installed what they were promoting (elementor) I have since deleted that. Did I maybe delete a plugin that I needed? I'm so confused and so many videos later and frustrated. HELP Please.
What theme are you using ?
Great instructor. Do you have a favorite block builder and editor? I want to build a site for selling items. I would love to know your opinion. I really don't want to start from scratch.
I would start with just WordPress and WooCommerce blocks
Excellent video, full of useful stuff, but the one question I've not seen answered is how do I associate a template with a page.
I have created a header template part, and a footer template part, followed by a Page template incorporating them. I then designed a page and expected that when viewing it I would see my design neatly inserted between header and footer. No such luck; the header and footer are there, but there's no sign of the actual page content. I might have expected to see the page without the header and footer, but not the other way round. There must be some setting I've missed but I've not found it. Any ideas?
Did you add the post content block to the template?
@@jamiewp It just gets better and better, Jamie. Thanks for that tip, during which I discovered I could play with the Page Title as well. It prompts me to suggest a brief video on pulling together these items ranging from Template Parts all the way through to a completed page/post. If you've already done one, I must have missed it!
I'm switching from Divi. First challenge is I would like a fullwidth Image Header that maintains it's aspect ratio from one device to another... Ideas ?
I think you'd need to use the cover block, but add some media queries to use a different background image on mobile (but I'll have a think). Can you share the divi example page?
hi Jamie, nice and pleasant video! do you know if i can make a slide gallery without plug in, coding or oder software? Best, Stefano
Hi, you'll need a plugin to do sliders
I'm trying to figure out which extra plugin you installed, as for block editor. jamie, can you point me in the right direction? Cheers (edit) perhaps this is a bit vague, but what I mean is the extra thingy you installed, what you talk about in the beginning
Here you go wordpress.org/plugins/editor-block-outline/
@@jamiewp Thanks!
What is the name of the block outline plugin?
is there any way I can add a heading paragraph, list, and then paragraph with in one block? please help
Yes just group them đ
Hi Jamie. To me sync'd patterns / re-usable blocks feels like a wasted opportunity,
There's a good use case for creating sync'd blocks where the *structure* is controlled centrally but we could edit the *content* such as text & images wherever the block was used, without affecting the "sync master" or indeed pushing the edited content to all other instances where the block is used.
For consistency & maintenance, who wouldn't want say a common section design as a sync'd block, use it everywhere but be able to manage its *structure* in one location. However we can't do that because if we used the sync'd block on a home page and edited its text for example - that text would be sent to every other instance of the block and indeed back to the master.
Figma's "components" seems similar to sync'd blocks, but in Figma we're able to override content wherever a component is used, yet have the power of managing structure in one place.
What do you say? :-)
Hi Steve, great points - did you see the Partially Sync'd patterns idea - this seems like it would do what you want?
Hi @@jamiewp Hmm.. not sure I did. Is it in this video? Might be time for me to watch it again. Can't have the cats going hungry.
@@steveharmancambridge nope it's not in that video - it isn't available yet, it's being planned by the dev team.
@@jamiewp Perfect, I remain ever-tuned. Thanks for all you do Jamie.
Is the Gutenberg plugin different from the Gutenberg Companion plugin?
Hi Jim - Iâm not sure what the companion plugin is ? Do you have a link?
Are all these blocks responsive design?
Yup đ