Blog

Elementor 2.8: New Color Picker

Elementor 2.8.0 is just around the corner and with it, we are introducing a new Color Picker control and parting from the trusty old Iris color picker.

By doing so, we are removing all wpColorPicker assets:

  • Iris.js
  • wp-color-picker.js
  • wp-color-picker-alpha.js

Including all of their dependencies.

Other than that we are deprecating the elementor.helpers.wpColorPicker() method and it will probably won’t work as expected anymore.

So if you did call it directly for some reason (why would you do that??) you need to either update your code to work with the new color picker or enqueue the removed assets yourself.

Read More »

v2.8.0: Planned Deprecations


Hey all! we are getting ready to release version 2.8.0. Here is the planned deprecation list:


PHP

Functions & Methods

Hard Deprecation

When a function/method is on hard deprecation phase, it means that the function/method will still work while it’s in this phase, but will add a PHP notice if the website WP_DEBUG property is set to true .

Function / Method NameChanges Made

Core\Base\Document::get_container_classes()

Core Plugin
Replaced by: Core\Base\Document::get_container_attributes()
Located in: core/base/document.php
In Soft deprecation since: 2.4.0
Deletion version: 3.2.0
Core\Base\Document::get_remote_library_type()

Core Plugin
Replaced by: Core\Base\Document::get_remote_library_config()
Located in: core/base/document.php
In Soft deprecation since: 2.4.0
Deletion version: 3.2.0
Core\Documents_Manager::get_groups()

Core Plugin
Replaced by:  none
Located in: core/documents-manager.php
In soft deprecation since:2.4.0
Deletion version:3.2.0
Group_Control_Posts::on_export_remove_setting_from_element()

Pro Plugin
Replaced by: none
Located in: modules/query-control/controls/group-control-posts.php
In soft deprecation since: 2.4.0
Deletion version: 3.2.0

Deletion

(more…) Read More »

Elementor Pro 2.7: New Approach to WooCommerce mini-cart

Starting Pro v2.7, Elementor adds its own mini-cart template. Instead of having the Menu Cart widget print the mini-cart markup, we are introducing a new mini-cart template that will be used by the Elementor Menu Cart widget. This change doesn’t affect the majority of our users.


Want to revert to your theme’s mini-cart template instead of Elementor’s?
You can disable the Elementor mini-cart markup and keep using the custom mini-cart template.

In order to disable Elementor mini-cart template simply go to your Dashboard > Elementor > Settings > Integrations tab > WooCommerce section and choose Disable.

Read More »

Elementor Pro 2.7: Popup Events

In Elementor Pro 2.7 we are adding two event triggers to our Popups:

  • elementor/popup/show – when a Popup is opened/shown
  • elementor/popup/hide – when a Popup is closed/hidden

One thing we get a lot of requests for is a way to track Popups and a way to initialize JavaScript-based elements when a popup is shown. To allow that we added these to events mentioned above so now every time a Popup is shown we trigger the elementor/popup/show event and when a popup is closed we trigger the elementor/popup/hide event.

(more…) Read More »

v2.7.0: Planned Deprecations


Hey all! we are getting ready to release version 2.7.0. Here is the planned deprecation list:

Functions & Methods


Hard Deprecation

When a function/method is on hard deprecation phase, it means that the function/method will still work while it’s in this phase, but will add a PHP notice if the website WP_DEBUG property is set to true .

Function / Method NameChanges Made
Controls_Stack::_get_items()

Core Plugin
Replaced by: Controls_Stack::get_items()
Located in: includes/base/controls-stack.php
In Soft deprecation since: 2.3.0
Deletion version: 3.1.0
DB::get_new_editor_from_wp_editor()

Core Plugin
Replaced by: Plugin::$instance->documents->get( $post_id )->convert_to_elementor()
Located in: includes/db.php
In Soft deprecation since: 2.3.0
Deletion version: 3.1.0
Editor::add_editor_template()

Core Plugin
Replaced by:  Plugin::$instance->common->add_template()
Located in: includes/editor.php
In soft deprecation since:2.3.0
Deletion version:3.1.0
Editor::create_nonce()

Core Plugin
Replaced by: Plugin::$instance->common->get_component( 'ajax' )->create_nonce()
Located in: includes/editor.php
In soft deprecation since: 2.3.0
Deletion version: 3.1.0
Editor::verify_ajax_nonce()

Core Plugin
Replaced by: None
Located in: includes/editor.php
In soft deprecation since: 2.3.0
Deletion version: 3.1.0
Editor::verify_nonce()

Core Plugin
Replaced by: wp_verify_nonce()
Located in: includes/editor.php
In soft deprecation since: 2.3.0
Deletion version: 3.1.0
Editor::verify_request_nonce()

Core Plugin
Replaced by: Plugin::$instance->common->get_component( 'ajax' )->verify_request_nonce()
Located in: includes/editor.php
In soft deprecation since: 2.3.0
Deletion version: 3.1.0

Deletion

When a function/method is on deletion phase, it means that the function/method will not work anymore, and will most likely throw a Fatal Error when it’s called.

Function / Method NameChanges Made
Controls_Stack::_get_parsed_settings()

Core Plugin
Replaced by: Controls_Stack::get_init_settings()
Located in: includes/base/controls-stack.php
In soft deprecation since: 2.3.0
In hard deprecation since: 2.3.0

Actions and Filters

Soft Deprecation

Action / FilterChanges Made
elementor/element/post/before_section_start Replaced by: elementor/element/wp-{$post}/before_section_start
Context: $post depends on the document type and can be either page or post
Type: Action (core)
Hard deprecation: 3.1.0
Deletion: 3.5.0
elementor/element/post/after_section_start Replaced by: elementor/element/wp-{$post}/after_section_start
Context: $post depends on the document type and can be either page or post
Type: Action (core)
Hard deprecation: 3.1.0
Deletion: 3.5.0
elementor/element/post/before_section_end Replaced by: elementor/element/wp-{$post}/before_section_end
Context: $post depends on the document type and can be either page or post
Type: Action (core)
Hard deprecation: 3.1.0
Deletion: 3.5.0
elementor/element/post/after_section_end Replaced by: elementor/element/wp-{$post}/after_section_end
Context: $post depends on the document type and can be either page or post
Type: Action (core)
Hard deprecation: 3.1.0
Deletion: 3.5.0

You can download the latest release of Elementor Core from WordPress repository, and the latest release of Elementor Pro from your Elementor dashboard.

If you spot any issues, please log them in detail on Github.

Read More »

Elementor 2.7: Moving Sliders from Slick to Swiper

Elementor has been using the Slick Slider library for various widgets and core functionality since the plugin’s early days. In addition to Slick slider, we also gradually introduced another slider library into Elementor, Swiper Slider. Elementor and Elementor Pro have been using Swiper for several widgets and other core functionality, such as lightbox gallery (browsing through an image gallery in lightbox mode).

Why we’re switching

Since we have been using both slider libraries in conjunction for a while, we could compare our experience with each of them in terms of performance, ease of use, and more. Swiper has proved itself to be more flexible, more performant, and more suitable for Elementor users’ needs.

In terms of loading speed and performance, using two different slider libraries simultaneously is inefficient. That is why we have decided to deprecate our usage of Slick slider.

(more…) Read More »

Elementor Pro 2.7: Custom Fonts `font-display` support

Elementor Pro 2.7 will add support for the font-display property which defines how font files are loaded and displayed by the browser.

This feature was widely requested ( #5993 ) so it is implemented with a default value of auto which is the equivalent to not having it at all.

You can now modify the value to block,swap,fallback,optional via a filter we added, ex:

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	return 'swap';
}, 10, 3 );

This will set all Elementor Pro Custom Fonts font-display to swap.

As can be seen, the filters’ callback accepts 3 arguments:

  • $current_value – (string) defaults ‘auto‘ the value filtered.
  • $font_family – (string) the current font family.
  • $data – (array) the current font data config.

You can use that to set different values based on your needs, ex, change only font family named ‘Lobster’ font-display to block:

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	if ( 'Lobster' === $font_family ) {
		$current_value = 'block';
	}
	return $current_value;
}, 10, 3 );
Read More »

Elementor 2.7: Background Video in Mobile Mode

Elementor has enabled adding videos as a background for sections for a long time now. 

In desktop mode, this worked great. In mobile mode, since mobile browsers blocked the autoplay feature for embedded videos, we hid the video backgrounds simply by giving the video container a CSS attribute of display: none.

This worked great, up until a few months ago, when several mobile browsers started to loosen their policy on blocking video autoplay. Unfortunately, this caused hidden videos to auto-play sound. Since we hide the video display itself, this was confusing for Elementor users and especially for mobile visitors of Elementor-based websites that used the background video feature.

Some developers and advanced users took advantage of this policy change in their websites by overriding our display CSS attribute with a display: block value, so their embedded videos are displayed in mobile as well. 

Starting from Elementor 2.7.0, such manipulation on the video container will not work. Due to this policy change by a variety of mobile browsers, we decided to change the way we remove background videos from mobile mode. Instead of simply hiding the video content with display: none, we will be removing the video content completely in mobile devices.

Since we learned that many users want the option to show the background video in mobile as well, we will also add an option (a toggle in the settings panel) to enable showing the background video in mobile mode. However, it is important to note that since not all mobile browsers allow video autoplay, video section background might not work on all mobile devices (in blocking browsers, users will probably see a black screen).

Read More »