Agree with the sentiment in the comments. Thanks for keeping it civil, no beef, no drama, just “this is how it can be done and they’re two different tools”. Subbed.
Now this is how meaningful discussions should progress. Thanks for this, Brian. I definitely learned something here about GB. Could you please do a video on how to make the cards in this component dynamic and pull in data from ACF? Takes literally 5 seconds in bricks. I honestly want to see how it should be done in Gutenberg.
That's a great idea and I'll add it to my queue. Currently the most popular way to do that is with ACF Blocks or a custom block. BUT WordPress 6.5 is fixing this, hopefully, by adding the ability to use custom fields in blocks: github.com/WordPress/gutenberg/issues/53300#issuecomment-1808020238
Thank you for this video. I've found Gutenberg to be un-intuitive when compared to page builders. The same would be true for Squarespace, Wix, etc. Following lingo on the various Gutenberg blocks web developers would use would help. So far I use Gutenberg primarily for basic blog posts. Posting more videos on best practices for using Gutenberg for blog posts would be awesome! WordPress has a marketing problem. It seems as though they desire to "push out" page builders and replace them with Gutenberg. They need to address this perception pronto. I see Gutenberg used for more basic websites. Especially for blogs. Page builders would be used for custom websites that are more advanced.There'd still be a role for Gutenberg in creating posts while using a page builder. WordPress needs to "lean in" on this and message to this demographic. Both Gutenberg and page builders can co-exist.
I see a lot of people using Gutenberg for posts, page builders for landing pages or other templates. I agree that sometimes WordPress makes it feel like an 'either/or' but I think all of these tools have a place in the ecosystem. They're all part of the reason WordPress is still so popular.
I've been struggling with widths for way too long, no more struggles after watching this vid, fantastic, Iearned a bunch just watching this... I've been a Wordpress beginner for EVER, finally starting to figure out a little, came back to WP because of Guttenberg. I like the way this is heading. Just a simple site kinda guy.
Love this video. I learned a new trick! I think you’re very right in saying it’s not a page builder replacement. They accomplish different things. I still believe the block editor is missing a number of features if we’re supposed to build entire websites with it (which seems to be the “official” WordPress stance), namely greater levels of control when it comes to the HTML output, and responsive controls (not _everything_ can be achieved with an intrinsic styling approach) The tools I’ve seen that are the closest to this within the block editor environment are GenerateBlocks, Greenshift and Cwicly, but still not perfect when it comes to classes etc. Thanks again for the video! 🙌
Great video, Brian. I learned a bunch here, I like how you clarified what the block editor is not. Although it can achieve the same result a page builder would, it is just not built to be one. With methods like you explained in the video, you can create any type of layout with a sprinkle of custom css that is block editor compatible for a smooth client experience(CX) without having to dive into react. This is a game changer 🙌
Today I learned that you can combine essentially add a wrapped around elements by combining them into a stack. This is such a great video for showing you solutions to frustrating parts of the block editor.
Nice! Yeah I love the content-first approach of the block editor - add elements and then start combining them. Rather than the container-first approach of page builders.
Great video and post, thanks! As someone who's clueless about the blocks editor, that really was the "answer video" I was hoping to see. I learned a lot. Turns out there are fine ways to work with the blocks editor after all! Small recommendation: record in 1080p (at least), and don't "crop in" your screen.... some of us are watching from laptops!
Thanks for your video, now understand how stacks work. You’re a great teacher, explain well at a reasonable pace and and appreciate your authentic background. New subscriber!
I have no problem maintaining Gutenberg for news/blog style content. It lets end users have some interesting blocks to play with. But I don't think it's anywhere near handling the whole site template or advanced pages. The way I see it, making Gutenberg work is not easy enough or intuitive enough for the end user, and for the pro developer the whole process is awkward and hacky. I'd rather just have all the necessary controls in the page builder and avoid as many hooks/filters and custom code and tricks as possible. But at the same time, a good page builder still requires a learning curve, meaning it's also not easy or intuitive for an end user. To the developer, they will get the job done using whatever tools they can and implement whatever hacks, code, or plugins are needed to make it happen. But the real issue is when the end user wants to take control, and what they have access to, what controls they have, what they can edit intuitively or royally screw up. There are devs who don't want the end user touching the content with ANY builder, and will make a rigid system built entirely on zillions of custom fields or flexible content blocks where the end user has only very speicifc fields they are allowed to edit. And for me, balancing Gutenberg and Bricks, there is tension going between them because it's not easy to create a grid in Bricks but then let end users add the same grid to their blog post Gutenberg content. I have to overwrite styles from GB that don't match up in Bricks and vice versa. Parity between the two is a struggle because they have different base styles, responsive breakpoints, and other fundamentals. Probably Cwicly has the best idea which is to integrate with GB so you don't feel like you are bouncing between two separate building systems. We are nowhere near Nirvana yet!
There are very few videos on CZcams about block theme development good work flow and how to add custom special functions. Very good work I hope I will see more videos about how to migrate Figma advanced design to block theme, API integrations with custom blocks and good work flow.
A great response to Kevin's video for sure! I've watched your previous videos and was wondering where did you learn about InspectorControls, BlockControls, RichText etc? Is it only in the wp docs or elsewhere?
Definitely from the docs, from looking at the Gutenberg repo and copying core blocks and core packages, from other developers who were kind enough to teach me... there's no clear place to learn this stuff, but that's my goal here. Maybe I'll start digging into each component.
Great video, Brian! You have a new subscriber! This was super helpful and I'm looking forward to diving into your other videos and continuing to learn how to navigate Gutenberg. Thanks again! 😀
That was great, but I noticed you're still just throwing in random values for things like spacing & padding. Could you use this approach with design tokens using something like openprops, is that something you can integrate easily into theme.json?
Yeah so anytime I'm using one of the range sliders for padding/margin- those are predefined values in the theme.json, meaning the theme will limit you to a consistent set of spacing values. In this case I did put custom values when I needed a smaller amount of padding, but that's only because the smallest amount in the theme wasn't very small (a common issue with off-the-shelf block themes).
would you happen to know how to change the colour of the status bar on mobile devices. im using 2024 theme. Can't find anywhere where I can change the colour. Where the mobile displays battery, time, wifi signal etc. At the moment I have a a block called 'simple header with dark backgroun' - when I fill the background with blue the status bar is also coloured blue When I use other colours including black the status bar goes white.
@@BrianCoords yes it appears that some pre built headers (patterns?)can do this but only with certain colours. Is it something to do with light or dark.? Just wonder where you can have more control over that part . I wanted the background image or cover to extend that far but not sure how. Does it only work with certain colour
Yes. That setting only opens it automatically when you first open a page. Once you open the block editor panel, it replaces the list view and then when you close the blocks panel, list view is gone, too. Over. And over. And over again. haha.@@oscarhugopaz
Yeah there's a ton of open issues on this and lots of "discussion" about it. Seems simple to me: it should just stay open until you explicitly close it.
right out of the gate. I enter a group block and have NO option to change its width with Wide/full etc. It just doesnt exist. This happens with every tutorial i look at. Its just not the same on my screen. I am also using the 2024 them and have opened a front page template. Then deleted everything on it to make it blank. I enter a group block and no options for width. what is happening. Is this because its on top of some type of posts page? and not a front page empty template like im using. Its unbelievably confusing how you have to be editing in a correct spot of the 3 possible spots you can edit otherwise all your blocks will behave differently. (edit: looks like if i create a regular home page and NOT a Front page.. then i get some width options for the group block. Interesting that the same block has different options depending on what TYPE of page you are trying to build. This is a minefield of options and nearly non existent support or tutorials) When i search youtube for tutorials there are rarely up to date ones with the way Guttenburg blocks works these days. Im a brand new user and it just seems so limited.
@@BrianCoords looks like i HAVE To use the front page template and enter all content into it if i want to have a seperate front page style to every other page. really not sure how else to do it. But the front page template doesnt operate the same way (even has different design limitations) to other regular pages. unbelievably frustrating. Just creating a simple home page with a different header to the other 3 pages has been a nightmare process. No video has shown how to do it yet. The absolute very basics - create a home page/front page with a fancy header.. then all other pages will have a regular style header and content. NOT a single tutorial on how its meant to be done.
I don't think they do commissions/affiliates yet. He also sells products that work primarily with Bricks builder, so it makes sense that it's what he uses/recommends.
Whatever app or tool you work with, you sholud learn using it and at least reach an intermediate level. It is not easy to use block editor but you need to spend much more time to have enough experince. Without this experince it is not fair to blame the block editor or anything else.
Elementor is so intuitive to use. The Gutenberg Block editor is a total trash can compared to it. Bricks has a learning curve but it is still worth it as it is a far superior page builder. I won’t use the Block editor to build websites even if someone paid money for it, rather I would use Elementor. I use WordPress because of Elementor.
Thank you! I really appreciate you taking the time to write your post and make this video. Super helpful for lots of people. Much love.
Agree with the sentiment in the comments. Thanks for keeping it civil, no beef, no drama, just “this is how it can be done and they’re two different tools”. Subbed.
This guy is so chill to listen to. I just like listening to him on the background.
Thanks! My family tends to consider me background noise as well.
This video was great, Brian. Thanks, brother!
Now this is how meaningful discussions should progress. Thanks for this, Brian. I definitely learned something here about GB. Could you please do a video on how to make the cards in this component dynamic and pull in data from ACF? Takes literally 5 seconds in bricks. I honestly want to see how it should be done in Gutenberg.
That's a great idea and I'll add it to my queue.
Currently the most popular way to do that is with ACF Blocks or a custom block. BUT WordPress 6.5 is fixing this, hopefully, by adding the ability to use custom fields in blocks: github.com/WordPress/gutenberg/issues/53300#issuecomment-1808020238
Thank you for this video. I've found Gutenberg to be un-intuitive when compared to page builders. The same would be true for Squarespace, Wix, etc. Following lingo on the various Gutenberg blocks web developers would use would help. So far I use Gutenberg primarily for basic blog posts. Posting more videos on best practices for using Gutenberg for blog posts would be awesome!
WordPress has a marketing problem. It seems as though they desire to "push out" page builders and replace them with Gutenberg. They need to address this perception pronto. I see Gutenberg used for more basic websites. Especially for blogs. Page builders would be used for custom websites that are more advanced.There'd still be a role for Gutenberg in creating posts while using a page builder. WordPress needs to "lean in" on this and message to this demographic. Both Gutenberg and page builders can co-exist.
I see a lot of people using Gutenberg for posts, page builders for landing pages or other templates. I agree that sometimes WordPress makes it feel like an 'either/or' but I think all of these tools have a place in the ecosystem. They're all part of the reason WordPress is still so popular.
kevins army on every tailwind and other framework posts, yeah only ACSS is life
Great video my friend, no drama breakdown haha just showing us that it's possible! earned my sub!
I've been struggling with widths for way too long, no more struggles after watching this vid, fantastic, Iearned a bunch just watching this... I've been a Wordpress beginner for EVER, finally starting to figure out a little, came back to WP because of Guttenberg. I like the way this is heading. Just a simple site kinda guy.
That's great to hear! Welcome back. I also recommend this one from @jamiewp : czcams.com/video/DnTvy8zDtWc/video.html
Great video! It was super enlightening and there was no yelling. Thank you!
Good thing my kids were out of the house or you would've heard me yelling at them to be quiet 😅 Thanks for watching!
Love this video. I learned a new trick!
I think you’re very right in saying it’s not a page builder replacement. They accomplish different things.
I still believe the block editor is missing a number of features if we’re supposed to build entire websites with it (which seems to be the “official” WordPress stance), namely greater levels of control when it comes to the HTML output, and responsive controls (not _everything_ can be achieved with an intrinsic styling approach)
The tools I’ve seen that are the closest to this within the block editor environment are GenerateBlocks, Greenshift and Cwicly, but still not perfect when it comes to classes etc.
Thanks again for the video! 🙌
Agree- until they solve those features (especially responsive design) it won’t be taken seriously as a “page builder”
Great video, Brian.
I learned a bunch here, I like how you clarified what the block editor is not. Although it can achieve the same result a page builder would, it is just not built to be one. With methods like you explained in the video, you can create any type of layout with a sprinkle of custom css that is block editor compatible for a smooth client experience(CX) without having to dive into react. This is a game changer 🙌
Great video! Super chill and to the point.
Today I learned that you can combine essentially add a wrapped around elements by combining them into a stack.
This is such a great video for showing you solutions to frustrating parts of the block editor.
Nice! Yeah I love the content-first approach of the block editor - add elements and then start combining them. Rather than the container-first approach of page builders.
Great video and post, thanks! As someone who's clueless about the blocks editor, that really was the "answer video" I was hoping to see. I learned a lot.
Turns out there are fine ways to work with the blocks editor after all!
Small recommendation: record in 1080p (at least), and don't "crop in" your screen.... some of us are watching from laptops!
Thanks for watching and for the recommendation - I definitely need to go back to my recording workflow and figure out the screen resolution issue.
Thanks for your video, now understand how stacks work. You’re a great teacher, explain well at a reasonable pace and and appreciate your authentic background. New subscriber!
I have no problem maintaining Gutenberg for news/blog style content. It lets end users have some interesting blocks to play with. But I don't think it's anywhere near handling the whole site template or advanced pages. The way I see it, making Gutenberg work is not easy enough or intuitive enough for the end user, and for the pro developer the whole process is awkward and hacky. I'd rather just have all the necessary controls in the page builder and avoid as many hooks/filters and custom code and tricks as possible. But at the same time, a good page builder still requires a learning curve, meaning it's also not easy or intuitive for an end user.
To the developer, they will get the job done using whatever tools they can and implement whatever hacks, code, or plugins are needed to make it happen. But the real issue is when the end user wants to take control, and what they have access to, what controls they have, what they can edit intuitively or royally screw up.
There are devs who don't want the end user touching the content with ANY builder, and will make a rigid system built entirely on zillions of custom fields or flexible content blocks where the end user has only very speicifc fields they are allowed to edit.
And for me, balancing Gutenberg and Bricks, there is tension going between them because it's not easy to create a grid in Bricks but then let end users add the same grid to their blog post Gutenberg content. I have to overwrite styles from GB that don't match up in Bricks and vice versa. Parity between the two is a struggle because they have different base styles, responsive breakpoints, and other fundamentals.
Probably Cwicly has the best idea which is to integrate with GB so you don't feel like you are bouncing between two separate building systems.
We are nowhere near Nirvana yet!
I agree- there's definitely pros and cons to each approach. I assume that page builders will be around for a long time.
Very helpful and didatic. Thank you!
Man love your approach!
Thanks for watching!
Thanks for sharing, Awesome Video.
Great video and I appreciated your tone! It deepened my understanding of the block editor.
There are very few videos on CZcams about block theme development good work flow and how to add custom special functions. Very good work I hope I will see more videos about how to migrate Figma advanced design to block theme, API integrations with custom blocks and good work flow.
Thank you! My goal is to show an entire site build (maybe even in a series of livestreams) if the right project comes along.
A great response to Kevin's video for sure! I've watched your previous videos and was wondering where did you learn about InspectorControls, BlockControls, RichText etc? Is it only in the wp docs or elsewhere?
Definitely from the docs, from looking at the Gutenberg repo and copying core blocks and core packages, from other developers who were kind enough to teach me... there's no clear place to learn this stuff, but that's my goal here. Maybe I'll start digging into each component.
@@BrianCoords Thank you!
Great video, Brian! You have a new subscriber! This was super helpful and I'm looking forward to diving into your other videos and continuing to learn how to navigate Gutenberg. Thanks again! 😀
Welcome aboard!
nice video! loved seeing your workflow.
Thanks for checking it out!
Really good video Brian, very helpful to many! Thank you.
Fab video Brian 👍
Thanks - that means a lot coming from you!
New perspective to me for Gutenberg, Nice video
Glad to hear that! Hopefully the editor is continuously improving.
Thank you for your video. Can you start more videos about Gutengberg. This will help the community immensely.
Thanks - that is the plan, I have a backlog of ideas. Just need more time in the day.
Nice Thanks!
That was great, but I noticed you're still just throwing in random values for things like spacing & padding. Could you use this approach with design tokens using something like openprops, is that something you can integrate easily into theme.json?
Yeah so anytime I'm using one of the range sliders for padding/margin- those are predefined values in the theme.json, meaning the theme will limit you to a consistent set of spacing values. In this case I did put custom values when I needed a smaller amount of padding, but that's only because the smallest amount in the theme wasn't very small (a common issue with off-the-shelf block themes).
would you happen to know how to change the colour of the status bar on mobile devices. im using 2024 theme. Can't find anywhere where I can change the colour. Where the mobile displays battery, time, wifi signal etc. At the moment I have a a block called 'simple header with dark backgroun' - when I fill the background with blue the status bar is also coloured blue When I use other colours including black the status bar goes white.
Are you talking about changing the color on the mobile device outside of WordPress?
@@BrianCoords yes it appears that some pre built headers (patterns?)can do this but only with certain colours. Is it something to do with light or dark.? Just wonder where you can have more control over that part . I wanted the background image or cover to extend that far but not sure how. Does it only work with certain colour
You can set your preferences to "Always open list view" in Preferences > General > Appearance.
Still doesn't stay open.
@@GearycoWeird. Even after toggling that setting and updating the page with the Update button?
Yes. That setting only opens it automatically when you first open a page. Once you open the block editor panel, it replaces the list view and then when you close the blocks panel, list view is gone, too. Over. And over. And over again. haha.@@oscarhugopaz
Yeah there's a ton of open issues on this and lots of "discussion" about it. Seems simple to me: it should just stay open until you explicitly close it.
gj!
right out of the gate. I enter a group block and have NO option to change its width with Wide/full etc. It just doesnt exist. This happens with every tutorial i look at. Its just not the same on my screen. I am also using the 2024 them and have opened a front page template. Then deleted everything on it to make it blank. I enter a group block and no options for width. what is happening. Is this because its on top of some type of posts page? and not a front page empty template like im using. Its unbelievably confusing how you have to be editing in a correct spot of the 3 possible spots you can edit otherwise all your blocks will behave differently. (edit: looks like if i create a regular home page and NOT a Front page.. then i get some width options for the group block. Interesting that the same block has different options depending on what TYPE of page you are trying to build. This is a minefield of options and nearly non existent support or tutorials) When i search youtube for tutorials there are rarely up to date ones with the way Guttenburg blocks works these days. Im a brand new user and it just seems so limited.
I agree - the way the front page/home page works by default is very confusing and really should be changed in core WordPress.
@@BrianCoords looks like i HAVE To use the front page template and enter all content into it if i want to have a seperate front page style to every other page. really not sure how else to do it. But the front page template doesnt operate the same way (even has different design limitations) to other regular pages. unbelievably frustrating. Just creating a simple home page with a different header to the other 3 pages has been a nightmare process. No video has shown how to do it yet. The absolute very basics - create a home page/front page with a fancy header.. then all other pages will have a regular style header and content. NOT a single tutorial on how its meant to be done.
Kevin gets commission from bricks builder
I don't think they do commissions/affiliates yet. He also sells products that work primarily with Bricks builder, so it makes sense that it's what he uses/recommends.
Whatever app or tool you work with, you sholud learn using it and at least reach an intermediate level. It is not easy to use block editor but you need to spend much more time to have enough experince. Without this experince it is not fair to blame the block editor or anything else.
I agree! If I opened Bricks or Elementor I'd be struggling because of my own lack of experience, not the tools.
Elementor is so intuitive to use.
The Gutenberg Block editor is a total trash can compared to it.
Bricks has a learning curve but it is still worth it as it is a far superior page builder.
I won’t use the Block editor to build websites even if someone paid money for it, rather I would use Elementor.
I use WordPress because of Elementor.