Update: Custom Layouts 1.3.0

This one is a bit of a special release.

While previous versions have mostly revolved around improving the admin UI and workflow, this release aims to add features that open up a ton of options for creating dynamic templates.

The driving force behind all this you (didn’t) ask?

New template elements

1. Custom Field

This supports native WordPress Custom Fields and has 3 formatting options:

• Text – display the Custom Field as is, or restrict its length by number of words / characters, add a custom ellipsis.
• Number – format to number of decimal places (up to 4), choose custom comma and period characters for i18n
• Date – Dates can be formatted according to a few preset options as well as allowing custom formatting

We also wanted to put a bit of extra effort into making this control easy to use – so we’ve opted to use a customised autocomplete control for choosing your custom field key – that means you can copy and paste your custom field names (for power users), but you’ll also get a suggestion box to help you choose your custom field more easily.

Advanced Custom Fields + Pods users – custom fields for both plugins are supported, but currently these are only single value custom fields (ie, where a custom field has a string, date or numeric value). We will be improving integration with this (I’m looking at you relationship + repeater fields 👀) – for now, you can always use their respective shortcodes in our new text element.

2. Taxonomy

This one we wanted to ship with release, but it proved to be a bit more tricky to implement.

You can now select any taxonomy, or combination of taxonomies and then merge the terms together as one list – you can use multiple taxonomy elements in a template and seperate them out. There are also design controls for the individual taxonomy terms – so you can completely customise the look and feel of this element.

3. Text

Well this is a simple one, its a plain text box to enter text… ahem… and it’s not even Rich Text (that’s coming)… But what makes this powerful is it also supports shortcodes.

This means you can hook in any shortcode here and start extending.

More CSS units / better at responsive

We’ve upgraded some admin controls to use the Gutenberg BoxControl Component. This means, for margin, padding and border radius, across all elements, you can now use additional CSS unit types, independently for each value:

• px
• %
• rem
• vh
• vw

This opens up a ton of design possibilities and allows for better responsive designs – we finally have scalable units.

Toolbar Button – Full width / auto width

We’ve added a new toolbar button for most element types. This sets the container width to wrap around the content, or to fill the available width of the template – you will see the effect on any elements that have a background color applied.

That’s it for now – I think we’ve covered the main changes in version 1.3.0.

• View the full Changelog
• Get the Custom Layouts plugin
• Article: Creating the Custom Layouts Plugin

What would you like to see next?

Some ideas floating around at the moment:

• Website, demos, docs (these are coming very soon)
• Modernise the admin UI (don’t use classic post meta boxes when editing templates)
• Onboarding – make it easier to understand how everything works together (welcome screen?)
• Make our Template Elements available as blocks for FSE
• Make Blocks available in our Template Editor
• Elements for rows + columns

All the things on the roadmap:

• Improve performance and load speed by providing an option to use CSS Grid for layouts + masonry
• Support additional CSS unit types in more places
• Elements for WooCommerce
• Elements for ACF
• More layout elements (possibly use the block library)
• Additional hover options
• Additional font options – either Google fonts or the Gutenberg api which looks like it’s coming soon
• Social/sharing elements