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.
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!
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 :)
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?
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.
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.
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.
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.
So do I understand it correctly, that you can only set properties for stuff handled in the "Content" section but not within the "Style" section; for exemple a background-image is not possible and if so: why?
Will this work with Dynamic data? Eg. I have a client who wants to have a section containing post 'card' blocks and have a field in the component settings where they can add post id's and then have them fed int oa query for the block to output those posts in the component?
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.
It seems to be "Properties" for components has a similar concept to "Classes"? WordPress and Bricks newbie here. Can someone explain this to me? Thank you.
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.
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.
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?
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?
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.
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
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.
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 🫶❤️
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 :)
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
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?
I think we need a lite editor. Any functions can be found in the library. When running bricks, only the components we need will be loaded. Forgive me for this unrealistic idea.😂
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?
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
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
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!
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
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..
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.
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!
Nice. I'm really excited about this feature. Keep up the good work Thomas and team!
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 :)
Rremember that component currently is an experimental feature. They'll surely smooth things out in future updates.
Love it Thomas! So happy that I invested in Bricks! You are an awesome developer.
🎉🎉🎉🎉❤❤
Congratulation for the release Thomas
This is great. I used classes to achieve this before. So you can imagine, I had ton of classes.
This is a brilliant addition!
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?
Oh yeeeeaaah! Here we go… this is going to be soooooo good.❤ downloading the video now as my network is spotty here. Congratulations 🍾🎊🎉
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.
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.
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.
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.
Bug: when dragging a button to the stage in a component it just doesn't show up.
I'm waiting for this feature! Thanks a lot.
this is very useful feature glad you have this idea thanks
Absolutely brilliant feature - a game changer!
Very powerful foundation for components. Amazing, actually. Looking forward to watching it develop with input from the user base.
Fantastic work team -- love it! Thank you for all your hardwork.
So do I understand it correctly, that you can only set properties for stuff handled in the "Content" section but not within the "Style" section; for exemple a background-image is not possible and if so: why?
Will this work with Dynamic data? Eg. I have a client who wants to have a section containing post 'card' blocks and have a field in the component settings where they can add post id's and then have them fed int oa query for the block to output those posts in the component?
What if i want to have a custom background color on each instance? Does a property for that exists?
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.
Does this make me THIRD? 🤣 Good job with the new Components! Looking forward to start playing with them!! 😊
reminds me of gutenberg pattern with the new templateLock parameter
It seems to be "Properties" for components has a similar concept to "Classes"? WordPress and Bricks newbie here. Can someone explain this to me? Thank you.
Good job, Thomas and the Bricks team. Finally!
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.
Put it please in the forum for bricks 👍
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.
As I understand it, you would use it like a normal card element in a loop. Just insert a component and loop over it.
@@foofourtyone yes I think so.
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?
OMG.. Can't wait to get started.. THANK YOU!!!
Beautiful done.
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?
Install the beta and find out
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.
Good Jobs Bricks 🤩
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
Same with website. The trickiest part is lying under the hoods
So great!
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.
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 🫶❤️
Fantastic!!! Danke!
Kai
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 :)
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
Oh my God, the truth is unique. 😍
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?
Full React Js vibe 🥹
great !
I think we need a lite editor. Any functions can be found in the library. When running bricks, only the components we need will be loaded. Forgive me for this unrealistic idea.😂
Just in time for all the 2025 client projects. 😌
Finally!!!
🔥🔥🔥🔥🔥
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?
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
???
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
Oh interesting. There are already other page builders with this kind of feature? I did not know. Where can I find them?
@@foofourtyone look at cwicly probably the best component intergration for WP, otherwhise you can compare them with Webflow and Framer
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!
🎉
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
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..
No, components have been desired for years!
SECOND
FIRST
Excellent!!!
Cool, cool!!
WOW🎉