Component Builder Overview

In this article, we're going to discuss Cornerstone's Component Builder and how it can be used to open up incredible design possibilities on your site.

  1. Your First Component Set
  2. Advanced Component Usage
  3. Global Blocks Migration

You can think of Components as Element presets plus Global Blocks...on steroids. Similar to how Global Blocks functioned, Components are living versions of your design patterns that will update in real-time all throughout your site should you ever need to make updates to them in the future. The two main functions of Components are to provide a centralized repository of all your design patterns that is easily maintainable and to abstract away complexity so that the page building process can be streamlined.

For example, imagine you have a button style you wish to use all throughout your site, and you plan on using it in 100+ places. If you first made that button style into a Component and down the road you decided to change every button from red to blue, you could go update the core Component and all 100+ instances of your button would update their color at once!

That being said, there are some notable differences and improvements to how Components function compared to Global Blocks:

  • Whereas Global Blocks were always wrapped in a Section Element, Components do not have to be.
  • Components are managed in Sets, documents that can export one or more individual Components within. This is beneficial in that it allows you to manage multiple Components from one location if desired. For example, you may wish to create a Buttons Set that contains every button style present on your site. From this one document you can manage and export dozens of different styles if needed, rather than having to sort through numerous of individual entries when going into the Component Builder.
  • Your Component exports will show up directly in the Element Library, effectively allowing you to create custom Elements.

Your First Component Set

Let's run with the example mentioned above and say we wanted to build out a Component Set called Buttons, where we planned on managing all of our site's button styles. To get started, go to the Component Builder in the main navigation menu and click on the + in the upper-right corner to reveal the creation screen. Give your Component Set a label, then click Create Component Set:

Component Builder

For the sake of this example, let's say that we only needed two button styles for our design, a Primary Button and a Secondary Button. In this situation, our Component Set might look something like the following:

Component Builder

The Section, Row, and Column markup around our buttons are only there for structural purposes, giving us a canvas of sorts to organize our Elements in a clean way. None of this markup will be output with our Components because it has not been flagged for export.

To export any set of markup within this interface as a Component, open the Element Manager and locate the Export Component control and enable it:

Component Builder

Once this is done, you will see a new status item of Component Export appear on that Element, allowing you to keep track of any individual exports you've made within a Set. As mentioned previously, you can export multiple Components within a particular set, and any exported Component will show up directly in your Element Library for use later on. In the case of this example, we have exported both of our button styles, which will show up in our Element Library like so:

Component Builder

The main difference between using a Component or a standard Element in one of the other Builders is what you'll see in the inspector pane. Whereas a standard Element will be filled with controls allowing you to make adjustments, the Component will keep all of that information tucked away at the Component level, keeping things clean on the page you're working on:

Component Builder

Advanced Component Usage

There are a few features beyond basic Component exports that you will find very helpful for certain situations in your builds. The first of which is enabling an Element within an export as a Slot. You can think of a Slot as a consistent dropzone applied to a specific area of a Component.

For example, say that you wanted to build out a Component called Picture Grid, which always featured a large image to one side, and a bit of content to the other. The catch here is that you need to be able to put different content inside this component depending on where you're using it. You could enable any layout Element (i.e. Div, Cell, or Column) inside that Component as a Slot to receive variable content when you use it on the frontend.

Component Builder

When you use this Component later on in the Page or Layout Builders, the Element you flagged as a Slot will show up as a dropzone inside the Component with a matching label based on what you called it in the Component Builder (in this case, Content). Similar to exports, Components can contain multiple Slots, meaning you could craft as many unique dropzones for content as you need inside any pattern you're working on.

Beyond that, there are a couple more options you might find helpful in certain situations:

  • Allow Customization: Makes the Customize controls accessible when using the Component in other builders.
  • Make Private: Private Components are only available for use in the Component Builder. This can be helpful in creating patterns to organize Sets with multiple exports, crafting internal documentation, et cetera.

While the Slot pattern mentioned previously works great for large blocks of variable content, it doesn't address some of the following scenarios you might have already been thinking to yourself about while working through these examples:

  • What if I want to pick a custom color for my button on a case-by-case basis?
  • How do I change the text label or href value for each instance of my button?
  • Is there a way to change the image and background color of the Picture Grid pattern as needed?

The answer to all of these questions lies with Element Parameters.

Global Blocks Migration

As you may have gathered from this article, the Component Builder has effectively taken over the role that the Global Blocks Builder once held by dramatically improving upon it in terms of both functionality and flexibility. Fortunately, there is a seamless migration path for any of your old Global Blocks, which will keep them working just as they always have on your site and allow you to upgrade over time to the new way of doing things if you so desire. 😊

Previous to Pro 6.0, X 10.0, and Cornerstone 7.0, Global Blocks were managed by going to the Global Block Builder in the main app navigation. Let's take a look at a scenario where we have a site with two Global Blocks, one labeled My Button and the other labeled My Call to Action Section:

Component Builder

Leveraging these assets in a design was done by using the Global Block Element to pull them through:

Component Builder

Once on a page, the asset being output was determined by the selection made from the dropdown menu in the Element's only control:

Component BuilderComponent Builder

After upgrading to Pro 6.0, X 10.0, or Cornerstone 7.0, any Global Block previously setup on an old site will be found under the new Components section of the main Document navigation:

Component Builder

While the Component Builder is built on the principal of exports (as discussed previously in this article), which allows for much greater flexibility in eliminating extraneous markup, you can still reference an entire Component Set by using the Component Element, which functions as the old Global Block Element did:

Component Builder

Any instance of the Global Block Element found in your designs will automatically change over to the new Component Element:

Component BuilderComponent Builder

Keep in mind that the Component Element will pull through all markup found within a Component Set. Because of this, we strongly encourage you to only use it for backwards compability. Any new development should be built leveraging the exporting feature of Components.

See something inaccurate? Let us know