Release
Notes

Whew! It's been all hands on deck around Themeco HQ as we've worked through one of our most exhaustive lists of new features, updates, and bugfixes to date. This release centered heavily around usability and bugfixes in an effort to tie up various loose ends and smooth out any rough edges that have come up with our last few cycles of major releases. We've also been able to introduce some long requested features such as a permissions manager for WordPress roles to be granted access or restricted from certain aspects of the builders, advanced/simple mode toggling v2 element controls, and streamlined global settings and tools to clean up parts of the site-building workflow. So let's jump right in and go a little deeper!

Permissions Manager Pro, Cornerstone

For our customers who work with a large team or pass their projects off to clients, one request we've consistently received is to introduce a way to manage access to various parts of the builder by WordPress role. With the brand new Permissions Manager found in the WordPress admin under Settings for Pro and Cornerstone, this is now possible. Below is a screenshot of this new tool:

There are four parts to the Permissions Manager:

• Macros – contains a dropdown list of common setups that can quicly configure all permissions for a given role with the click of a button
• General – allows for access and detailed configuration of various parts of the builders
• Elements – allows for access and detailed configuration of all elements found throughout the builders
• User Preferences – allows users to specify how certain features such as advanced controls or displaying the toolbar in the builders should work (i.e. user preference, always on, always off, et cetera).

For example, if you wanted to allow for the Content Builder to be available for all pages on your website for a specific role, you can enable it by selecting the power symbol to the left of the label. If enabled, a “Configure” text prompt will appear to the right of the label like so:

Clicking on “Configure” will reveal a host of options that can be enabled or disabled for the Content Builder on pages for that particular role. For example, let's say we want our author role to be able to build out pages using previously designed presets, but we don't want them to be able to save any new presets or include any custom CSS or JavaScript on the page. To achieve that goal, you might do something like the following:

Additionally, access to various elements and element features can be easily configured as well. For instance, you could completely remove access to more complex elements for basic users if you wanted, or you could simply adjust how users interact with specific elements. Let's say we enable the Accordion for a more advanced user:

While we want the Element to be on for them, perhaps you want to keep them from saving new presets on that Element so that they don't fill up your template library with things you haven't personally created. You could achieve that using the following setup:

Finally, you can specify how certain features of the tool should be presented to users to help streamline things or make them more flexible for each user in the User Preferences section. You can select for each feature to be set to User Preference, Always On, or Always Off depending on how you want them to function for that role.

As you can see, there is a wealth of new power and flexibility afforded to teams who need increased control over how different user roles access parts of the tool. With the Permissions Manager, you can even do things like enforce a “Text Only” mode for users so that they can inspect elements and update content, but not adjust any design settings. In fact, there is a handy macro for this as well! Check out our Knowledge Base article about the Permissions Manager to learn more.

Simple⇄Advanced Mode for v2 Elements Pro, Cornerstone

When X initially launched with what are now referred to as “Classic Elements,” one request we kept hearing over and over from customers was that they wanted more features and control over various facets of the Element design process. v2 Elements were a direct response to that, effectively giving users an unlimited array of design options to create more involved styles Element styles.

Understandably, a bit of a learning curve can come with all of that power. We have a constituency of users who have wanted to take advantage of v2 Elements in a more simplified manner (akin to “Classic” Elements just with more of the updated options), or want to primarily use a “simple” control set for minor tweaks and content updates but have access to the full “advanced” control list when they need more in-depth styling.

Out of this, we have taken the time to go back to every v2 Element and audit its control listing and set it up so that both a “simple” and “advanced” mode are available so that users can approach these Elements from either angle. For example, take a look at our control listings for the Text Element below. The “advanced” listing is on the left while the simplified listing is on the right:

Some of the primary differences that make “simple” mode different from “advanced” mode include:

• All controls are included on the same level. With advanced mode, Elements are sometimes sub-grouped to make navigating the large list of controls easier (e.g. a “Navigation Inline” element will have the “Menu” group, “Top Links” group, “Dropdown” group, et cetera). Since the simplified control listing is far less lengthy, we have opted to keep everything visible on the same level, which means you don't have to drill down into any menus to find something you're looking for.
• Consistent control groupings across Elements. All simplified controls are either grouped as a “Content” control or a “Design” control. Content controls will always appear at the very beginning of the list with design controls coming after. Amongst the design controls, colors will always be grouped towards the end. So while the advanced listings are grouped by which “part” of the element you're working on (i.e. a group of links in a menu or a dropdown), these simplified listings are grouped more by “like controls” (i.e. content, basic spacing controls, colors, et cetera).
• Conditional display of Element controls. With advanced mode, all options and controls are visible at all times so that they can be adjusted as needed. The simplified control listing will only reflect certain controls if they are available or will visually make a difference on the element. For example, if you were working on a button that had a graphic and you had it set to display an icon in advanced mode, in the simplified lising you would only see a control to alter the icon (i.e. you wouldn't be able to change it back to an image in simple mode). Furthermore, colors display conditionaly depending on if they will make a visible difference or not. For example, the simple control listing will only show a text shadow color picker if you set a visible text shadow on your Element in advanced mode.

X and Cornerstone users will see the simplified control mapping out of the box, while Pro users will default to the advanced setup. To toggle between these modes, you can perform one of two actions:

• Click on the cog icon in the bar within the builders to open the settings modal. Navigate to the “Preferences” tab and turn the “Advanced Mode” toggle on or off depending on your desired result.
• Use the keyboard shortcut Shift + Cmd/Ctrl + A to toggle between each mode without needing to go into settings modal every time. This is a great way to quickly switch back and forth between contexts depending on your workflow.

Revamped Global Settings Modal Pro, Cornerstone

With our addition of the Permissions Manager mentioned above, we needed a place to store these in-session user settings for things like how the help text or WordPress toolbar should display. We ended up rolling these into the settings modal (accessible via the cog icon in the left bar) as they needed to be readily available at any time:

After doing this, we found that it would be helpful to also incorporate some of our other secondary tools such as the Font Manager and the Color Manager into this modal as well. This makes these tools more present and available at all times so that users don't have to leave a piece of content they're working on to go make a simple color adjustment or tweak a font. The revamped Color Manager can be seen below:

Hovering over each color will reveal a duplicate and delete action, and clicking on the color will reveal the color picker itself. You can also name each color inside the color picker so that it's purpose is clearly defined. Finally, clicking the “Add New” button at the end of the list will allow you to incorporate more colors into your palette as you need them. Check out our Knowledge Base article on the Color Manager to learn more.

Similarly, the Font Manager and all corresponding options for things like Google Fonts and Typekit can be found under the “Fonts” tab:

Each item added to the list represents a font just as it did in the old Font Manager. The only difference is that to select and preview your fonts, all you need to do is click the dropdown arrow on the lefthand side of each item to reveal the drawer that displays the options to select your fonts, which you should notice from the old font manager as it is exactly the same:

Check out our Knowledge Base article on the Font Manager to learn more.

For pages you will recognize the options that were previously available:

And finally, the cheatsheet of available keyboard shortcuts and terminologies can be found at the very bottom of the lefthand navigation in the modal:

Element Updates Pro, Cornerstone

In addition to all of the incredible updates listed above, we've taken some time to introduce new features for varous v2 Elements as well as a completely revamped v2 Tabs Element in addition to our brand new Navigation Layered Element! The first new set of features we'll take a look at has to do with active link styling for all of our Navigation Elements. Whenever you add a new Navigation Element to your builders, you will find the following control group under the “Menu” section:

This “Active Links Setup” control group allows you to specify how the active links within a given Navigation Element should function, which includes:

• Current Link – determines whether or not the currently viewed page should display as an active link
• Ancestor Link – determines whether or not any ancestor link of the currently viewed page should display as an active link
• Graphic – determines whether or not the graphic should display its “end state” for any active link specified by the controls above
• Primary Particle – determines whether or not the primary particle should display its “end state” for any active link specified by the controls above
• Secondary Particle – determines whether or not the secondary particle should display its “end state” for any active link specified by the controls above

The biggest thing to keep in mind is that the first two on/off toggles determine which links within a Navigation Element are “active,” and the final three determine how various portions of those active links should function. When you play around with these options, there are many different design variations you can come up with. For example, you may want to have the primary particle always be on for active links, but leave the secondary particle interactive. This can be used to achieve a visible highlight or accented effect on page load for active links, but still use the transition of the secondary particle to give some interactive interest. Additionally, you may not wish to show any “active links” at all in a Navigation Element used in your footer, as traditionally these will only display interactions on hover or focus. There is a lot of flexibility to take advantage of from these simple controls!

Make sure to check out the new addendum video to our “Working with Navigation” article in the Knowledge Base that runs through these controls in more detail in addition to the new Sub Menu Trigger control available on certain navigation Elements (discussed later in this changelog as well).

Another big Element update includes multi-level modal navigation using our new “Layered Navigation” mechanic. In addition to the Navigation Modal Element finally receiving multi-level navigation, we've also added a completely new Element called Navigation Layered, which operates sort of as a middle ground between the Navigation Modal Element and Navigation Collapsed Element in that it features the “layered” mechanic that the modal has, but it is placed within an off canvas area when used in a top or bottom header bar or a footer bar (otherwise it is placed directly into the content).

The way the layered mechanic works is by animating out the current menu level when a sub menu link is clicked and then animating in the sub menu. All sub menu levels have a ← Back button at the top that allows you to traverse up a level (this text can be edited within the navigation Element). Below is a video demonstrating how this plays out within the Navigation Modal Element:

The following demonstrates the same mechanic within the new Navigation Layered Element:

It should also be noted that on our Navigation Collapsed, Navigation Layered, and Navigation Modal Elements that we have introduced a new control under the Menu control grouping called Sub Menu Trigger, which allows you to specify what part of a link will reveal a sub menu when clicked. Below is a screenshot of this control:

The two options available are Anchor (which means that clicking anywhere within the link will navigate to the sub menu) and Sub Indicator (which means that only clicking on the sub indicator will navigate to the sub menu, while clicking the anchor itself will navigate to the link destination). This affords a great deal of flexibility on these navigation Elements that was not previously available. One thing to keep in mind if moving the trigger to the sub indicator is to make sure that your clickable area is large enough, which you can set by adjusting the width and height.

Furthermore, our v2 Map Element now features map markers for any Google Maps setup! The map markers can be added via the sortable control located at the beginning of the Element:

Inspecting each marker will reveal familiar controls from our Classic Google Maps Element. You can specify the latitude and longitude of each map marker as well as include optional content for that marker that will show up in a popup. Furthermore, custom map marker images can be implemented for a more custom look:

When a custom map marker image is used, two “Image Offset” controls will appear, which allow you to move the marker around if needed. This is necessary for certain situations where the point of the marker is located in different positions. For example, utilizing the screenshot above, you can see that we've offset the marker on the Y axis by -50% of the marker image's height. This moves the marker into its proper position to ensure that the point at the bottom of the image is in the correct location on the map:

In other situations you may not need to move the marker at all and can simply leave the X and Y axis at 0% as seen below:

For the following image we've translated its position 50% on the X axis and -50% on the Y axis due to where the point on the graphic falls:

And sometimes you may need to use different numbers, such as this graphic that required a 50% translation on the X axis and a 40% translation on the Y axis due to it's uneven shape:

The most important thing to keep in mind when translating custom map markers is that the movement of the graphic is always relative to its own dimensions. So for a 100px square image, moving it 50% on the X axis and -100% on the Y axis means you're moving it 50px to the right and 100px up. If you ever find yourself in doubt, you can simply move the sliders to find the appropriate positioning for any custom graphics you might be using as their location will be updated in real time in the builders.

Last but not least, we're excited to finally release v2 Tabs! We've taken some time to review how we can make tabs more responsive, handle more content when needed, and overall be able to achieve more creative design possibilities. Below is a quick screenshot of the default styling for v2 Tabs:

The markup of v2 Tabs is broken down as such:

• Tabs .x-tabs – the containing element for all child markup
  • Tab List .x-tabs-list – the container holding all of the individual tabs to toggle a corresponding panel
    • The markup inside of the Tab List consists of a <ul> made up of <li> elements with <button> elements as toggles for each tab
  • Panels .x-tabs-panels – the container holding all of the individual panels of content for a corresponding tab
    • Panel .x-tabs-panel – the individual panel containing a tab's main content

The v2 Tabs Element features a much more common pattern for tabs in general that we are seeing more of across the board these days from big sites such as Google and Medium, and even popular modern boilerplate libraries like Bulma. Essentially, the tab labels are set inside of a container with overflow-x: auto; which effectively allows for infinite tabs and it is completely responsive at all screen dimensions. This also allows us to introduce some more advanced layout options for the tab labels in this horizontal space. For instance, if you click on the “Tabs” control grouping for the Element, you'll see two controls labeled “Fill Space” and “Justify Content.” “Fill Space” will ensure that when the tab labels present are less than the overall width of the container, they will grow to fill all available space for a clean, even look. “Justify Content” can be used to space tabs within that X axis in creative ways.

To learn more about v2 Tabs and what you can accomplish with them, make sure to check out our in-depth Knowledge Base article on the Element.

Numerous Updates & Bugfixes Pro, X, Cornerstone

Beyond everything listed above, one of our biggest goals with this release was to smooth out any rough edges and fix longstanding issues. You can review the individual notes in the sidebar to see what all has been changed for each product.

Regarding GDPR

This release cycle introduces some minor changes to aid you in the process of staying compliant. WordPress v4.9.6 added a new privacy page feature along with a checkbox added to the comment form. We've added styling for this new checkbox and made sure it appears correctly in all stacks.

We've also made some adjustments to provide you more control over the Google Fonts loading process. To fully disable Google Fonts without custom code, you can follow these steps:

1. Go to Theme Options → Typography
2. Enable use of the Font Manager
3. Click the Settings icon in the Bar and navigate to Fonts
4. Modify each font to reference a system font instead of a Google font

After these changes are saved, no references will be made to Google Fonts on the front end of your site. Additionally, you can immediately force Google Fonts to not load by adding this code to functions.php of a child theme:

Finally, a new filter has been added called cs_google_fonts_uri, which can be used for advanced setups that may involve proxying Google Fonts or replicating their API.