✅ 🔥 Elementor v3.22 Beta Release 🔥

[avivu]

===========

Beta 6 UPDATED - PLEASE READ BELOW!

===========

Hey Beta testers, 👋

Elementor 3.22 beta is now available, and we would love to hear your feedback on the new Off-Canvas Widget. You can now place a Container anywhere on your page and open or close it by clicking on a connected link. This version also includes some drastic performance improvements that will reduce memory usage from 3MB to 8KB, and the Time To First Byte (TTFB) metric improves by 33%-70%.

We encourage you to try out 3.22 beta and provide us with your thoughts on our latest additions, which include:

• [Pro] Off-Canvas Widget
• Optimized Element Caching
• And More!

 

[Pro] New: Off-Canvas Widget Interactive Layouts

The Off-Canvas Widget allows creators to design interactive page layouts and engaging user experiences with containers that are opened by clicking on a connected link. To use the Off-Canvas Widget, place it anywhere on your page, and click the “Editing Mode” control in the Editing Panel to open and close it in the Editor. As a new addition to nested elements, its content area functions as a Container, allowing you to build and design any layout.

Once you’ve positioned your Off-Canvas Widget, connect it to a link input from a different widget much like setting a dynamic tag. If you have multiple Off-Canvas Widgets on the page, they will appear as “Off-Canvas Widget 1” or “Off-Canvas Widget 2,” etc according to their position on the page. Then choose whether you’d like the link to trigger the open, close, or both behaviors. Note that the link connected to the Off-Canvas Widget must be on the same page or site part as the Widget itself. For instance, if you want to activate the widget from a link in the header, the widget must also be placed in the header.

The new widget also includes built-in professional design capabilities to help you stay on brand. In the editing panel under Content > Settings, you can personalize the widget’s entrance and exit animations style and duration. You also have controls to dictate the interaction's behavior, such as setting when and how to exit the overlay, preventing page scrolling. Additionally, you can define the Container's HTML tag. In the Style tab, you can customize the Off Canvas Widget’s appearance as you would with any other Container.

To activate the new feature, activate “Nested Elements” by going to WordPress Dashboard → Elementor → Features.

How to Test It:

Create Off-Canvas Widget

1. Ensure the "Flexbox Container" and "Nested Elements" features are activated by navigating to the Elementor menu in WordPress → Settings → Features.
2. Create a new page and add the Off-Canvas widget to the Editor.
3. Ensure the off-canvas container area opens automatically.
4. Add widgets to the off-canvas and design the layout to fit your needs.
5. Explore the Layout options to adjust the off-canvas's position, width, and height.
6. In the Settings section, add Animation and configure the Interaction options.
7. Navigate to the Style tab to style the main container and the overlay.

Trigger the Off-Canvas to Open by Clicking

1. After creating at least one off-canvas on the same document (Page, Header, etc.), drag a heading to the page (or any widget with a dynamic link control).
2. Click on the Dynamic Tags icon in the link control.
3. In the Dynamic Tags popover, scroll down to the Actions section and choose "Off-Canvas."
4. After choosing the dynamic tag, click on the wrench icon.
5. Choose the desired action in the settings: Open, Close, or Toggle.
6. Select the Off-Canvas you want to trigger.
7. Ensure the Off-Canvas is triggered by the link in both the Editor and the front end, and verify everything works as expected.

 

Performance Improvements

Version 3.22 includes major performance improvements that will skyrocket your Google lighthouse scores and drastically cut loading time. We also added a new Performance Tab to WordPress Dashboard > Elementor > Settings so you can easily access and activate stable performance features.

Element Caching

Elementor 3.22 introduces a new caching feature for Elementor and Elementor Pro widgets. Internal performance tests show dramatic differences when comparing the same website with and without the new caching feature; memory usage decreases from 3MB to 8KB, and the Time To First Byte (TTFB) metric improves by 33%-70%.

This is achieved by storing the widget's output on servers after they are fully rendered for the first time. This allows subsequent visitors to load them without needing to fully render the widget code again. To avoid caching unnecessary data, the feature distinguishes between static and dynamic widgets, excluding dynamic content with visitor-specific information from being cached. You can also change the default setting of a specific widget by activating or deactivating the “Cache Settings” control added to the Advanced Tab in your Editing Panel. Note that the Cache Setting can’t be changed for the following widgets: Container, Section, Column, Inner Section, and Off-canvas.

To activate the new feature, activate “Element Caching” by going to WordPress Dashboard → Elementor → Features.

Replacing JS libraries with native JS

This version continues the effort to clean up your website's code by replacing external JavaScript libraries with native JS-based solutions that achieve the same results with less code. The first library that has been replaced is waypoint.js, which executes JavaScript functions related to user scrolling. Replacing this JavaScript library reduces unused JavaScript by 18KB, improving frontend performance and SEO scores.

To maintain backward compatibility with third-party addons, the library will remain on Elementor for the coming releases, but will only be activated if Elementor addon developers set it as a dependency.

New Performance Tab

As more performance improvements mature into stable features, there has been a growing need to concentrate them all in one spot for easy access. In version 3.22 onwards, all stable performance features can be activated or deactivated from the new Performance Tab, which can be found in WordPress Dashboard > Elementor > Settings > Performance. We recommend exploring these features and activating the ones relevant to your website to help improve your website’s performance.

 

---

More Improvements

Free version

• New: Introducing Element Caching experiment - Enhance site speed by caching elements for faster rendering
• New: Introducing the Performance Tab - Centralizing all stable performance features in one accessible location (✅ Dedicated section for performance settings in Elementor #21194)
• Tweak: Updated Google Fonts list with 170+ new fonts (✅ Add the "Shantell Sans" Google Font - [ED-14579] #25095)
• Tweak: Improved Elementor translation functionality with just-in-time translation loading (props @swissspidy, ✅ 🔣 🔃 📚 Translations loaded too early (PR #27200) - [ED-14578] #27199)
• Tweak: Replaced waypoints.js library with the native Intersection Observer API
• Tweak: Changed child containers Content Width to Full Width as default
• Tweak: Reorganized User Preferences panel for improved user experience
• Tweak: Hide icon position & spacing controls if there is an icon but no text in Button widget
• Tweak: Extended Alignment and Position capabilities in Button widget
• Tweak: Implemented CSS logical properties to Icon Spacing control in Button widget
• Tweak: Implemented CSS logical properties to Icon Position control in Button widget
• Tweak: Promoted Grid Container feature to Stable status
• Tweak: Activated Optimized Control Loading by default for new sites
• Fix: "Exit to" functionality is not working with the Editor Top Bar (✅ Apply "Exit to" User Preferences to the new Editor Top Bar > Exit to Dashboard button - [ED-14305] #22828)
• Fix: Row-reversed direction is not working on mobile portrait breakpoint in Container (✅ 🐞 Row-reversed not working in mobile view (portrait mode). #23710)
• Fix: Fatal error appears when updating a page with Tabs widget
• Fix: Transparency indicator not visible in UI Light theme for Color Picker

Pro version

• New: Introducing Off-Canvas widget - create engaging and creative layers triggered by a link (✅ 🔗 🚀 Feature Request: Off Canvas Widget (Merged with #21769) - [ED-13937] #6225, ✅ 🔗 Add a new Nested Off Canvas widget (Duplicate of #6225) - [ED-13937] #21769, ✅ 🔗 Off Canvas Widget (Duplicate of #6225, #21769) - [ED-13937] #25770)
• Tweak: Added option to remove 'User IP' and 'User Agent' from the form submissions metadata (✅ 🕵️ 🐞 Form Submission is not GDPR friendly - [ED-14127] #14285)
• Tweak: Replaced waypoints.js library with the native Intersection Observer API
• Tweak: Extended Alignment and Position capabilities in Form widget
• Tweak: Moved icon View control to style tab in Flip Box widget
• Tweak: Moved icon View control to style tab in Call to Action widget
• Tweak: Optimized Form widget to eliminate unnecessary markup when the button icon is empty
• Tweak: Optimized Posts widget to eliminate unnecessary markup when load more button text is empty
• Tweak: Remove placeholder arguments from URL controls
• Tweak: Implemented CSS logical properties to Icon Position in Form, Posts and Menu Cart widgets
• Tweak: Activated Display Conditions feature for existing sites
• Tweak: Activated Taxonomy Filter feature for existing sites
• Fix: Icons are now part of the link in the Menu Widget (✅ 🐞 Icon is not linked in nested Menu widget - [ED-13657] #24298, ✅ Mega Menu - Clickable icon and title together - [ED-13657] #25112)
• Fix: PHP error appears in the editor when using Loop Grid in an archive template
• Fix: UI glitch on Icon Position control in Paypal and Stripe Buttons widgets
• Fix: Icon Position control RTL issue in Hotspot widget

---

How to Install the Beta Version

If you still haven't enabled beta testing in Elementor, please follow these steps:

1. Go to Elementor > Tools > Versions
2. Enable the beta tester feature
3. Go to Dashboard > Updates and update to the latest beta version.
4. This will set you up to test the new Elementor 3.22 Beta.

Notes

As we make changes to our GitHub in an effort to keep it organized, improve the way we deliver information to you, and our ability to review your feedback, please follow the instructions below when reporting bugs, or making feature requests:

• To report a bug related to beta versions - open a new 🐞 Bug Report
• For feature requests - open a new 🚀 Feature Request
• For other comments specifically about this beta version - comment here

Designated time for release: June 16th, 2024 (Estimated)

Many thanks for your support and help!

Cheers,
Elementor Team

[m1ga]

Please use your own editor and open the devtools while you are opening the editor. It shows Uncaught TypeError: e.O is not a function and Uncaught TypeError: elementor.settings.page is undefined (PR). It shouldn't show any error opening a page.
WP 6.5.3, Elementor 3.22.0-beta1

[nicholaszein]

Hi @m1ga. We are aware of this console error. It doesn't affect Elementor's functionality. You can use it without worrying. This will be addressed in a future release.

[m1ga]

The editor is not opening with the 2nd error. You have to open the devtools with "cache disabled" in order get it to open.

[mbaierl]

Very likely you are using Firefox? This issue also happens in the latest stable version (and something like 10 version before...).

[m1ga]

yes, I'm using Firefox.

Issue for e.O: #24492
Issue for settings.page: #19345
PR for settings.page: #27353 (it's just one ? !)

[jlemonz]

I think the pointer is not working anymore in the mega menu. It doesnt change to a hand anymore. C;licking still works.

[nicholaszein]

Hi @jlemonz.

We are aware the mega-menu doesn't have a cursor: pointer when you hover over the dropdown.

This will be addressed in the near future. Possibly in the next beta. 😉

[DanielCyran]

when will you add the Ajax product search engine?

[nicholaszein]

In a future release.

[DanielCyran]

@nicholaszein hopefully sooner :D we are especially waiting for our websites and we won't install Ajax search plugins there :)))

[nicholaszein]

I'm sure the waiting will be worthwhile! 😉

[Daveden2]

I'll just make a couple of observations about the off-canvas widget. You have done a great job adding the aria-controls and aria-expanded attributes. However, before I make my comments, please take some time to speak to an accessibility expert for advice to avoid making a long-term mistake. I remember Miriam mentioned during the GAAD event that Elementor is focused on ensuring their future widgets follow best practices.

Now, my observations:

1. Just like the tabs widget, you are adding an aria-label to a div which has no role, rendering it essentially useless.

2. "off-canvas" may not be an acceptable aria-label, especially when we have multiple off-canvas elements.
3. If there is going to be an overlay, then you should ensure that focus is properly trapped using either a <dialog> element or <div role="dialog">.
4. The off-canvas element is placed outside all landmark regions, including the <main> element, which constitutes an accessibility failure.
5. I wouldn't recommend people use it for their mobile menus because, while it looks good so far, the menu would not be placed close to the trigger button in the DOM.

[nicholaszein]

As always, thank you so much for the feedback @Daveden2!

We will discuss this internally. 🙏

[doronwolf]

Hi @Daveden2 can you expand a little bit more? especially regarding points number 4 and 5?
we assume that since the off-canvas content is not part of the page flow, from an SEO perspective it should be placed at the end of the page but from what you are saying it sounds like this is not correct (at least from accessibility point of view)?

[Daveden2]

Hi @doronwolf,

First, this is an off-canvas element, not a popup.

I'm assuming this is an off-canvas nav menu. Are you saying the content of the menu isn't part of the page for SEO or accessibility purposes?

The best way to look at it is this: Assume you have CSS and JS turned off (which actually happened to me when I activated Elementor's Improved CSS Loading. I'm never turning that feature on again). If I had coded it the way I'm used to, then we'd have a scenario like this:

<header>
<a href="/"><img src="/logo.png alt="site name" /></a>
<nav aria-label="Primary">
    <ul>
        <li><a href="#"></a></li>
    </ul> 

    <a role="button" href="#off-canvas-stuff" aria-label="mobile menu toggle"></a>
</nav>
</header>

<main> 
    {post:content}
</main>

<footer>
    /* footer content */
</footer>


<div class="e-off-canvas">
    <ul class="mobile-menu">
        <li><a></a></li>
    </ul>
</div>

Would you be able to tell that the mobile menu is actually part of the primary menu?

But this is just my opinion, I hope that you all can ask around for an expert opinion.

[hein-obox]

@Daveden2 Thank you. We really appreciate your feedback.

[Webtica]

Thanks for this update! A small question: Is the caching of widget the same as we cache with WP-rocket or other caching tools or is it completely different? Also can we run this experiment besides our caching plugins?

[nicholaszein]

Hi @Webtica!

This is actually a great question! Thank you for asking! 🙏

The Element Caching experimental feature is not the same as normal the cache offered by performance optimization solutions like WP Rocket, LiteSpeed server cache, or similar solutions. It won't store the data as cache in your browser either. It works as another level of cache that happens when a page is being generated from the database to the visitor.

Usually what happens is that WordPress will look in the database for all the content settings, and then construct the page accordingly. This takes time since we have to match each setting to each element, no matter if it's a static element or a dynamic one. With this feature, we are saving a copy of the static elements (or in other words, caching the static elements) as they were constructed in the first loading after a page is published or updated, and then loaded, and avoiding having to match all the same settings on each page load if they aren't dynamic, and constructing them each time. We do this once, and then use the save data in future page loads.

In short:

1. This is not the same type of cache you're used to optimize the performance of your websites. It only works for Elementor elements (widgets).
2. This feature does not replace your other caching solutions.
3. This feature can be used in combination with other performance optimization or cache solutions, as this happens earlier in the page loading process.

Of course, we recommend you test it first before deploying it on a live website, as we can't predict how all the different performance optimization solutions available out there are fully compatible. However, from our test things seem to work pretty well, and we do see a significant reduction in TTFB.

I hope this answers your question! 😉

[efintina]

I briefly tested the experimental Element Caching feature on two websites with different designs. The websites were hosted on two cheap shared hosting with different configurations. On each hosting I tested two combinations of cache plugins:

1. LiteSpeed Cache + Docket Cache (Object Cache + OPcache) + Freesoul Deactivate Plugins (it's not a cache plugin, but I find it very useful)
2. Element Caching + LiteSpeed Cache + Docket Cache (Object Cache + OPcache) + Freesoul Deactivate Plugins

The bottom line was that Element Caching works fine with no issues. The performance increase was more than noticeable. Query Monitor indicated a 20 - 35% lower average page generation time when using Element Caching. I will do more tests in the coming days.

[nicholaszein]

Thank you for the feedback @efintina! That's awesome! 💪 🙌

[DanielCyran]

I would like to extend my heartfelt thanks to the Elementor team for focusing on optimization, making our websites load much faster. We love you! Thank you for being there and doing an excellent job

[nicholaszein]

Thank you @DanielCyran! We really appreciate it! 🙏❤️

[79ho3ein]

First of all congratulations for a great update and new element👌. In the initial review of this version, I encountered two cases, of course, I have already reported the second case.

1- The Justify Content and Align Items controls do not work as expected in mobile breakpoint.

2- Tweak: Activated Optimized Control Loading by default for new sites

Enabling this option causes problems with the icon of closing the menu cart element. More details here.

[nicholaszein]

Thank you @79ho3ein!

I hope you have the time to test this beta. We would love your feedback about it. 💪

[doronwolf]

Hi @79ho3ein regarding the first issue - did it start with this beta or is it an old issue?
is it in the container's controls?
I would like to take a deeper look into this issue so if it's not related specifically to this beta, please open a new issue about it and paste a link here🙏

[79ho3ein]

Hi @doronwolf, After reviewing the beta, I encountered the first one. It didn't seem to already exist. But I tested the previous version and found out that this problem already exists. Maybe this problem has occurred in the last two or one versions, and I am sure it was working well before. I will post a bug report (With video) for it soon.

cheers

[pauserratgutierrez]

Cool! It's great to see more performance improvements! 🚀

[nicholaszein]

Thanks @pauserratgutierrez! 🙏

Let us know how's your experience with it! 😉

[DanielCyran]

In your beta version 3.22, does the loop item also display the same product images and redirect to the same product or entry?

[DanielCyran]

@nicholaszein

I have the latest beta version and I'm encountering this problem ;/ How can I solve it? Maybe I'm doing something wrong? In version 3.21 it works fine. The website address is https://sklepkuchenny.pl/sklep/

[Daveden2]

@DanielCyran I think I noticed that problem as well. I was testing the Taxonomy Loop Grid on a normal page, and it repeated the first item in the loop when using the Elementor Caching

[efintina]

Maybe you should disable Element Caching individually for each widget in Advanced -> Cache Settings

[Daveden2]

@efintina Yeah, that seems to work. However, I noticed that third-party widgets like Jet Engine's Dynamic Field widget and Dynamic Content for Elementor widgets seem to work fine.

But yeah, I'd just say that Elementor Cache doesn't work well with the loop grid currently.

[nicholaszein]

Hi, yes, we are aware of this issue. It should be addressed in a future version! Thanks for clarifying you were using the new Element Caching experiment in combination with the Loop.

[nicholaszein]

Hi @datgausaigon,

we are aware of the issues you are pointing, but the fixes for those issues are not part of this beta.

We understand your frustration, and we appreciate your patience as we work on improving some key areas of the Editor that are important for future fixes and development, and introducing fixes and features that have both been long requested.

We would love to see your feedback about the features and fixes we introduced in this beta though, this will help us release a stable version, and focus on future bug fixes like the ones you reported.

Please, keep the conversation about this beta! 🙏

Thank you for understanding, and kind regards.

[datgausaigon]

Hi @nicholaszein
Thanks for your reply. We need an estimated time for this Issue. It's been over a year and a half.
Please help. ❤️

[Vossha]

When the feature 'Improved CSS Loading' is active the off-canvas modal doesn't pop up when you click a link to open it and the off-canvas container is shown at the bottom of the page by default.

I do have animation on the off-canvas, I'll check if it opens when I remove those. EDIT: With animations on or off, and the 'Improved CSS Loading' set to active the off-canvas modal doesn't pop up and shows at the bottom of the page.

[nicholaszein]

Good to know @toltechinternet!

Thank you for sharing this info! (Good catch as well! 😉 💪 )

[acal]

Ditto. Same problem plus undesired extra padding at the top of the page above the header on the frontend. Use case is for off canvas navigation in the header template. Off canvas showed at bottom in front-end although looked and worked well in the editor. Once I disabled Improved Asset Loading it worked better although it still had the extra padding for some reason above the header.

[nicholaszein]

Hey, @Vossha, @brent-e, and @toltechinternet!

The issue with the Improved CSS Loading experimental feature was solved in beta4. Please, let us know if you are still experiencing this issue. For me it's working perfectly fine now.

@toltechinternet, as for the Google Maps inside the Off-Canvas widget, for me it worked pretty well. Don't forget that Google doesn't like to load maps without a API Key. You can see in the video below that with the API key it works correctly. I hope this helps. 😉

Edit._Off-Canvas.with.Maps_.with.Elementor.-.6.June.2024.mp4

[Vossha]

@nicholaszein It's working now 👌🏻

[nicholaszein]

Thanks for confirming @Vossha! 🙏

[Vossha]

Would love if the off-canvas modal automatically closes once an anchor link in the off-canvas container is clicked.

I have multiple use cases where I would like to include the Table Of Contents in the off-canvas modal but once a link in the TOC is clicked, I want the modal to close. Or, for 1-page websites with navigation menus consisting only of anchor links, it would be nice for the user experience if the modal closes automatically.

[nicholaszein]

@brent-e.

This won't work, and would probably break the page layout, as it's wrapping links inside a link.

[brent-e]

Hm. Maybe I misunderstood the request. https://millcomm.ca/sandbox/off-canvas/

[Daveden2]

@brent-e have you tested your theory out on mobile? I doubt it'll be a really nice experience

[brent-e]

I've checked it on my Android phone and it still seems acceptable. But as I say, this was just a quick test. It may well break in various scenarios.

[Daveden2]

@brent-e I noticed you switched the table of contents to always remain open. So it's slightly better.

The experience I didn't like was... if I click anywhere around the table of contents but not the links, the popup closed. That'll be a pretty bad experience for any user with motor-skill difficulties.

[efintina]

One thing to note, though I don't know if this is an actual problem or expected behavior.

I used Loop Grid + Taxonomy Filter. For Loop Grid I used a template that includes Image, Heading, Post Title, Post Info, Post Excerpt widgets.

For proper operation, I had to change the default setting for Element Caching from Default to Disabled. Interestingly, I only had to do this for Image, Heading and Post Title. Post Info and Post Excerpt can remain with Default.

So my question is what does the default cache status actually mean (inactive as you mentioned or the state of the Element Caching feature as was configured in Features -> Element Caching).

[nicholaszein]

Hi @efintina, this is not the expected behavior, and we are aware of this issue with Loop Grids. Dynamic Elements and Dynamic Data in general should bypass the Elements Caching engine and not be cached. It seems some are still being cached. We are going to take a deeper look at it, and see if we can resolve it.

The default value of the "Cache Settings option in each widget should be Active for static elements, and Inactive for dynamic elements. It should work automatically. I hope the other two options are self explanatory.

[efintina]

For Template's Container widget, was cached the URL if HTML Tag = a (link) so all Loop's links redirect to same URL

[nicholaszein]

Interesting @efintina! Thanks for sharing this info! And good catch! 💪

[Daveden2]

I'm guessing the problem is that the widgets in the loop grid themselves are static widgets with dynamic data. So they're being cached even though the loop grid itself is not being cached.

Because every standard widget with dynamic data that I tested in the loop got cached. Only third-party widgets were excluded.

[nicholaszein]

Hey @efintina!

Just passing by to say that this issue was solved in one of the recent beta releases. Now, no matter what Cache settings you add to a dynamic element, Elementor will be smart enough to identify it has dynamic content, and will not cache them in a Loop Grid.

To demonstrate this, I've recorded a short video of a Loop Grid I built with dynamic tags and elements so you can see for yourself.

Element.Caching.Loop.Grid.Elementor.Debug.-.7.June.2024.mp4

This site has Element Caching enabled. 😉

Cheers! 🥂

[nicholaszein]

Yes, there is a limit of 50 entries in the list. You can use a filter to increase the value.

$custom_fields_meta_limit = 100;
add_filter( 'elementor_pro/display_conditions/dynamic_tags/custom_fields_meta_limit', $custom_fields_meta_limit );

Keep in mind this is a resource intensive operation, as it searches for all meta_keys. Make sure your server can handle it! Use it only on testing environments. This is not a filter that is currently publicly available, as this is still an experimental feature that may receive changes in the future. Don't use it on production websites!

[nicholaszein]

@ProtoUI ACF is not yet supported. We will add ACF support in a future version. This only applies to post_meta right now.

[Camilo517]

Using the new cache functionality. woocommerce my account widget is not working well. Shows wrong data

[KingYes]

@Camilo517 Did the default value work, too?

[nicholaszein]

@KingYes it seems it didn't work with the default value. The widget is being cached.

[nicholaszein]

Hi @Camilo517,

we are trying to reproduce your issue, can you tell us more about it, or even better, would you help us fix this by submitting a new Bug Report with your System Info, and steps to reproduce?

Otherwise, please tell us more about your issue:

1. What theme are you using, and what version?
2. What version of WooCommerce is installed?
3. Do you have both Elementor v3.22.0-beta2, and Elementor Pro v3.22.0-beta2 installed?
4. What data exactly is not showing in the My Account widget?
5. Can you record a screenshare (Loom is free and can record 5min) with the problem so we can follow the steps and try to reproduce it on our end?

Thanks in advance

[nicholaszein]

Hey @Camilo517 we just released a new Beta, and we weren't able to reproduce your issue. Can you let us know if this is still a problem with the latest version?

[nicholaszein]

Hey @Camilo517.

We haven't heard back from you...

We've tested the My Account widget and it worked well when the Element Caching is enabled, and the value for the Caching in the My Account widget is set to Default or Inactive.

It's important to note that there are some widgets that you simply can't switch Element Caching to Active, because they have Dynamic Content that shouldn't be cached. The My Account widget is one of them. So if you have switched it to Active, you should switch it back to either Default or Inactive.

If you still are experiencing the problem with the Element Caching feature enabled, and the My Account widget Caching set to Default, please let us know.

Kind regards

[avivu]

Hi all,

We just released Elementor v3.22 Beta 4.

The versions include the following:

Free version

• Tweak: Added Element Cache Expiration setting in the Performance tab to the Element Caching experiment
• Tweak: Added functionality to delay the running of the ready triggers on inner elements
• Fix: AI Expand Images not working on local and protected websites
• Fix: all: unset assigned to buttons cause focus issues
• Fix: The AI Consent modal requires multiple clicks to check the box
• Fix: Display issues when using Tabs widget inside the Off-canvas

Pro version

• Tweak: Added dialog role to the off-canvas element
• Tweak: Added functionality to delay the running of the ready triggers on inner elements
• Fix: all: unset assigned to buttons cause focus issues (✅ 🧩 🐞 Taxonomy Filter - Item CSS 'Cursor' Not Displaying Correctly - [ED-14522] #24322, ✅ 🔗 🐞 Cursor is not pointer in Taxonomy Filter element (Duplicate of #24322) - [ED-14522] #25448)
• Fix: Off-Canvas appears broken on the front if Improved CSS Loading experiment is activated

–

Thank you!

[efintina]

Related to Off-Canvas Widget. When the Off-Canvas is trigger it "jump" to the first widget that contain a link (button, heading or even text editor). If I remove the links from widgets it works with no issues.

[Daveden2]

@efintina I haven't tried it out yet, but what you mentioned sounds like how an off-canvas component should work.

Ideally, you should add a close button as the first focusable element in the dialog.

[efintina]

Thanks @Daveden2. I need to use Off-Canvas not only for dialogs. For example, I tried to use it to display some additional information. If the length of the text to display exceeds the height of the screen, it jumps (and focuses) to the first link encountered. Because of this, the button looks like it was previously moused over. As a workaround, I can add a first "pixel" focused element as you say, but maybe it's possible to avoid this approach.

And about the Overlay, maybe it will be useful to be able to stylize it or turn it off.

[doronwolf]

Hi @efintina - does this issue happen to you even when you are opening the off-canvas using your mouse (i.e not when using keyboard navigation)?

[doronwolf]

Hi @efintina the reason I'm asking is that from our point of view, the off-canvas shouldn't be exactly as in popups because with off-canvas the trigger is always done by the user and we should differentiate if the user triggered the off-canvas by keyboard or by a mouse and we are aiming to fix it accordingly

[efintina]

Only with mouse. I didn't try it with keyboard or touch pad. If it's important, I can test it a bit latter.

[doronwolf]

Thank you 🙏 Anyway I recommend adding an X icon at the top of the off-canvas and setting it for closing (dynamic tag > close off-canvas) so it will be the first focusable item, it's better for the user experience and will also help you avoid scrolling to the other focusable item you have at the bottom of your content

…

On Wed, May 29, 2024, 00:09 efintina ***@***.***> wrote: Only with mouse. I didn't try it with keyboard or touch pad. If it's important, I can test it a bit latter. — Reply to this email directly, view it on GitHub <#27371 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVJSJVVENMY5LM4ZEEG2NS3ZETW37AVCNFSM6AAAAABH6LFANWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TKOBVHAZDQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[efintina]

I'll follow your advice. Thank you.

[dara-mtl]

First off, thank for the amazing new update! However, I've run into an issue with the latest beta version (v3.22 Beta 4). When using JS to reset the HTML of a widget and then reattach the handler, I'm encountering an issue at this specific point:

if (elementorFrontend.config.is_static || isDelayChildHandlers) {
    return;
}

This wasn't an issue up to v3.22 Beta 3 and toggling the Element Caching between active/inactive doesn't solve the issue.

After an AJAX call and resetting the HTML, if there's no data, the code will prematurely returns. Here's the snippet:

if (data === '0') {			
    targetSelector.html(originalState);
    elementorFrontend.elementsHandler.runReadyTrigger(targetSelector);
}

Any insights into this would be greatly appreciated. Thank you.

[hein-obox]

@dara-mtl @nicholaszein
Thank you for your feedback.

I have been able to identify the problem, and I am working on a fix.

[nicholaszein]

Uhuull! 🙌

Awesome @hein-obox! You're the man! 😎💪

Thank you for the detailed explanation @dara-mtl !

🙏

[dara-mtl]

Great, thank you for your support.

[dara-mtl]

I can confirm that RunReadyTrigger now runs as before. Thank you! 🙏

[hein-obox]

@dara-mtl @nicholaszein
I am so happy!

Good luck with your business, @dara-mtl

[Joliamendi]

Let me report a bug in the mega menu widget and hope it can be fixed before the official release. The problem is that Mega Menu does not recognize the active status in the woocommerce endpoint. For example I am at https://domain.com/my-account/orders/. But the desired style does not work for the active status in Mega menu.
For testing, I added the WordPress menu widget to the same page. In the WordPress menu widget, the active status worked well.

[nicholaszein]

Hi @Joliamendi!

Thank you for sharing your findings! 🙏

Unfortunately, we cannot provide a fix for this before we release this version to the public. It would take some time to find and test a solution for this particular case.

Would you be so kind to submit a new Bug Report and share it with me here so we can understand exactly what is happening and find a fix for it? The team responsible for this widget is watching here, but once we launch 3.22, this discussion will be closed, and we won't be able to communicate with you in case we need more info. I would mean the world if you could do that! 🙏

[avivu]

Hi all,

We just released Elementor v3.22 Beta 5

The versions include the following:

Free version

• New: Generate post excerpts with AI
• Fix: Save as Default is not working when Optimized Control Loading is activated
• Fix: Links to Elementor settings are broken in various locations
• Fix: The What's' New string in the Editor is not translatable (props @DAnn2012)

Pro version

• Tweak: Added caching support for the Off-canvas widget
• Tweak: Changed strings in Custom Code AI trigger
• Fix: Load More text button doesn't show text in Posts and Loop Grid widgets
• Fix: Manual Selection "Include By" Query doesn't work with product categories

–

Thank you!

[avivu]

Hi all,

We just released Elementor v3.22 Beta 6

The versions include the following:

Free version

• Tweak: Deactivated Landing Page feature for new sites
• Fix: RunReadyTrigger returning incorrectly in various scenarios

–

Thank you!

[toineenzo]

Curious why the landing page function is disabled? 🤔
Will this be replaced by the conversion center?

[nicholaszein]

Hi @toineenzo,

I see you've been checking under the hood... 👀

We are currently reviewing some issues regarding the Landing Page experimental feature, and we decided it was best to deactivate it for new installations for the time being. This has nothing to do with the Conversion Center. 😉

[cirkut]

Yes! It's about time the landing pages are being reviewed! As someone in a mid-sized organization, being able to distinguish landing pages from regular content pages is really important, but there's too many previous issues (like root permalink support mostly not working). Hoping these get addressed in the coming releases :)

[toineenzo]

Just curious, will 3.22 still be released today?

[avivu]

Hello @toineenzo,

Thank you for your involvement! To finalize everything, we’ve decided to postpone the release of v3.22 to 16.06.24.
Thank you!

[avivu]

Hi All,

The release of Elementor v3.22 GA, initially scheduled for 09.06.24, has been postponed to 16.06.24.
We are taking this additional time to finalize the version and ensure everything is ready for a smooth launch.

Thank you for your understanding and support.

The Elementor Team

[m1ga]

quick quesion: when I look at the changes between last week and today https://github.com/elementor/elementor/commits/3.22/ I don't see any code changes. Does this mean the version was ready last week or you didn't find the issue and we should wait for 3.22.1 before using it?

[nicholaszein]

Hi @m1ga!

No. We did commit changes to code, and there are a few points added to both GA versions. However, these are internal commits, therefore they might not appear in the final changelog.

[m1ga]

I was talking about the github commit history where ALL changes are listed, not the changelog. But since 3.22.1 is already out and I see the first commit after that in the 3.22 branch already I'm sure there will be a 3.22.2 soon 😉

[efintina]

I know this is off-topic but this is a really old problem. It's about "Inline Font Icons" in conjunction with Forms. Or specifically the SVG replacement for Font Awesome. It is not displayed correctly and looks very ugly. And unprofessional. Maybe you can solve it.

[nicholaszein]

Hi @efintina.

We are aware of this bug report, but the fix for this issue won't be part of this release.

[efintina]

The Off-Canvas container inserts a visible area in the frontend in the area it was attached to, but not in the editor.

[nicholaszein]

Hi @efintina!

Indeed, Off-Canvas are part of the flow and appear as one of the child elements inside the container, and this can cause Flexbox to add an additional gap after the previous element.

We are currently investigating ways of mitigating this without breaking other things. As soon as we find a resolution we will update the widget! 😉

Thanks for raising this point! 🙏

[m1ga]

The "Learn more" caching link https://go.elementor.com/element-caching-help/ is not available

edit: looks like you've fixed it 👍

[nicholaszein]

Hi @m1ga!

These articles are only published after the GA release. Since these are essentially redirection links, once they are published we point the link to the correct URL. 😉

But thanks for pointing that out! 💪

[m1ga]

GA was already published for 3 hours 😉 That's why I was asking.

[awebguy99]

It looks like Global Widgets break when Element Caching enabled. I have a site in development (can't include the URL, confidential client info on it), all fine but when I enable Element Caching, any widget that is a Global Widget has its formatting break (wrong colour, missing icon etc).

1. If I unlink the widget (I.E. change it from being a Global to normal widget), the issue is fixed.
2. I also tried disabling all plugins, apart from Elementor and Ele Pro (all up to date). And I'm using Hello theme.

EDIT: The widgets I've noticed so far breaking are Heading and Icon widgets.

[nicholaszein]

Hi @awebguy99!

Thank you for reporting this. Try changing the Cache Settings to Inactive in the global widget settings.

If the issue persist, please open a new Bug Report. Thanks! 👍

[jidexl21]

Some random site auto upgraded the elementor version to 3.22 and its trying to grab an AI plugin which returns null. Site breaks with a critical error for users.

[nicholaszein]

Hi @jidexl21!

This was a know problem with some 3rd-party addons. It was already solved with the release of version 3.22.1. Please update to the latest version!

Kind regards

[nicholaszein]

Hi, beta testers! 👋

📢 Elementor Core and Elementor Pro v3.22 have been released! 🥳

Thank you for contributing to this beta, and for sharing your feedback.

Special thanks go to our contributors who helped make this release possible:

• @m1ga
• @mbaierl
• @jlemonz
• @DanielCyran
• @Daveden2
• @Webtica
• @efintina
• @79ho3ein
• @pauserratgutierrez
• @Vossha
• @brent-e
• @toltechinternet
• @acal
• @Camilo517
• @Joliamendi
• @bikospx
• @toineenzo
• @dara-mtl

Thank you! See you on the next one! 💪 🚀

✅ Feel free to check it out and update your plugins to the new version!

Cheers 🥂

Changelogs of Elementor Core and Pro
Elementor Core
Elementor Pro