Breakpoint System Changes in Elementor v3.2.0

As we have published several months ago, we have been working on releasing a highly requested feature – additional custom breakpoints. Core 3.2.0 is another milestone in the road to achieve this goal AND achieve better performance overall in Elementor sites as part of the process. As detailed in our recent blog post, step one of our roadmap is:

Convert hard-coded usage of breakpoints (tablet, mobile, default) to a dynamic system that will utilize registered breakpoints (the two existing ones + future Additional Custom Breakpoints).

In essence, these changes, as well as a lot of UI changes and additions as listed in step 2, are all included in Elementor Core 3.2.0.

Some Background

Custom breakpoints are used for generating custom CSS based on the values chosen by the user.

Prior to v3.2.0, each breakpoint was registered and utilized individually and in a hard-coded manner. They were called and used by name ('mobile', 'tablet'), or via their database setting keys in Site Settings ('viewport_md' and 'viewport_lg', respectively). You can see an example of this in this part of the source code on Github. The reason for this is simple – there are only two breakpoints in the system, and they are always active (even if the user doesn’t choose a custom value, Elementor’s breakpoints have default values). 

What’s New?

In Elementor 3.2.0, we introduce infrastructure that allows generating responsive CSS dynamically, when optional additional breakpoints are added.

Since additional breakpoints would not always be active (each user can choose which breakpoints they want to use), the usage of breakpoints, and their values in the CSS generation system, is now dynamic and not hard-coded. 

Min Width to Max Width

The default values for mobile and tablet breakpoints used to be 768px and 1025px. This is because when the breakpoint values were used in the stylesheet generation system, the registered breakpoint values were actually used in a min-width setup (for example, the mobile device breakpoint was registered as 0px, since it is the lowest breakpoint).

It is hard to explain in a short blog post why and how this was used to produce max-width media queries, but in Elementor Core 3.2.0, we changed this system to work in a more intuitive (and as stated above, dynamic) way. The default mobile and tablet breakpoint values will be changed to a proper max-width 767px and 1024px, respectively.

Prior to v3.2.0, the setting keys for the mobile and tablet breakpoint values were viewport_md and viewport_lg, respectively. They have now been changed to viewport_mobile and viewport_tablet, respectively. 

Backwards Compatibility

It is important to state that all of these changes are fully backwards-compatible. The legacy breakpoints settings will also be updated in the database, with adjustments to the old system. All of the old settings and APIs will still be available.

For example, to fetch Elementor’s breakpoints in PHP, you would call the  Responsive::get_breakpoints() static method. This method returned an array such as the following example:

[
	'xs' => 0,
	'sm' => 480,
	'md' => 768,
	'lg' => 1025,
	'xl' => 1440,
	'xxl' => 1600,
]

In JS, you would access the globally available elementorFrontend.config.breakpoints object which returned an identical structure.

These methods will still be available, but they have been entered into a deprecation process and will be removed from Elementor in the future. 

It is highly recommended that you migrate to use the new system, as detailed in the next section.

A New Breakpoints Class

CSS generation used to be based on the \Elementor\Core\Responsive\Responsive class. This class is becoming deprecated, and is replaced with the brand new Breakpoints Manager (\Elementor\Core\Breakpoints\Manager). All of the old functionality will still exist, but through the instance of the Breakpoints Manager, accessible programmatically via \Elementor\Plugin::$instance->breakpoints.

PHP

To get the default breakpoints data on the PHP side, you can call \Elementor\Core\Breakpoints\Manager::get_default_config(). This will return an associative array of breakpoints, each with 'label', 'default_value', and 'direction' (min/max) properties.

To get all breakpoint values, you can call \Elementor\Plugin::$instance->breakpoints->get_breakpoints(). This will return an array of breakpoint instances, like so:

[
	'mobile' => {Breakpoint class instance},
	'tablet' => {Breakpoint class instance},
	...
]

You can query each breakpoint instance for its value, like so:

$breakpoints = \Elementor\Plugin::$instance->breakpoints->get_breakpoints();
$breakpoints['mobile']->get_value();

Or, a shorter version:

$mobile_breakpoint_value = 
\Elementor\Plugin::$instance->breakpoints->get_breakpoints( 'mobile' )->get_value();

For similarly accessing just the active breakpoints, call \Elementor\Plugin::$instance->breakpoints->get_active_breakpoints().

JS

In JS, you can access the breakpoints object at elementorFrontend.config.responsive.breakpoints. The active breakpoints object is available by accessing elementorFrontend.config.responsive.activeBreakpoints.

What Do I Need to Do to Prepare for 3.2.0?

If you are a user – you probably don’t need to do much except the usual – back up your database before updating, and in case you use any 3rd-party add-ons to Elementor, make sure they are all up to date as well.

If you are an extension developer – make sure your extension is compatible with the new version. If you use the breakpoints system in any way – we highly recommend you migrate to using the new breakpoints system.

Once your plugin is successfully tested with Elementor 3.2.0, we also recommend updating your Elementor Compatibility tag accordingly.

What’s Next

Going back to our previous blog post, the last step in our roadmap is to modify and adjust the way controls are used, while making sure that the addition of multiple new breakpoints doesn’t harm performance. Stay tuned!