Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

βœ… πŸ“£ Elementor Pro v3.1 Beta 3 Release πŸ“£ #13633

Closed
shilo-ey opened this issue Jan 20, 2021 · 56 comments
Closed

βœ… πŸ“£ Elementor Pro v3.1 Beta 3 Release πŸ“£ #13633

shilo-ey opened this issue Jan 20, 2021 · 56 comments
Labels
announcement Used for general announcements. help wanted Announcements that request help from users, like Public Beta testing programs. mod* product/pro Indicates if the referenced component is part of the Elementor Pro plugin. solved Indicates that an Issue has been Solved, or a Feature Request has been Released.
Milestone

Comments

@shilo-ey
Copy link
Contributor

shilo-ey commented Jan 20, 2021

===========

Beta 3 UPDATED - PLEASE READ BELOW!

===========

Hi Elementor Beta testers πŸ‘‹,

Elementor PRO v3.1. is just around the corner, and we have some new features and improvements we hope you love.

This version includes features and capabilities that give you more control and customization options over your sites. As part of our ongoing efforts to improve Elementor's speed and stability, we made performance enhancements and added improvements to existing features. Test out Elementor Pro v3.1 Beta and let us know what you think about the new features introduced, including:

  • Custom Code feature
  • Code Highlight widget
  • Improved Asset Loading experiment
  • Animated Headline Improvements

Before you test, please make sure you are using:

Introducing Custom Code: Add Custom Code Snippets Anywhere In Your Site

Custom Code flow

Many of you need the flexibility of adding custom code to certain places in your sites. This includes adding tracking codes (Google Analytics, Facebook Pixel, etc), including meta tags in the , and implementing external services in various areas in the page like the head and body tag. Up until now, this was not possible in Elementor without the use of a third-party plugin or complicated code adjustments to your theme files. All that changes today.

Adding Custom Code to Elementor

Now, you can easily create your custom code in Elementor.
Once you add your Custom Code, you’ll be able to select the location (head, body start, body end), and set your priority. If you register two scripts in the same location, the priority you set will determine which one of them will load first. You can edit your code using a code editor with a comprehensive autocomplete, and set up your display conditions just as you would for every Elementor site part (Header, Footer, etc). Once you’ve finished, publish your code and it will be live on your site.

Custom Code

Additional Custom Code capabilities

If you’re a logged-in Administrator, you can debug code and see its output in the HTML source:
image
You can also set your publish status per snippet (Publicly available or draft) and manage all of the custom codes you created from a single location.

Here’s how it works:

  1. In your website, go to Elementor > Custom Code
  2. Click on Create New button and you will be redirected to the Add New Code screen
  3. Add Title, Location to print it, Priority, and the code itself
  4. Make sure the code linter identifies errors and notifies about them
  5. Click Publish and make sure the Display Conditions modal appears and place your display conditions (use include and exclude ones)
  6. Repeat this flow and create another code with different Priority
  7. Click Publish and make sure all of the code snippets you created are properly displayed in the admin dashboard screen
  8. Go to frontend and make sure the code loads properly both for logged in user and not-logged in user (visitor)

Meet Code Highlight Widget: Showcase Your Code With Syntax Highlighting

Code Highlight (1)

Using a code highlighter or syntax highlighting is especially beneficial for those of you who have a development blog or often use code examples in your content. If you're looking for ways to make your code more readable and visually consistent with your site without the need for an additional plugin, you'll want to use our new Code Highlight Widget.

What this widget can do - the highlights

There are various things you can do with the new Code Highlight Widget. For starters, you can select your syntax (coding language) to optimize your highlighted code. You can also copy your code to your clipboard in a click and customize your design. Choose from six different design themes and find the style that works for your site. Display inline color visualization in code (in supported languages like CSS), and highlight specific lines you want to put a spotlight on in your code.

The new Code Highlight Widget is a fast and effortless way to create beautiful code snippets on Elementor.

Here’s how it works:

  1. Create a new page and Edit it with Elementor
  2. In the widgets panel search for Code Highlight widget and drag it to your page
  3. Paste a code snippet you wish to present in your page, and set the relevant language for optimal highlight
  4. Specify in the widget options if you want to use the following options:
    • Line Numbers - displays the line number next to each line
    • Copy to clipboard - select if you want to allow users to copy the code in a single click
    • Inline Colors - display the color visually next to its value (available in CSS for example)
    • Line highlight - select single or multiple lines to be highlighted
  5. Select your display options such as Theme and Height
  6. Go to frontend and make sure everything works as expected

Improved Asset Loading: Load Widgets JS Files Conditionally

Assets Loading

In our last release of Elementor 3.1.0, we introduced Elementor Experiments which allows you to experience new features before they are officially released and control which features are live on your site. One of the experiments we added is Improved Asset Loading which focuses on optimizing site speed and scoring. Improved Asset Loading optimizes the performance on the front-end, saving loading time per each page by loading the widgets JS code only when needed on the page, which can result in up to ~100 KB of JS files size reduction.

By breaking the loading method of the widget handlers to small chunks, users who use HTTP/2 protocol in their sites will benefit from efficient loading, due to Multiplexing which allows a browser to request all the assets in parallel and save the handshake time for each asset load request. This results in a significant performance gain depending on the number of widgets used on your page.

What does all of this actually mean? Elementor used to load every widget JS file from the list below on each page load, even if the widget wasn’t present in the page.
Now Elementor loads the specific ones only if they are used on the page. No pro widgets = no pro widget JS files.

Below is the list of improved items:

  • Animated Headline widget
  • All carousel widgets
  • Countdown widget
  • Form widget
  • Login widget
  • Gallery widget
  • Lottie widget
  • Nav Menu widget
  • Posts widget
  • Portfolio widget
  • Share Buttons widget
  • Slides widget
  • Table of Contents widget
  • WooCommerce Menu Cart widget
  • Facebook widgets
  • Posts Archive widget
  • Search Form widget
  • Popup

To experience this improvement you’ll need to manually activate the Improved Asset Loading experiment found in your Experiments tab.

Please be advised that you may experience conflicts with 3rd-party addons and extensions (if they rely on these loaded assets). If you spot a conflict, contact the plugin author and let them know.

We plan on making many more improvements to performance in versions to come. In the meantime, check out how this experiment works below.

Here’s how it works:

  1. In your existing site, upgrade to Elementor Pro 3.1.0 Beta and make sure you are using Elementor 3.1.0
  2. Go to Elementor > Settings > Experiments tab and make sure the experiment indicator is inactive by default in existing website instances (grey indicator color)
  3. Create a new page and insert a heading widget
  4. View the network monitor when loading the page on the front-end and make sure that a file called: preloaded-elements-handlers.js, which contains all core widget handlers, is loaded on the page. Keep this tab open for later reference.
  5. Create a new site and install Elementor 3.1.0 and Elementor 3.1.0 Pro Beta
  6. Go to Elementor > Settings > Experiments tab and make sure the experiment indicator is STILL inactive by default in new website instances (grey indicator color)
  7. Create a new page and insert a heading widget
  8. View the network monitor when loading the page on front-end and make sure that a file called preloaded-elements-handlers.js was not loaded on the page, while all of the widgets JS handles are loaded conditionally - when using each one of the following widgets on the page, a JS file with the same widget name should be loaded:
    • Animated Headline
    • All carousel widgets
    • Countdown
    • Form
    • Login
    • Gallery
    • Lottie
    • Nav Menu
    • Posts
    • Portfolio
    • Share Buttons
    • Slides
    • Table of Contents
    • WooCommerce Menu Cart
    • Facebook widgets
    • Posts Archive
    • Search Form
    • Popup
  9. For example: When using the Form widget, a file called: form.[hash].bundle.min.js should be loaded.
  10. Add a widget that uses Swiper carousel (e.g Media Carousel widget) to the page and make sure it conditionally loads the Swiper library file called: swiper.min.js, based on the setting you set in this Experiment
  11. Change the value of this experiment and make sure the behavior is consistent
  12. Make sure everything works as expected on Frontend and on Preview mode

Improved Animated Headline Widget: Control Loop play, Timing & More

Animated  Headline

As much as we love launching new features for you to enjoy we understand how important it is to invest in improving our existing features which is exactly what we plan on doing in the upcoming releases. A while back, we launched the Animated Headline Widget to allow you to create animated and highlighted headlines that can further draw the attention of your visitors.
Today we’re introducing some improvements you’ve been waiting for.

The newest additions

Timing options (#4392)

Control the animation duration and delay between each animation loop.
Up until now, you had little control over the speed of your Animated Headline. Now, we’ve given you more control by allowing you to set the animation duration and delay between each animation loop.

Loop option (#9749, #2457)

Many of you asked us to allow you to "Freeze" the animation when it finishes its loop. Now, you can set the widget to play only once, emphasize a specific message (example - underline effect), and keep it like this, so your visitors will see only the animation once.

Set a selected color for typing effect (#5403, #7826)

customize and control your typing effects by changing the color/background color and mixing and matching your colors to achieve your desired outcome.

Added Dynamic capabilities to Rotating Text animation (#4625, #8569)

Dynamic content for Rotating effect is here! Create a beautiful Single Post template that shows your dynamic messaging with animated capabilities.

Overflow Fix

Some of the "Rotating" type animations had crop glitches. This improvement fine tunes the behavior of the widget in these cases.

How it works:

  1. Create a new page with Elementor and drag in an Animated Headline widget
  2. Change Style to Rotating and select a dynamic source for the Rotating Text control
  3. Disable the Infinite Loop option and make sure it works as expected both in Frontend and in Preview mode
  4. Change Animation to Typing and go to Style Tab
  5. Under Heading section modify the Selection Color and Text Color and make sure it works as expected both in Frontend and in Preview mode
  6. Change Style to Highlighted
  7. Modify the timing options using the Animation Duration and Delay controls and make sure it works as expected both in Frontend and in Preview mode
  8. Play around with more options in the widget and verify that nothing was affected

More Improvements


How to Install the Beta Version

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

  • Go to Elementor > Tools > Versions
  • Enable the beta tester feature
  • Go to Dashboard > Updates and update to the latest beta version.

This will get you set up to test the new Elementor Pro 3.1 Beta.


Notes

For bugs and remarks, please reply with a comment on this issue here on GitHub.

Please keep this related to the current beta only! For any other issue or feature request, feel free to open a new issue.

Designated time for release: February 16, 2021 (Estimated)

Many thanks for your support and help!

Cheers,
Elementor Team

@shilo-ey shilo-ey added the help wanted Announcements that request help from users, like Public Beta testing programs. label Jan 20, 2021
@shilo-ey shilo-ey added this to the Pro 3.1.0 milestone Jan 20, 2021
@shilo-ey shilo-ey pinned this issue Jan 20, 2021
@MichaelDarko
Copy link

MichaelDarko commented Jan 20, 2021

Here's a suggestion regarding the custom code functionality from my point of view as a web creator:

The situation:

  • If you're a pro web creator you need to add all sorts of code snippets to your projects (adjust WP functionality, connect GA etc.)
  • Before, people would create a child theme and add code there. But child themes are old-school now.
  • Today, people use plugins like https://wordpress.org/plugins/code-snippets/ to add code snippets.
  • Anytime I build a website for a client, I have to install the Code Snippet plugin.

The problem:

  • The new custom code feature is only for HTML code. As web creator, I need a functionality to easily add (php / js / html) code snippets. Your solution doesn't really solve the custom code problem, so I still need to install some code snippet plugin.
  • Adding custom HTML is just a small part of custom code needs.

The solution

  • You should make a proper custom code solution, so web creators don't have to install code snippet plugins.
  • Like this: https://wordpress.org/plugins/code-snippets/ (php / html / js snippets, check for errors before publishing)

Summary

How it was: "Want to change/add some function? Create a child theme and... bla bla."
How it is: "Want to change/add some function? Install some code snippet plugin and put this code there."
How it should be "Want to change/add some function? Elementor custom code feature has got you covered."

WordPress has a snippet for just about anything you need. If you're a pro web creator, you will be using snippets all the time. Having this function in a page builder makes perfect sense. Having only custom HTML functionality doesn't solve the problem for web creators and we will still have to use plugins.

You can prevent publishing if the code throws an error (like other code snippets plugins), so that's not an issue.

If the argument is something like "We don't want people adding php code, because...". Well, web creators add php snippets all the time. The question is, will they have to do it with other plugins, or will they be able to do it in Elementor?

@fabigrafo
Copy link

Here's a suggestion regarding the custom code functionality from my point of view as a web creator:

The situation:

  • If you're a pro web creator you need to add all sorts of code snippets to your projects (adjust WP functionality, connect GA etc.)
  • Before, people would create a child theme and add code there. But child themes are old-school now.
  • Today, people use plugins like https://wordpress.org/plugins/code-snippets/ to add code snippets.
  • Anytime I build a website for a client, I have to install the Code Snippet plugin.

The problem:

  • The new custom code feature is only for HTML code. As web creator, I need a functionality to easily add (php / js / html) code snippets. Your solution doesn't really solve the custom code problem, so I still need to install some code snippet plugin.
  • Adding custom HTML is just a small part of custom code needs.

The solution

  • You should make a proper custom code solution, so web creators don't have to install code snippet plugins.
  • Like this: https://wordpress.org/plugins/code-snippets/ (php / html / js snippets, check for errors before publishing)

Summary

How it was: "Want to change/add some function? Create a child theme and... bla bla."
How it is: "Want to change/add some function? Install some code snippet plugin and put this code there."
How it should be "Want to change/add some function? Elementor custom code feature has got you covered."

WordPress has a snippet for just about anything you need. If you're a pro web creator, you will be using snippets all the time. Having this function in a page builder makes perfect sense. Having only custom HTML functionality doesn't solve the problem for web creators and we will still have to use plugins.

You can prevent publishing if the code throws an error (like other code snippets plugins), so that's not an issue.

If the argument is something like "We don't want people adding php code, because...". Well, web creators add php snippets all the time. The question is, will they have to do it with other plugins, or will they be able to do it in Elementor?

That sounds plausible. I think if, then right.

@rodolphebertozzo
Copy link
Contributor

Why not put permanently (i.e. not when hovering) bubble info below "priority" and "location". Instead of the black icons with the question mark. This can be better design level ;)
image_2021-01-21_093405

@zeinnicholas
Copy link

Here's a suggestion regarding the custom code functionality from my point of view as a web creator (...)

This makes perfect sense.

@windingoak
Copy link

I didn't see any mention of creating shortcodes from snippets, like in the plugin Post Snippets. Can this be an enhancement?

@HandyGadget
Copy link

HandyGadget commented Jan 23, 2021

@MichaelDarko - what you write makes sense, and then I thought -- its not finished, this is just the first code module.
Hopefully I am right. If not, I like many others, will continue to use the plugin I have always used, which already does it all.

@noisybird

This comment has been minimized.

@MichaelDarko
Copy link

Also, I know this is not related to any specific feature, but I think Github should also be for strategy feedback, not just bugs and features. If somebody form Elementor, who has something to say about strategy, could check this issue: #13125

I'm finding the whole editor interface very limiting and it's not really changing much in the right direction. After 5 years, it seems like a good time to do an overhaul that would give us the freedom to build more freely (like Webflow) instead of being stuck with limited styling customizability and single-purpose widgets.

@zeinnicholas
Copy link

@MichaelDarko please, let's focus on testing this thing. Complaining doesn't help and the spam is annoying. I think a point has been made about the feature in question. Let's focus on that.

@webdevs-pro
Copy link

webdevs-pro commented Jan 23, 2021

Still here is the same bug with adding custom repeater control to advanced tab. Copy/paste styles not working when custom repeater added to element to advanced tab. There are many addon`s that add custom repeater control to advanced tab. JetEngine from Crocoblock for example. Also on form widget text field not working with custom repeater control in advanced tab.

@alexdalzovo
Copy link

The ability to add custom code is fantastic but needs some precautions on the conditions.
If there was the possibility of making custom code appear following an action it would be even more fantastic.

For example, following the acceptance of the cookie consent popup (built with elementor) I could bring up the tag manager code and in turn avoid the use of at least one additional plugin and adapt everything to compatibility with GDPR and similar regulations.

think about it :)

@renzoster
Copy link

I think they can enable certain zones to enter the code similar to what Astra does.

It would be good option for theme creators to be able to use Elementor environment for custom code areas.

@MichaelDarko
Copy link

MichaelDarko commented Jan 26, 2021

I'm testing the 3.1 version and I'm still experiencing this bug: #13038

I've contacted support and sent them login info to this example page with the bug - https://beta.mbdemo.cz/

So you can login, test it and look at the JS errors to figure out what's happening. Some imported widgets with global colors have this bug, some are fine.

Here's a recording of the bug from another users: https://d.pr/v/nxEk9z

After 3 months of this, the 3.1 version might be a good time to fix it.

@portrayaloflife
Copy link

When editing as a user with a user role in Elementor of edit content only it still shows the "Edit Header" and "Edit Footer" shortcuts above the header and footer in the elementor builder which should be hidden from them so the edit-only users can't meddle with theme building.

@sermalefico
Copy link

I left here a compatibility problem with the codemirror text field, in case it helps

https://wordpress.org/support/topic/incompatibility-with-future-elementor-update-custom-codes/#post-13961628

@shilo-ey
Copy link
Contributor Author

shilo-ey commented Jan 31, 2021

We just released a new beta version, please update your version to Pro v3.1.0 Beta 2.

This beta release includes:

  • Tweak: Added Word Wrap control to Code Highlight widget (Please Add Word-Wrap to the Code Highlighter WidgetΒ #13577)
  • Tweak: Upgraded Font Awesome Pro library to v5.15.1
  • Tweak: Added height control to Table of Contents widget for better customization
  • Tweak: Added Font Size control to Code Highlight widget
  • Tweak: Polished UI in Custom Code screens
  • Tweak: Added descriptive tooltips in Custom Code screen
  • Tweak: Added "Instances" column to Custom Code overview screen
  • Tweak: Added feature description to Custom Code screen
  • Tweak: Removed inline color control from Code Highlight widget
  • Tweak: Optimized asset loading for Code Highlight widget
  • Tweak: Added hook for adding new language syntax in Code Highlight widget
  • Fix: Slides are playing in an infinite loop mode even when the option is disabled in Slides Widget (Slides Widget "Infinite Loop" Option Does Not Properly Work With AutoplayΒ #6726)
  • Fix: Removed "Visibility" option from the publish meta box in Custom Code
  • Fix: Wrong update notices in Custom Code
  • Fix: JS error is thrown when editing and saving global widgets
  • Fix: Publishing Custom Code without display conditions results with an error
  • Fix: Removed redundant control display condition from Animated Headline widget

Please keep this related to the Current beta Only! any other Issue Report or Feature Request feel free to open a new issue.

Thanks again to everyone.

@shilo-ey shilo-ey changed the title πŸ“£ Elementor Pro v3.1 Beta Release πŸ“£ πŸ“£ Elementor Pro v3.1 Beta 2 Release πŸ“£ Jan 31, 2021
@jormeer
Copy link

jormeer commented Jan 31, 2021

Thanks for new beta.
Is this correct?
Tweak: Upgraded Font Awesome Pro library to v5.15.1 (#13405)

It seems to link to different issue. About having submenu indicator option to choose own svg or icon. (which i would love)

@shilo-ey
Copy link
Contributor Author

shilo-ey commented Feb 2, 2021

I left here a compatibility problem with the codemirror text field, in case it helps

https://wordpress.org/support/topic/incompatibility-with-future-elementor-update-custom-codes/#post-13961628

Thanks @sermalefico, we are looking into it

Thanks for new beta.
Is this correct?
Tweak: Upgraded Font Awesome Pro library to v5.15.1 (#13405)

It seems to link to different issue. About having submenu indicator option to choose own svg or icon. (which i would love)

@jormeer

Thanks, removed this reference. sorry for the mix up

Thank you all.

@fabigrafo
Copy link

Here's a suggestion regarding the custom code functionality from my point of view as a web creator:

The situation:

  • If you're a pro web creator you need to add all sorts of code snippets to your projects (adjust WP functionality, connect GA etc.)
  • Before, people would create a child theme and add code there. But child themes are old-school now.
  • Today, people use plugins like https://wordpress.org/plugins/code-snippets/ to add code snippets.
  • Anytime I build a website for a client, I have to install the Code Snippet plugin.

The problem:

  • The new custom code feature is only for HTML code. As web creator, I need a functionality to easily add (php / js / html) code snippets. Your solution doesn't really solve the custom code problem, so I still need to install some code snippet plugin.
  • Adding custom HTML is just a small part of custom code needs.

The solution

  • You should make a proper custom code solution, so web creators don't have to install code snippet plugins.
  • Like this: https://wordpress.org/plugins/code-snippets/ (php / html / js snippets, check for errors before publishing)

Summary

How it was: "Want to change/add some function? Create a child theme and... bla bla."
How it is: "Want to change/add some function? Install some code snippet plugin and put this code there."
How it should be "Want to change/add some function? Elementor custom code feature has got you covered."

WordPress has a snippet for just about anything you need. If you're a pro web creator, you will be using snippets all the time. Having this function in a page builder makes perfect sense. Having only custom HTML functionality doesn't solve the problem for web creators and we will still have to use plugins.

You can prevent publishing if the code throws an error (like other code snippets plugins), so that's not an issue.

If the argument is something like "We don't want people adding php code, because...". Well, web creators add php snippets all the time. The question is, will they have to do it with other plugins, or will they be able to do it in Elementor?

@shilo-ey What about this? Are you considering implement this for the release?

@jazir555
Copy link

jazir555 commented Feb 3, 2021

@shilo-ey Maybe I'm misunderstanding the code highlight widget, but does it allow you to actually insert executable code? Or is it only for displaying code. If it's only for displaying code that seems like a very niche use case. Having the ability to execute code from the widget would be great, so if it already does that fantastic.

@L-U-C-K-Y
Copy link

@shilo-ey Maybe I'm misunderstanding the code highlight widget, but does it allow you to actually insert executable code? Or is it only for displaying code. If it's only for displaying code that seems like a very niche use case. Having the ability to execute code from the widget would be great, so if it already does that fantastic.

It's only for displaying code. You can copy it to your clipboard too though.

The other feature mentioned in the post is to add custom code at various places of the website that executes.

What is the use-case for having the code highlight widget to also execute code?

@jazir555
Copy link

jazir555 commented Feb 3, 2021 via email

@jazir555
Copy link

jazir555 commented Feb 3, 2021 via email

@jazir555
Copy link

jazir555 commented Feb 3, 2021 via email

@sermalefico
Copy link

I have worked with designers who prefer straight code over a page builder, so integrating code directly into the widget/editor and allowing it to be placed anywhere would be the best option. They feel like drag and drop is limiting, so I feel like this would be the best of both worlds.
…
On Wed, Feb 3, 2021, 3:33 AM Michael Meadow @.> wrote: Adding the ability to execute JavaScript and php code in the widget would make this functionality useful On Wed, Feb 3, 2021, 3:33 AM Michael Meadow @.> wrote: > What is the use-case for having the code highlight widget to also execute > code? > > The global custom code feature allows you to run custom(as I understand > it) html(and that's all that's supported). > > Allowing this widget to execute code would allow you to place your code > in a much more targeted manner. You may only want to execute code on a > specific portion of the page, and widgetizing it allows you to place it > exactly where it needs to be. > > On Wed, Feb 3, 2021, 2:46 AM Lucky @.***> wrote: > >> @shilo-ey https://github.com/shilo-ey Maybe I'm misunderstanding the >> code highlight widget, but does it allow you to actually insert executable >> code? Or is it only for displaying code. If it's only for displaying code >> that seems like a very niche use case. Having the ability to execute code >> from the widget would be great, so if it already does that fantastic. >> >> It's only for displaying code. You can copy it to your clipboard too >> though. >> >> The other feature mentioned in the post is to add custom code at various >> places of the website that executes. >> >> What is the use-case for having the code highlight widget to also >> execute code? >> >> β€” >> You are receiving this because you commented. >> Reply to this email directly, view it on GitHub >> <#13633 (comment)>, >> or unsubscribe >> https://github.com/notifications/unsubscribe-auth/AHSHPLZSJRIEU2QD6KLKGSTS5ESRVANCNFSM4WLBN7FA >> . >> >

I think is more suitable if the custom code post type have shortcode copy/paste like elementor templates. Because put code (php) inside widget can make critical errors when save and can break websites, pages or templates.

@shilo-ey shilo-ey changed the title πŸ“£ Elementor Pro v3.1 Beta 2 Release πŸ“£ πŸ“£ Elementor Pro v3.1 Beta 3 Release πŸ“£ Feb 7, 2021
@shilo-ey
Copy link
Contributor Author

shilo-ey commented Feb 7, 2021

We just released a new beta version, please update your version to Pro v3.1.0 Beta 3.

This beta release includes:

  • Tweak: Align Custom Code Display Conditions modal with Theme Builder UI
  • Fix: Duplicate button Text Color control in Slides widget
  • Fix: Can't update saved conditions in certain cases in Custom Code
  • Fix: Custom Code conflicts with ACF Extended plugin
  • Fix: Custom Code specific conditions are being replaced with 'All Singular' in edge cases
  • Fix: Display Conditions modal is only triggered once in Custom Code
  • Fix: Editor user role can edit Custom Code
  • Fix: Custom Code snippet is not printed on initial publish
  • Fix: Missing 'Learn More' link in Create New screen
  • Fix: get_version API function may fail with Redis / DB cache
  • Fix: Multiple license check requests are created in certain cases

Please keep this related to the Current beta Only! any other Issue Report or Feature Request feel free to open a new issue.

Thanks again to everyone.

@rotemee
Copy link
Contributor

rotemee commented Feb 7, 2021

Hi! this is related to Improved Asset Loading...
I have a shortcode in a shortcode widget in elementor [wbcr_php_snippet id="125"] in frontend this works. My shortcode loads conditional swiper files but inside the elementor editor don't load swiper files. My custom slider is freeze with no errors.

I need more funtions or hook to make this works inside elementor editor or my code is wrong?

thx!

this is the code inside my shortcode:

<?php $featured_posts = get_field('destacados',2);

if( $featured_posts ): ?>
   <div class="swiper-container swiper-scale-effect" id="banner-inicio">
    <div class="swiper-wrapper">
    <?php foreach( $featured_posts as $featured_post ): 
        $permalink = get_permalink( $featured_post->ID );
        $title = get_the_title( $featured_post->ID );
 $image = get_the_post_thumbnail_url( $featured_post->ID, '2048x2048' );
        $custom_field = get_field( 'field_name', $featured_post->ID );
 $id = $featured_post->ID;
        ?>
    <div data-skip-lazy class="Aligner parallax-bg clase-fondo swiper-slide">

			<?php echo do_shortcode( '[e-addons-template id="118" ajax="true" css="true" post_id="'. $id .'"]' ); ?>
					
<div data-background="<?php echo $image;?>"  style="background-image:url('<?php echo $image;?>');" class="swiper-lazy slide1 swiper-slide-cover"><div class="swiper-lazy-preloader"></div>

			</div>

       </div>
    <?php endforeach; ?>
 </div>
<div class="swiper-pagination swiper-pagination-banner-inicio"></div>   
    <div class="swiper-button-prev swiper-button-black swiper-button-prev-banner-inicio"></div>
    <div class="swiper-button-next swiper-button-black swiper-button-next-banner-inicio"></div>
  </div>
<?php endif; ?>


  <script>
	
jQuery(document).ready(function($){
	
	
$(window).on('elementor/frontend/init', function () {
// wait for elementor pro to load
elementorFrontend.on('components:init', function () {
			
const asyncSwiper = elementorFrontend.utils.swiper;
			
new asyncSwiper( "#banner-inicio", {
loop: true, 
autoHeight: true,
speed: 800, 
watchOverflow: true, 
observer: true,
observeParents: true, 
parallax: true,
autoplay: {
delay: 4000,
},
pagination: {
el: '.swiper-pagination-banner-inicio',
type: 'bullets',
clickable: true,
},
navigation: { 
nextEl: '.swiper-button-next-banner-inicio', 
prevEl: '.swiper-button-prev-banner-inicio', 
}, 
preloadImages: false,
lazy: {
loadPrevNext: true, 
loadOnTransitionStart: false, 
},
effect: 'slide', 
fadeEffect: { crossFade: true }, 
} ).then( ( newSwiperInstance ) => {

	  bannerinicio = newSwiperInstance;
	  
}); 
	
});
});
		
});		
</script>

@sermalefico - Since you are using a shortcode to execute your script, inside the editor the following hooks are triggered before your shortcode script runs and therefore not executed:

$(window).on('elementor/frontend/init', function() {
	elementorFrontend.on('components:init', function () {
		// ...
	});
});

Thus, when using a shortcode you shouldn't use these hooks inside the editor.

An optional solution can be as follows:

jQuery(document).ready(function($) {			
	if ( elementorFrontend.isEditMode() ) {
		// Call your function here.
	} else {
		elementorFrontend.on('components:init', function() {
			// Call your function here.
		});
	}
});

Create a function that initializes the swiper and call it instead of the comments: "// Call your function here.".
The code snippet mentioned above should work in the frontend and the editor as well.

@shilo-ey shilo-ey added the product/pro Indicates if the referenced component is part of the Elementor Pro plugin. label Feb 7, 2021
@shilo-ey
Copy link
Contributor Author

shilo-ey commented Feb 9, 2021

Hey all, the release date has been postponed to next week.

If you spot any new issues please share them with us here.

Thanks!

@sermalefico
Copy link

sermalefico commented Feb 11, 2021

Oops! i have a mistake! sorry now is works!. thx! Now can load swiper with the improved assets loading, cool!

 <script>

jQuery(document).ready(function($) {			
	if ( elementorFrontend.isEditMode() ) {
		
			
const asyncSwiper = elementorFrontend.utils.swiper;
			
new asyncSwiper( "#banner-inicio", {
loop: true, 
autoHeight: true,
speed: 800, 
watchOverflow: true, 
observer: true,
observeParents: true, 
parallax: true,
autoplay: {
delay: 4000,
},
pagination: {
el: '.swiper-pagination-banner-inicio',
type: 'bullets',
clickable: true,
},
navigation: { 
nextEl: '.swiper-button-next-banner-inicio', 
prevEl: '.swiper-button-prev-banner-inicio', 
}, 
preloadImages: false,
lazy: {
loadPrevNext: true, 
loadOnTransitionStart: false, 
},
effect: 'slide', 
fadeEffect: { crossFade: true }, 
} ).then( ( newSwiperInstance ) => {

	  bannerinicio = newSwiperInstance;
	  

	
});
	} else {
	
		elementorFrontend.on('components:init', function() {
			
		
			
const asyncSwiper = elementorFrontend.utils.swiper;
			
new asyncSwiper( "#banner-inicio", {
loop: true, 
autoHeight: true,
speed: 800, 
watchOverflow: true, 
observer: true,
observeParents: true, 
parallax: true,
autoplay: {
delay: 4000,
},
pagination: {
el: '.swiper-pagination-banner-inicio',
type: 'bullets',
clickable: true,
},
navigation: { 
nextEl: '.swiper-button-next-banner-inicio', 
prevEl: '.swiper-button-prev-banner-inicio', 
}, 
preloadImages: false,
lazy: {
loadPrevNext: true, 
loadOnTransitionStart: false, 
},
effect: 'slide', 
fadeEffect: { crossFade: true }, 
} ).then( ( newSwiperInstance ) => {

	  bannerinicio = newSwiperInstance;
	  
}); 
	
});

	}
});


</script>

Hi! this is related to Improved Asset Loading...
I have a shortcode in a shortcode widget in elementor [wbcr_php_snippet id="125"] in frontend this works. My shortcode loads conditional swiper files but inside the elementor editor don't load swiper files. My custom slider is freeze with no errors.
I need more funtions or hook to make this works inside elementor editor or my code is wrong?
thx!
this is the code inside my shortcode:

<?php $featured_posts = get_field('destacados',2);

if( $featured_posts ): ?>
   <div class="swiper-container swiper-scale-effect" id="banner-inicio">
    <div class="swiper-wrapper">
    <?php foreach( $featured_posts as $featured_post ): 
        $permalink = get_permalink( $featured_post->ID );
        $title = get_the_title( $featured_post->ID );
 $image = get_the_post_thumbnail_url( $featured_post->ID, '2048x2048' );
        $custom_field = get_field( 'field_name', $featured_post->ID );
 $id = $featured_post->ID;
        ?>
    <div data-skip-lazy class="Aligner parallax-bg clase-fondo swiper-slide">

			<?php echo do_shortcode( '[e-addons-template id="118" ajax="true" css="true" post_id="'. $id .'"]' ); ?>
					
<div data-background="<?php echo $image;?>"  style="background-image:url('<?php echo $image;?>');" class="swiper-lazy slide1 swiper-slide-cover"><div class="swiper-lazy-preloader"></div>

			</div>

       </div>
    <?php endforeach; ?>
 </div>
<div class="swiper-pagination swiper-pagination-banner-inicio"></div>   
    <div class="swiper-button-prev swiper-button-black swiper-button-prev-banner-inicio"></div>
    <div class="swiper-button-next swiper-button-black swiper-button-next-banner-inicio"></div>
  </div>
<?php endif; ?>


  <script>
	
jQuery(document).ready(function($){
	
	
$(window).on('elementor/frontend/init', function () {
// wait for elementor pro to load
elementorFrontend.on('components:init', function () {
			
const asyncSwiper = elementorFrontend.utils.swiper;
			
new asyncSwiper( "#banner-inicio", {
loop: true, 
autoHeight: true,
speed: 800, 
watchOverflow: true, 
observer: true,
observeParents: true, 
parallax: true,
autoplay: {
delay: 4000,
},
pagination: {
el: '.swiper-pagination-banner-inicio',
type: 'bullets',
clickable: true,
},
navigation: { 
nextEl: '.swiper-button-next-banner-inicio', 
prevEl: '.swiper-button-prev-banner-inicio', 
}, 
preloadImages: false,
lazy: {
loadPrevNext: true, 
loadOnTransitionStart: false, 
},
effect: 'slide', 
fadeEffect: { crossFade: true }, 
} ).then( ( newSwiperInstance ) => {

	  bannerinicio = newSwiperInstance;
	  
}); 
	
});
});
		
});		
</script>

@sermalefico - Since you are using a shortcode to execute your script, inside the editor the following hooks are triggered before your shortcode script runs and therefore not executed:

$(window).on('elementor/frontend/init', function() {
	elementorFrontend.on('components:init', function () {
		// ...
	});
});

Thus, when using a shortcode you shouldn't use these hooks inside the editor.

An optional solution can be as follows:

jQuery(document).ready(function($) {			
	if ( elementorFrontend.isEditMode() ) {
		// Call your function here.
	} else {
		elementorFrontend.on('components:init', function() {
			// Call your function here.
		});
	}
});

Create a function that initializes the swiper and call it instead of the comments: "// Call your function here.".
The code snippet mentioned above should work in the frontend and the editor as well.

Ei @rotemee swiper still doesn't load inside the elementor editor but if it loads on the frontend, I don't understand what I'm doing wrong, i am in the same situation.

 <script>

jQuery(document).ready(function($) {			
	if ( elementorFrontend.isEditMode() ) {
		elementorFrontend.on('components:init', function () {
			
const asyncSwiper = elementorFrontend.utils.swiper;
			
new asyncSwiper( "#banner-inicio", {
loop: true, 
autoHeight: true,
speed: 800, 
watchOverflow: true, 
observer: true,
observeParents: true, 
parallax: true,
autoplay: {
delay: 4000,
},
pagination: {
el: '.swiper-pagination-banner-inicio',
type: 'bullets',
clickable: true,
},
navigation: { 
nextEl: '.swiper-button-next-banner-inicio', 
prevEl: '.swiper-button-prev-banner-inicio', 
}, 
preloadImages: false,
lazy: {
loadPrevNext: true, 
loadOnTransitionStart: false, 
},
effect: 'slide', 
fadeEffect: { crossFade: true }, 
} ).then( ( newSwiperInstance ) => {

	  bannerinicio = newSwiperInstance;
	  
}); 
	
});
	} else {
	
		elementorFrontend.on('components:init', function() {
			
		
			
const asyncSwiper = elementorFrontend.utils.swiper;
			
new asyncSwiper( "#banner-inicio", {
loop: true, 
autoHeight: true,
speed: 800, 
watchOverflow: true, 
observer: true,
observeParents: true, 
parallax: true,
autoplay: {
delay: 4000,
},
pagination: {
el: '.swiper-pagination-banner-inicio',
type: 'bullets',
clickable: true,
},
navigation: { 
nextEl: '.swiper-button-next-banner-inicio', 
prevEl: '.swiper-button-prev-banner-inicio', 
}, 
preloadImages: false,
lazy: {
loadPrevNext: true, 
loadOnTransitionStart: false, 
},
effect: 'slide', 
fadeEffect: { crossFade: true }, 
} ).then( ( newSwiperInstance ) => {

	  bannerinicio = newSwiperInstance;
	  
}); 
	
});

	}
});


</script>

@jazir555
Copy link

jazir555 commented Feb 12, 2021

@shilo-ey

I wanted to update you on the bug report for WP-Rocket. After conferring with Gabe Livan over email, he came up with a solution that worked. This issue has a workaround, which is to add an exclusion for swiper.js in wp-rockets concentation settings. This allows the asset cleanup method and the asset loading experiment to function as expected and prevents the file from loading on the page. My page size was immediately reduced upon adding the exclusion. Asset Cleanup and the loading experiment then prevent the file from loading, the expected behavior.

To fully solve the issue, I think you may need to contact the WP-Rocket devs. The permanent fix would be to apply/add these exclusions on the fly based on whether the js file is supposed to load on the page. That way the file is not included in the concentated/minified file that WP-Rocket generates if the file is supposed to be disabled. The current workaround I found disables the concentation of these JS files globally across the site, the permanent fix needs to be a more targeted solution that disables the js files per page as needed.

Seeing as you will likely extend this functionality to css files in the future, I would assume the same exclusions would need to be added for each css file that should load conditionally.

@rodolphebertozzo
Copy link
Contributor

rodolphebertozzo commented Feb 14, 2021

@shilo-ey, pay attention to this display detail when the condition edit window appears for the custom code function, it is not totally centered ;)
detail

@shilo-ey
Copy link
Contributor Author

@shilo-ey

I wanted to update you on the bug report for WP-Rocket. After conferring with Gabe Livan over email, he came up with a solution that worked. This issue has a workaround, which is to add an exclusion for swiper.js in wp-rockets concentation settings. This allows the asset cleanup method and the asset loading experiment to function as expected and prevents the file from loading on the page. My page size was immediately reduced upon adding the exclusion. Asset Cleanup and the loading experiment then prevent the file from loading, the expected behavior.

To fully solve the issue, I think you may need to contact the WP-Rocket devs. The permanent fix would be to apply/add these exclusions on the fly based on whether the js file is supposed to load on the page. That way the file is not included in the concentated/minified file that WP-Rocket generates if the file is supposed to be disabled. The current workaround I found disables the concentation of these JS files globally across the site, the permanent fix needs to be a more targeted solution that disables the js files per page as needed.

Seeing as you will likely extend this functionality to css files in the future, I would assume the same exclusions would need to be added for each css file that should load conditionally.

Thanks, we will contact them.

By the way, if you clear cache after activating this experiment do you still experience issues?

@shilo-ey, pay attention to this display detail when the condition edit window appears for the custom code function, it is not totally centered ;)
detail

Can you share your viewport resolution?

Thanks

@rodolphebertozzo
Copy link
Contributor

16.4 pouces

@jazir555
Copy link

jazir555 commented Feb 14, 2021 via email

@perks98
Copy link

perks98 commented Feb 15, 2021

Elementor Pro 3.1 is now live

@Jorihlen
Copy link

Jorihlen commented Feb 15, 2021

There is an inconsistency in uploading the update
"An error occurred while updating Elementor Pro: Could not create directory elementor-pro/core/app/modules/site-editor/assets/js/atoms"
This is in a local environment (Windows 10 + Flywheel)

@fabigrafo
Copy link

Elementor Pro 3.1 is now live

Not in germany. πŸ˜…

@d19dotca
Copy link

Updated yesterday afternoon when I first noticed it, at least on a few websites. So far no noticeable issues.

@d19dotca
Copy link

d19dotca commented Feb 15, 2021

This isn't cache based unfortunately, it just seems to be wp-rocket concentating files it shouldn't be and they have to be excluded for the unload rules to be noticed/take effect. It's concentation rules seem to have higher priority than the way the files are dequeued via elementor's asset loading/asset cleanup's unload method, so the concentation rules win, hence the needed exclusion.

Thank you for finding that root cause, that makes a lot of sense now why I didn't immediately notice too much difference, as WP Rocket is used on all my client sites.

Just curious... is there a list currently for the various files that we should be excluding in WP Rocket, or I guess that will depend on every site individually? What is the best way to determine which scripts we should exclude for now?οΏΌοΏΌ Or does it perhaps make more sense to just temporarily disable one of the features inside WP Rocket?οΏΌ

@jazir555
Copy link

jazir555 commented Feb 16, 2021

This isn't cache based unfortunately, it just seems to be wp-rocket concentating files it shouldn't be and they have to be excluded for the unload rules to be noticed/take effect. It's concentation rules seem to have higher priority than the way the files are dequeued via elementor's asset loading/asset cleanup's unload method, so the concentation rules win, hence the needed exclusion.

Thank you for finding that root cause, that makes a lot of sense now why I didn't immediately notice too much difference, as WP Rocket is used on all my client sites.

Just curious... is there a list currently for the various files that we should be excluding in WP Rocket, or I guess that will depend on every site individually? What is the best way to determine which scripts we should exclude for now?οΏΌοΏΌ Or does it perhaps make more sense to just temporarily disable one of the features inside WP Rocket?οΏΌ

The list is the same as the list of widgets that are now selectively disabled by the asset loading experiment. That means you would have to create a separate exclusion for each individual js file that's now supposed to be disabled by the asset loading experiment.

The issue with my workaround is it's a general, messy solution. If we add a js file to the exclusion list, it's excluded everywhere, even for pages that the file is supposed to load on, which will hurt performance of those pages. Adding something to the exclusion box does so site-wide, it is indiscriminate.

WP-Rocket will have to be updated by their devs to include a patch to add the exclusions for the js files on a more targeted, per-page basis.

The exclusion method will work if you are not using for example the swiper.js file anywhere on your site, but will not if you only have a slider on one page(the js file will not be concentated ever if you apply a global exclusion). The Elementor asset loading experiment selectively disables the js file based on whether it is being used on the page, WP-Rocket will have to be updated to automatically accommodate this behavior.

Basically this needs to be fixed by their devs on their end. I've already made a github bug report on their github. To get this fixed, the elementor devs definitely need to reach out and you guys should definitely post on the github issue on their issues list, they only fix bugs once they get enough complaints. Their time to implement fixes is generally glacial, so the more people that post in this thread requesting a fix, the faster a fix will get implemented.

wp-media/wp-rocket#3544

@d19dotca
Copy link

The issue with my workaround is it's a general, messy solution. If we add a js file to the exclusion list, it's excluded everywhere, even for pages that the file is supposed to load on, which will hurt performance of those pages. Adding something to the exclusion box does so site-wide, it is indiscriminate.

Ah good point, I had it in my mind when reading this earlier that this would be fixable by adding to the exclusions list, I completely forgot at that moment that it'd have a negative impact too on pages that do use that JS file. Glad you pointed that out.

Basically this needs to be fixed by their devs on their end. I've already made a github bug report on their github. To get this fixed, the elementor devs definitely need to reach out and you guys should definitely post on the github issue on their issues list, they only fix bugs once they get enough complaints. Their time to implement fixes is generally glacial, so the more people that post in this thread requesting a fix, the faster a fix will get implemented.
wp-media/wp-rocket#3544

Ah yeah that's fantastic, already found that earlier today and upvoted it. I subscribed to their updates in both here and WP Rocket's issue, so I'll hopefully chime in whenever I can add anything useful. Thanks for all the hard work narrowing that issue down! πŸ˜ƒ

@shilo-ey
Copy link
Contributor Author

@jazir5 Thanks, we are in communication with WP-Rocket team to see if there's an option to improve this loading mechanism.

The version is officially released, feel free to update to the latest version of Elementor Pro.

Thank you all for your feedback, and once again, for making Elementor better!

See you soon ;)

@shilo-ey shilo-ey removed the help wanted Announcements that request help from users, like Public Beta testing programs. label Feb 16, 2021
@shilo-ey shilo-ey unpinned this issue Feb 16, 2021
@danydev
Copy link

danydev commented Mar 11, 2021

@jazir5 the issue in wp-rocket has been closed as not reproducible wp-media/wp-rocket#3544
can you confirm that is really solved somehow? So the manual exclusion is not needed anymore?

@jazir555
Copy link

jazir555 commented Mar 11, 2021 via email

@nicholaszein nicholaszein added help wanted Announcements that request help from users, like Public Beta testing programs. solved Indicates that an Issue has been Solved, or a Feature Request has been Released. labels May 24, 2023
@elementor elementor locked and limited conversation to collaborators May 24, 2023
@nicholaszein nicholaszein changed the title πŸ“£ Elementor Pro v3.1 Beta 3 Release πŸ“£ βœ… πŸ“£ Elementor Pro v3.1 Beta 3 Release πŸ“£ Sep 23, 2023
@nicholaszein nicholaszein added mod* announcement Used for general announcements. labels Sep 23, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
announcement Used for general announcements. help wanted Announcements that request help from users, like Public Beta testing programs. mod* product/pro Indicates if the referenced component is part of the Elementor Pro plugin. solved Indicates that an Issue has been Solved, or a Feature Request has been Released.
Projects
None yet
Development

No branches or pull requests