Building an example layout in Gutenberg (response video)

  Рет қаралды 3,730

Brian Coords - WordPress Dev

Brian Coords - WordPress Dev

Күн бұрын

This is a response to Kevin Geary's video "I Tried Building a Layout With the WordPress Block Editor & It Didn't Go Well". In it, I build his demo layout using core blocks and a few lines of CSS (via register_block_style). Along the way I discuss aligments and widths in Gutenberg, semantic elements, flexbox tools for layout, custom CSS, and whether or not the block editor is a "page builder".
🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨
👉 briancoords.com/7tools
Here's a few links for the full context:
👉 Kevin's Article: geary.co/wordpress-block-edit...
👉 Kevin's Video: • I Tried Building a Lay...
👉 My Full Thoughts: www.briancoords.com/the-block...
Other links:
👉 ThemeIsle's Block CSS Plugin: wordpress.org/plugins/blocks-...
00:00:00 Intro thoughts
00:01:51 Adding Custom CSS
00:03:34 Semantic Elements
00:04:39 Content Widths
00:06:33 The List View
00:07:08 Adding the base content
00:08:51 Groups and Block Spacing
00:10:07 Designing the Image Card
00:13:11 More Style Tweaks
00:15:49 Register Block Style
00:22:58 Final Thoughts

Пікірлер: 63
@Gearyco
@Gearyco 6 ай бұрын
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.
@MichaelThomasDev
@MichaelThomasDev 5 ай бұрын
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.
@whatamiwitnessing1003
@whatamiwitnessing1003 6 ай бұрын
This guy is so chill to listen to. I just like listening to him on the background.
@BrianCoords
@BrianCoords 6 ай бұрын
Thanks! My family tends to consider me background noise as well.
@markjszymanski
@markjszymanski 6 ай бұрын
This video was great, Brian. Thanks, brother!
@anaf4072
@anaf4072 6 ай бұрын
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.
@BrianCoords
@BrianCoords 6 ай бұрын
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
@JohnChvatalGSTV
@JohnChvatalGSTV 6 ай бұрын
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.
@BrianCoords
@BrianCoords 6 ай бұрын
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.
@NewPulseLabs
@NewPulseLabs 6 ай бұрын
Great video! Super chill and to the point.
@hahahap9844
@hahahap9844 5 ай бұрын
kevins army on every tailwind and other framework posts, yeah only ACSS is life
@jimmyfal
@jimmyfal 4 ай бұрын
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.
@BrianCoords
@BrianCoords 4 ай бұрын
That's great to hear! Welcome back. I also recommend this one from @jamiewp : kzfaq.info/get/bejne/etSEqdxp36rYh5c.html
@webgeneral
@webgeneral 5 ай бұрын
Really good video Brian, very helpful to many! Thank you.
@micheltsa
@micheltsa 6 ай бұрын
Great video! It was super enlightening and there was no yelling. Thank you!
@BrianCoords
@BrianCoords 6 ай бұрын
Good thing my kids were out of the house or you would've heard me yelling at them to be quiet 😅 Thanks for watching!
@user-nz4nw5vo4q
@user-nz4nw5vo4q 4 ай бұрын
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!
@comartse
@comartse 5 ай бұрын
Great video and I appreciated your tone! It deepened my understanding of the block editor.
@rubengarciajr
@rubengarciajr 6 ай бұрын
Great video my friend, no drama breakdown haha just showing us that it's possible! earned my sub!
@davidnickson5043
@davidnickson5043 6 ай бұрын
Man love your approach!
@BrianCoords
@BrianCoords 6 ай бұрын
Thanks for watching!
@BrendanOConnellWP
@BrendanOConnellWP 6 ай бұрын
nice video! loved seeing your workflow.
@BrianCoords
@BrianCoords 6 ай бұрын
Thanks for checking it out!
@adefolahanshabi-oriade3196
@adefolahanshabi-oriade3196 5 ай бұрын
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 🙌
@bluetheredpanda
@bluetheredpanda 5 ай бұрын
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! 🙌
@BrianCoords
@BrianCoords 5 ай бұрын
Agree- until they solve those features (especially responsive design) it won’t be taken seriously as a “page builder”
@MarioGZito
@MarioGZito 4 ай бұрын
Very helpful and didatic. Thank you!
@scottydigital
@scottydigital 5 ай бұрын
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! 😀
@BrianCoords
@BrianCoords 5 ай бұрын
Welcome aboard!
@yasershahian3134
@yasershahian3134 5 ай бұрын
Thanks for sharing, Awesome Video.
@KeshavDaBhutra
@KeshavDaBhutra 6 ай бұрын
New perspective to me for Gutenberg, Nice video
@BrianCoords
@BrianCoords 6 ай бұрын
Glad to hear that! Hopefully the editor is continuously improving.
@elementhow691
@elementhow691 6 ай бұрын
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!
@BrianCoords
@BrianCoords 6 ай бұрын
Thanks for watching and for the recommendation - I definitely need to go back to my recording workflow and figure out the screen resolution issue.
@jamiewp
@jamiewp 6 ай бұрын
Fab video Brian 👍
@BrianCoords
@BrianCoords 6 ай бұрын
Thanks - that means a lot coming from you!
@vigilantezack
@vigilantezack 6 ай бұрын
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!
@BrianCoords
@BrianCoords 6 ай бұрын
I agree- there's definitely pros and cons to each approach. I assume that page builders will be around for a long time.
@ericnoden
@ericnoden 6 ай бұрын
Nice Thanks!
@knightofrohan
@knightofrohan 6 ай бұрын
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.
@BrianCoords
@BrianCoords 5 ай бұрын
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.
@karlson2804
@karlson2804 6 ай бұрын
There are very few videos on KZfaq 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.
@BrianCoords
@BrianCoords 5 ай бұрын
Thank you! My goal is to show an entire site build (maybe even in a series of livestreams) if the right project comes along.
@chamika1975
@chamika1975 6 ай бұрын
Thank you for your video. Can you start more videos about Gutengberg. This will help the community immensely.
@BrianCoords
@BrianCoords 6 ай бұрын
Thanks - that is the plan, I have a backlog of ideas. Just need more time in the day.
@Arisch24
@Arisch24 5 ай бұрын
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?
@BrianCoords
@BrianCoords 5 ай бұрын
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.
@Arisch24
@Arisch24 5 ай бұрын
@@BrianCoords Thank you!
@kappesante
@kappesante 6 ай бұрын
gj!
@jacoplane
@jacoplane 6 ай бұрын
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?
@BrianCoords
@BrianCoords 6 ай бұрын
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).
@oscarhugopaz
@oscarhugopaz 6 ай бұрын
You can set your preferences to "Always open list view" in Preferences > General > Appearance.
@Gearyco
@Gearyco 6 ай бұрын
Still doesn't stay open.
@oscarhugopaz
@oscarhugopaz 6 ай бұрын
​@@GearycoWeird. Even after toggling that setting and updating the page with the Update button?
@Gearyco
@Gearyco 6 ай бұрын
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
@BrianCoords
@BrianCoords 6 ай бұрын
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.
@spitsparrow
@spitsparrow 5 күн бұрын
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
@BrianCoords 5 күн бұрын
I agree - the way the front page/home page works by default is very confusing and really should be changed in core WordPress.
@kadimgultekin
@kadimgultekin 5 ай бұрын
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.
@BrianCoords
@BrianCoords 5 ай бұрын
I agree! If I opened Bricks or Elementor I'd be struggling because of my own lack of experience, not the tools.
@spacevertex
@spacevertex 6 ай бұрын
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.
Adding Custom Fields (attributes) to Core Gutenberg Blocks | WordPress
28:12
Brian Coords - WordPress Dev
Рет қаралды 4,4 М.
Version Control for WordPress Devs and Builders
1:23:16
Brian Coords - WordPress Dev
Рет қаралды 833
Who has won ?? 😀 #shortvideo #lizzyisaeva
00:24
Lizzy Isaeva
Рет қаралды 62 МЛН
HOW DID HE WIN? 😱
00:33
Topper Guild
Рет қаралды 45 МЛН
How to Build Dynamic (PHP) Blocks in WordPress
30:57
Brian Coords - WordPress Dev
Рет қаралды 8 М.
GutenBricks: Introducing GB:Meta, Built-in Meta Fields
5:09
Block Styles Manager for WordPress - Ep 2 (Build in Public)
10:17
Brian Coords - WordPress Dev
Рет қаралды 473
WordPress 6.6 is changing the game for Custom Fields
11:12
Brian Coords - WordPress Dev
Рет қаралды 6 М.
Bricks vs Block Themes: My Followup to Bridge Builders
24:21
Brian Coords - WordPress Dev
Рет қаралды 2,4 М.
Frames LIVE - December 2023 (Frames Q&A & How-To)
2:14:05
AutomaticCSS & Frames
Рет қаралды 3,6 М.
1 Writing Exercise That Changed Everything
9:54
Story Grid
Рет қаралды 10 М.
Helix: An amazing terminal text editor!
15:15
OgloTheNerd
Рет қаралды 17 М.
Зачем ЭТО электрику? #секрет #прибор #энерголикбез
0:56
Александр Мальков
Рет қаралды 353 М.