Bricks vs Block Themes: My Followup to Bridge Builders
Vložit
- čas přidán 30. 07. 2024
- Followup to the Bridge Builders livestream, going over the custom block theme and my (minimal) set up, and thoughts on the page builder CZcamsr community's obsession with "dynamic data".
🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨
👉 briancoords.com/7tools
👉 Bridge Builders Episode: • Live Page Building wit...
👉 Example Site: fiji-of-herrings.wp.build/
👉 Block Starter Theme: github.com/bacoords/block-theme
👉 Version Control Livestream: • Version Control for Wo...
00:00:00 Intro thoughts on Bridge Builders
00:01:59 Navigation & Header
00:02:37 Why use a custom theme?
00:03:57 Theme Files
00:04:27 How I learned to stop worrying and love theme.json
00:08:53 Using Functions.PHP
00:11:00 "Dynamic Data" and when CPTs are appropriate
00:16:55 Adding Custom Styles to Blocks
00:21:00 How much code did I even write?
00:22:21 WordPress is not one workflow - Zábava
Appreciate you coming on Bridge Builders, Brian! Good insights here, as well!
I think the most important bit is 'what end-client are we building for'. Would love to hear/chat more about the different types and the requirements for each.
I agree. It would be more informative if the discussion focused on the 'same' client, project requirements, etc. and the 'same' developer. Otherwise, it's an apples and oranges conversation.
13:00 -- Just to clarify: I didn't propose creating the CPT for the client's benefit. It was created for proper data architecture, maintainability, easier templating, easier looping, easier SEO defaults, easier URL manipulation, etc. CPTs are mandatory, imo, for these reasons. I've argued for a long time now that throwing everything in pages as if its some sort of drunk drawer for all your data is really bad practice. I only said the client could edit it easier because it's a CPT with custom fields when you asked about clients' ability to edit it.
Yes, but that's two separate issues - "how does the client edit this content" vs "is this a good use case for a CPT".
If those were CPTs, how do you edit the main vertical page? It has to be an archive template now, right? That's even more confusing.
@@BrianCoords It doesn't have to be. You can make it a normal page, or you can use an archive page.
In a page builder like Bricks this is extremely easy to manage either way, but it's also a knock on WP's CMS architecture in general.
This is why I say WP needs to modernize the CMS side of things to keep up with better ways of managing content. I guess that takes me back to another criticism of the block editor: Instead of improving the CMS, they're busy wasting half a decade on a bad editor. That's another real reason why so many are frustrated with it.
I think we both agree that a more flexible data model/ORM in core would be amazing.
@@BrianCoords It would be nice if a block dev could create a block that can edit contents in the loop directly back into the post itself. Then we wouldn't have to get out of editing the current page just to edit contents in the loop.
@@HadeeRoslan That's already happening in WordPress core - there's an underlying API (called the Block Bindings API) that does exactly that already and they're just working out the user interface.
Thanks for this. Really enjoyed the behind the scenes look. I could see myself using your starter theme on some smaller projects, for sure. Also, couldn't agree more with your closing thoughts
Would love to get your take on it at some point!
Brian, appreciate you sharing this additional under the hood look. Will definitely be checking out your theme. I am interested in this idea of 'Curated Blocks/experiences" as I've been navigating my way around custom blocks with that overarching intention of end-user (editor) experience. In something like Bricks, client editing is made easier only by additional dependency on a 3rd party plugin on top of Bricks - powerful experience for devs and their end users alike, though the 'cons' of multiple layers of dependencies don't escape me.
Yeah that's always the question in WordPress - using pre-made plugins can help speed things up but at what cost? Depends on the project and what your needs are.
I've heard of Gutenbricks, I think, which lets the developer work in Bricks and the user is in Gutenberg? That hurts my head thinking about it but it might be a really good option. Or I think maybe you introduced me to Pinegrow which looks great too.
@@BrianCoords Yeah! Would love to chat about Pinegrow sometime if you have interest/bandwidth. Visual editor + ability to turn anything into a block, assign block attributes/styles, and define inner content, enqueue scripts/styles per block. It's still a new world to me, I imagine you'd feel at home (or immediately see a flaw in it for a reason less obvious to me haha)
Thanks for going on the stream and making this video.
I understand your point about wanting to give clients a visual editing experience. You’re building sites for very different people than I do.
My clients want to add FAQs, manage reviews, update product prices. Working in the backend with custom fields perfect for them.
Kevin’s point about using custom field for the verticals is right if those verticals are going to be referenced somewhere else on the site. Otherwise you’ll need to hunt down wherever they’ve been used and update manually… like a chump 🙃. Which I’ve done plenty of that in my life.
You can use Reusable Patterns inside WordPress Block Editor which will give you an ability to make changes in kne place and it will automaticly update everywhere where your pattern is used.
@@kristijanpirkovic9594 I wouldn't use a pattern for storing info/content I want to use in other contexts. For example, a form dropdown where someone is choosing what vertical they are interested in. If you use a CPT for this, you can query the verticals in your form instead of managing that list separately from your pattern.
Agreed but I think you're mixing two separate use cases here. Managing repeatable data like FAQs and products are not the same as managing design components like call-to-action cards. There's a lot of value in using CPTs/Custom Fields as I said in the video, but not just because you want a place to update arbitrary frontend content.
@@ReubenHochstetler I understand if there are going to be a lot of reviews or products to update. But if it's a FAQ page, I don't think it's worth the effort to install a plugin and create a database just for FAQ, unless you have >25 or have many question categories (then building knowledge base is more proper way for this situation). Btw even if you're using CPT/ACF, you still need to update it manually by writing over the existing content or creating new post.
Your closing remarks are spot on. We seem to get so passionate about what we (devs) think the best way to do something is and we love it when our peers agree. Human nature...everyone wants to belong to a clan.
The thing is, we get paid to build stuff for people that will never be in our clan. More often than not the people we're building for don't give a flying f*#k how we build it as long as it meets their goals.
Goals is where we have to start and work back from. Pick your tools based on the task at hand. Not because of some external influence.
Yeah I forgot to use the word "tribalism" but that's what it is and it's unnecessary.
@@BrianCoords It's just super counterproductive. I really wish our profession wasn't so polluted by it. We'd all live much more harmonious lives. Giant contributor to impostor syndrome.
@@BrianCoords To be clear, "tribalism" should not be assigned a negative connotation or used as a pejorative, unless you're speaking of colonialism. Tribes are and have always been structurally efficient and socially effective. It applies to design, development, or any other discipline. Human life is tribal at its "core."
And, I get your point.
@@rafikiAli For sure, I'm definitely using the word tribalism in terms of a cognitive bias, not in a social/anthropological sense. You are correct that there is a lot of value of being in groups, teams, tribes, working together for a common goal. I'm just not a fan of the approach of trying to promote your content by repeatedly being negative about everyone else's approach.
Great content Brian. Consider extending this in two ways:
1. even though ths may not be suitable example for a cpt loop, there certainly are times where cpt loop is the right approach. How would you solve the problem then?
2. you speak about curated editing experience, but show mostly how to add items to the editor, I would love to se various ways you can remove things from the editor, and especially based on user roles / caps, and or context
1. Yeah there is some cool stuff happening with Query Loop and a tool called block bindings API which allows that - basically loop through a CPT and use custom fields or ACF fields to control what shows up in the loop
It's still in beta, but here's a video I did exploring that: czcams.com/video/qexf4ZmJuSs/video.html
2. There's some stuff happening around patterns and "contentOnly" locking, which I linked in other comments, but a video specifically focusing on user roles would be really interesting.
A great summary Brian - thanks for making this video - incredibly helpful 🙏
High praise from the WP/YT goat!
I used to craft site like that, custom theme, custom code etc. I really like the idea to only use guttenberg to edit the code, but after few years I felt that my kind of clients really don't need that work, they just need the WordPress like pure CMS. They open an option page, change the info, save and that it's ok for them. Normally when they need to create a new page they asks to me even when I made a block for that. All time consumed to code was normally waste of time. For that reason I started using Bricks to keep thing more flexible when needed, to keep my projects more standarized and easy to change and only allow to client edit thing that they really need. I like to have dependecy on bricks ? No. I like to serve forms to client edit a few contents? No. I like to have different ways to edit content? Really not. But it's works to me and my clients. It's fast, it's cheap and we can focus on the business instead the code. But that works to my kind of clients, what works for me would not works for other person. It's just different.
I can see that. The amount of custom code gets less and less. Columns, buttons, images, icons, etc - all of this generic stuff is provided by the block editor now and the custom code is just for more custom, interactive stuff. There's a lot of work that's happening where the use case for custom blocks is less and less.
Awesome video, will definitely use this theme!
Great - let me know how it goes!
Overall Bridge was great, thx 4 all participants! Personally was more interested in Gutenberg part both cause GB is more Terra Incognita for the most and also `cause im not expected somehing new from Bricks bridge side (I very like Bricks core made on in couple sites and glad to have LTD from it). Also the ACSS is some kind very good but can't bring for me more than VSCode, also but the Frames IMO could be awesome thing tho (i tried many Bicks template libraries and all of them at the moment was not such things I could use in practice). So back to the Gutenbertg - its more hardcore tool by design, and im glad to see the appearance of more hardcore materials on it, thank you!
Glad you enjoyed it! I like starting with a blank slate and working up but I can see why people like to use premade designs like Frames and then adapting them.
About the CPT, my approach is: That information need an individual page e.g. /team/jorge? Then I use CPT. That information will be used in two or more places e.g. telephones, social media, address etc? Then I use an option page. If not the case it's just a content and dont need to worrie.
I think that's a solid approach
Thank you, Brian. Great content, very educative with relaxed explanation. I agree with your thoughts, especially on the last one. Talking about client experience, this the reason why I use Block Theme. And I can imagine what clients think when using CPT/ACF just to edit a couple cards. Most of end-users/clients don't like using WordPress because too many things going on the dashboard.
Hey Brian, just trying to use your starter theme I downloaded from Git, but keep getting an error. I know I need to run "npm run start" but that fails because of "Error: Unknown option '--webpack-src-dir=src/blocks' " Any instructions to get it running?
Hey - if you have any issues with the theme, the best place to post them is on GitHub. Be sure to include some more info, such as your system node version, the full error output, etc. github.com/bacoords/block-theme/issues
You very probably didn't run first npm install in the console. Make sure you have node and npm installed, then run npm install, so npm pulls all necessary packages
@@lovor01 You are correct, I have now run npm install. Afterwards, the build was successful and the error on the Home page are gone too. Thanks
Hey Brian would you recommend building native blocks as whole sections that way your clients will have really great user experience?
I have done some stuff about that. For example here's a talk I did at WCPHX on using ACF blocks for entire sections. czcams.com/video/eqCBVHOXxcs/video.html
I don't really do it that way any more because you can content-lock an entire group and get the same effect.
I did it years ago when patterns didn't even exist. However, since patterns emerged, this is almost waste of time, you can do almost all with just combining blocks you have. The only thing that's currently missing is link between pattern HTML and CSS. You can't optimise site because there is no mechanism for patterns like for blocks where only used CSS for that block is enqueued.
@@lovor01 Yess, that's the issue.
Btw also when using Patterns my stylesheet seems way to large compared to loading block based css.
@@kristijanpirkovic9594 I usually split those stylesheets to load only on pages and post types where they are needed, but that can and did backfire, if user needs block pattern where I didn't expect would be needed
Hi Brian, I would like to avoid using page builders and stick with Gutenberg. The only issue I find is Gutenberg is missing some good dynamic data (query) post archive blocks. What do you recommend as a good lightweight solution? Thanks.
For queries, I recommend Ryan Welcher's Advanced Query Loop plugin - it just extends the core query loop with some extra controls.
wordpress.org/plugins/advanced-query-loop/
For dynamic data like custom fields, there's still work in core getting everything ready there, but Advanced Custom Fields Pro is starting to support it: www.advancedcustomfields.com/blog/acf-chat-fridays-using-the-block-bindings-api/
Brian, you're a true gent, with an open mind and an advocate for true best practices and real developer workflows. You have my utmost admiration and respect. I learn something every time I watch one of your videos. Wish I could say the same for Kevin.
Im curious how you enjoy creating blocks in the theme vs a standalone plugin using wp-scripts. Im also curious if you have ever experimented with WP Rig? Finally, do you anticipate a v2 or competitor to wp-scripts on something like Vite or Bun emerging in the future?
- Blocks in a theme vs plugin: I really go back and forth on this and it depends on scope of the project. I like the portability of the separate plugin but I don't like having so many node_modules folders.
- WP Rig: I haven't really messed with it since it was launched, but love an opinionated framework. Do you think it'll get adapted to FSE in the future?
- WP Scripts: If you're doing fancy block editor stuff or custom blocks, you can't really beat the way wp-scripts handles dependency extraction specifically for working in WordPress. That said I bet Vite would be 10x faster. Bun is just a whole other thing 😂
@@BrianCoords WP Rig does have support for FSE now. I added it myself. It is addmitedly very simple and minimal though. We havent gotten a lot of feedback on it so it hasnt been iterated on that much.
Amazing walk-through as usual! If this were a client's project, would you create a child theme of your starter theme? From my understanding, FSE themes don't require child themes. Do I understand that correctly? Also, when is the Brian Coords block theme course coming out?
Yeah I don't really use a child theme with FSE. There are maybe situations where you might, but honestly a shared functionality plugin is usually all you need.
A theme course is the dream as soon as I have time!
@@BrianCoords I'm curious what would be considered a shared functionality plugin? What would be the scenario for the use case?
@@calebmatteis9155 Sometimes just putting any custom blocks in a plugin is nice - if you build them in such a way that they use a lot of core WordPress attributes for styling, then you can reuse the blocks on different sites.
A more advanced use case might be - we have a custom post type and some sort of API call that happens repeatedly to populate the data in the CPT, so we put that in a plugin to keep it separate from the design.
Thanks for the breakdown Brian
Off topic as I just started watching... is that the WordPress Accessibility Day shirt?! 🙌
Haha yes!
I wholeheartedly agree with everything you said in the video, especially regarding custom post types versus just creating content with blocks. Many often overcomplicate things.
Since I'm also in the process of building a starter theme/design system (which will be released soon!), I find it really valuable to hear your opinions and the reasoning behind certain decisions.
At 14:10, the pre-curated block style variations on the images are also the way I would have gone. The current issue with block styles is that only one is selectable. (Any updates on your plugin, by the way?)
There's a place for CPTs but they require a lot more thought/justification than just a place to add settings.
My Block Styles plugin is on hold because Gutenberg is massively beefing up the style variations feature (hopefully in time for the 6.6 release) and I want to see where it lands first.
@@BrianCoords Absolutely!
With the upcoming style variation feature you mean the section styling? I'm really looking forward to this! Or is there another feature that's working on I have missed?
Yeah there's block styling, section styling, the ability to use small JSON files in a custom folder, the ability to override some of the weird core styles like the "outline" button. I'm not sure what'll actually make the cut, though
Thanks for the two videos. Gutenberg was a lot better than I expected. I agree with your choice to not make the verticals dynamic in this case, but at the same time, this kind of dynamic workflow is bread & butter for most even marginally more complex websites, and despite the work on the block bindings API I feel that in this area as well as with respect to the curation aspect of the editor, there's still a lot of conceptual work left that will inform the work going into the UI.
Something that bugs me everytime - you write those verticals block styles for "core/image". But I'd really love it for those block styles only to appear when core/image is used *inside* of a specific pattern or a named block. Because you don't need them on any other core/image block and the UI gets confusing quickly if they are. Are you aware of any way to do that (yet)?
So in a real situation, what I'd do is not use block styles. I'd use something like 10up's Block Extensions so that you can have more granular control. I'd only show when I want them to, probably via a block variation, so the user would just have one click to insert that whole card as if it were it's own block. The issue is that it's more complicated and would need its own video.
Overall I agree that there's a lot of power in the APIs of the editor, but they haven't brought it into the UI, so for most people it's too early to play with this stuff.
@@BrianCoords Thanks a lot for the idea! Will have a closer look at those extensions!
You mentioned the concept of 'locking down' the theme so that clients can't mess up their websites. Could you explain this a bit further? I understand the concept of clicking the padlocks on a selection of blocks but does it go further than this? Can't the client just unlock the blocks themselves? Curious to know more. Really insightful stuff!
Yes there are some tools beyond that little lock icon. One is called 'contentOnly' locking - which means users can only edit text/images. Any blocks that aren't text/images/buttons aren't clickable at all.
Right now there's no button for it, so you have to do it manually or you can do it with custom blocks / block variations, though we'll start seeing it show up as 'Pattern Overrides'. Here's a great video on that: czcams.com/video/Sbbzuz3JZ6g/video.html
@@BrianCoords Appreciate the response! Definitely going to give contentOnly locking a try
@@BrianCoords Just to follow up; I suppose this contentOnly approach works until there is a situation where the client might want design changes made to the pattern. I assume its possible to override contentOnly locking after the pattern has been placed later on if you want to?
Thanks for the video. It did reinforced my belief in Kevin's philosophy regarding Dynamic page build approach.. purely from a marketing perspective "consider a Yoga studio promoting different events on a month to month basis or lets say seasonal...it would be so easy to manage the verticals and ton of flexibility both for the client and for the wordpress agevy or a freelancer.....I personally use Generatepress and generate blocks pro and ACF pro and i still get lot of value from kevin, Kyle and jerimy ... although they have different philosophical takes
For sure - there's definitely a lot of value in using custom post types and ACF fields as long as there is some thought/strategy ahead of time.
Why such fuzz about which tool and which way of building websites is better? It all comes down to the project and how you, as a developer, and your client wants to handle the website. For me, building "isolated" elements and website parts was a pain in the butt. For example, I built a 18 page website with WP Bakery with no standards, no classes and going back to add or edit stuff sounds like a nightmare. This led me to search for a better and more efficient way to build websites with templates and reusable data. And I found CPT's and query loops was the best way to do this. The power of dynamic data and templating is unfathomable for maintainability. As I said, it all comes down to the project, if and how data is reused across the website and if and how you and perhaps, your clients, want to manage them. For simple brochure websites, yes, I would consider core WP and FSE. Fast, simple and away you go. But for anything more complex I would use tools like Bricks, CPT's and query loops. Creating scalable and maintainable websites is how I approach web development. Others may take another approach. Both are fine. All is fine guys. Peace!
Everything is definitely fine! There's a lot of value in CPTs and query loops, as I said in the video.
But it's also important to think about performance when you use them. A bunch of CPTs with relationship fields is not really "scalable". If you're dealing with large amounts of content, you'll hit some walls pretty quickly if you don't take the time to learn how to leverage tools like taxonomies, shadow taxonomies, indexes, smart meta keys, and the object cache.
@@BrianCoords Thanks for your reply. I will definitely explore shadow taxonomies (never heard of it), indexes, smart meta keys, the object cache and whatever can make WordPress faster, more scalable and maintainable.
I used Bricks builder last week and struggled to resize slider width for 2 hours. Grids are almost useless. At last gave up.
Yeah it looks like most people don't just use Bricks, they also add these extra tools like Automatic.css on top of it. I'm sure we're all most efficient in whatever tool we use the most often.
What makes you say that grids are useless? I've done a lot of client work with Bricks and css grid is super simple to use, it's basically same as if you were writing CSS in any other tool only a bit faster
@@95beats46 Try dividing parent div to 9 factors and have 2 child with ratio 7:2. Please educate me if i am missing something here. And without a plugin or additional css.
@@amitjangra6454 I'm assumming you mean 9fr (9 columns) with the first child spanning 7 columns and the second child spanning 2 columns? Hero you go:
make the parent container a grid > Add any gap size you'd like > In "Grid template columns" add: repeat(9, minmax(0, 1fr)) > now select the child, assuming it's a block or a div then look for "grid item options", it should be at the very top when you select the child element, and put "span 7" in the "grid columns" field of the first child and "span 2" for the second child. You should have what you asked with that. No acss or any other plugins needed, just knowledge of grid structure
@@372Entertainment Will try. Thanks
Kevin Geary is salesman. He doesn't do websites for clients. He sells a product and a community. He's not running an agency or makin g big project for clients. I watch his stream and he said his agency on pause. Someone that dos not even do the job is trying to push opinion no how it should be done. I mean no disrespect him but you can not tell people how should be done if your not doin it yourself.
Can you clarify? I'm not sure how putting his agency on hold disqualifies him from sharing his experience.
@@mr.matt.eastwood _I'll tell you an ancient Buddhist parable on this matter. True story._
*One master hammered 1,000,000 nails and achieved enlightenment. He devoted himself to meditation and founded the Nail Strike school of kung fu. One day the Master was walking through the monastery and met a goose. The goose looked at the master with a disapproving glance and said:*
- _You can no longer be called a Master if you stop hammering nails._
- _“Holy shit, it’s a fucking talking goose!”_ thought the master.
@@mr.matt.eastwood Haters always gonna hate, I love seeing all approaches
"He doesn't do websites for clients."
False.
"He's not running an agency or makin g big project for clients."
False
"I watch his stream and he said his agency on pause."
For *new* clients that aren't handpicked.
"I mean no disrespect him but you can not tell people how should be done if your not doin it yourself."
So, because my agency is very recently paused to new, non-hand-picked clients, everything I've done for the last 10+ years is automatically irrelevant?
There's still time to delete this comment.
@@user-jt7wb3zc1m This story moved me to tears.
Can we please stop with this lie that current Gutenberg is save for average clients to edit pages: every client of mine that has ever changed anything on a page through Gutenberg has messed up the design. Even standard Bricks has more client control options than Core.
I'm sorry that it hasn't been successful for you, but I'm glad you're happy with Bricks!