elementor / elementor/elementor

Widgets: stylesheets are not enqueued when a WordPress widget is added to an Elementor page

Open
#29,010 7 comments 0 reactions 0 assignees View on GitHub
type/developer-api
Dominant language
PHP
Stars
7.1k
Forks
1.6k
Avg merge
1d 5h
Merged PRs (30d)
193

Description

### Prerequisites

- [X] I have searched for similar issues in open and closed tickets and cannot find a duplicate.
- [X] I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

### Description

Plugins can register WordPress widgets using the Widgets API (`register_widget` and extending the `WP_Widget` class). When they do that, they can enqueue scripts and styles for their widget, by hooking `wp_enqueue_scripts`. A good practice when enqueuing custom scripts and styles is to only enqueue them when the widget is present on the page. That can be checked with the `is_active_widget` feature. Unfortunately, `is_active_widget` does not return `true` on pages where a widget has been added to the page via the Elementor editor

### Steps to reproduce

1. Start by installing the latest version of the Elementor plugin.
2. Add a plugin that registers a widget on the site. That widget must enqueue custom styles like so:

```php
'My widget description',
'customize_selective_refresh' => true,
'show_instance_in_rest' => true,
)
);

$this->default_title = 'My widget description';

if ( is_active_widget( false, false, $this->id_base ) || is_customize_preview() ) {
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_style' ) );
}
}

/**
* Enqueue stylesheet.
*/
public function enqueue_style() {
wp_register_style(
'my-custom-widget',
plugins_url( 'style.css', __FILE__ ),
array(),
'20241017'
);
wp_enqueue_style( 'my-custom-widget' );
}

... Rest of the widget registration and display logic.
}
```

3. Go to Pages > Add New
4. Open the Elementor Editor
5. Add a new container.
6. In that container, add our WordPress widget (scroll down to the "WordPress" part of the inserter, you should see the custom widget there)
7. Publish the page.
8. View it on the frontend.

### Expected behavior

I would expect my stylesheet to be enqueued on the page since the widget is present there. Unfortunately, it is not enqueued until I remove the `is_active_widget` check.

### Isolating the problem

- [ ] This bug happens when only the Elementor (and Elementor Pro) plugins are active.
- [ ] This bug happens with the Hello Elementor theme active.
- [X] I can reproduce this bug consistently by following the steps I described above.

### Elementor System Info

```txt
== Server Environment ==
Operating System: Linux
Software: nginx
MySQL version: MariaDB Server v10.11.9-MariaDB-log
PHP Version: 8.1.30
PHP Memory Limit: 512M
PHP Max Input Vars: 6144
PHP Max Post Size: 2047M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected

== WordPress Environment ==
Version: 6.6.2
Site URL: https://my-site.com
Home URL: https://my-site.com
WP Multisite: No
Max Upload Size: 2 GB
Memory limit: 512M
Max Memory limit: 512M
Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
Language: en_US
Timezone: 0
Admin Email: my@email.com
Debug Mode: Active

== Theme ==
Name: Twenty Fourteen
Version: 4.0
Author: the WordPress team
Child Theme: No

== User ==
Role: administrator
WP Profile lang: en-US
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0

== Active Plugins ==
Elementor
Version: 3.24.7
Author: Elementor.com

My custom plugin
Version: 1.0.0
Author: jeherve

== Elementor Experiments ==
Improved CSS Loading: Inactive by default
Inline Font Icons: Active by default
Additional Custom Breakpoints: Active by default
Flexbox Container: Active by default
Grid Container: Active by default
Upgrade Swiper Library: Active by default
Nested Elements Performance: Active by default
Optimized Control Loading: Active by default
Optimized Markup: Inactive by default
Conditionally load Swiper CSS files: Inactive by default
Plugin Onboarding: Active by default
Elementor Home Screen: Active by default
Build with AI: Active by default
Landing Pages: Inactive by default
Launchpad Checklist: Inactive by default
Nested Elements: Active by default
Editor Top Bar: Active by default
Pages Panel: Inactive by default
Element Caching: Active by default
Link In Bio: Active by default
Floating Buttons: Active by default
Elementor Editor Events: Inactive by default
Atomic Widgets: Inactive by default

== Log ==

JS: showing 1 of 1JS: 2024-10-15 14:07:55 [error X 1][https://my-site.com/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.24.7:3:836882] can't access property "toLowerCase", T.originalEvent.key is undefined

== Elementor - Compatibility Tag ==
```

### Agreement

- [X] I agree that my issue may be closed without action if it doesn't meet all the requirements.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.