Well that’s a breath of fresh air.
I’ve been eagerly awaiting components for quite a while and a new version of Bricks Builder for WordPress has arrived with the first iteration of this new feature.
What are components?
Components are an advancement on traditional templated content. In most build tools, a template is a bunch of HTML and CSS styles that creates a reusable piece of a website.
Think of a call to action section. Typically it would have:
A heading
Some description text
An action button
Sometimes there would be an image or other elements depending on the design
A template wraps these all up together. You would usually be able to either import a copy of the template and customise it to your individual needs for that particular page or bring in a synced copy of the template so that it picks up any changes you make to the master template file.
So how are components different from templates?
With a template if you bring in a copy that you can edit, invariably you will be disconnecting that from the original template. You’ve made a copy that is now standalone. If you need to make a design change that introduces new HTML elements (such as a secondary button), you’ll need to go through your site and make that change to each instance that you originally copied from the template. On a large site this is potentially creating a lot of work for the designer/developer.
Components remove all that potential hard work.
They are basically templates with one key difference, they include a concept called properties. You can think of properties as editable regions. For each piece of the component that you plan on changing on a page by page basis you create a property. Different build tools represent these in different ways but imagine an editable field for the heading, description text, button text and button link for the aforementioned call to action. You link these fields to the appropriate HTML element in the template. You can even define default content to include if the property is left blank.
Each instance of a component can have it’s own content for each of the created properties but they all share the same HTML structure and CSS styles. That means that you can customise the heading on the call to action section for each page yet still make design changes to the underlying component and have those changes roll out across every instance through the site without effecting the content you’ve customised.
Why are components so important for modern web design?
Put simply, they are a HUGE timesaver for modern web developers.
They make sites much more maintainable. Even with the best plan in the world and pixel perfect designs in figma, signed off by a client, any real world website undergoes changes in the build phase. Usually these are a result of testing and user feedback towards the end of the process. Having all
Secondarily, they are much easier for clients to work with. If you have client editors working on content in a visual build tool, components hide a lot of the complexity of the design and only surface the key details they they need to update.
How does Bricks Builder implement components?
Bricks builder 1.12 has the first experimental implementation of their components feature. Components have property fields you can create and link to an HTML element in the component. For example you can create a heading property field and connect it to the h2 heading inside your component. Properties can be connected to
Currently there are several types of properties available:
Text
Rich text
Image
Image gallery
Icon
Link
Query (for control Bricks builder database queries)
What’s missing from this first version?
A key thing that’s missing right now is the ability for conditional logic and setting the values of CSS fields. For example it’s currently not possible to hide a button if there is no link set. Nor is it possible to change the object position of an image so you can set a custom setting for each instance of the component.
The ability to switch design variations would be amazing as well but isn’t yet present. This would probably rely on additional property types, such as select dropdowns or toggle fields that let you choose a “style” to change the background colour of the component for example.
Another thing missing is the ability to set different values for different breakpoints. This is especially true with images. Bricks has good features to let you change the image at certain breakpoints. This is not exposed in the property and so you can’t tweak that without adding an extra image field and having to have a image set in it whether you want a different image or not (since you can’t use conditional logic to hide that version of the image if it’s not set).
Overall impressions
Even with the limitations of the first version, the new components feature is still a huge step forward. We’ve found them to be a timesaver even on our own website which we are in the process of rebuilding. Once your key components are created, building out a page takes a fraction of the time.
There’s also a mode switch that seems to be activated in my brain where I switch from design to content mode and I’m able to focus more on the copy and the messaging and less on the way it looks. That’s a real positive in my book.
One other thing I’ve noticed is that there is a LOT less need for any BEM CSS class naming. Utility classes do a great job of letting you open the component and just at a glance understand the styling that is being applied to it. I’ll have to expand on that in a future post. It’s changing how we look at our core CSS framework for WordPress and move a lot closer to Tailwind style CSS.
Other platforms such as Statamic have much more mature features of this type with their partials (fully nestable components that enable whatever you can dream up, you can code with a nice visual editing interface for entering the content). However, I do appreciate having this power inside a visual site building tool, it’s definitely faster than code work for me at this time and it opens up a lot of possibilities for existing sites as well as new builds.
