Update form field dependencies

Author: rami-elementor

Diff for: src/form-fields/field-dependencies.md

@@ -2,25 +2,29 @@
 
 <Badge type="tip" vertical="top" text="Elementor Pro" /> <Badge type="warning" vertical="top" text="Advanced" />
 
-Some form fields are dependent on custom scripts for functionality and custom styles for look and feel.
+Some form fields are dependent on custom scripts for functionality, and custom styles for look and feel. Let's see how to set field dependencies.
 
 ## Dependency Properties
 
-Inside the field class we can enqueue any required JS and CSS dependencies the following way:
+Inside the field class we can require any JS or CSS dependencies the following way:
 
 ```php
 class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {
 
-	public $depended_scripts = [ 'script-handle' ];
+	public function get_script_depends(): array {
+		return [ 'script-handle' ];
+	}
 
-	public $depended_styles = [ 'style-handle' ];
+	public function get_style_depends(): array {
+		return [ 'style-handle' ];
+	}
 
 }
 ```
 
-* **Field Scripts** – The `$depended_scripts` property defines the JS files required to display the field.
+* **Field Scripts** – The `get_script_depends()` method defines the JS files required to display the field.
 
-* **Field Styles** – The `$depended_styles` property defines the CSS files required to display the field.
+* **Field Styles** – The `get_style_depends()` method defines the CSS files required to display the field.
 
 ## Registering Scripts & Styles in WordPress
 
@@ -69,33 +73,29 @@ Then, each form field should set its dependencies as follows:
 ```php
 class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {
 
-	public $depended_scripts = [ 'field-script', 'external-library' ];
+	public function get_script_depends(): array {
+		return [ 'field-script', 'external-library' ];
+	}
 
-	public $depended_styles = [ 'field-style', 'external-framework' ];
+	public function get_style_depends(): array {
+		return [ 'field-style', 'external-framework' ];
+	}
 
 }
 ```
 
-## Future Development
-
-Our roadmap includes a task to unify the way scripts and styles are registered across different components.
+## Backwards Compatibility
 
-We plan to deprecate the `$depended_scripts` and `$depended_styles` properties, replacing them with the `get_script_depends()` and `get_style_depends()` methods. The same way it's done in [widgets](./../widgets/widget-dependencies/).
+Until Elementor 3.29, dependency declaration done using `$depended_scripts` and `$depended_styles` properties:
 
 ```php
 class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {
 
-	public function get_script_depends(): array {
-		return [ 'field-script-1', 'field-script-2' ];
-	}
+	public $depended_scripts = [ 'script-handle' ];
 
-	public function get_style_depends(): array {
-		return [ 'field-style-1', 'field-style-2' ];
-	}
+	public $depended_styles = [ 'style-handle' ];
 
 }
 ```
 
-::: warning Please Note
-To make sure your current code is future campatible, make sure your form field class doesn't have the `get_script_depends()` and `get_style_depends()` methods.
-:::
+If you need to support Elementor versions prior to 3.29, add these properties to the form field class with the required script/style handles.

Diff for: src/form-fields/field-structure.md

@@ -20,14 +20,14 @@ As mentioned above, Elementor form fields extend the `\ElementorPro\Modules\Form
 ```php
 class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {
 
-	public $depended_scripts = [];
-
-	public $depended_styles = [];
-
 	public function get_type(): string {}
 
 	public function get_name(): string {}
 
+	public function get_script_depends(): array {}
+
+	public function get_style_depends(): array {}
+
 	public function render( $item, $item_index, $form ): void {}
 
 	public function validation( $field, $record, $ajax_handler ): void {}
@@ -39,14 +39,14 @@ class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base
 
 Let’s break it down:
 
-* **Field Scripts** – The `$depended_scripts` property defines the JS files required to display the field.
-
-* **Field Styles** – The `$depended_styles` property defines the CSS files required to display the field.
-
 * **Field Type** – The `get_type()` method returns the field name (id) that will be used in the code.
 
 * **Field Name** – The `get_name()` method returns the field label that will be displayed to the user.
 
+* **Field Scripts** – The `get_script_depends()` method defines the JS files required to display the field.
+
+* **Field Styles** – The `get_style_depends()` method defines the CSS files required to display the field.
+
 * **Field Render** – The `render()` method renders the data and displays the field output.
 
 * **Field Validation** – The `validation()` method runs a series of checks to ensure the data complies to certain rules.