Bricks Components Beta || First Look & Demo

[@htz70]

I think it's great. It's basically like Gutenberg Blocks but inside Bricks, or the opposite of GutenBricks. I can see letting a client / site owner into Bricks, restricted to only using Component Instances, so they can select from various Components I built, add multiple instances to a page, then edit only the instances via properties.

[@schatten105]

yeah, I thought also something similar. even a restriction for userroles, so that they can "accidently" edit the components themselfes, just the property-values of the instances

[@Jim.Hummel]

This is going to be really great, especially as it matures. The "con" for me, at least right now, is analyzing when to use components versus another method. Certainly, the benefits of creating a suite of buttons, CTAs, and cards are huge!

[@LupusDesign]

Thank you for this video, Paul.

[@KaiBuskirk]

Happy New Year!

[@WPTuts]

@@KaiBuskirk and to you too. 😁

[@akshaysrivastavaofficial]

Thomas released it yesterday and I was waiting for your upload. Matt should sign you for official WordPress brand ambassador.

[@WPTuts]

Once he unblocks me from Twitter/X 😂

[@akshaysrivastavaofficial]

@@WPTuts Oh, so you guys are already in a toxic relationship. 😂

[@WPTuts]

@@akshaysrivastavaofficial along with several hundred others, it would seem. lol

[@road2wp809]

Great video, great components, it is more flexible than Template element.

[@user-jt7wb3zc1m]

An interesting feature has been announced. Currently, the developer experience (DX) needs significant improvement; this constant switching between panels is painful for the wrists, making shortcuts essential. Additionally, many developers use wide or multiple monitors, so having more panels open simultaneously is not a problem. Thanks for a video

[@hosseinkhanmohammadi4770]

The components are great. Although they look basic, but I think in many cases, we can use them in addition to ACF like for custom fields like a link, so this expands the possible usecases in our workflow. I hope Bricks team make it even better with more elements, nested components, or as Kevin said with presets, so we can define presets of a component and select a preset after adding a component. Really happy about using bricksbuilder as my main tool in wordpress web design projects.

[@jovannibasilisco6414]

Greate video. Maybe you could make a comparison between the template and components in the future :)

[@krissborowy3627]

It looks great. But I wonder about one thing. So far I've managed to do it this way: I've created a Template and in it the entire structure of the element, e.g. "Call to Action", then on the desired subpage I've added a bricks Element (Template) in the editor where I've selected a given template from the list. It worked dynamically - changes made to the template changed everywhere on every page. So my question is, what's the difference in how components work and using a template with nesting in the editor. Thanks for the help.

[@schatten105]

using templates via the template-elements mean, you have the same everywhere you use it this way. you only can make complete global changes. with components, via the propertys, you can tweak every single instance as you want to

[@shahmi94]

this is something I miss moving from Oxygen. Glad its finally here!

[@ivan_vrabec]

What? Oxygen has components?

[@UjanShrestha]

​@@ivan_vrabec Oxygen has it as Reusable Template

[@shahmi94]

@@ivan_vrabec not exactly but they have templates that I used to paste repetitive sections.

[@IbafZne]

This is really great! Do you think this will replace templates?

[@WPTuts]

Not really. There are still plenty of reasons to use a normal template over a component, but they do offer additional flexibility that will be incredibly useful. I still need to dig deeper to find more use cases, but my first tests make me want to hold off launching one of my site redesigns as I can see how components would make it better.

[@akte2020]

It's great. I tried it but have bugs with conditions. They don't seem to work on my site. Example: Show whole container only if at least one button text is not empty. Otherwise I have a lot empty containers consuming space and breaks the layout.

[@bob-p7x6j]

I wonder if this will eventually replace Brixies, Bricksmaven, Frames, type of libraries.....

[@euandrefrancisco]

Tks =]

[@rebelinc]

The current user experience feels a bit confusing and often requires too much back-and-forth navigation. I like the idea of keeping the Structure panel fixed to the content you’re currently editing. It would also be nice if the main component at the top were placed below in some sort of dropdown menu. The functionality is as expected, and I’m sure more property connections will be introduced over time.

[@vaughanprint]

Up in the design where the category pill is it would be great if that could be linked to a dropdown for categories, with predetermined category listings. I'm sure someone will come up with a clever solution for this.

[@Ppackard]

At the end of the video, you change the title and the button appearances within their common CSS classes. Therefore, it would have changed in exactly the same way even if it weren’t a "component" but just a regular template where every element has its own CSS class. I still don’t fully understand what real advantage components have over using templates with CSS classes.

[@maxziebell4013]

I would like them to make the edit mode more distinct by using purple exclusively for edit-mode interfaces. Keep the structure panel's purple elements but differentiate the instance appearance from edit mode. Implement a dedicated exit button instead of relying on stage selection for exiting components. Add a full-width purple bar across edit panels only when in edit mode. I keep exiting unintentional…

[@kamelberlime3532]

Awesome!!!!!

[@BenedickHoward]

🔍 Introduction to Components in Bricks Builder The video presents a first look at the beta release of the component feature in Bricks Builder 1.2. Important note: Do not use this beta feature on live sites due to potential bugs and inconsistencies. 🧩 What are Components? Components provide a hybrid approach to templates, allowing for dynamic updates from a central location. Unlike traditional templates, components enable multiple instances to reflect changes site-wide. ⚙️ Creating and Managing Components Demonstration involves converting a call to action card into a component. Users can save components with options for naming, organizing, and adding descriptions. The interface changes to indicate the component's status, with purple sections denoting components. 🔄 Editing Components Users can edit individual components and see changes reflected in all instances. The video showcases the ability to update text and other properties, demonstrating real-time synchronization across instances. 🛠️ Customizing Component Properties Components can have editable properties such as text, images, and icons. Users can create properties that allow customization while maintaining the overall design. Example: Changing text content and images while keeping the component's structure intact. 🌐 Global Changes and Flexibility Changes made to the component's design (like color and typography) reflect across all instances. This feature enhances flexibility, allowing for custom content alongside global design updates. 💬 User Feedback and Future Enhancements The creator seeks viewer feedback on the components feature, asking for opinions on its utility and potential improvements. The video mentions the need for more property types in future updates. 📊 Conclusion The component feature introduces a more flexible and powerful way to manage designs in Bricks Builder compared to traditional templates.

[@stevenellis6884]

Confusing

[@ElementoryMyDearWatson]

Glad it wasn't just me

[@erimoitinho]

This is similar to how Framer implemented their components. I am curious to see how we can use it for loops.

[@SebastianPerezG]

Bricks is killing Elementor ..

[@WPTuts]

For a long time. ;)

[@KariposTheOne]

I'm a bit disappointed. It's way too basic and limited, advanced features are missing. I don't get why it took so long.

[@rebelinc]

Its a beta :-)

[@KariposTheOne]

@@rebelinc Beta is not far from production

[@rebelinc]

@@KariposTheOne Im am afraid it will take longer to have all features implemented than we hope :-(

[@sir-vengeance]

I'm thankful for what we ARE getting!

[@paolobattiloro947]

quite disappointing. The components were supposed to be useful for creating different styles on a common basis, but here we focused on the contents...but couldn't I already do it with ACF? just assign a template to a section...And then I find it too laborious...why not "simply" connect all the properties by default? why do I have to map them? you could make a system invisible to the user...

[@toby-green]

Connect which properties to which elements by default? How could Bricks know which elements a designer will want connecting and which they wont? If every text element was given a property there would be the question "how can i turn a property off if i don't want it?". Maybe having only the properties you want has page speed benefits etc. RE: common styles - it seemed to me that you can do that.

[@Happor]

Then you have to create many section templates for different ACF fields or different query loops. Imagine your website has multiple post types and you need to create a card for different query loops and they have a similar design. ( A card with image, title and basic text for custom fields) You can create a standard card as a component. For query loop A (post type A), you can reuse the component and connect the {post_title} for the title, {acf_image_a} for the image, {acf_text_2} for the basic text. Then in query loop B (post type B), you can reuse the component and connect the {post_title} for the title, {acf_image_b} for the image, {acf_text_3} for the basic text. (Provided they have a similar structure) In the future, if the Component can accept condition as property then it will be more powerful so we can choose which element to render for each instance.

[@paolobattiloro947]

@@toby-green therefore, as I had imagined it, I would have placed in the parent component, next to each property, a small icon which, when clicked, indicated that that field could be modified by the instance. Communication could occur by automatically creating an id between the instantiated property and the parent. The process would definitely have been faster. Now obviously I don't know the bricks engine, I imagine that this continuous communication could have slowed everything down in some way...probable.

[@paolobattiloro947]

@@Happor You see, this is exactly the point, you are talking about design but the components developed in this way do not take design into consideration at all. It is identical for all instances.

[@edoardobiasini6781]

We need Variants! And the overall "Create Property" and then connect it it's cumbersome. Once an istance is insterted as an istance every aspect should be editable without having to define what should and shouldn't, also its styling. I don't know about limitations but the ux of this is meh. Very disappointing.

[@TheAhsanpk]

2nd one

[@anthonykiirucreative]

First one here😊

[@tafmakura]

This is encouraging, a bit confusing but promising. Cwicly did this first and well kzbin.info/www/bejne/j4vVhINuqr2fd6c. I think Thomas and the Bricks team should get inspiration for some of their features from Figma and popular UX design software which pioneered the concept of components.

[@EmSixTeen]

Figma did not pioneer the concept of components mate 😅

[@tafmakura]

@@EmSixTeen I am talking about reusable components within site builders and UX design. The idea that you can design a single component with modifiable properties when designing a website was something I first saw in Sketch and Figma, before then people prototyped website UIs in Photoshop and illustrator using layers and pixel based images . When drag and drop page builders came on the scene in WP (Elementor) they borrowed some aspects from UX/UI design tools, Oxygen was more deliberate in its layout. Ultimately, Cwicly was the first and most deliberate WP page builder to introduce reusable components into WP page building and it borrowed heavily from Figma in its implementation. So I stand by my theory that, the most intuitive way to implement components in WP page builders is to imitate the design tools that most web designers are already familiar with ie. Figma.

[@tafmakura]

@@EmSixTeen In UX/UI design reusable components were first introduced in Sketch (symbols) and then Figma, before then people designed websites in photoshop and illustrator using layers and groups. Reusable components are a relatively new way to design UX/UI inspired by reusable software components in front-end frameworks like React. The first WP page builder to introduce components was Cwicly and it borrowed heavily from Figma and Sketch in its implementation. So the concept of components in UI/UX design was definitely pioneered by Sketch and Figma and adopted by many page builders and certainly pioneered into the world of WP by Cwicly page builder.