FIRST SNEAK PEEK: Components in Bricks

[@pepitogrande]

This will be a game-changer. Easily the most important thing from the Roadmap. Great job!

[@jrmc732]

What game changer? This is an already solved problem we have the block editor. Bricks should really just be a plugin for the block editor and offer a set of blocks instead of wasting time and helping make the web slower like Elementor & Co.

[@KOBE42__]

@@jrmc732if you enjoy creating websites with Gutenberg then go for it but it seems other people prefer to use Bricks. And you can’t compare Bricks to Elementor. Bricks is a much more powerful builder as it slows for much more control over the elements

[@tudorcelstan]

​@@jrmc732 How exactly would you synchronise styling while editing properties on tens or hundreds of elements in the block editor? Also, I'm pretty sure installing one plugin for your basic blocks, another one for scroll animations, then writing a js snippet for a custom dropdown or scroll watcher, some php snippets for basic functionalities that the block editor lacks would end up „slowing the web” significantly more than a single builder that has all of them implemented smartly and with performance in mind. Want a fast web? Go write vanilla html and three lines of css. Some of us actually care about workflow speed so please if you have nothing useful to say leave the people developing this wonderful piece of software alone.

[@bryncb]

@@jrmc732 The Bricks frontend output is infinitely cleaner than Gutenberg, what on Earth are you talking about. Bricks is basically flawless in the frontend. Regular Gutenberg, GenerateBlocks, Kadence etc. are a mess.

[@leonprofes8544]

@@bryncb I think he missed a video and a builder 🤣

[@KariposTheOne]

It would be nice if we were able to have a dropdown for different styling options and like a switcher for visibility options. Nestable Components would be awesome

[@bryncb]

I really hope this components update is going to drop soon. The way that editable attributes are configured makes me hopeful that Bricks is going to provide an option to make components available in Gutenberg as custom blocks. That would be the single best feature of Bricks if it happened.

[@julr7413]

When will it run? I can’t wait!

[@LudovicCharlier]

So great. I hope it will be compatible with the role Manager. In this way we can give granular access to clients to edit their website and add only components for example.

[@Skratchable]

this is where my mind went too. allowing clients to add components would be kinda huge so they arent stuck only using acf/MB form fields for content

[@philipplunch8526]

Yes!

[@nineplanets9664]

Agree! Need to be able to limit what clients can edit (for their own good).

[@philipgebhardt3453]

Really good point Ludovic-that's always been a major concern -handing over a Bricks-built site over to clients, I'm always a bit worried about giving them too much access to the backend so being able to control what they can and can't edit is crucial.

[@philipgebhardt3453]

Actually- if you look further down in the roadmap he talks about applying more granualr access for clients so I think he's already covering this feature.

I've watched this video for at least 5-6 times now in the last few weeks and once again today.. Realy cant wait for this feature to be inplemented. I'd also be totaly up for some deep dive beta testing as I do think that might be necessary. Is it also planed to have somthing like Style Types? As in having a base card style for example but having a dropdown to choose a different layout? Last Question would be, if the component functionality will also give us the possibility to save those Components as Gutenberg Blocks and have our customers use them? As Always, keep up the great work! TIA

[@Tom-Homer]

Looking great so far! 2 questions: 1) Can I have components within other components? For example I have a star rating component which can be used by itself and I may also apply it to a card component 2) It looks like for example a card component can be a query loop. What happens if I want to change the query loop depending on where the component is being used? Will that be a property (query) of the component itself that I can overwrite with a new query? Or am I going to have wrap the card component in a div or something and run the queries from outside the component?

[@jtabdesign]

1. Couldnt you have a template plus css for that?

[@Tom-Homer]

@@jtabdesign You could but then you have the cons associated with templates and the reason we want components in the first place. A star rating is just an example it could be anything (but ideally you would want it as a component to make it more maintainable).

[@fortymileswest]

Love this Thomas, but really looking forward to native filtering, any sneak peaks of that available yet?

[@OJHorror]

This is huge. We wouldn't need to rely on Bricks or 3rd Parties to make new elements. We could just make them ourselves.

[@theplaintech]

Thomas, thank you for all this hard work -- Bricks Builder has become so amazing and Components is so useful. This looks very useful for creating videos where video can be a component which can reduce the steps for inserting videos into a page.

[@chrisgreen5711]

This looks like an awesome feature and will be a great addition to the builder. Can you use these components is a query loop if you wanted to connect CPTs?

[@eLeieZer]

This is so much appreciated. Things are just getting better for Bricks!

[@getbusboy]

Great work, looking great. So glad I found Bricks.

[@TheKoppi99]

This is a great feature! But can you save also a thumbnail or a screenshot of the component? so we can see on the hover or something like that it looks like? when we have a lot of components or templates with different names, we don’t know which one is the right one. On templates, we haven’t this feature also. Can you upgrade it?

[@sSimoneenomiSs]

Thank you for the sneak peak! I'm already very excited for this new feature! 🥰 Have you thought about adding a property type like select, checkboxes or radio buttons? For example to select the button style (primary, secondary, etc.). Not sure if this is really necessary, but I was just wondering.

[@philipplunch8526]

I second that. 😊 checkboxes, Switches and radio buttons

[@elikemdaniels]

IMHO, it would be great to visually show a differentiator between the main component and its instances, just like it's done in Figma. That visual differentiator could be icon difference. Any thoughts?

[@antonichristian5845]

Yeah i think this is a very good idea, that bit confused me as you couldn't see any difference between the main component and its instances. This would be very confusing.

[@mr.matt.eastwood]

Agreed!

[@Louis-C-online]

Very promising, that can be so useful for many situations, like hero sections and so much more. Thanks for working on this feature !

[@wp_universe]

So you're bringing JS framework's workflow into Bricks. Absolutely incredible.

[@agency1000x]

Great update thanks! hey will bricks have spintax support?

[@brianlovelace]

This is very cool. One thing that could make this very easy would be a drag and drop connector to connect component properties to actual elements within the canvas and/or the structure panel. I'm thinking how n8n allows you to connect workflow steps. This would make it a much easier flow so you can do everything dealing with tying in properties to elements all in one place vs having to go back over to each element and connecting it.

[@rolandoveca]

Maybe you could add access to the customization panel such as size, css, etc. of the child component, so as not to have to modify all the components and only the one we are working on if desired.

[@KariposTheOne]

We definitely need more Property types, like: Gallery, Number, Options, List similar to Cwicly

[@daveb8795]

Wow! This will create a whole new marketplace. Great feature.

[@ruffzen]

It would be interesting to see the rendering of the component in the DOM. Are web components being created? This would be fantastic.

[@Dougster123]

THANK YOU Thomas!!! Way to add this so quickly 👍 CHEERS 🥂

[@iamminhajul]

This is going to be awesome for people who use design system. Looking forward to it.

[@roooos]

Great start, Thomas! 1) Is there any reason why selecting property for some value looks different than selecting a dynamic data for that exact data? Essentially a component property is the same as a dynamic data, just for the component. Example: Let's say I want to insert the value of a dynamic data from ACF in a text field (Card title in your video), followed by a space, followed by a dynamic property that can be set outside the component (Heading text in your video), followed by a space and some static text. It is impossible for now. As selecting a dynamic property "overrides" everything and shows as big purple rectangle. The design looks a bit of as well, like it is from Webflow or Figma. It seems logical to select a dynamic property for a component in the same way as other dynamic data is selected. Well at most another icon next to the lightning icon, but the behavior is about the same. 2) I didn't see a demonstration of the functionality of the slots in the video. So that other elements or components can be inserted into instances of existing components. This functionality just wasn't covered in the video because it's in development or it's not planned in this version / in principle?

[@bonhomie.studio]

Could there be a toggle switch in the Bricks Settings page that turns off the Elements tab and only displays the Components tab? This would be an excellent way to address client control so they can update certain elements on the Home and About page when necessary, for example. Just give them the ability to access predesigned components only. Thank you for this, this is wonderful.

[@Sashad2003]

Thank you for this must have update 🙏

[@stewartr7648]

No additional feedback as it looks as if you've got the fundamentals covered. Looks great ... except for the colour ;-) Really excited to get my hands on this functionality. Thank you!

[@odinaka_joshua]

Great work Thomas 🎉 👏

[@mk-design]

I'd find it awesome to have some id-customization, too. Like instead of the random #brxe, it would be nice to have the option to set a template like #product-showcase-{num,3} this would generate #product-showcase-001 for the first, #product-showcase-002 for the second and so on. This would clarify the code because we'd have a structure like: #product-showcase-001 - #product-showcase-001-title - #product-showcase-001-desc - #product-showcase-001-icongrid -- #product-showcase-001-icongrid-icon -- #product-showcase-001-icongrid-desc - #product-showcase-001-button Also it would be great to toggle a button to create css classes accordingly. So if I'd use the template #product-showcase-{num,3}, it would create the .product-showcase class automatically. If I click the title I then don't have to type #product-showcase-001-title, because it would give me the template - #product-showcase-001-[_____]

[@MCbyGracjan]

You won't believe it, but I squatted with Framer on Bricks Builder 🧑‍💻. This is something amazing ✨!!! Bricks blew my mind 🤯. DAMN

[@bjoernzosel]

perhaps it would be good to explain to beginners the differences of loops, global elements, global classes and global elements and the use cases

[@stripedgoat]

This is gonna be fire! 🙌🏼 Love the implementation. It's clean and straightforward. Cleaner than Cwicly's approach, to me at least.

[@markodraganiic]

Can't wait for this update!

[@crsmoore]

This is seriousssssly epic! Great work! 🙌 Really looking forward to the finalized and released version of this. Cannot come soon enough! Any general ETA? It's already been 4 months since this video. 😎

[@AmandaLucaseu]

Looks fantastic Thomas

[@kappesante]

thanks thomas! the connection steps seems a little odd, not sure why. may a component auto-detect elements included?

[@bricksbuilder]

Not really sure what you mean by "may a component auto-detect elements included". The workflow is: 1. Save element as component 2. Create properties for the settings that you want to expose (to make the instances of your component customisable) 3. Connect properties to the desired element settings inside your component

[@Hi6sl]

The integration of components into the left sidebar and the UX steps to work with components looks great 👍 However, I agree, the properties should be handled more transparently, e.g. properties could live on the elements in the component and not require a complete duplication of each element exposed. UX wise, setting a property for an element could be similar to adding custom attributes. Then they are tied to the element and don't need to duplicate property entries floating around on the component.

[@kappesante]

@@bricksbuilder what i was hoping for (maybe, not sure about what i was expecting), is a little more transparent implementation: once you set a component like that, with a block, an image, and a heading, the component recognises them without the need to connect stuff manually. the manual step to create a connection feels odd. i appreciate your work, and this is a very good news, but i was wondering.. can a component know that there is something, and expose every element inside it? i totally understand that you have somehow to set proprieties that may change, and set other that may not, so i don't have a better implementation in mind. example: you create the component, go edit the component, and then edit the image without the need to connect proprieties. it may be something like the distinction between ids and classes. id edits always override class edits, so a component may have a 'libray' state where you set your global edits, and 'instance' ones that will effect only that instance. i dont know thomas, i'm thinking while i'm typing.

[@sSimoneenomiSs]

I think (if possible) the auto-detect would only work for very simple usecases and would not be useful for more complex components. So I prefer the manual way of connecting each property to exactly the field I want to.

[@Hi6sl]

@@sSimoneenomiSsYou could expose stuff on the element and show it grouped one the component. Adding an image to add a linked image somewhere else seems odd.

[@Defcon1702]

That looks great and very promising. What will happen to "global elements"? I saw that they are gone in the context menü? I ask for existing projects -> will they converted automatically to components or do we need to prepare to breaking changes when we update?

[@bluefuzecom]

this looks SOOOOOO amazing

[@vigilantezack]

I assume we'll be able to do things like save a template that includes a component in it? And what about including them in remote templates that are imported and things like that? Are the created components going to be listed in the main Bricks templates screen or another management screen in the backend or do we have to open an actual page in the editor before we can access the compoents and edit the originals?

[@adamu6941]

The more time passes, the more Bricks becomes essential!

[@peteharrison3241]

Great new feature. I'm still new to Bricks coming over from Elementor where I've created many 'widgets' using Unlimited Elements for Elementor which has a great building tool. It allows me to include JavaScript libraries and uses Twig to add some conditional logic to the widget/component. Do you intend to add anything like this too or is it just a layout component?

[@joey_williams]

Sounds great. When trying compennts/variants with Framer, it often outputted multiple instances of the same text in the source code, so a bit of a duplicate content issue for SEO. Would be good to avoid if possible 🤞

[@nctn5717]

It's so cooool guys! You're product is a dream for me as a dev

[@SuatBarlak]

Love it. I'm very interested in building components that are easy to use for inexperienced users. Right now I'm creating elements kind of ass components but this looks faster to set up. It would be awesome if we had a way of restricting users only to use components and hide e.g. the elements tab. I know this can be done with css but would be great anyways.

[@jacopomarrone8059]

Can't wait to see in action !

[@isaac_feldman]

amazing! I don't like that is no clear distinction between component and instance I would like to see custom fields integration

[@build_in_silence]

Neben den "Components" sollte auch noch die Usablity des Editors verbessert werden. Wir haben ca. 70% Kundenwebseiten mit Elementor gebaut und 30% mit Bricks. Wir haben aber 3x so viele Support-Anfragen für Bricks, da es für die Leute zu kompliziert ist. Für einen Developer ist Bricks Mega. Trotzdem, das die Lernkurve bei Bricks um einiges höher ist, würden wir nicht mehr zu Elementor wechseln, würden uns aber wünschen das die Usability für den Endkunden, der kein Designer ist, einfacher wird.

[@ReubenHochstetler]

A component in Bricks would have saved me today. I need to go and manually add an inner wrapper to a card I created. Can't wait for this to be released!

[@nedveddev]

Was there no way to do this before by using custom code in your child theme or plugin (like custom builder modules in Divi)? Is this just bringing this capability into the builder so non advanced users can take advantage of this?

[@justinsideris]

This looks great. I'm excited to get stuck into a components-based workflow. Seems like it will just tidy up the workflow I have now that can get a bit messy sometimes, especially across different templates

[@zensukai]

Fantastic work ... thank you for this great update (or coming update). =)

[@vancewong]

Would love to see how we can connect query loops to components. Can't wait for the beta release for testing!

[@Lynsey-S]

Any idea when this will be available? Yesterday would be great but tomorrow will work too! 🤣😜

[@grasshopperweb]

Looks great! Only thing I noted was that you gave the component the name "Card" and yet it showed up in the layout structure as "block". I get that it's a block, but the name of the component should show up in the structure for clarity. Just my opinion.

[@Jessy_noctaupus]

I think it's confusing to select component to the right (occurence) to edit main component. Also the little button to connect element to proprierties is far so small to get easily clicked, and it's toi near from the trash button on the image. This Purple element has to find this place but actually it's not the right one. I would be glad to share a sneek Peak where could be it's better place. BTW great feature ahead ! Really can't wait for this feature to be implemented :)

[@perfect.stealth]

Bricks is built from my dreams

[@SinisaSinjori]

That's awesome! Thank you Thomas!

[@rebelinc]

So good. Some minor tweaks as you mention like the colors for the component options .

[@damienjstn]

Can't wait to see this on my websites, will really be a game changer!

[@shannamiddleton1944]

Hi, how is this coming along? I would be happy to be a beta user.

[@nikoweb]

This is going to be huge!

[@bordzee]

when will the form have a create, update post action?

[@SinanWP]

come ooon release it :D

[@flyingwebsolutions8208]

Amazing job guy! Can we already try this new functionality? I would like to experiment it! This new feature is a very game-changer!! 💗💗

[@DesignRobPearce]

So the point of this is to bring the editing back to the front end, rather than the backend? Do the components not then take over much of what CSS classes are for in these instances?

[@saskia8018]

I think the main difference would be that you could add html elements to a component and not just style it. But yeah I'm very used to global style changes via css and would need to get used to the new workflow.

[@DesignRobPearce]

@@saskia8018 quite a shift right?

[@khandakershahi]

Awesome feature. Waiting for it.

[@saskia8018]

Ready for this 🙏

[@ReubenHochstetler]

Is it possible to add a new html element to the component and have it update all the instances? For example, if I would want to add a button element to the card component you created. Would that update all the instances of the component with a button?

[@bricksbuilder]

Yes, that's one of the core features of components.

[@ReubenHochstetler]

@@bricksbuilder Great! I assumed so but wanted to confirm.

[@jamiewalker1745]

Super exciting!

[@nilsdannemann]

Pretty Awesome. Some thoughts: It would be awesome to be able to create a property based on a number (e.g. px, rem, em...) and then do calculations with them. Example: I want to create a property called "spacing" for my card and use it in multiple places. Say for the card padding I want to use the spacing value. But for the margin bottom on my card image I want to use (spacing / 2).

[@Hi6sl]

Use CSS variables.

[@popopp2297]

Goodbye Elementor. This just sold me! When this goes live I will migrate away from Elementor on all future personal and client project for good. The component side of things is huge but just knowing the framework is built on top of Javascript and React takes the cake for me. : ) Curious is anyone has every taken their web projects and tried editing inside VS Code? @Thomas, when can we expect the component feature to go live or ready for Beta?

[@BGdev305]

It took "this" for you to want to move away from Elementor?

[@ReubenHochstetler]

Very impressed.

[@BGdev305]

Confused.. not seeing the advantage to this. Each card you still had to change the titles, styling, etc.. one by one?

[@antonichristian5845]

You can separate the content/data from the styles/design. So you can add the properties (example might be images, heading, text etc...) you want to change and link them to the core component. This enables you to change the content on each instance of the component but if you change the styles on the core (example background, heading and text colors etc...) and it will update across all instances of the component. This is a massive time saver as you can drop pre-made components into your page without having to create them each time, hope this makes more sense now.

[@djredstorm]

I really like the components!

[@JasperScheper]

Game changer!🎉

[@NOALNOM]

Brilliant!!!

[@alexvasquez537]

This is looking good

[@SiteswithNatalie]

Awesome.

[@IvanJuras]

Thomas, will these be available as Gutenberg blocks? We really, really need this option. Gutenberg is the future. Imagine running an agency where VAs update the content, but you don't want the VAs to be exposed to Bricks. They'd only need to put the block into the GB editor, and edit the most important things.

[@saskia8018]

Can't this already be achieved be letting the editors work in posts with custom fields whose data you could connect to the components?

[@malikqatagan8977]

❤

[@maxziebell4013]

Peak a boo 👻… we got some nice candies 🍭 🍬 at the Bricks door.

[@maxziebell4013]

Feedback: please Demo nesting components and add the ability to reference properties much like Wordpress dynamic data (Brackets-Syntax) to customize CSS, HTML and JS based on the properties.

[@deathmetalpopart]

How is this different than using section templates?

[@faridaghili]

It's my problem too. But I think we can change some parts of each component where needed, but the whole thing remains the same, so you can have a component with different variations. But templates are exactly rendered the same everywhere.

[@deathmetalpopart]

@@faridaghili so it's basically templates but allows individual use overrides?

[@faridaghili]

@rileysmith9219 as of now I think yes

[@foofourtyone]

@@deathmetalpopart No, it's not. With a saved template, you just put it on a page and on a second and third one. If you need to make changes to that template f.e. the bg-color you need to go to all the places you have put the template, right? With components, you just change the "parent" component and all the instances (that you have put on all the pages) will change accordingly. but you still have the flexibility to change certain things for single instances. It is a very flexible and powerful concept that is used in development for years. Just Goolge a bit about components in development and you will understand what that means for bricks. No other page builder has this kind of functionality.

[@yarrrno]

Super epic

[@pieceof1041]

11 months later 😅😅

[@sinanisler1]

nice

[@John.Rearden]

Webflow is the Gold Standard. If Bricks is not beating Webflow, it’s not doing it right. Wordpress needs Bricks to beat Webflow.

[@antonichristian5845]

7 months in and we have still not got this feature... what gives!? paying customers want to know thanks.

[@leckomio8812]

Well, I do not see any why the majority of user need this urgently or at all, but what I see is the majority of Woocommerce users wants fixes and a proper tool set. Right now Bricks fills just the basic requirements. In my opinion those gimmicks like this here are not needed right now. Most companies do not change their website constantly to make this a use case. Set and forget

[@ricardodesirat2590]

Sooo good. Great upgrade! What about a button to duplicate it as WP Block so we can use it in the WP editor :) update: Just read it's for 2025. Reconsider making it in 2024. It is a game changer having a tool like Bricks to make dynamic blocks. Probably a lot of newcomers or changers into Bricks.. There is a comment (from 9 months ago) about security..?

[@jmcbade2960]

Thomas, I am fine with creating new components as long as development of such do not get ahead of items on the roadmap such as "Global Components" (is that what this is?) - it looks like it and I think that is cool. Also a native AJAZ driven search filter are two main things on the latest map now are most important to me. Oh, thirdly and equally important, the Global Class manager also - very important to me. Thanks for all your hard work.

[@bricksbuilder]

Yes, this sneak peek is for the "Global elements" feature on the roadmap (bricksbuilder.io/roadmap/#3026). We have added this info to the video description. As you can also see on the roadmap, native search and global class manager are also being developed right now.

[@Jornes83]

@@bricksbuilder Can't wait for the new upcoming stuff!

[@bryncb]

Advanced Themer has incredible class management features for Brick. You can enjoy all of that as soon as you want. And no matter what Bricks does with filters, it won't hold a candle to WP Grid Builder. It will be convenient to have basic filtering available without an additional plugin, certainly, but Bricks should focus on features that cannot be achieved with third-party tools imo.

[@shepdesign]

We don't want this, we want native filtering! WP GridBuilder is a rip-off

[@bryncb]

Grid Builder is incredible value, what on Earth are you talking about. It's vastly more than simple filtering. It has amazing maps capabilities, a vast assortment of facets and provides true, faceted, cached filtering with a Bricks integration. For Woo stores or large blogs it's pretty much essential to use faceted search like WP Grid Builder or FacetWP.

[@jrmc732]

This is like installing a virus on your system... please learn and use the block editor.

[@raziel8799]

???

[@JaySolomonK]

Try to implement the yearly plan please

[@cabolove89]

​ @Gearyco