Cornerstone 7.4.0, Pro 6.4.0, and X 10.4.0 Beta (RC)

Beta
#1

Hey all, we’ve got a great release on the horizon with lots to go over. The poll results gave a resounding #1 to updating the Query Builder and Loopers, with #2 Font Awesome 6 and smaller frontend footprints a solid second. As result, this is Cornerstone 7.4.

We are looking for your feedback in all areas as always, but for the Beta especially in the areas of the Query Builder, External API, and Loopers in general. The areas where we need more sites tested is with the Font Awesome changes, Dropdowns, Modals, Off-canvas’, and making sure the new features are working for you. I will be posting a change log under this.

Another idea we are starting this cycle is the Cornerstone Beta plugin. Download here once you click the Beta checkbox and save. This plugin will update the themes and plugins based on the current beta. Hopefully no more manually updating the Beta on your test sites. If there is no beta running it will download the normal packages, however you should deactivate if you are not testing anyway. More notes here https://theme.co/docs/test-the-beta

Pressed for time? Try out most of the new features here.

Font Awesome 6 + Font Awesome SVGs

Our latest release now ships with Font Awesome (FA) 6. This also includes a new FA loading mode “SVG”. Prior to this release all FA icons loaded through the “Webfont” method. This option is still available and will actually be the default if you upgrade a site with a version prior to Pro 6.4 / CS 7.4 / CS 10.4. SVG loading is what we intend on using as the new default as it actively loads less resources on the page, provided you are not displaying hundreds of icons on your page. This is all managed in Theme Options. We also have support for the “Sharp” icons. We have also changed how FA loading is managed, further limiting RAM provided you only enable the Icon types you intend on using.

This project ended up taking longer then expected, as we ended up going through every X template to make sure we weren’t leaving any of the codebase behind.

image

Super Duper Loopers

This release quite frankly pushes the boundaries of looping technology. With the new Looper Provider API, not only will you see more Loopers from us (as you’ll see in this release), but with this addition hopefully we’ll encourage other developers to integrate to everybody’s favorite builder. There are also a number of small improvements that added together mark the start of the Looper Renaissance.

Meta Query Builder Support

Finally, a way to search by Meta Fields. This update also includes a way to sort by those fields either in this section you see here or in the “Order By” section. This as well as the “External API” Theme Options section, demonstrate the new control type “list” which was available to Parameters already, but now supported by the Element Control API.

image

External API

New to the Cornerstone world, The External API “Advanced” feature. Loop or display data from an external endpoint API like an RSS Feed, OpenAI, or even Pokemon. There is a new template added when this feature is enabled called “API Tester”. We will have videos covering this, but you want to start here to make sure you actually sending the request correctly. In the Theme Options this also adds a “Global Endpoints” editor. Easily manage request that use similar structures (API Keys in the header etc…) and extend from that creating quick integrations to any External API.

This is not enabled on the Beta. Currently GraphQL does not have syntax highlighting, but we are leaving Beta with that feature complete. OAuth and more advanced authentication methods are a down the line thing, but we’ll prioritize based on our next Poll.

Read the Docs here! There are security guidelines there as well as some other goodies.

Be the very best… with a sample Pokemon Page. Gotta loop them all (Standard JSON External API). If you are lost use “Ignore Conditions” in the preview manager.
https://theme.co/app/uploads/share/external-api/pokemon.tco

NASA Image of the Day. (XML RSS Feed integration). This is also in the Element Library under “Advanced”.
Note, since I started NASA has been updating their system and this feed might be down. Long term we’ll setup our blog to have an RSS so we can guarantee you a working example. Word has it they are converting ther Space Shuttles UI to use Cornerstone.
https://theme.co/app/uploads/share/external-api/nasa-image-of-the-day.tco

CSV Looper

A welcomed addition to Cornerstone and especially Cornerstone Charts. CSV files are actually accepted by WordPress by default so this ended up being a quick one. We also have a new Element Control API type file. After a full release we will be releasing Presets for Cornerstone Charts, that will get you started with CSV based data quick and easy.

image

Linked Product Loopers

Upsells and Crossells Loopers join the movement. CS Element Prefabs that share parity with the WooCommerce templates for each are in the works.

Inner Dynamic Content

Support for {{dc:post:title post=”{{dc:looper:field key=’post_id’}}”}}. This will expand Dynamic Content functionality significantly by allowing you to reference dynamic data with dynamic data. Great addition and something you will see in our future templates.

In Search of Mobile Superiority

Internally we used a library called “Perfect Scrollbar”. This library ended up causing issues with Off canvas elements that needed a scrollbar, forcing you to tap twice on an iOS device as well as having a different looking Scrollbar compared to the rest of the page. The result of this removal is less JS, more consistent behavior, and less issues.

“Disable Body Scroll” has also been redone. A proper implementation of this needs to actively prevent all overflow on the Body/HTML tag to completely the lock page on mobile. Our new version of this is based loosely on Redfin’s and AirBNB’s modal elements.

Dropdowns now use “display none” to have proper lazy loading of images inside a dropdown, and to prevent the dropdown from changing the page size when it is closed. This system will eventually be brought to all toggleables as the issue with lazy loading occurs on all those elements.

Misc Bigger Changes

  • A large number of PHP 8.2 deprecation removals
  • Our shortcodes store the Post ID, a number of plugins like Yoast failed to work correctly without knowledge of the post ID
  • sliders, google maps, text typing have been separated to their own files to lessen frontend builds
  • Element scrolling when you clicked and added was very slow to the point of slowing down the entire App. You should have a noticeably improved App performance experience

Have fun! Thanks a bunch!

9 Likes
#3
  • Feature - Inner Dynamic Content. EX {{dc:post:title post=’{{dc:looper:field key=“post_id”}}’}}
  • Feature - Hover Intent timing for Dropdown can be controlled in the “Setup” section
  • Feature - Code Editor “Line Wrap” preference added
  • Feature - Code Editors have a “Dynamic Content” button
  • Feature - Accordions have a “Scroll” control, which will either scroll the page for all devices or just mobile devices
  • Feature - RVT Reset control added to Modal, Off Canvas, and Dropdown elements
  • Feature - Rich Text Editor has a preference to use your sites global colors instead of TinyMCE default
  • Feature - Global Colors has a Dynamic Content selector
  • Feature - --x-body-scroll-active-bar-size root property added that will be a pixel value of the size of scrollbar. Browsers like Google Chrome push the page based on it’s scrollbar size. This prevents the page from jumping when “Disable Body Scroll” is in use and is only a non zero value when the page is locked
  • Feature - file Control type added to Element Control API
  • Feature - Looper Provider API. See https://theme.co/docs/looper-api
  • Feature - CSV Looper
  • Feature - External API Looper and Dynamic Content (Beta Feature)
  • Feature - Meta Field filtering and ordering added to Query Builder
  • Feature - Loop Keys control added to Array type looper providers, which allows you to use a string indexed array, turning {{dc:looper:index}} into the string index
  • Feature - Font Awesome icons can load as SVG or Webfonts
  • Feature - Map and Map Marker element has looper support
  • Feature - Default Element insert preference brought back from CS 6
  • Feature - Preference to either open the element library or insert your default element
  • Updated - Font Awesome updated to Font Awesome 6
  • Updated - Pro5 to Pro6 uses the Raw SQL migration by default after numerous issues with changing the post_type with internal WordPress update post function. See https://theme.co/docs/pro5-to-pro6-migration
  • Updated - Slider scripts have been moved to it’s own file
  • Updated - Deleting anything in Cornerstone sends it to the trash instead now
  • Updated - Cornerstone App Page uses the sites Favicon by default, not Cornerstone’s favicon. There is now a preference to control this
  • Updated - Audit and refactor of non-passive mobile events
  • Updated - Preferences has been moved to a floating window. This is also a Preferences button on the toolbar which can be hidden in the preferences
  • Updated - Toggle hashes now actively change the URL with the hash, including removing the hash when a toggle hash is closed. This also a fixed a bug where opening a toggle hash, would leave the button in an active state indefinitely
  • Updated - Elements has been split apart from “Standard” and “Dynamic” to a handful of other group in an attempt to make the element list more digestable
  • Updated - Over a thousand PHP 8.2 deprecations removed. More to come
  • Updated - Text typing, Sliders, and Google Maps have been split into their files to lessen default JS loads
  • Updated - Our shortcodes now add the post ID, otherwise plugins like Yoast could not render our content properly. This requires saving the page again in Cornerstone
  • Bugfix - When going from the default styling of an element, to the non-default, back to the default via breakpoints, the default value that was on a breakpoint would not work
  • Bugfix - Card Element required two taps to transition on mobile
  • Bugfix - Card Element that was tapped on a touchscreen laptop, would not work with the mouse after touching the screen
  • Bugfix - Dropdowns use “none” as their display to prevent causing double scrollbars when the dropdown is larger then the page
  • Bugfix - Value List Control (Color, Font Manager, and Custom Attributes) was very hit or miss when it came to drag and drop positioning
  • Bugfix - Scrolling to an element in the preview either from a click or from creating an element was causing performance issues. It was also taking it’s sweet time to scroll the page
  • Bugfix - Sticky bars with more than one bar, would almost always give you an incorrect value for fixed_top_offset which is used in a number of different features
  • Bugfix - WooCommerce Variable products would give you a sale price value for {{dc:woocommerce:product_regular_price}}. This now uses get_variable_product_price internally
  • Bugfix - When a Search Modal opened on a mobile device, the keyboard would often be hiding the search input
  • Bugfix - Going from 0em to greater then 5px on text elements would cause the Empty Element indicator to display and never be hidden after changing
  • Bugfix - You could not use 0 as a searchable key in cs_get_path. Example {{dc:looper:field key='choices.0.message'}} which grabs the first index of a choices array
  • Bugfix - Tabs inside a tabs elements would not render the styling of the child tabs correctly in the preview
  • Updated - Removal of Perfect Scrollbar which fixes these final issues, and removes about 15kbs of JS
  • Bugfix - iOS devices required two taps to click anything in an Off-Canvas element or Modal Elements if that element had a scrollbar
  • Bugfix - Clicking a modal scrollbar would close the modal. You were almost always clicking the body scrollbar, not the modal’s scrollbars
  • Bugfix - The scrollbar between the body and Off-canvas elements was different

Cornerstone Standalone now has Font Awesome controls in the theme options tab

7 Likes
#4

Do you have an example for the new external api provider with an rss feed from another wordpress site?

#5

Change the URL parameter for the RSS Feed template to https://your-wordpress-site/feed/. It’ll work minus the featured image which I don’t think will send without an additional plugin. More info here.

1 Like
#6

That works like a charm. Even if the API tester element wrote:

screenshot

But i added it to the allowlist, and it works! And it show’s this error even with your nasa demo rss feed example.

#7

Create another topic and I can take a look. I have a feeling you need to add the protocol at the beginning of your Allow List entries.

#8

Beta 2!

  • Updated - Pressing “Tab” on a modal or off-canvas would default the close button as the first input to focus on
  • Bugfix - Modals styling was off due to a bad class name, and not utilizing flex-wrap
  • Bugfix - When going from a border, to a zero width border, back to a normal border. The final border breakpoint would not show up and remain transparent
  • Bugfix - Font Awesome Brands shim was not allowing you to use alternative logo art
  • Bugfix - Font Awesome shim was not using correct arrow icons, and chart icons
  • Bugfix - Font Awesome was not sending version info, resulting in FA5 being used based on browser cache

In 6.3.10 branch

  • Feature - Dynamic Content for Total User counting
  • Updated - Date based dynamic content was not using localized wordpress date function
  • Bugfix - Scroll hashes positioning on the X headers were incorrect if you were on mobile
  • Bugfix - Screen reader responses CSS added to blank and starter stacks
  • Bugfix - Stack API supresses non-useful file_exists warnings
2 Likes
#9

Beta 3!

  • Feature - Layout specific assignments can be used as show conditions depending on the document you are editing
  • Feature - External API Raw return type
  • Updated - Icon picker in App infinitely scrolls
  • Updated - Default layout element preference renamed to not mysteriously bring back old preferences from Cornerstone 6 sites
  • Updated - Border added to code editors when in a list editor control
  • Bugfix - Disable body scroll was jumping the page on mobile devices that were not logged in
  • Bugfix - If you created and saved a global endpoint. You could not add or duplicate new ones after you reloaded the App
  • Bugfix - Better object support for the Parameter control type choose
  • Bugfix - The generated CSS for divs used a double class selector, which would overwrite custom class CSS no matter the placement
  • Bugfix - The gap element with horizontal enabled was broken
  • Bugfix - Parent page selector was mistakenly in breakout mode if there was no parent page
  • Bugfix - Dropdown hover intent was only working on the navigation type dropdowns
  • Bugfix - Dropdowns with aggressive hover intents did not handle rapid mouse movements correctly
  • Bugfix - Parameter dynamic content was matching images incorrectly, (Ex 11:00 or other times of days that also related to an attachment ID)
5 Likes
#10

RC1!

  • Feature GraphQL Syntax highlighting support
  • Feature file can be used as a parameter type.
  • Feature Modal Ignore Side Padding control
  • Updated External API forcibly removes colons in the key property to prevent you from messing up.
  • Updated Menu icon selector uses the datalist input to fix loading issues with the select input.
  • Updated External API Debug mode sends is_cache in the info object.
  • Updated CS Settings Advanced had a misc dot due to not overwritting list-style
  • Bugfix Upsells and Crossell elements that were empty caused this weird infinite jumpy-ness in the preview
  • Bugfix When initially creating a choose parameter that uses an object as the initial value, the control would still display [object object] until you reloaded the app.
  • Bugfix Meta Query addition was not checking if the looper provider was actually the query builder
  • Bugfix Revert of "When going from the default styling of an element, to the non-default, back to the default via breakpoints, the default value that was on a breakpoint would not work" This caused a number of issues and will need to be looked at again at a later date.
1 Like
#11