Release
Notes

We've got some incredibly exciting features to talk about here—things that will truly allow you to take your site builds to another level, all while making maintainability and scalability easier than ever. But before we get into that, let's take a moment to review some of the lighter fare.

Let's begin with UI updates. In an effort to make navigating between Builders more straightforward (especially with the addition of our new Component Builder), we have given the interface a fresh new facelift. That being said, major pieces of functionality such as the Outline, Inspector, and Element Library remain just as you remember.

Introducing Documents

To explore the assets you've created that make up your site (i.e. “Documents”), click on the new Cornerstone menu near the top-left corner of the interface. If you do not have any open documents when you go into Cornerstone, this menu will be opened for you:

Take note that by default, All Documents is selected in the interface and you will be able to scroll through and see any asset you have created. You can also filter by document type at the top of the list, or search to narrow down your results. Additionally, you can duplicate or delete any documents relating to your site from this interface if you need.

Additionally, this is where certain features such as the help pane, app preferences, and Dev Toolkit can be found. Additionally, you can use the “Exit” action to leave the builder and return to the WordPress admin area.

Create New

Directly beside the Cornerstone menu is a + sign, which signifies the Create New interface, which is where you will go to create any new document for your site. By default, the interface opens to a Blank tab, which allows you to create a new Document of that specific type without any content pre-populated:

Next, we have the Library tab, which allows you to create a new Document that is pre-populated with any content you have previously saved as a Template. This interface is broken down by Document type. For example, we can see in the screenshot below that this installation has four Header Templates saved, which can be used as a starting point to create a new Header moving forward if desired:

Finally, we have the Themeco tab, which features assets created by our design team at Themeco that are delivered “over the top” into your installation as they are released (no updates required!). These can serve as a great way to get something up and running quickly with almost no effort. Similar to the Library tab, these Documents are broken down by type and can be installed with a single click:

If installing something that is assignable such as a Header, Footer, Archive, or Single Template, the asset you click on will be installed as a new Document but will not be assigned so as not to overwrite your site's frontend.

We've Got Tabs!

And now for one of the most exciting features we've been working on for quite a while: multi-Document editing! In this latest release, you can now work on multiple documents at once, which will be displayed as tabs across the top of the interface between the Create New and Save buttons:

Each open tab features the name of the Document on the top line in addition to its type below. In the image above, we can see that we have a Page named “Home,” a Header named “Global,” and an Archive template named “Blog” open.

The great thing about having multiple Documents open at once is that you can easily make changes as needed to a global asset like a Header and quickly switch contexts to a specific Page or Post to see how it is affected by those changes. Tabs are re-orderable and you can have as many open as you wish.

By default, when clicking on a Document in the Documents pane, the pane will close and a new tab will be opened with the selected Document in the live preview. If you wish to open multiple Documents at once without the pane closing, simply CMD / Option + click the Documents you wish to open.

The Workspace

As mentioned previously, for the most part the Workspace behaves very similarly to how it operated in previous releases. Take note of the image below with the Workspace on the right side of the screen, and you can see that the Outline of the document we are editing looks as it always has:

First, we can see that the Workspace is divided into five tabs at the top, which correspond to the Outline, Inspector, Element Library, Template Manager, and Globals interfaces in that order.

Each pane is labeled by the first line of text below these tabs as you can see from the image above, and then a contextual title or search field is present below that. For example, since we are on the Outline for our “Home” Page, we can see that reflected in the header at the top.

Next, some panes will feature a sub-navigation of tabs to help organize things more effectively. On the Outline pane we can see that it starts with the “Outline” tab, but there is also a “Settings” tab next to it. When this is selected, the following Document settings are revealed:

The settings shown here will be slightly different depending on the Document you are working on. For example, you wouldn't see the “Allow Comments” option on a Header Document, as that would not be applicable to that Document type.

Next, we have the Inspector pane, which should look relatively familiar to previous releases:

A primary difference here is that the control group navigation has been grouped into the sub-navigation in the header, and you can use this to navigat to other modules like “Effects” or “Customize” as needed. Additionally, the actions to Delete or Duplicate an Element are now found at the bottom of Workspace, which is where you will see common actions amongst other panes.

Additionally, the “Children” group has been overhauled to include a full version of our main Outline pane functionality directly on the Element itself. Whereas previously you could only navigate the immediate children of the inspected Element, now you can drill down as far as you need. Also, take note of the cog icon next to the Element's name: this is where you will access the Element Manager, but we'll cover that in more detail later. 😊

Next, we'll take a look at the Element Library pane, which is pretty much the same ol' Element Library you've always known and loved:

Note that instead of a floating interface like previous releases, this version is situated squarely in the Workspace. We opted to move the Element Library back into the Workspace due to some additional features that were included in this release, which more readily required access to a floating, resizable interface.

Elements in the Library can be dragged into a dropzone in the live preview like always, and you will also see your custom Components here as you create and export them. Next, we have the Templates pane:

The Templates pane is a refreshed interface meant to make the discovery and implementation of assets in your designs much easier. One notable feature of the Templates pane is that it will only display relevant assets to you depending on the Document type you are working on. For example, you will only see Header assets here from your library or Themeco's when you are working on...you guessed it...a Header. The same goes for pages, archives, single templates, et cetera.

The Themeco tab features assets created by our team, while the Library tab features items that you have created. The Save Template action at the bottom of the Workspace allows you to save the entire Document you are working on to your Library, while the Manage Library button will reveal a modal similar to the old library modal, where you can add, delete, and rename your assets.

Finally, we have the Globals pane:

This is where you will find various tools that are related to the global styling of your site including Theme Options, the Color Manager, and the Font Manager. Take note that the Color Manager's palette setup has been refactored to align more closely with other patterns in the tool, and the way in which global colors show up in the color picker has been adjusted to follow suit, but the core mechanic still remains the same.

In addition to the changes mentioned above, the Workspace is now horizontally resizable to leverage the additional space of larger screens, and there is also a setting in your Preferences where you can choose which side of the screen it should reside on.

Breadcrumbs & Toolbar

Finally, we have our revamped Breadcrumbs / Toolbar section found at the bottom of the interface. This is where you can navigate the current Element tree you are in using the breadcrumbs to the left, or manage various aspects of your site such as custom code or preview sizing with the tools on the right.

There isn't too much that is new here, just consolidating various pieces of the UI in accordance with other changes implemented in this release cycle!

Phew...that was a lot! We look forward to the improved editing experience that we feel this interface will bring along with an entirely new set of tools and features. That being said, let's talk about...

Effects Module: Masking

In our ongoing commitment toward making “Photoshop-in-the-browser” a reality, let's talk about the Effects Module's latest addition: masking. You can find this new feature under the Mask control group within the Effects Module, right between Scroll Effects and Specialty Effects:

Clicking to enable this feature will reveal a list of different masking options you can choose from to get started:

Linear allows you to apply a simple linear-gradient() mask across either the X axis or Y axis of an Element. This can be particularly useful on scrollable areas or sliders where you want to gracefully fade out your content on larger screens, or use the subtle way to indicate that there is more content to scroll to on mobile devices (a common pattern used in these scenarios).

For example, take the Perspective Carousel Slider pattern from our Modern Sliders course on a very large screen:

While the content naturally spreads from one edge of the screen to the other, you may find that having the ability to mask out the edges gives it an intriguing look that appears to gracefully fade in and out on either side:

Another helpful use case for the Linear mask would be creating subtle fades on images that have content on top. In our simple example below, notice how the first instance on the left doesn't have quite enough contrast for some of the words that fall into the lighter areas of the image. The mask on the second example helps to offset this content some and make it more readable, while still maintaining the overall visibility of our background image:

Radial applies a circular or elliptical mask on top of your content, while also allowing you to take advantage of the radial-gradient() CSS function in some unique ways in this context.

Image affords you the opportunity to use any sort of transparent .png as a mask on top of your content, with the opaque areas serving as the “window” for content to be seen through and the alpha transparency areas blocking out content.

One simple way this could be employed is using an intriguing shape (a faux logo in this case) as the mask over an Element with a background image, showcasing only the parts of the image that reside in the same part as the mask:

Custom can be used to write in multiple mask images as well as mix and match types if desired. For instance, you can mix multiple gradient types along with images to create complex masking layers.

Each of these types allow you to set the size, position, and repeat value of the mask as well, unlocking even greater design potential when leveraging this feature in your builds.

This is only a cursory overview of what is possible with the new masking module in Cornerstone. The feature-set included goes very deep and allows for a lot of intriguing possibilities in your designs. For more detailed information, be sure to check out our masking documentation online.

The Element Manager

Before diving into Components and Parameters, it is important to understand a little bit about the Element Manager. This new feature can be found on any Element by right-clicking on it in the live preview, breadcrumbs, or outline, and then selecting Manage or by clicking the cog icon next to the label the currently inspected Element:

Performing either of these actions will reveal a floating control set that should look something like the following:

When managing a standard Element, you'll see a few options available in the Overview section up top, in addition to a fun little By the Numbers section below, which will contain various contextual stats about your Element depending on where and how it is used. The controls found in the Overview section are as follows:

• Edit Label: In addition to being able to double-click in the outline pane on an Element to rename it, you can also use this space in the Element Manager.
• Lock Element: Closes down the Element to internal edits, but still allows the Element to be moved, duplicated, or deleted. Enabling this feature will hide all child Elements in the outline pane and display a lock icon to the left of its label. This action can also be carried out from the Element context menu.
• Edit Parameters: Opens a code editor where custom controls can be wired up to make managing your Elements more tailored to your needs, and is particularly powerful when paired with Components. All of this will be covered in more detail later on.
• Save Template: Replaces the “Save as Preset” convention. Saving an Element Template effectively performs the same action, saving a snapshot of your Element at a moment in time for you to reuse at a later time if you wish. Saved templates will show up in your Element Library alongside standard Elements.

If an Element has any notable features applied to it such as a Looper or Element CSS, those will appear in an Active Statuses section within the Element Manager:

These active status items serve as quicklinks, which will take you directly to the location where that feature is managed. For example, clicking on “Element CSS” above would take you to the Element's Customize control group so that you can easily access this information if needed.

The Component Builder

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 + next to the Cornerstone logo and add a Component (depending on your settings, this screen may look slightly different):

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:

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:

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:

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:

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.

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.
• Enable Prefab: When enabled, newly created components will include parameter values and children copied from the Component source (e.g. if you make a Component that utilizes multiple other Components as children and alter their settings, when you drag in a prefab all of those children and settings will be preserved as a starting point).
• Hide Children Control: When inspecting an instance of this Component, the Children control will be hidden. This is useful for bringing focus to other top-level content.
• 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.
• Library Top Level: Useful for layout Elements. These exports will be shown in the Element Library when adding an Element at the top level of the document outline.

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 Parameters...

Parameters

Components are a fantastic tool for abstracting away complexity and bringing consistency to your designs by allowing you to create an asset once, and then use it everywhere. However, there are still plenty of situations where we need some variability in our designs, and that is where Parameters come in (sidenote: Parameters can be used on standalone Elements).

Let's take our humble Button. It is likely that if you have made this into a Component, you will want to update some content within it on a case-by-case basis. The two most common pieces of content you may wish to update within the button are its text label and href value. With Parameters, we could easily create custom controls on our button component and wire them up where necessary to expose these data-points and make them editable per instance.

Creating Your First Parameters

To begin this process, open the Element Manager for the Element you wish to work on and click on Edit Parameters,

This will bring up a JSON code editor where you can input some structured notation to achieve your desired result. In this instance, we want to expose an input for a text label and the href value, so let's go with the following:

So what's happening here? Well, we have our JSON object in the code editor (e.g. {}), and then inside that we have two lines of key / value pairs, each representing a new Parameter we want to add to our Element. Each Parameter added to our Element will show up in the Params control group seen in the Inspector on the left side of the above screenshot.

The string on the left side of the : for each line is the key, which is the value we will reference in a moment when wiring up our Parameters with Dynamic Content.

The string on the right side of the : is the default value of the Parameter.

Next, we need to wire up our Parameters so that our controls are outputting properly. To do this, we'll be using Dynamic Content in the form of {{dc:p:__key__}}, where __key__ is the value of the string on the left side of the : seen in the image above. This will allow us to output the value of that key wherever we need it to go.

Let's start with our text label. For this example, our button is made up of a Div Element using an <a> as its base tag with a Headline Element inside for the label with its base tag set to <span>. Since our text output is handled by the Headline Element, we'll inspect that and place our Dynamic Content there:

Now that we have the appropriate “plumbing” in place, the default value we set for our button's label is now pulling through. Next, we can do the same thing for our href value by plugging its Dynamic Content value into the appropriate place:

Once all of our Parameters are wired up, they are all that will be exposed in the Inspector whenever we utilize this Component in the Page or Layout Builders:

Of course, we're only beginning to scratch the surface here. 😊 There is a lot more that Parameters are capable of, and if you're interested to dive in deep, we highly recommend you check out our Parameters documentation online.

Goodbye, jQuery

We have refactored our front end javascript so jQuery is no longer a hard dependency. This will help your pages load faster, as there is one less javascript file required. There are a few exceptions when it comes to some older features that heavily utilized jQuery. Under the following cases jQuery will be conditionally enqueued:

1. If you use the following Stack functionality: Ethos post carousel, fullscreen background images, masonry blog, or portfolio layouts.
2. If you use the following Cornerstone functionality: Classic Slider Element, Classic Element tooltips / popovers, and the legacy ilightbox shortcode.

See It Live

Join us for a tour of the new and improved Cornerstone then learn how your old Global Blocks work with the new Components and Parameters.