Scripts & Styles: Update registration & enqueue best practices (#306)

Author: rami-elementor

src/addons/initialization.md

@@ -22,32 +22,33 @@ final class Plugin {
 	 * @access public
 	 */
 	public function init(): void {
+		add_action( 'elementor/frontend/after_register_styles', [ $this, 'register_frontend_styles' ] );
+		add_action( 'elementor/frontend/after_register_scripts', [ $this, 'register_frontend_scripts' ] );
 
-		add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'frontend_styles' ] );
-		add_action( 'elementor/frontend/after_register_scripts', [ $this, 'frontend_scripts' ] );
-
+		add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_frontend_styles' ] );
+		add_action( 'elementor/frontend/after_enqueue_scripts', [ $this, 'enqueue_frontend_scripts' ] );
 	}
 
-	public function frontend_styles(): void {
-
+	public function register_frontend_styles(): void {
 		wp_register_style( 'frontend-style-1', plugins_url( 'assets/css/frontend-style-1.css', __FILE__ ) );
 		wp_register_style( 'frontend-style-2', plugins_url( 'assets/css/frontend-style-2.css', __FILE__ ), [ 'external-framework' ] );
 		wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );
-
-		wp_enqueue_style( 'frontend-style-1' );
-		wp_enqueue_style( 'frontend-style-2' );
-
 	}
 
-	public function frontend_scripts(): void {
-
+	public function register_frontend_scripts(): void {
 		wp_register_script( 'frontend-script-1', plugins_url( 'assets/js/frontend-script-1.js', __FILE__ ) );
 		wp_register_script( 'frontend-script-2', plugins_url( 'assets/js/frontend-script-2.js', __FILE__ ), [ 'external-library' ] );
 		wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
+	}
+
+	public function enqueue_frontend_styles(): void {
+		wp_enqueue_style( 'frontend-style-1' );
+		wp_enqueue_style( 'frontend-style-2' );
+	}
 
+	public function enqueue_frontend_scripts(): void {
 		wp_enqueue_script( 'frontend-script-1' );
 		wp_enqueue_script( 'frontend-script-2' );
-
 	}
 
 }

src/scripts-styles/control-scripts.md

@@ -6,20 +6,25 @@ When you create new [Elementor controls](./../controls/) and need to register cu
 
 ## Registering Control Scripts
 
-In the example below, we'll register scripts and enqueue them when creating new controls:
+In the example below, we'll register scripts when creating new controls:
 
-```php
-class Elementor_Test_Control extends \Elementor\Base_Control {
+```php {6}
+function my_plugin_register_control_scripts() {
+	wp_register_script( 'control-script-1', plugins_url( 'assets/js/control-script-1.js', __FILE__ ) );
+	wp_register_script( 'control-script-2', plugins_url( 'assets/js/control-script-2.js', __FILE__ ), [ 'external-library' ] );
+	wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
+}
+add_action( 'wp_enqueue_scripts', 'my_plugin_register_control_scripts' );
+```
 
-	protected function enqueue(): void {
+Then, the control class will enqueue the scripts:
 
-		wp_register_script( 'control-script-1', plugins_url( 'assets/js/control-script-1.js', __FILE__ ) );
-		wp_register_script( 'control-script-2', plugins_url( 'assets/js/control-script-2.js', __FILE__ ), [ 'external-library' ] );
-		wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
+```php {3}
+class Elementor_Test_Control extends \Elementor\Base_Control {
 
+	protected function enqueue(): void {
 		wp_enqueue_script( 'control-script-1' );
 		wp_enqueue_script( 'control-script-2' );
-
 	}
 
 }

src/scripts-styles/control-styles.md

@@ -6,20 +6,25 @@ When you create new [Elementor controls](./../controls/) and need to register cu
 
 ## Registering Control Styles
 
-In the example below, we'll register stylesheets and enqueue them when creating new controls:
+In the example below, we'll register stylesheets when creating new controls:
 
-```php
-class Elementor_Test_Control extends \Elementor\Base_Control {
+```php {6}
+function my_plugin_register_control_styles() {
+	wp_register_style( 'control-style-1', plugins_url( 'assets/css/control-style-1.css', __FILE__ ) );
+	wp_register_style( 'control-style-2', plugins_url( 'assets/css/control-style-2.css', __FILE__ ), [ 'external-framework' ] );
+	wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );
+}
+add_action( 'wp_enqueue_scripts', 'my_plugin_register_control_styles' );
+```
 
-	protected function enqueue(): void {
+Then, the control class will enqueue the styles:
 
-		wp_register_style( 'control-style-1', plugins_url( 'assets/css/control-style-1.css', __FILE__ ) );
-		wp_register_style( 'control-style-2', plugins_url( 'assets/css/control-style-2.css', __FILE__ ), [ 'external-framework' ] );
-		wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );
+```php {3}
+class Elementor_Test_Control extends \Elementor\Base_Control {
 
+	protected function enqueue(): void {
 		wp_enqueue_style( 'control-style-1' );
 		wp_enqueue_style( 'control-style-2' );
-
 	}
 
 }

src/scripts-styles/editor-scripts.md

@@ -2,38 +2,40 @@
 
 <Badge type="tip" vertical="top" text="Elementor Core" /> <Badge type="warning" vertical="top" text="Intermediate" />
 
-When you develop addons that extend [Elementor Editor](./../editor/) and you have your own custom scripts, use `elementor/editor/before_enqueue_scripts` or `elementor/editor/after_enqueue_scripts` action hooks, which are fired when editor scripts are registered and enqueued.
+When you develop addons that extend [Elementor Editor](./../editor/) and you have custom scripts, use `elementor/editor/before_enqueue_scripts` or `elementor/editor/after_enqueue_scripts` action hooks, which are fired when editor scripts are registered and enqueued.
 
 ## Registering Editor Scripts
 
 In the example below, we'll register and enqueue custom scripts **before** Elementor scripts are registered and enqueued:
 
-```php {11}
-function my_plugin_editor_scripts() {
-
+```php {6,12}
+function my_plugin_register_editor_scripts() {
 	wp_register_script( 'editor-script-1', plugins_url( 'assets/js/editor-script-1.js', __FILE__ ) );
 	wp_register_script( 'editor-script-2', plugins_url( 'assets/js/editor-script-2.js', __FILE__ ), [ 'external-library' ] );
 	wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
+}
+add_action( 'wp_enqueue_scripts', 'my_plugin_register_editor_scripts' );
 
+function my_plugin_enqueue_editor_scripts() {
 	wp_enqueue_script( 'editor-script-1' );
 	wp_enqueue_script( 'editor-script-2' );
-
 }
-add_action( 'elementor/editor/before_enqueue_scripts', 'my_plugin_editor_scripts' );
+add_action( 'elementor/editor/before_enqueue_scripts', 'my_plugin_enqueue_editor_scripts' );
 ```
 
 Now we'll register and enqueue custom scripts **after** Elementor scripts are registered and enqueued:
 
-```php {11}
-function my_plugin_editor_scripts() {
-
+```php {6,12}
+function my_plugin_register_editor_scripts() {
 	wp_register_script( 'editor-script-1', plugins_url( 'assets/js/editor-script-1.js', __FILE__ ) );
 	wp_register_script( 'editor-script-2', plugins_url( 'assets/js/editor-script-2.js', __FILE__ ), [ 'external-library' ] );
 	wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
+}
+add_action( 'wp_enqueue_scripts', 'my_plugin_register_editor_scripts' );
 
+function my_plugin_enqueue_editor_scripts() {
 	wp_enqueue_script( 'editor-script-1' );
 	wp_enqueue_script( 'editor-script-2' );
-
 }
-add_action( 'elementor/editor/after_enqueue_scripts', 'my_plugin_editor_scripts' );
+add_action( 'elementor/editor/after_enqueue_scripts', 'my_plugin_enqueue_editor_scripts' );
 ```

src/scripts-styles/editor-styles.md

@@ -2,38 +2,40 @@
 
 <Badge type="tip" vertical="top" text="Elementor Core" /> <Badge type="warning" vertical="top" text="Intermediate" />
 
-When you develop addons that extend [Elementor Editor](./../editor/) and you are using your own custom stylesheets, use `elementor/editor/before_enqueue_styles` or `elementor/editor/after_enqueue_scripts` action hooks, which are fired when editor styles are registered and enqueued.
+When you develop addons that extend [Elementor Editor](./../editor/) and you have custom stylesheets, use `elementor/editor/before_enqueue_styles` or `elementor/editor/after_enqueue_scripts` action hooks, which are fired when editor styles are registered and enqueued.
 
 ## Registering Editor Styles
 
 In the example below, we'll register and enqueue custom stylesheets **before** Elementor styles are registered and enqueued:
 
-```php {11}
-function my_plugin_editor_styles() {
-
+```php {6,12}
+function my_plugin_register_editor_styles() {
 	wp_register_style( 'editor-style-1', plugins_url( 'assets/css/editor-style-1.css', __FILE__ ) );
 	wp_register_style( 'editor-style-2', plugins_url( 'assets/css/editor-style-2.css', __FILE__ ), [ 'external-framework' ] );
 	wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );
+}
+add_action( 'elementor/editor/before_register_styles', 'my_plugin_register_editor_styles' );
 
+function my_plugin_enqueue_editor_styles() {
 	wp_enqueue_style( 'editor-style-1' );
 	wp_enqueue_style( 'editor-style-2' );
-
 }
-add_action( 'elementor/editor/before_enqueue_styles', 'my_plugin_editor_styles' );
+add_action( 'elementor/editor/before_enqueue_styles', 'my_plugin_enqueue_editor_styles' );
 ```
 
 Now we'll register and enqueue custom stylesheets **after** Elementor styles are registered and enqueued:
 
-```php {11}
-function my_plugin_editor_styles() {
-
+```php  {6,12}
+function my_plugin_register_editor_styles() {
 	wp_register_style( 'editor-style-1', plugins_url( 'assets/css/editor-style-1.css', __FILE__ ) );
 	wp_register_style( 'editor-style-2', plugins_url( 'assets/css/editor-style-2.css', __FILE__ ), [ 'external-framework' ] );
 	wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );
+}
+add_action( 'elementor/editor/after_register_styles', 'my_plugin_register_editor_styles' );
 
+function my_plugin_enqueue_editor_styles() {
 	wp_enqueue_style( 'editor-style-1' );
 	wp_enqueue_style( 'editor-style-2' );
-
 }
-add_action( 'elementor/editor/after_enqueue_styles', 'my_plugin_editor_styles' );
+add_action( 'elementor/editor/after_enqueue_styles', 'my_plugin_enqueue_editor_styles' );
 ```

src/scripts-styles/frontend-scripts.md

@@ -2,40 +2,42 @@
 
 <Badge type="tip" vertical="top" text="Elementor Core" /> <Badge type="warning" vertical="top" text="Intermediate" />
 
-Some addons have custom frontend scripts loaded to the client side on pages built with Elementor. In these cases, use `elementor/frontend/before_register_scripts` or `elementor/frontend/after_register_scripts` action hooks, which are fired when Elementor frontend scripts are registered and enqueued.
+Some addons have custom frontend scripts loaded on pages built with Elementor. Use `elementor/frontend/before_enqueue_scripts` or `elementor/frontend/after_enqueue_scripts` action hooks, which are fired when Elementor frontend scripts are registered and enqueued.
 
 ## Registering Frontend Scripts
 
 In the example below, we'll register and enqueue custom scripts **before** Elementor frontend scripts are registered and enqueued:
 
-```php {11}
-function my_plugin_frontend_scripts() {
-
+```php {6,12}
+function my_plugin_register_frontend_scripts() {
 	wp_register_script( 'frontend-script-1', plugins_url( 'assets/js/frontend-script-1.js', __FILE__ ) );
 	wp_register_script( 'frontend-script-2', plugins_url( 'assets/js/frontend-script-2.js', __FILE__ ), [ 'external-library' ] );
 	wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
+}
+add_action( 'elementor/frontend/before_register_scripts', 'my_plugin_register_frontend_scripts' );
 
+function my_plugin_enqueue_frontend_scripts() {
 	wp_enqueue_script( 'frontend-script-1' );
 	wp_enqueue_script( 'frontend-script-2' );
-
 }
-add_action( 'elementor/frontend/before_register_scripts', 'my_plugin_frontend_scripts' );
+add_action( 'elementor/frontend/before_enqueue_scripts', 'my_plugin_enqueue_frontend_scripts' );
 ```
 
 Now we'll register and enqueue custom scripts **after** Elementor frontend scripts are registered and enqueued:
 
-```php {11}
-function my_plugin_frontend_scripts() {
-
+```php {6,12}
+function my_plugin_register_frontend_scripts() {
 	wp_register_script( 'frontend-script-1', plugins_url( 'assets/js/frontend-script-1.js', __FILE__ ) );
 	wp_register_script( 'frontend-script-2', plugins_url( 'assets/js/frontend-script-2.js', __FILE__ ), [ 'external-library' ] );
 	wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
+}
+add_action( 'elementor/frontend/after_register_scripts', 'my_plugin_register_frontend_scripts' );
 
+function my_plugin_enqueue_frontend_scripts() {
 	wp_enqueue_script( 'frontend-script-1' );
 	wp_enqueue_script( 'frontend-script-2' );
-
 }
-add_action( 'elementor/frontend/after_register_scripts', 'my_plugin_frontend_scripts' );
+add_action( 'elementor/frontend/after_enqueue_scripts', 'my_plugin_enqueue_frontend_scripts' );
 ```
 
 ::: warning Please Note

src/scripts-styles/frontend-styles.md

@@ -8,34 +8,36 @@ When using custom stylesheets, they must be registered to all pages using Elemen
 
 In the example below, we'll register and enqueue custom stylesheets **before** Elementor frontend styles are registered and enqueued:
 
-```php {11}
-function my_plugin_frontend_stylesheets() {
-
+```php {6,12}
+function my_plugin_register_frontend_styles() {
 	wp_register_style( 'frontend-style-1', plugins_url( 'assets/css/frontend-style-1.css', __FILE__ ) );
 	wp_register_style( 'frontend-style-2', plugins_url( 'assets/css/frontend-style-2.css', __FILE__ ), [ 'external-framework' ] );
 	wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );
+}
+add_action( 'elementor/frontend/before_register_styles', 'my_plugin_register_frontend_styles' );
 
+function my_plugin_enqueue_frontend_styles() {
 	wp_enqueue_style( 'frontend-style-1' );
 	wp_enqueue_style( 'frontend-style-2' );
-
 }
-add_action( 'elementor/frontend/before_enqueue_styles', 'my_plugin_frontend_stylesheets' );
+add_action( 'elementor/frontend/before_enqueue_styles', 'my_plugin_enqueue_frontend_styles' );
 ```
 
 Now we'll register and enqueue custom stylesheets **after** Elementor frontend styles are registered and enqueued:
 
-```php {11}
-function my_plugin_frontend_stylesheets() {
-
+```php {6,12}
+function my_plugin_register_frontend_stylesheets() {
 	wp_register_style( 'frontend-style-1', plugins_url( 'assets/css/frontend-style-1.css', __FILE__ ) );
 	wp_register_style( 'frontend-style-2', plugins_url( 'assets/css/frontend-style-2.css', __FILE__ ), [ 'external-framework' ] );
 	wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );
+}
+add_action( 'elementor/frontend/after_register_styles', 'my_plugin_register_frontend_stylesheets' );
 
+function my_plugin_enqueue_frontend_stylesheets() {
 	wp_enqueue_style( 'frontend-style-1' );
 	wp_enqueue_style( 'frontend-style-2' );
-
 }
-add_action( 'elementor/frontend/after_enqueue_styles', 'my_plugin_frontend_stylesheets' );
+add_action( 'elementor/frontend/after_enqueue_styles', 'my_plugin_enqueue_frontend_stylesheets' );
 ```
 
 ::: warning Please Note

src/scripts-styles/preview-scripts.md

@@ -8,16 +8,17 @@ When you develop addons that extend [Elementor preview](./../editor/elementor-pr
 
 In the example below, we'll register and enqueue custom scripts after Elementor scripts are registered and enqueued:
 
-```php {11}
-function my_plugin_preview_scripts() {
-
+```php {6,12}
+function my_plugin_register_preview_scripts() {
 	wp_register_script( 'preview-script-1', plugins_url( 'assets/js/preview-script-1.js', __FILE__ ) );
 	wp_register_script( 'preview-script-2', plugins_url( 'assets/js/preview-script-2.js', __FILE__ ), [ 'external-library' ] );
 	wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
+}
+add_action( 'wp_enqueue_scripts', 'my_plugin_register_preview_scripts' );
 
+function my_plugin_enqueue_preview_scripts() {
 	wp_enqueue_script( 'preview-script-1' );
 	wp_enqueue_script( 'preview-script-2' );
-
 }
-add_action( 'elementor/preview/enqueue_scripts', 'my_plugin_preview_scripts' );
+add_action( 'elementor/preview/enqueue_scripts', 'my_plugin_enqueue_preview_scripts' );
 ```

src/scripts-styles/preview-styles.md

@@ -8,16 +8,17 @@ When you develop addons that extend [Elementor preview](./../editor/elementor-pr
 
 In the example below, we'll register and enqueue custom stylesheets after Elementor preview styles are registered and enqueued:
 
-```php {11}
-function my_plugin_preview_styles() {
-
+```php {6,12}
+function my_plugin_register_preview_styles() {
 	wp_register_style( 'preview-style-1', plugins_url( 'assets/css/preview-style-1.css', __FILE__ ) );
 	wp_register_style( 'preview-style-2', plugins_url( 'assets/css/preview-style-2.css', __FILE__ ), [ 'external-framework' ] );
 	wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );
+}
+add_action( 'wp_enqueue_scripts', 'my_plugin_register_preview_styles' );
 
+function my_plugin_enqueue_preview_styles() {
 	wp_enqueue_style( 'preview-style-1' );
 	wp_enqueue_style( 'preview-style-2' );
-
 }
-add_action( 'elementor/preview/enqueue_styles', 'my_plugin_preview_styles' );
+add_action( 'elementor/preview/enqueue_styles', 'my_plugin_enqueue_preview_styles' );
 ```

src/scripts-styles/widget-scripts.md

@@ -8,18 +8,18 @@ When you develop new [Elementor widgets](./../widgets/) and need to [register cu
 
 In the example below, we'll register the required scripts in the main file:
 
-```php
-function register_widget_scripts() {
+```php {6}
+function my_plugin_register_widget_scripts() {
 	wp_register_script( 'widget-script-1', plugins_url( 'assets/js/widget-script-1.js', __FILE__ ) );
 	wp_register_script( 'widget-script-2', plugins_url( 'assets/js/widget-script-2.js', __FILE__ ), [ 'external-library' ] );
 	wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
 }
-add_action( 'wp_enqueue_scripts', 'register_widget_scripts' );
+add_action( 'wp_enqueue_scripts', 'my_plugin_register_widget_scripts' );
 ```
 
 Then, the widget class will set the JS dependencies:
 
-```php
+```php {3}
 class Elementor_Test_Widget extends \Elementor\Widget_Base {
 
 	public function get_script_depends(): array {