Components in Bricks (1.12)

[@PicSta]

A very strong feature many people were waiting for coming to Bricks. Thanks for this great introduction to reusable components. I like the way Bricks evolves, Thomas. You're putting so much value into one product and care for it like a baby, that's the right way to do it and have/keep happy customers.

[@grasshopperweb]

Started playing with it and first major drawback is I can't create a card and then put a query loop on it! That kind of defeats the purpose in my mind. I can get around it by wrapping the card with a div and putting the query there but now I feel I'm just adding extra divs to my builds. Everything about the components feels rather intuitive though :)

[@febryanvaldo]

Rremember that component currently is an experimental feature. They'll surely smooth things out in future updates.

[@akshaysrivastavaofficial]

Love it Thomas! So happy that I invested in Bricks! You are an awesome developer.

[@Jooesta4]

This feature is what I have been waiting for (coming from years of Webflow and custom-coded websites). Just pulled the trigger on the lifetime license, as this tool's future is huge. Keep up the amazing work!

[@muchadesign]

This is a brilliant addition!

[@heavylog1c]

This is great. I used classes to achieve this before. So you can imagine, I had ton of classes.

[@SinanWP]

🎉🎉🎉🎉❤❤ Congratulation for the release Thomas

[@chrisgreen5711]

Absolutely brilliant feature - a game changer!

[@zensukai]

Fantastic work team -- love it! Thank you for all your hardwork.

[@newt.acheron]

Game changer! Components concept is so natural for designers who work in Figma. Now I can start recreating my Design System inside the Bricks. I will use it for my custom buttons, badges, alerts, notification banners and other components that I already have on my website. I also have a question is it possible to create component variants, for example component button that will have primary/secondary variants and with/without icon variant?

[@maxziebell4013]

Oh yeeeeaaah! Here we go… this is going to be soooooo good.❤ downloading the video now as my network is spotty here. Congratulations 🍾🎊🎉

[@maxziebell4013]

Okay, first impression: Please make it very clear that we are in edit mode. The purple should primarily appear there. I find it acceptable in the structure panel, but having the instance look nearly the same as when in edit mode is confusing, to say the least. Additionally, exiting a component should be very clear as well. I often exit by selecting something else on stage, which I find confusing and disorienting. I would prefer to see an exit button and a purple bar across the entire edit panels only in editmode.

[@maxziebell4013]

I have a suggestion: How about some modes for visibility of the rest of the page while inside a component: - Visible (like it is now), so it shows all the elements on the page even though we are inside the component. - Faded, so all other elements that are not in the component are shown with reduced opacity or something like that. - Isolated, so it hides all the rest of the site apart from the components.

[@maxziebell4013]

I had trouble adding new elements inside a component once it was created. I keep exiting the editing experience. Relinking properties is also not trivial, or I might be missing something. Okay, it seems I can link Richtext yet. That is why I didn't see the purple plus… guess the full extent of property types is still in the works.

[@maxziebell4013]

Please don't put the component description into a box, feels like a button. Maybe support Markdown in the description, as AI write great documentation, and I'd like to preserve the formating.

[@maxziebell4013]

Bug: when dragging a button to the stage in a component it just doesn't show up.

[@integrityispriceless]

Beautiful done.

[@dynamic-homepages]

Never heard Thomas so many times saying awesome and good and fast about a feature like today 🎉. That’s really a promising awesome new feature. V2 will be awesome 🫶❤️

[@WebfarAgency]

OMG.. Can't wait to get started.. THANK YOU!!!

[@vigilantezack]

Excellent progress! I do think the way properties are handled is a bit clunky though, or at least there could be a more intuitive or quick way to create them. The whole point of a property is to connect it to a specific style field in order to edit per-instance -- so wouldn't it be easier when in component edit mode, to have a way to directly pick which fields should be available per instance? Rather than have to manually create a property and choose a type and then connect the dynamic data and all that, you could simply point and click on the image selector style and it would automatically become a property. Then point and click on color and point and click on text field, point and click on any other fields and they get converted to instance properties. Of the properties you have available, there isn't a color picker. And if there was, would it be compatible with custom color menus like ACSS makes when you right-click a color? If properties were created in the way I explained, then you could directly select the color field to make it editable on the instance. I guess I just don't see the point of needing to create custom property fields first and then connect them to the component fields, if there was instead a way to edit the component and then pick from the style panel which fields should be editable on the instance directly. Instead of creating a text property and connecting it to the title field, you would just select the title field directly and "mark it editable" on the instance. If that makes sense. it just bypasses a few steps and is much quicker when you want to make a lot of fields editable on the instance.

[@dynamic-homepages]

Put it please in the forum for bricks 👍

[@Jornes83]

Good job, Thomas and the Bricks team. Finally!

[@isaurasotoca]

Does this make me THIRD? 🤣 Good job with the new Components! Looking forward to start playing with them!! 😊

[@salixharry9627]

I love Bricks, but all the waiting to get the same component that looks exactly like the sneak peek-where people have already given feedback-I don’t understand why you haven’t implemented something like style types or conditions, which were already requested.

[@spindreams]

So cool, I assume you will add other property types, e.g. I can instantly think colour would be a great option, maybe also being able to set a restricted custom palette to be picked from or allowing us to create a restricted palette for that specific property. Same sort of thing with fonts face and sizes? But hey great start for sure.

[@paolobattiloro947]

It seems a bit limited to me...If I understand correctly, can you only act on certain elements? if I wanted the background color of a card or I don't know, the radius of the corners of a card of a different value... I can't do it?

[@JoyHints]

Install the beta and find out

[@2IOstudio]

great update, one more question: does the "card" supports "query loop" if it's a component then? or we have to wrap it with a div/block, to run query loop? many thanks.

[@foofourtyone]

As I understand it, you would use it like a normal card element in a loop. Just insert a component and loop over it.

[@vaughanprint]

Nice, and looks like there are many other new things in the Changelog. We still need to see the ealry alphas of version 2? Wondering if there will be anything radical in how this will work?

[@KaiBuskirk]

Fantastic!!! Danke! Kai

[@KariposTheOne]

Nice but there is nearly no difference since the Sneak Peak for example a component should have different styling options and like a switcher for visibility options

[@dynamic-homepages]

Same with website. The trickiest part is lying under the hoods

[@jean-paulmesserli8269]

Nice and well explained. I've used JetEngine Components in Elementor (big time saver, but a lot of back and forth). Say, i want to have rounded corners on some cards, but not all. All else stays the same. Would that be possible at some point? Or can i assign an individual CSS-Class to some Components. I know that this kinda kills the idea of 100% consistent of compontents. Using JetEngine Components are very stringent, i had to tweak certain elements of the components, but like 80% of the card remained. not urgent or important. i will definitely speed up my website building and i will also start setting up me own framework.

[@whitespaceagency]

Is the plan to get clients using the front end of Bricks? I've always taken time and care to make sure they edit and update in the backend, to prevent them 'playing' and messing around with things in Bricks. Is the plan to encourage that behaviour with this feature? For me properties seem to overlap and complicate ACF, let's say. I also can do all the global styling and consistency just using a class that the cards share, no? Rather than styling them all at the ID using components. I'm not saying this isn't a cool feature BTW, just being practical/clear about it's most helpful use case :)

[@johnnycakez2750]

I guessed it was more of an alternative for those who want to use a css framework without a component library. ACSS/core etc have their own component/framework libraries in the likes of frames, blocks etc. but I guess you could build out your own ones here instead. Maybe I've got that wrong though, just what I gathered from this vid

[@nicbug4861]

reminds me of gutenberg pattern with the new templateLock parameter

[@dnssolution1280]

So great!

[@nudinlubis-m]

Good Jobs Bricks 🤩

[@heyJordanParker]

You said it yourself - templates are a pain in the ass to use 😂 Templates not in a good spot right now. There's a lot of archaic design left there that needs a do-over. I'm hyped for components though 🤩 PS: Components look fantastic. One question: why are the properties separate from Dynamic Data? Wouldn't a centralized implementation simplify extending this & Bricks a lot?

[@mrabhijitrabha]

Full React Js vibe 🥹

great !

[@lakoresto6169]

I find this feature far too limited. I’ve been waiting over a year for its release, assuming significant effort was being put into its development. Unfortunately, the result is quite disappointing. It has a good foundation, but where are all the features compared to the component features in other Page Builders?

[@RaphaelGolin]

Could you give some examples about those missing features? I'm trying to visualize the full potential of the functionality, so yiur examples of whats missing will be very helpful

[@basiya0240]

???

[@dynamic-homepages]

Yeah I thinks it’s start with basic function because it’s the first implementation and a beta release. And components structure ist nat that easy to create like it sounds. Otherwise every page builder would do it right ? But what if your core is heavily bugged, then you build On that a totally complex structure and people expect it to be doing everything xD just think that even your some of your simple Apps gets still updates because there are always some issues. And bricks is still already awesome To use

[@foofourtyone]

Oh interesting. There are already other page builders with this kind of feature? I did not know. Where can I find them?

[@lakoresto6169]

@@foofourtyone look at cwicly probably the best component intergration for WP, otherwhise you can compare them with Webflow and Framer

[@hoseinkh1029]

🔥🔥🔥🔥🔥

[@John.Rearden]

Great feature, Kudos! This component feature set doesn't seem much different than what was showcased last year! Why delay for a whole year, if it was ready all this while!

[@0xFF-p2u]

🎉

[@tudorcelstan]

Just in time for all the 2025 client projects. 😌

[@jensgur]

Finally!!!

[@BenedickHoward]

Summary Components are now available as an experimental feature in Bricks 1.12. • They significantly enhance maintainability and efficiency in website creation. 📦 What are Components? • A component is a reusable and customizable set of elements or a single element. • Ideal for elements that will be reused frequently, such as buttons or card sections. ⚙️ Benefits of Using Components • Reduces repetitive tasks: Instead of duplicating elements, you can create one component that can be reused. • Easier updates: Changes made to the main component automatically update all instances, saving time and effort. • Promotes a consistent and maintainable workflow within the Builder. ✏️ Creating Your First Component • Start by selecting an element (e.g., a card) and right-click to save it as a component. • Name and categorize your component for better organization. 🔄 Editing and Using Components • After creating a component, you can insert it anywhere on your site. • Any changes made to the component will reflect across all instances, ensuring a single source of truth. 🛠️ Customizing Component Properties • Components can have customizable properties allowing for specific adjustments (e.g., changing titles or images). • Properties are created and connected to specific settings, enabling easy customization from each instance. 🔍 How to Connect Properties • Create a property (like a card title) and connect it to the relevant element within the component. • This allows individual instances to have unique content while maintaining the overall structure. 🌐 Scalability and Maintenance • Components are particularly useful for scalable websites where elements are reused across multiple pages. • They streamline the process of making site-wide changes, enhancing the overall user experience. 📈 Conclusion on Component Use • Emphasizes the importance of using components for consistent, scalable, and easy-to-maintain websites. • Encourages users to test the feature and provide

[@DominikWernerCreativeArt]

SECOND

[@mihaiandrei97]

FIRST

[@leckomio8812]

I don't get it anymore. Global elements, template, components. why not put it into ONE thing and call it "instance". Thats a naming convention used in graphic design a lot too. I was already disappointed by the Global elements as it lead to all sorts of issues because of bugs with the ID/Class naming when translations are done with WPML/Polylang. Please rather fix bugs instead of adding new stuff..

[@vigilantezack]

No, components have been desired for years!

[@NOALNOM]

Excellent!!!

[@basiya0240]

WOW🎉