Bricks vs Block Themes: My Followup to Bridge Builders  Full Document Contents/Articles/Bricks vs Block Themes My Followup to Bridge Builders.md, Bricks vs Block Themes: My Followup to Bridge Builders, Brian Coords - WordPress Dev. > [!note]+ Document Notes > tags: [#WordPressThemes #BlockEditor #CustomThemes] > - WordPressThemes > - BlockEditor > - CustomThemes > Author: [Unnamed Livestream Speaker] > Source: [Bricks vs Block Themes: My Followup to Bridge Builders] > Reference: [YouTube Link](https://www.youtube.com/watch?v=CQa9z2NZWMo) > date created: 2024-09-14 14:45 > > # Title: Bricks vs Block Themes: Key Takeaways from Bridge Builders Livestream > <!-- deep-read:sections start --> ## Table of Contents: 1. [📝 Summary](#-summary) 2. [📖 Main Content](#-main-content) - [Custom Themes](#custom-themes) - [Block Editor Workflow](#block-editor-workflow) - [Bricks vs Block Themes](#bricks-vs-block-themes) 3. [🗒️ Notes](#-notes) 4. [📖 References](#-references) 5. [🗣️ Paraphrase](#-paraphrase) 6. [📰 Newsletter](#-newsletter) 7. [✅ Action Items](#-action-items) 8. [🧪 Hypotheses](#-hypotheses) 9. [📊 Methodology](#-methodology) 10. [❓ Questions](#-questions) 11. [🔮 Future Research](#-future-research) 12. [💡 Implications](#-implications) 13. [🧠 Learning Styles Assessment](#-learning-styles-assessment) 14. [📊 Accessibility Assessment](#-accessibility-assessment) 15. [🌍 DEIB Assessment](#-deib-assessment) 16. [✅ Logical validity](#-logical-validity) 17. [🔍 SEO Evaluation](#-seo-evaluation) 18. [🎯 Conclusion](#-conclusion) ## 📝 Summary: In a recent livestream, the speaker contrasts Bricks page builder and WordPress Block Editor, discussing workflows and the use of custom themes. They walk through their minimal custom theme, emphasizing why simplicity is crucial for client management. The presentation highlights how block themes and Gutenberg offer an intuitive experience for both technical and non-technical users, while the Bricks builder leans towards more developer control. ## 📖 Main Content: ### Custom Themes: - **Minimalistic Approach**: The speaker demonstrates how they use a lightweight, custom theme built for flexibility, featuring minimal code and styles. This allows easier scaling and collaboration with other developers. - **JSON Configuration**: Emphasis on managing theme styles through `theme.json` rather than relying on GUI tools, showcasing a streamlined developer-friendly workflow. ### Block Editor Workflow: - **Visual Editing Power**: They favor the block editor for its visual, intuitive editing experience, especially for clients unfamiliar with code. It allows easy manipulation of content directly on the page. - **Core Blocks**: No need for custom post types or third-party page builders, thanks to the powerful core WordPress blocks. ### Bricks vs Block Themes: - **Bricks Focus**: Bricks offers a more developer-centric environment with custom post types and PHP-centric workflows. - **Block Themes Focus**: Block themes offer a client-friendly interface while retaining the flexibility needed for more complex development tasks. ## 🗒️ Notes: - **WordPress Block Editor**: Powerful for both developers and clients, offering flexibility without compromising on ease of use. - **Bricks**: More appropriate for developer-centric environments where control is essential. - **Custom Theme**: The theme prioritizes performance, with most styling and functionality handled through the block editor and theme JSON. ## 📖 References: - [Bricks vs Block Themes: My Followup to Bridge Builders](https://www.youtube.com/watch?v=CQa9z2NZWMo) ## 🗣️ Paraphrase: 1. **Original**: "Bricks focuses on giving developers the ability to fully control the structure and layout using custom post types, but this can add complexity." - **Paraphrase**: Bricks provides developers with extensive control over site layout using custom post types, although this can complicate the workflow. 2. **Original**: "I opted to use the block editor because it allows for a cleaner, more intuitive editing experience, which is ideal for clients." - **Paraphrase**: The block editor was chosen for its simplicity and ease of use, making it the perfect tool for clients to manage their own content. ## 📰 Newsletter: 🚀 **New Video: Bricks vs Block Themes in WordPress** In this week’s video breakdown, we take a deep dive into a popular livestream comparing Bricks page builder and WordPress Block Editor. If you’re a developer balancing control with client-friendly design, this is a must-watch. Discover the benefits of custom themes and how the Block Editor simplifies content management for non-technical users. [Watch Now](https://www.youtube.com/watch?v=CQa9z2NZWMo) 💻 ## ✅ Action Items: - Create a follow-up guide on using `theme.json` to manage styles for block themes. - Explore how Bricks' approach to custom post types can complement or challenge the workflow in WordPress-based projects. ## 🧪 Hypotheses: - Developers using Bricks will experience more control over site architecture, while Block Editor users will find client management easier. - The use of core blocks in Gutenberg will lead to faster site deployment compared to custom-coded solutions in Bricks. ### 📊 Methodology: - Conduct A/B testing comparing Bricks-built pages with Block Editor pages on client satisfaction and developer efficiency. - Interview WordPress agencies to explore how custom themes impact their development workflows. ### ❓ Questions: - How does client usability differ between Bricks and Block Editor solutions in the long run? - What is the ideal use case for custom post types versus core blocks? ### 🔮 Future Research: - Investigate the long-term maintenance costs of using Bricks versus Gutenberg for complex projects. - Study how different agencies balance control and client-friendly design using both tools. ### 💡 Implications: - The shift towards block themes could significantly lower barriers for non-technical users managing their WordPress sites, leading to wider adoption among clients with limited technical knowledge. ### 🧠 Learning Styles Assessment: 1. **Visual Learners (Spatial)**: - **Present**: Video walkthroughs of theme setup and block editor usage. - **Improve**: Incorporate visual diagrams showing Bricks vs Block Editor workflows. 2. **Aural Learners (Auditory-Musical)**: - **Present**: Audio from the livestream helps auditory learners follow the workflow discussions. - **Improve**: Provide an audio summary or podcast for deeper engagement. 3. **Verbal Learners (Linguistic)**: - **Present**: Clear explanations of key differences between Bricks and block themes. - **Improve**: Expand verbal descriptions of code usage and its impact. 4. **Physical Learners (Kinesthetic)**: - **Present**: Practical examples of theme customization allow hands-on learners to experiment. - **Improve**: Include more exercises and challenges. 5. **Logical Learners (Mathematical)**: - **Present**: Logical breakdowns of theme setup steps. - **Improve**: More structured comparisons of performance metrics. 6. **Social Learners (Interpersonal)**: - **Present**: Opportunities for group discussions in the livestream chat. - **Improve**: Encourage peer feedback on theme implementation. 7. **Solitary Learners (Intrapersonal)**: - **Present**: The detailed walkthrough supports individual study and reflection. - **Improve**: Suggest personal exercises to enhance understanding. 8. **Naturalistic Learners**: - **Improve**: Relate theme customization to real-world environmental contexts. ### 📊 Accessibility Assessment: - **Screen Reader Compatibility**: Ensure all code snippets in the demo are accessible with descriptions for visual learners. - **Keyboard Navigation**: Confirm that the block editor and custom theme setup can be navigated entirely via keyboard. - **Contrast and Readability**: Maintain high-contrast color schemes in all demo themes to ensure visibility for users with visual impairments. ### 🌍 DEIB Assessment: - **Cultural Relevance**: Include diverse case studies showing how Bricks and block themes support different global markets. - **Inclusive Language**: Maintain neutral, inclusive language in all instructions and documentation. - **Neurodiversity Support**: Break down longer technical explanations into manageable sections with bullet points for clarity. - **Representation**: Ensure that all examples and case studies reflect a wide range of identities and industries. ### ✅ Logical validity: - **Sound Deductive Reasoning**: The speaker effectively explains the pros and cons of each tool based on personal experience, making the case for simpler client management with block themes. - **Hasty Generalization**: There is a slight tendency to generalize that Bricks is more suited for developers and Block Editor for clients without providing data from a wider sample. ### 🔍 SEO Evaluation: 1. **Keywords**: Effective use of "Block Editor," "Bricks," and "WordPress" throughout. 2. **Meta Description**: Missing but recommended: “Compare WordPress Block Editor and Bricks page builder workflows. Discover how custom themes simplify client management.” 3. **Title Tag**: Optimize for SEO by making the title: "Bricks vs Block Editor: A Developer’s Guide to Custom WordPress Themes." ## 🎯 Conclusion: This livestream offers valuable insights into how Bricks and the WordPress Block Editor serve different needs in web development. The use of custom themes and block-based design in WordPress prioritizes a seamless user experience for clients, making content management intuitive. Bricks, meanwhile, offers deeper control, which may be more appealing to developers managing complex projects. Short Summary for [Bricks vs Block Themes: My Followup to Bridge Builders](https://www.youtube.com/watch?v=CQa9z2NZWMo) by [Merlin](https://merlin.foyer.work/) "Custom Theme for Modern WordPress Workflow: Creating Projects with Full Site Editing" [00:01](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=1) Comparing Bricks page builder to WordPress block editor [01:58](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=118) Using pure Gutenberg blocks for building a simple header. [05:49](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=349) Customizing themes through CSS and gradients [07:33](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=453) Customizing CSS variables and fonts in the theme [11:39](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=699) Block editor caters to both technical and non-technical users [13:33](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=813) Difficulty in navigating and editing content in inherited WordPress websites [17:16](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=1036) Custom styles for blocks provide flexibility and better user experience. [18:54](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=1134) Benefits of scoping CSS to specific blocks in WordPress [22:29](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=1349) Different projects require different workflows and tools in the wide ecosystem of WordPress. [24:14](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=1454) Live stream participation and viewership --------------------------------- Detailed Summary for [Bricks vs Block Themes: My Followup to Bridge Builders](https://www.youtube.com/watch?v=CQa9z2NZWMo) by [Merlin](https://merlin.foyer.work/) "Custom Theme for Modern WordPress Workflow: Creating Projects with Full Site Editing" [00:01](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=1) Comparing Bricks page builder to WordPress block editor - Participated in a live stream called Bridge Builders to share ideas and learn from each other. - Utilized a custom theme for building projects using full side editing with basic features for a modern WordPress workflow. [01:58](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=118) Using pure Gutenberg blocks for building a simple header. - The header was built using core Gutenberg blocks such as group, row, logo, and navigation menu. - No custom code or custom elements were used, only basic core blocks and some advanced techniques like the spacer block and fill with mode. [05:49](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=349) Customizing themes through CSS and gradients - I prefer coding colors and gradients rather than using color pickers in the theme interface. - Using CSS allows for easier, global changes to the site's design in the future. [07:33](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=453) Customizing CSS variables and fonts in the theme - Changing CSS variables in the defaults or site editor allows for adjusting spacing and sizing. - The theme's automatic connection to Google Fonts simplifies adding or modifying fonts. [11:39](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=699) Block editor caters to both technical and non-technical users - Custom post types in page builders add overhead, dynamic data trend - Consider pros and cons before using custom post types for client access [13:33](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=813) Difficulty in navigating and editing content in inherited WordPress websites - Struggle with cleaning up performance and removing page builders from inherited websites - Use of custom code to position images and potential features depending on client's budget [17:16](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=1036) Custom styles for blocks provide flexibility and better user experience. - The custom theme includes an option for front end JavaScript, although it is used less frequently as JavaScript can now be tied directly to blocks. - The process of registering block styles allows for easy customization of style options for different block types, providing a cleaner and more user-friendly editing experience. [18:54](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=1134) Benefits of scoping CSS to specific blocks in WordPress - Utilizing CSS for individual blocks allows for using features like mixins and breakpoints for better styling control. - WordPress only loads CSS for specific blocks when they are used, optimizing performance by avoiding unnecessary CSS loading. [22:29](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=1349) Different projects require different workflows and tools in the wide ecosystem of WordPress. - Different markets have different expectations, budgets, hosting platforms, security needs, and performance needs. - Developers need to find a workflow that is enjoyable, meets client needs, and ensures success. [24:14](https://www.youtube.com/watch?v=CQa9z2NZWMo&t=1454) Live stream participation and viewership - Engaged in the live stream event - Watched the live stream from the previous week <!-- deep-read:sections end --> ## Highlights - themes to control a lot of the design and the style of their sites. It's really, once you get past that initial stage of just like kind of Cowboy coding live on their actual website. And if you want to learn more about that, I did a really long live stream with Mark Zmanski and we talked all about when is a developer ready to start looking at things like version control. And one of the keys is using a custom theme rather than putting everything inside of the page builder. So inside of my custom theme, there's really. ([View Highlight](https://read.readwise.io/read/01j7snpsmp8h5a68n60mghbay7)) - Not much going on. You know, we have a functions dot PHP, which has, you know, some of that basic WordPress set up a theme stuff. You know, if you're using something like bricks or page builder, you have all of this too. It's there. It's just you're probably using, I don't know with Elementor, I think they have that hello theme maybe. You know, so that's kind of doing all of that for you. So functions. php and then, you know, with a block theme, there's really no other top level PHP files. There's no header, footer, all that sort of stuff. Instead what we do have is theme. json and this is where I did most of my work. ([View Highlight](https://read.readwise.io/read/01j7snpsn5xkjpmvwtkzyx84q7)) - kind of just like writing CSS whenever we can, it's nice to fill out and check some boxes, but the minute you get to something that's a little more complicated. You know, writing CSS is kind of the way to go. And then exactly the same as what bricks would do or any other page builder, WordPress is going to take these and it's going to turn them into CSS variables. Which means that later in the future, if I decide I want to change the primary color, I can change it in this JSON file and it's going to change across my entire site. Now, updating a brand color honestly is not a thing you do that often, ([View Highlight](https://read.readwise.io/read/01j7snpsntskevfce1qgccr2pw)) - And again, like, I don't really want the experience of like coming into like here into a little text box and writing some CSS. And then I have to figure out where that CSS lives and I'm trying to track it down. So. There is a big style sheet here but it's actually empty because I'm not using it for anything on this ghost site. All I do have is a folder for my block styles. And the reason that I like doing it here is a number of things. One, I can use SAS and use like things like mixins and breakpoints and stuff. ([View Highlight](https://read.readwise.io/read/01j7snpsqpzjex1garhqc1f9bz))