Trellis Version 0.18.0 | Mv Products Help Center

The Trellis 0.18 update contains new features, bug fixes, and more. To take advantage of all the features Trellis offers for page experience and performance, update today!

Please see below for important details on Trellis version 0.18.

Trellis Version 0.18

Version Release: April 4, 2023

Article Updated: April 6, 2023

Hook Validation

When adding custom HTML to Hooks in Settings, Trellis will now perform a validation on the entered code after clicking Save. If unsupported or improperly formatted HTML is detected, a pop-up window will appear alerting the publisher.

The "back to editing" button will allow you to go back to edit the HTML or have Trellis remove it.

Additional Information

Trellis uses WordPress’ wp_kses_allowed_html( 'post' ) function as the basis for custom HTML hook validation. The full set of wp_kses supported tags can be found in WordPress Core at /wp-includes/kses.php.

On top of this set are some Trellis additions:

❗ Important: The <img>, <picture>, and <source> tags mentioned below are not allowed in the <head> hook. All other hooks support these tags.

<img> with the srcset and sizes attributes
<picture>
<source> with the srcset attribute
<style>
<meta> with the name, content, property, charset, and http-equiv attributes
<script> with the async, charset, defer, src, type, and data-* attributes
<link> with the href, hreflang, media, rel, sizes, title, type, and data-* attributes

Image Processing

In older versions of Trellis all image swapping code was housed in Trellis Core. Trellis Images was only used to generate WebP versions of legacy image formats. Starting with Trellis 0.18.0, the image swapping functionality is now in Trellis Images (while still generating WebP versions).

Other changes:

The lazy loading code for the first image in a post was changed to use eager loading. This is a recommended practice by Google since this could help with LCP scores. All other images use the browser’s native lazy loading functionality.
Updated how Trellis applies user-specified CSS on images due to recent changes in WordPress Core. User-specified CSS classes entered on images in the WordPress Editor should appear in the immediate parent tag. Due to an unexpected change in a minor WordPress release, Trellis ended up adding the classes to a tag above the parent tag. This has been fixed.

Critical CSS

Critical CSS is now automatically cleared when a user adds or updates CSS in the Customizer, and when a Trellis license is activated.
Added help text to the Trellis pane in the WordPress Editor if Critical CSS is disabled in Trellis Settings. Previously, all Critical CSS functions in the editor would just disappear.
The Purge Page Critical CSS button will now only appear in the WordPress Editor if the Critical CSS status is Success. If the Critical CSS status is anything else, the button is not shown.

Missing Licenses

Enhancements were made to notify you when an active Trellis license isn’t found. These include:

A Call to Action message will appear in the Trellis pane of the WordPress Editor if an active license is missing. "Get a Trellis License" button will take you to the Mediavine Marketplace.
The Critical CSS dot icon in the WordPress Editor will change to grey, indicating that Critical CSS is not active.
A “Critical CSS - License Required” status appears in the Admin Bar. The new status is a link that takes the user to the License tab of Trellis Settings.

If Critical CSS files exist, they’ll be kept but just not served (this could happen if a license expires). When a license is added, the Critical CSS cache will be cleared and the files will be regenerated as visitors navigate through the pages.

Trellis Comments

Added code to comments.php to prevent unbalanced HTML tags that could appear in legacy child themes when using Trellis Comments. This could happen if a visitor entered broken HTML tags in the comments box, resulting in a broken layout.
Adjusted a query for Trellis Comments to only get approved comments that populate a hidden <div> used for general SEO purposes. Trellis Comments always outputs the first 5 comments on a page (stripping all HTML tags) in a hidden <div>. In previous versions, this hidden <div> could contain unapproved comments, spam, or comments that were still in the trash, and even in scenarios where Trellis Comments was disabled.

Trellis Images

Trellis Images 0.7.0 now requires a minimum version of Trellis 0.18.0 and a minimum PHP version of 7.3 to run.

Added code to exclude WebP processing for images hosted on a CloudFlare CDN (these are recognized by cdn-cgi in the URL). Previously, images would appear broken after processing due to how CloudFlare operates. The original images from the CloudFlare CDN will now be served.
A new mv_trellis_images_stop_process filter is available to terminate image processing.

Other Changes

Replaced the hand icon used for the Hooks setting with an actual hook icon.
In Display > Images, the “Hide Featured Image from Small Screens” setting is now hidden when “Display Featured Images” is disabled. The two settings were always connected; the user interface just didn’t show the relationship.
Improved accessibility on feed pages for keyboard and screen reader users by adjusting HTML on the “Read More” link. The attributes tabindex="-1" and aria-hidden="true" were added to the featured image, hero featured image, the article excerpt title link, and the featured title link. Without these attributes, visitors using assistive technology (like screen readers) would have to navigate through a long list of links.
Resolved HTML validation errors with tag links on posts. Previously, <p> tags could appear within <span> tags, which was incorrect. The <span> in the class-post-meta.php file was changed to a <div>.
Added BlinkMacSystemFont to Trellis’ default font stack. Previously, some Chrome users could see Helvetica appear, which is not a web-safe font.