The Loops & Logic active install count has grown a lot recently and with that growth has come a growing amount of feedback from users on the Loops & Logic forum. We want L&L’s powerful templating tools to work with any WordPress workflow, so we’re prioritizing work that improves compatibility across the board while we cook up some exciting features behind the scenes for our long-term roadmap. You may not see a lot of flashy new features in these releases, but you’ll notice a changelog chock-full of small user-requested improvements. We’ve got your back!

The big picture

Here’s a highlight of the features we’re most excited about that have been released with versions 3.1.0 to 3.1.9:

New Facebook group

The Loops & Logic forum has welcomed hundreds of users in the past many months and it’s been exciting to see the community grow. Prompted by a user request, we’ve decided to create a new Facebook group dedicated to discussing news, tips, and ideas about Loops & Logic and Tangible Blocks. If you’re not a Meta-fan, don’t worry; we’re not moving away from the forum and its better formatting options mean that it will always be our home base for sharing code-based content. For those who like to find WordPress news and insight alongside their newsfeed, the Facebook group now offers a place to have more casual discussions about tools and workflows. We look forward to engaging with you whether that’s on Facebook or on the forum!

New integration with WP Grid Builder

When figuring out which data should be displayed based on the current page, Loops & Logic defaults to the WordPress-standard wp_query system. Most WordPress plugins designed to work with dynamic data use this system which means that thanks to the [template] shortcode, L&L templates can be rendered just about anywhere in any plugin or builder that accepts shortcodes.

A forum user noted that their templates didn’t get the correct context when attempting to embed a shortcode onto a card built with WP Grid Builder. Upon further investigation, we discovered that WP Grid Builder doesn’t use the global wp_query system, so Loops & Logic templates had no way of knowing what post data they should be displaying. So we built an integration for it!

To place a Loops & Logic template into a card, you can now simply grab the Tangible Template block and place it into your WP Grid Builder card. The block settings will allow you to select which of your existing templates should be rendered.

image

Updated SASS module

Our changes to the SASS module were the reason for the version number jump from 3.0 to 3.1. While the style interface may look the same as always, this was a much-needed change to keep Loops & Logic up to date with the ScssPhp compiler library to improve error handling and compatibility. The update also enables users to use not just the latest features of SASS, but CSS as well, with the style tab now allowing you to work with CSS variables, functions, selectors, and media queries.

We’ve also heard from users who were new to SASS and were confused about why their template styles may not have been rendering as they expected. Usually, working with SASS requires an additional step to compile to CSS, but one of the useful features of Loops & Logic is the ability to with SASS without the need to manage the compiling process. To help out new users who may benefit from added visibility into this step, the latest version of L&L now converts any compiler error message to a CSS comment.

New controls and syntax in Tangible Blocks

We’ve been working on new control types for Tangible Blocks for several months and we finally felt that it was time to sneak them out to beta testers in version 3.1.6. They’re still very much in beta, just like the plugin itself, but we’re excited about the direction we’re taking with these new controls. There are three exciting advancements that accompany these new controls.

1. We’re switching from relying on the builder’s controls to using our own

In previous versions of Tangible Blocks, the builder controls generally used the builder’s own native controls, meaning that instead of creating our own interface for the text control, for example, we’d rely on the text control interface that was already defined in Gutenberg, Elementor, and Beaver Builder. The benefit of this approach was that it enabled us to piggyback on advancements and styling made by the page builders themselves. The downside is that it meant that if one builder was missing a control that existed in the others, we had to develop a builder-specific customization for that control.

With our new controls, we’ve built every single one by hand. This means that we’re not limited by the interface elements available within each builder and blocks created with Tangible Blocks will have more consistent controls across each builder. This will not only make it easier to support new page builders in the future but will also pave the way for these controls to be used not just within a page builder, but elsewhere on the site, such as an options page, a modal interface, or even (eventually) on front end forms!

2. We’re improving the syntax used to refer to control values

Up until this release, all controls had a single value: the color control would output a single color value, the date control would output a single date value, etc. This meant that their values could always be output with a simple {{ control name }} syntax. But this came with two major drawbacks. First, it introduced a new syntax convention (the double curly braces) that wasn’t used anywhere else in the L&L language. And second, the syntax wouldn’t allow looping through multiple results when the control contained multiple values, which we’ll get to below.

The new syntax is explained in the documentation, but the quick overview is that controls that contain a single value (like a text or number control) can now be displayed using the Get tag.

  <Get control=my_control_name />

3. We’re introducing loopable controls

The latest version of Tangible Blocks now includes some powerful new control types, such as the repeater control and the gallery control. These controls open up a whole new realm of types of blocks you can build using Tangible Blocks. These controls can contain other controls nested inside them and their value can be looped through using the Loop tag.

For example, the markup written in the Controls tab for a repeater might look like this:

  <Control type="repeater" layout="block" name="repeater_name" label="Repeater control">
    <Control type="text" name="text_name" label="Text control" />
    <Control type="gallery" name="gallery_name" label="Gallery control" />
  </Control>

In the Template tab, the values of those controls could be displayed like this:

  <Loop control=repeater_name>
    <ul>
      <li>Text: <Field text_name /></li>
      <Loop control=gallery_name>
        <li>ID: <Field id /></li>
        <li>URL: <Field url /></li>
      </Loop>
    </ul>
    <hr />
  </Loop>

How to use the new controls and syntax

To use the new controls and syntax, simply enable this switch in the meta box at the bottom of your block template.

New control interface toggle

Keep in mind that it’s not possible to use both legacy and new controls on the same block. However, it is possible to use both legacy and new blocks on the same page in your editor.

In legacy mode, either the old syntax {{ control_name }} or the new syntax mentioned above can be used. When new controls are enabled for a block, only the new syntax is supported.

Updating directly from legacy controls to new controls in an existing block is not recommended, since any previously saved values associated with that block in your page builder might have a different format than the one expected by new controls. The safest way to migrate a block is to create a new one.

Full changelogs from versions 3.1.0 to 3.1.9

3.1.9

Release Date: 2023-04-06

  • Format: Improve handling of spaces for kebab and snake case
  • If tag
    • Deprecate “is_not” in favor of “not”, which supports all condition types and operators including “is”
    • Convert “is_not” to “not” and “is” for backward compatibility
  • Improve PHP 8.2 compatibility
  • Template post types: Fix drag-and-drop sort in post archive

3.1.8

Release Date: 2023-03-15

  • Gutenberg integration
    • Improve content filter logic to protect template HTML
      • Ensure it applies only when inside do_blocks before do_shortcode
      • Handle edge case when a template shortcode is rendered inside an HTML attribute, and its content is a URL
      • Support block themes
    • Improve getting current post ID when inside builder

3.1.7 (Tangible Blocks only)

Release Date: 2023-03-14

  • Gutenberg integration
    • Improve content filter logic to protect template HTML
      • Ensure it applies only when inside do_blocks before do_shortcode
      • Support block themes
    • Improve getting current post ID when inside builder
  • Elementor integration:
    • Fix error when using wrong control name
  • New controls:
    • Repeater: Add support for nested repeaters
    • Repeater: Add duplicate button
    • Gradient: Correct spelling
  • Style variables: Improve variable type detection

3.1.6 (Tangible Blocks only)

Release Date: 2023-03-07

  • Block controls:
    • Introduce new controls
    • Introduce new syntax for block values
  • Improve compatibility with PHP 8.2

3.1.5

Release Date: 2023-03-02

  • Calendar loop types
    • For week number, use Carbon method isoWeek() instead of format(‘W’) which adds unnecessary prefix “0” (zero)
    • Month loop type: Ensure the “year” attribute is taken into consideration; Organize how the attributes “year”, “quarter”, “from” and “to” are handled
  • Format tag: Add support for replace/with string that includes HTML
  • Gutenberg integration
    • Improve content filter logic
    • Improve getting current post ID when inside builder
    • Improve workaround for Full-Site Editor bug
      https://github.com/WordPress/gutenberg/issues/46702
  • Redirect tag: Disable when inside page builder, AJAX, or REST API
  • Switch tag: Improve converting non-default “When” to “Else if”
  • Template post types: Remove max-width to let editor take up the full available width
  • WP Grid Builder integration: Improve compatibility for PHP version before 7.3

3.1.3

Release Date: 2023-02-27

  • Add WP Grid Builder integration with Tangible Template widget
  • Embed module: Use CSS feature for aspect-ratio, and remove padding-top workaround
  • Gutenberg integration
    • Improve compatibility with Full-Site Editor, which is still in beta stage
    • Solve issue with shortcode inside pagination loop – Protect template HTML result from Gutenberg applying content filters, such as wptexturize and do_shortcode, after all blocks have been rendered
  • Sass module: Solve issue with first style rule selector – Prevent compiler from adding @charset rule or “byte-order mark”, which are only valid for CSS stylesheet as a file, when it detects a multibyte character within the Sass source code
  • Table module: Make column filter case-insensitive, and add support for multibyte characters
  • Template post types
    • Add support for user option “Disable the visual editor when writing” by preventing it from filtering template content
    • Improve generating template slug from title, including converting em dash to regular dash

3.1.2

Release Date: 2023-02-01

  • Improve compatibility with PHP 8.2
  • Loop: Improve logic to set current post as loop context for templates loaded inside shortcodes and builder-specific post loops, such as Elementor Loop Grid widget and Beaver Post Loop
  • Plugin framework: Fix invalid hook name of ready action specific to module and version
  • Post Loop: Add alias “current” (same as “today”) for parameter “custom_date_field_value”
  • Taxonomy Term Loop: Support multiple IDs for parameter “post”

3.1.1

Release Date: 2022-12-30

  • Loop: Improve getting default loop context for search results archive
  • Sass module
    • Upgrade compiler library to ScssPhp 1.11.0
      • Improve compatibility with newer CSS features such as variables, functions, selectors, media queries
      • Improve compatibility with PHP 7 and 8
      • Improve error handling
    • Remove Autoprefixer and its dependency CSS Parser; Internet Explorer no longer supported
    • Improve passing Sass variables – Handle all known value types to be compatible with new compiler
    • Convert any compiler error message to CSS comment
  • JavaScript and Sass variable types: Make default value type “raw” (unquoted) instead of “string” (quoted)
  • Template post types

Leave a Reply

Your email address will not be published. Required fields are marked *