The fourth iteration of Loops & Logic is built on a new foundation that allows for easier and faster development of new features. We’ve already bundled some exciting new additions, so read on to find out what’s new.

The big picture

Here’s a highlight of the features we’re most excited about that have been released since version 4.0.0:

Check out the changelog below for all the details.

Preview your templates

Version 4.0.0 includes the foundation for template previews. These can easily be toggled on or off by clicking the “preview” tab in the editor interface. We’ve seen plenty of users creating templates directly within the interface of their favorite editor simply because this approach made it so much easier to preview your work. The downside to this approach was that by working with inline templates in the editor, users missed out on the ability to add SCSS style rules, assets, reusable and nested templates, and all the other benefits of using L&L’s Template post type.

Today, that compromise is a thing of the past. The preview option allows you to see your changes in real-time directly within the template editor interface.

image 1

New code editor experience

As teased in the previous release, the new editing interface built around CodeMirror 6 is now enabled by default when working in L&L’s template post type interface, Gutenberg, or the ACF Template field. This new editor includes plenty of new convenience features including font and theme settings, a better search-replace interface (with regex!), code completion, and more. The settings are largely default for now, but our team is working on adding L&L-specific syntax suggestions in the future. And if you’re ever feeling lost, you can click on the “help” button in the bottom right corner of the editor to find some useful options and shortcuts. Try out ctrl + alt + f to automatically indent and structure your template!

Note that the old editor is still used for Elementor and Beaver Builder while the integration is being completed.

Public GitHub repository for easier collaboration

L&L now lives on GitHub. This new repository for Template System source code and other parts of the project will allow for a better developer experience and simpler social collaboration. Join the conversation and contribute to the project by creating new issues, pull requests, and discussions.

Bulk actions for your templates

Simple, yet satisfying. Version 4.0.0 includes bulk actions for templates, allowing you to publish, organize, or trash multiple templates in just a few clicks.

image

Generate CSS utility classes on demand

A new experimental style engine called UnoCSS is included in the latest version of the plugin which unlocks flexible and powerful Atomic CSS workflows. Similar to Tailwind, this feature allows template developers to generate CSS rules from utility classes found in their HTML templates. On the front end, the generated styles are minified together, removing any redundant rules. Take a look at the example below demonstrating how easily predefined classes can be loaded up on demand without needing to manually add them to L&L’s style tab. Try this out for yourself by enabling the feature in the plugin settings.

fe829e761ef94be06e3fcfe2eb41b63fb96369de

Full changelog from version 4.0.0

4.0.2

Release Date: 2024-01-18

  • ACF integration: For relational fields, apply loop query parameters such as sort, order, paged, and exclude
  • Editor: Change key map to expand Emmet abbreviation to Shift+TAB, to prevent conflict with TAB to select autocomplete suggestion
  • Framework: Improve plugin settings page styles
  • Paginator: Improve how AJAX script is loaded
  • Post loop: Support use of exclude and include together, which is not natively supported by WP_Query

4.0.1

Release Date: 2024-01-04

  • Fix issues related to code reorganization: Mobile Detect and WP Fusion; Add integration tests to ensure no regression

4.0.0

Release Date: 2024-01-03

  • Documentation: Reference pages for developers and contributors, with technical details of how the codebase is organized.
  • Editor: New code editor based on CodeMirror 6 is enabled by default for template post types, Gutenberg, and ACF Template field. The old editor is still used for Elementor and Beaver Builder until integration is complete.
  • Framework and Modules: Features have been organized into modules which can be independently built, documented, tested, and optionally published. This replaces the previous Plugin Framework and Interface module.
  • GitHub repository: New home of the Template System source code and project, with better developer experience and social collaboration. Welcome to start new issues, pull requests, and discussions.
  • Testing: Improve coverage of unit tests, and prepare foundation for end-to-end tests with headless browser and WordPress environment in Docker. This is an on-going effort to exercise and verify all features of the plugin.
  • ACF integration: Add Field tag attribute “acf_textarea” to apply formatting based on field settings
  • Archive screen: Add bulk action to move selected posts to trash
  • Assets edit screen: Improve documentation
  • Atomic CSS: Generate CSS utility classes on demand.
    Similar to Tailwind, this feature uses a style engine called UnoCSS to generate CSS rules from utility classes found in an HTML template, every time it is saved. On the frontend, the generated styles are minified together, removing any redundant rules. Enable in plugin settings.
  • Edit screen: Add Preview pane with auto-refresh
  • Editor: Hyperlink extension – Add clickable link icon next to a valid URL; Improve color picker
  • Import/Export
    • Add export rule to include/exclude template categories
    • Update PNG Compressor with better support for Firefox
    • Use compressed format (PNG) by default
  • Show admin menu, edit screens, and template editor (Gutenberg, Elementor, Beaver) only to admins with unfiltered_html capability. On multisite installs, by default only network admins have this capability, not subsite admins.
  • Update included libraries
    • HJSON, Select2, Chart.js, Mermaid, ..
    • Prism: Update library to 1.29.0 – Replace Clipboard.js with browser-native navigator.clipboard

Leave a Reply

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