Layers 1.5 Developer Update Guide

In Layers 1.5, we introduced the following front-end updates:

  • New CSS Flexbox Grid for all elements using the Layers framework grids and spans
  • An updated HTML core structure that swaps section<span style="background-color: #f4f4f4;"> for div and vice versa for a better accessibility outline
  • Replacement of row  for grid

These changes potentially impact Child Theme custom templates and custom widgets using the old structure and classes and will manifest themselves as misaligned columns, dropped sidebars and other visual defects until your products are updated.

The changes you must make are separated into three major tasks: HTML outline, grid and masonry workarounds.

This guide will first explain the changes, then walk you through what to check. As always, we recommend looking over the changes on Github in detail to fully understand where you may need to edit your files as other additions were made to Layers such as enhanced button controls, link groups etc.

View Changes on Github

Plugin developers with a custom extension containing templates or custom widgets will need to check the following:

  • HTML structures in all front-facing templates and widgets
  • Custom CSS using framework classes
  • Widget structure, initialization and controls

Child Themers will need to check the following:

  • HTML structures in all front-facing templates
  • Custom CSS using framework classes
  • Customizer default array
  • Preset loading

The first section below explains the front-end changes and is followed by update outlines for CSS, Template HTML and Widgets to get you going.

Major changes to front-end templates, including widgets, include some HTML tag changes and implementation of the new grid classes.

HTML Outline

To ensure better SEO support for future iterations of Layers, we have converted some wrapper elements to sections or divs.

header.php

becomes

and

becomes

 

This helps the content of each of these sections outline better. Example:

  1. Document BODY
    1. SECTION (Off Canvas Sidebar)
      1. NAV (mobile nav)
    2.  SECTION (Top Bar)
      1.  NAV (Top Menu Left)
      2. NAV (Top Menu Right)
    3. Your Site Title (Site header)
      1.  NAV (header menu)
    4. Slide One Title
    5. Slide Two Title
    6. Slide Three Title
    7. Content Widget Title
      1. Content Widget Column title
      2. Content Widget Column title
      3. Content Widget Column title
    8. Post Widget Title
      1. Post One Title
      2. Post Two Title
      3. Post Three Title
    9. Contact Widget Title
    10. SECTION (Footer)
      1. Widget 1 Title
      2. Widget 2 Title
      3. Widget 3 Title
      4. NAV (footer menu)

As you can see, this is achieved without changes to the heading tags in our core widgets.  See Layers and SEO for more information on our approach to content-driven (and not code-driven) SEO.

The Row Wrapper

Currently
.row
is used as a “clearfix” or “overflow: hidden” solution and is often seen in a class string with has stuff like
.container .push-bottom
etc. The .row  class has now been replaced with grid  and move it to it’s own div  as it has to wrap columns. Why? Because we need a wrapper to pull the columns 10px back into alignment with the container. More on that in a minute.

Reference: Line 176 of core/widgets/modules/content.php

Old:

New:

Action you need to take: Replace all instances of row  with grid  and ensure any elements that use a span-  class such as <div class="span-8">  are wrappped in <div class="grid">

The Grid

Flexbox

Previously we used a manual grid system with widths and margins declared for each
span
class. In Layers 1.5,
row
is replaced by
grid
which implements CSS Flexbox  to align and auto-clear columns, creating an unbreakable grid.
flex
is declared on the
grid
class like this:

Reference: framework.css line 193

In static templates,
section
has been removed from page templates and changed to
div
, and
row
changed to
grid
.

Example rendered HTML in single.php

becomes

Margins

The new grid does away with
margin-right: 2%;
,  replaced by pixel values. Columns now use a combination of
flex-box
and
calc()
. The new grid method does away with
:nth-child
counters for clearing margins and floats. In fact, our columns don’t even use
float
anymore, allowing for better mobile compatibility.

Old:

New:

Flexbox Resources:

Calc

Calc() is used to calculate grid sizes less 20px.

Reference: framework.css line 206

We apply margin on both sides so that we don’t have to use
:nth-child
counters to clear it. This is now why
.grid
has -10px left and right margins.

As long as your markup implements the framework classes, you should not need any layout CSS. Be sure to audit your custom styling to remove overrides that may duplicate effort or affect the core grid logic.

Calc() Resources:

Responsive Changes

Columns per row differ between screen sizes.

Reference: responsive.css

Here is a breakdown of those variations:
.span-2
Desktop: 6 per row
Tablet: 3 per row
Phone: 2 per row
.span-3
Desktop: 4 per row
Tablet: 2 per row
Phone: 1 per row
.span-4
Desktop: 3 per row
Tablet: 3 per row
Phone: 1 per row
.span-5
Desktop: 2 per row
Tablet: 2 per row
Phone: 1 per row
.span-6
Desktop: 2 per row
Tablet: 2 per row
Phone: 1 per row

Thereafter anything above
.span-6
is 1 per row from Tablet down.

Headings

We have implemented a new inline text control for widget titles that moves the Aa text control from the design bar into the title field. This is to support heading tag select in Layers Pro. All headings will continue to default to H3 in Layers Core. You must ensure your widgets continue to work with Pro enabled, even if your theme or extension does not explicitly require Pro, therefore we ask that you not hard-code a heading type into your widgets markup. See Updating Widgets below for details on how to implement heading defaults and the new inline control.

 

If you have custom styling that affects grids, columns or margins, we recommend starting with complete removal, then updating your HTML to use the new framework styles. From there, if further tweaks are needed, re-add your customization one by one to test and edit classes to support
flexbox
and
calc
.

If you have yet to adjust styling for Layers 1.1.24 changes, you will also need to assess how flexbox has been implemented in the header. Specifically, ensure you do not have styles that attempt to override any of the default header or layout styling, and ensure Customizer defaults are used to set colors.

  1. View Template Changes and make necessary adjustments OR copy over the templates from the RC1 package and re-add your customizations. Now is also a good time to review your custom code to see how it might be implemented through action hooks instead of template copies.
  2. Ensure any custom jQuery is also debugged to correct selectors where needed.

Example: layers.framework.js

becomes

In most cases you shouldn’t need to over-qualify the class with the element selector and can safely remove it. Example,
section.class
becomes just
.class

3. The new

grid
wrapper is used in static templates such as template-blog.phparchive.php and archive-product.php.  Ensure
id="post-<?php the_ID(); ?>
is housed inside the
<article>
in your templates, not in the primary wrapper or loop wrapper.

4. Single.php has had the wrapper changed to a

div
and the
<article>
moved to the
span-8
wrapping just the post container.

The widgets have undergone significant changes besides HTML structure. For extensions containing widgets based on our core widgets, you may find it easier to re-modify the new widget code with your customization rather than update or change your version.

The below outlines the changes we have made so you understand how those changes impact your widgets:

With the creation of a
.grid
class, we need to tweak our HTML slightly to cater for it. The following example shows how the rendered HTML should look in a content widget or widget based on the content widget which uses repeater fields or columns.

  1. Change the primary widget wrapper containing the widget class from a
    section
    to a
    div
    and remove the
    row
    class
  2. Change the wrapper containing the widget columns from using the
    row
    class to using the
    list-grid
    class
  3. Add an additional wrapper around the columns
    <div class="grid"></div>

Old:

New:

IMPORTANT: If your div includes grid  and row  in the same string your columns will not work as expected. Be sure to only use grid

Content Widget

Widget Defaults

You may now set a default
heading-type
for your widget in the widget default array in the fonts section. Example:

Reference: core/widgets/modules/content.php line 55

Lines 105-109 have also been reduced to one line. Parsing has changed throughout the widgets, so be sure to go through the dif on github thoroughly  to see where to update this in other places.

 

Container Class

Add $this, $instance

Replace

with

$widget_container_class = apply_filters( 'layers_content_widget_container_class' , $widget_container_class, $this, $instance );

Reference:  lines 121-133

Remove row

Add Support for Darken Background

Wrapper

Reference line 135

Change
section
to
div

Headings

Reference line 153

Change

to

On line 6 above, the
heading-type
at the end should match your defaults.

Reference line 159

Change

to

On line 2 above, we use the
$heading_type
variable instead of hard-coding the heading tag to allow the heading select to work when Pro is active. This will default to your Widget default setting if Pro is not installed.

Columns

Reference line 170

Just below
<?php if ( ! empty( $widget[ 'columns' ] ) ) {
add:

Reference line 173 – 271

Remove the entire section of code from
// Set total width
to
* Set Overlay CSS Classes
(line 161 – 244 of the old Content Widget) and replace with updated code block linked above *new code is in green) Review all changes between lines 271 and 357 for the widget content markup.

Remove text control from design bar

Reference
design_bar()
beginning on line 364 of old widget to line 417 of new where we remove
'fonts'
from the Components array:

Old

New

Widget Form

Reference line 463

Elements with the
layers-form-item
class that previously used paragraphs should be converted to divs:
<p class="layers-form-item">

becomes

<div class="layers-form-item">
Reference line 476

Add the new inline text control to the Widget Title (the first
layers-form-item
div), then wrap the
rte
input with a
<div class="layers-form-item">
. If your widget does not have a Widget Title and is not a slider, lines 462 – 505 should be added.

‘show_trash’ declaration in the design bar now requires an explicit TRUE flag

Advanced Padding and Margins

Review changes beginning on line 570 for additions to
customclass
to ensure padding and margin settings under Advanced are triggered and passed to the inline CSS properly.

Post Widget

Reference: core/widgets/modules/post.php

In addition to the above considerations, the Post Widget makes the following unique changes:

  • New function
     layers_pro_apply_widget_button_styling
    added beginning on line 141
  • Additional
    clearfix
    container class added on line 224
  • New grid on lines 258 – 368 replaces 247 – 351 of old widget.

Slider Widget

Reference: core/widgets/modules/slider.php

In addition to the above considerations outlined for the Content Widget, the Slider Widget makes the following unique changes:

‘autoheight_slides’  added to checkbox defaults on line 30

 

Please use Layers Messenger to report any major bugs on this release or to get help with updating your product. Please let us know which theme or extension you authored  so we can prioritize you faster.

 

 

 

Last Updated: