Building an example layout in Gutenberg (response video)
Вставка
- Опубліковано 8 лип 2024
- 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 - Наука та технологія
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!
Great video! Super chill and to the point.
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!
kevins army on every tailwind and other framework posts, yeah only ACSS is life
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!
Great video and I appreciated your tone! It deepened my understanding of the block editor.
Thanks for sharing, Awesome Video.
Really good video Brian, very helpful to many! Thank you.
Very helpful and didatic. Thank you!
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 🙌
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
Man love your approach!
Thanks for watching!
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.
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 : ua-cam.com/video/DnTvy8zDtWc/v-deo.html
New perspective to me for Gutenberg, Nice video
Glad to hear that! Hopefully the editor is continuously improving.
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.
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”
nice video! loved seeing your workflow.
Thanks for checking it out!
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!
Fab video Brian 👍
Thanks - that means a lot coming from you!
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.
Nice Thanks!
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.
There are very few videos on UA-cam 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.
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.
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!
gj!
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.
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).
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.