Version 7.0 of Ajax Load More was released earlier today. This major release focuses on a complete refactoring of the rendering functionality of the plugin.
This refactoring may introduce a breaking change for some websites with the removal of the transition_container parameter. Removing this parameter leads to a structural change in the rendered plugin HTML by removing the .alm-reveal div.
If you are using the Filters, SEO, or Paging add-ons please be sure to update these add-ons along with updating the core Ajax Load More plugin to avoid any display issues.
Note: Should you need to rollback the core Ajax Load More plugin, use the WP Rollback plugin.
Keep reading to discover what’s new in 7.0 and what’s coming up in the next release.
🔥 What’s New in 7.0
Removal of Transition Container
Since its inception, Ajax Load More users have been asking to remove the <div class=”alm-reveal” /> containers that were added with each Ajax request. The transition container was primarily used to fade in the data returned from the Ajax request and served no other purpose.
In Ajax Load More 7.0, the transition container has been completely removed from the core plugin and add-ons and extensions. Removal of the transition container produces valid HTML, standardizes the overall content display across all add-ons, and allows for future enhancements to be added with greater ease.
Updated HTML structure in Ajax Load More 7.0
Unfortunately, this structural HTML update may cause CSS and/or layout issues for some websites. Adding backward compatibility for this change was not possible while still aligning with the goal of the update which was to make the plugin more maintainable going into the future.
Notes:
- Users who previously used the transition_container_classes parameter to inject custom CSS classes onto the container, these classes will now be added to the parent .alm-listing element in the Ajax Load More listing.
- You may need to adjust your custom CSS rules if you had been previously targeting the .alm-reveal element.
- The transition_container parameter has been removed.
Please don’t hesitate to open a support ticket or reach out in the Live Chat if you require assistance after updating.
Transition Delay
With the removal of the .alm-reveal transition container, we were able to add an option for a transition loading effect for rendering the Ajax loaded content.
By using the transition_delay parameter, Ajax Load More can delay the rendering of each post incrementally which creates a staggered loading effect for the end users.
Other Improvements and Bug Fixes
- NEW: Added new alm-is-loaded class that is added to the main ALM container after the initial Ajax request.
- UPDATE: Improved JavaScript code quality and readability which is key for long-term maintenance and sustainability of ALM.
- UPDATE: Improved content loading for infinite scroll and when using Paging add-on.
- UPDATE: Improved Masonry loading and transition timing.
- UPDATE: Removed the transition_container_classes parameter.
- UPDATE: Removed legacy browser polyfills and helper functions to lower the overall compiled JS size.
- UPDATE: Reduced Ajax requests on initial page load with the Paging add-on. Previously the add-on dispatched 2 requests on page load, the first retrieved the total number of pages and then the second fetched the data.
What’s Next
- WordPress Blocks
Work has started on multiple custom Ajax Load More blocks. The first block will be for rendering the core ALM listing and then following that will be blocks for displaying Ajax filters with the Filters add-on. - Shortcode Builder
An updated Shortcode Builder refactored with React and available in the block editor. - Query Block
Add compatibility with the core WordPress Query Block.
Let us know what you think about the changes in Ajax Load More 7.0 in the comments below.