v3.35.0

modules/atomic-form/module.php

@@ -0,0 +1,68 @@
+<?php
+namespace ElementorPro\Modules\AtomicForm;
+
+use ElementorPro\Base\Module_Base;
+use ElementorPro\Plugin;
+use Elementor\Modules\AtomicWidgets\Module as AtomicWidgetsModule;
+use Elementor\Core\Experiments\Manager as ExperimentsManager;
+use ElementorPro\Modules\AtomicForm\Widgets\Input;
+use ElementorPro\Modules\AtomicForm\Widgets\Label;
+use ElementorPro\Modules\AtomicForm\Widgets\Textarea;
+use Elementor\Widgets_Manager;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+class Module extends Module_Base {
+	const MODULE_NAME = 'e-atomic-form';
+	const EXPERIMENT_NAME = 'e_pro_atomic_form';
+
+	public function get_name() {
+		return self::MODULE_NAME;
+	}
+
+	public static function get_experimental_data(): array {
+		return [
+			'name' => self::EXPERIMENT_NAME,
+			'title' => esc_html__( 'Atomic Form', 'elementor-pro' ),
+			'description' => esc_html__( 'Atomic form widgets. Note: This feature requires the "Atomic Widgets" experiment to be enabled.', 'elementor-pro' ),
+			'hidden' => true,
+			'default' => ExperimentsManager::STATE_INACTIVE,
+			'release_status' => ExperimentsManager::RELEASE_STATUS_DEV,
+		];
+	}
+
+	public function __construct() {
+		parent::__construct();
+
+		if ( ! $this->is_experiment_active() ) {
+			return;
+		}
+
+		add_filter(
+			'elementor/widgets/register',
+			fn( $widgets_manager ) => $this->register_widgets( $widgets_manager )
+		);
+
+		add_action( 'elementor/frontend/after_enqueue_styles', fn () => $this->add_inline_styles() );
+	}
+
+	private function is_experiment_active(): bool {
+		return Plugin::elementor()->experiments->is_feature_active( self::EXPERIMENT_NAME )
+			&& Plugin::elementor()->experiments->is_feature_active( AtomicWidgetsModule::EXPERIMENT_NAME );
+	}
+
+	private function register_widgets( Widgets_Manager $widgets_manager ) {
+		$widgets_manager->register( new Input() );
+		$widgets_manager->register( new Label() );
+		$widgets_manager->register( new Textarea() );
+	}
+
+	private function add_inline_styles() {
+		// Default html textarea is resizable, but Elementor Atomic textarea is not resizable by default
+		$inline_css = '.e-form-textarea-base:not([data-resizable]) { resize: none; }';
+		wp_add_inline_style( 'elementor-frontend', $inline_css );
+	}
+
+}

modules/atomic-form/templates/input.html.twig

@@ -0,0 +1,20 @@
+{% set classes = settings.classes | merge( [ base_styles.base ] ) | join(' ') | trim %}
+{% set id_attribute = settings._cssid is not empty ? 'id=' ~ settings._cssid | e('html_attr') : '' %}
+{% set interactions_attribute = interactions is not empty ? 'data-interactions=' ~ interactions | json_encode | e('html_attr') : '' %}
+{% set placeholder_attribute = settings.placeholder is not empty ? 'placeholder=' ~ settings.placeholder | e('html_attr') : '' %}
+{% set required_attribute = settings.required ? 'required' : '' %}
+{% set readonly_attribute = settings.readonly ? 'readonly' : '' %}
+{% set name = settings.name is not empty ? settings.name : settings._cssid is not empty ? settings._cssid : id %}
+{% set name_attribute = 'name=' ~ name | e('html_attr') %}
+<input 
+	{{ id_attribute }}
+	{{ name_attribute }}
+	class="{{ classes }}"
+	type="{{ settings.type }}"
+	data-interaction-id="{{ id }}"
+	{{ settings.attributes | raw }} 
+	{{ interactions_attribute }}
+	{{ placeholder_attribute }}
+	{{ required_attribute }}
+	{{ readonly_attribute }}
+/>

modules/atomic-form/templates/label.html.twig

@@ -0,0 +1,13 @@
+{% set classes = settings.classes | merge( [ base_styles.base ] ) | join(' ') | trim %}
+{% set id_attribute = settings._cssid is not empty ? 'id=' ~ settings._cssid | e('html_attr') : '' %}
+{% set for_attribute = settings['input-id'] is not empty ? 'for=' ~ settings['input-id'] | e('html_attr') : '' %}
+{% set interactions_attribute = interactions is not empty ? 'data-interactions=' ~ interactions | json_encode | e('html_attr') : '' %}
+{% set allowed_tags = '<b><strong><sup><sub><s><em><i><u><a><del><span><br>' %}
+<label 
+	{{ id_attribute }}
+	class="{{ classes }}"
+	{{ for_attribute }}
+	data-interaction-id="{{ id }}"
+	{{ settings.attributes | raw }}
+	{{ interactions_attribute }}
+>{{ settings.text | striptags(allowed_tags) | raw }}</label>

modules/atomic-form/templates/textarea.html.twig

@@ -0,0 +1,27 @@
+{% set classes = settings.classes | merge( [ base_styles.base ] ) | join(' ') | trim %}
+{% set id_attribute = settings._cssid is not empty ? 'id=' ~ settings._cssid | e('html_attr') : '' %}
+{% set interactions_attribute = interactions is not empty ? 'data-interactions=' ~ interactions | json_encode | e('html_attr') : '' %}
+{% set placeholder_attribute = settings.placeholder is not empty ? 'placeholder=' ~ settings.placeholder | e('html_attr') : '' %}
+{% set required_attribute = settings.required ? 'required' : '' %}
+{% set readonly_attribute = settings.readonly ? 'readonly' : '' %}
+{% set rows_attribute = settings.rows is not empty ? 'rows=' ~ settings.rows | e('html_attr') : '' %}
+{% set minlength_attribute = settings.minlength is not empty ? 'minlength=' ~ settings.minlength | e('html_attr') : '' %}
+{% set maxlength_attribute = settings.maxlength is not empty ? 'maxlength=' ~ settings.maxlength | e('html_attr') : '' %}
+{% set resizable_attribute = settings.resizable ? 'data-resizable' : '' %}
+{% set name = settings.name is not empty ? settings.name : settings._cssid is not empty ? settings._cssid : id %}
+{% set name_attribute = 'name=' ~ name | e('html_attr') %}
+<textarea	
+	{{ id_attribute }}
+	{{ name_attribute }}
+	class="{{ classes }}"
+	data-interaction-id="{{ id }}"
+	{{ settings.attributes | raw }}
+	{{ interactions_attribute }}
+	{{ placeholder_attribute }}
+	{{ required_attribute }}
+	{{ readonly_attribute }}
+	{{ rows_attribute }}
+	{{ minlength_attribute }}
+	{{ maxlength_attribute }}
+	{{ resizable_attribute }}
+></textarea>

modules/atomic-form/widgets/input.php

@@ -0,0 +1,121 @@
+<?php
+namespace ElementorPro\Modules\AtomicForm\Widgets;
+
+use Elementor\Modules\AtomicWidgets\Controls\Section;
+use Elementor\Modules\AtomicWidgets\Controls\Types\Select_Control;
+use Elementor\Modules\AtomicWidgets\Controls\Types\Switch_Control;
+use Elementor\Modules\AtomicWidgets\Controls\Types\Text_Control;
+use Elementor\Modules\AtomicWidgets\Elements\Base\Atomic_Widget_Base;
+use Elementor\Modules\AtomicWidgets\Elements\Base\Has_Template;
+use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\Boolean_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
+use Elementor\Modules\AtomicWidgets\Styles\Style_Definition;
+
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+class Input extends Atomic_Widget_Base {
+	use Has_Template;
+
+	public static $widget_description = 'Display a text input with customizable type, placeholder, default value, required, readonly, and attributes.';
+
+	public static function get_element_type(): string {
+		return 'e-form-input';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Input', 'elementor-pro' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-atomic-input';
+	}
+
+	public function get_categories(): array {
+		return [ 'atomic-form' ];
+	}
+
+	public function get_keywords() {
+		return [ 'atomic', 'form', 'input', 'text', 'email' ];
+	}
+
+	protected static function define_props_schema(): array {
+		return [
+			'classes' => Classes_Prop_Type::make()
+				->default( [] ),
+			'placeholder' => String_Prop_Type::make()
+				->default( '' ),
+			'type' => String_Prop_Type::make()
+				->default( 'text' )
+				->enum( [ 'text', 'email' ] ),
+			'required' => Boolean_Prop_Type::make()
+				->default( false ),
+			'readonly' => Boolean_Prop_Type::make()
+				->default( false ),
+			'attributes' => Attributes_Prop_Type::make(),
+		];
+	}
+
+	protected function define_atomic_controls(): array {
+		return [
+			Section::make()
+				->set_label( __( 'Content', 'elementor-pro' ) )
+				->set_items( [
+					Text_Control::bind_to( 'placeholder' )
+					  ->set_placeholder( 'Enter placeholder text' )
+						->set_label( __( 'Input placeholder', 'elementor-pro' ) ),
+					Select_Control::bind_to( 'type' )
+						->set_label( __( 'Type', 'elementor-pro' ) )
+						->set_options( [
+							[
+								'label' => __( 'Text', 'elementor-pro' ),
+								'value' => 'text',
+							],
+							[
+								'label' => __( 'Email', 'elementor-pro' ),
+								'value' => 'email',
+							],
+						] ),
+					Switch_Control::bind_to( 'required' )
+						->set_label( __( 'Required', 'elementor-pro' ) ),
+					Switch_Control::bind_to( 'readonly' )
+						->set_label( __( 'Read only', 'elementor-pro' ) ),
+				] ),
+			Section::make()
+				->set_label( __( 'Settings', 'elementor-pro' ) )
+				->set_id( 'settings' )
+				->set_items( $this->get_settings_controls() ),
+		];
+	}
+
+	protected function get_settings_controls(): array {
+		return [
+			Text_Control::bind_to( '_cssid' )
+				->set_label( __( 'ID', 'elementor-pro' ) )
+				->set_meta( $this->get_css_id_control_meta() ),
+		];
+	}
+
+	protected function get_templates(): array {
+		return [
+			'input' => __DIR__ . '/../templates/input.html.twig',
+		];
+	}
+
+	protected function define_base_styles(): array {
+		return [
+			'base' => Style_Definition::make(),
+		];
+	}
+
+	protected function get_css_id_control_meta(): array {
+		return [
+			'layout' => 'two-columns',
+			'topDivider' => false,
+		];
+	}
+}

modules/atomic-form/widgets/label.php

@@ -0,0 +1,97 @@
+<?php
+namespace ElementorPro\Modules\AtomicForm\Widgets;
+
+use Elementor\Modules\AtomicWidgets\Controls\Section;
+use Elementor\Modules\AtomicWidgets\Controls\Types\Text_Control;
+use Elementor\Modules\AtomicWidgets\Controls\Types\Inline_Editing_Control;
+use Elementor\Modules\AtomicWidgets\Elements\Base\Atomic_Widget_Base;
+use Elementor\Modules\AtomicWidgets\Elements\Base\Has_Template;
+use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Html_Prop_Type;
+
+
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+class Label extends Atomic_Widget_Base {
+	use Has_Template;
+
+	public static $widget_description = 'Display a label with customizable text and for attribute.';
+
+	public static function get_element_type(): string {
+		return 'e-form-label';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Label', 'elementor-pro' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-atomic-label';
+	}
+
+	public function get_categories(): array {
+		return [ 'atomic-form' ];
+	}
+
+	public function get_keywords() {
+		return [ 'atomic', 'form', 'label', 'text' ];
+	}
+
+	protected static function define_props_schema(): array {
+		return [
+			'classes' => Classes_Prop_Type::make()
+				->default( [] ),
+			'text' => Html_Prop_Type::make()
+				->default( 'Form label' ),
+			'input-id' => String_Prop_Type::make()
+				->default( '' ),
+			'attributes' => Attributes_Prop_Type::make(),
+		];
+	}
+
+	protected function define_atomic_controls(): array {
+		return [
+			Section::make()
+				->set_label( __( 'Content', 'elementor-pro' ) )
+				->set_items( [
+					Inline_Editing_Control::bind_to( 'text' )
+						->set_label( __( 'Label text', 'elementor-pro' ) ),
+					Text_Control::bind_to( 'input-id' )
+						->set_label( __( 'Connected to input ID', 'elementor-pro' ) )
+						->set_meta( [
+							'layout' => 'two-columns',
+						] ),
+				] ),
+			Section::make()
+				->set_label( __( 'Settings', 'elementor-pro' ) )
+				->set_id( 'settings' )
+				->set_items( $this->get_settings_controls() ),
+		];
+	}
+
+	protected function get_settings_controls(): array {
+		return [
+			Text_Control::bind_to( '_cssid' )
+				->set_label( __( 'ID', 'elementor-pro' ) )
+				->set_meta( $this->get_css_id_control_meta() ),
+		];
+	}
+
+	protected function get_templates(): array {
+		return [
+			'label' => __DIR__ . '/../templates/label.html.twig',
+		];
+	}
+
+	protected function get_css_id_control_meta(): array {
+		return [
+			'layout' => 'two-columns',
+			'topDivider' => false,
+		];
+	}
+}

modules/atomic-form/widgets/textarea.php

@@ -0,0 +1,126 @@
+<?php
+namespace ElementorPro\Modules\AtomicForm\Widgets;
+
+use Elementor\Modules\AtomicWidgets\Controls\Section;
+use Elementor\Modules\AtomicWidgets\Controls\Types\Number_Control;
+use Elementor\Modules\AtomicWidgets\Controls\Types\Switch_Control;
+use Elementor\Modules\AtomicWidgets\Controls\Types\Text_Control;
+use Elementor\Modules\AtomicWidgets\Elements\Base\Atomic_Widget_Base;
+use Elementor\Modules\AtomicWidgets\Elements\Base\Has_Template;
+use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\Boolean_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\Number_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
+use Elementor\Modules\AtomicWidgets\Styles\Style_Definition;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+class Textarea extends Atomic_Widget_Base {
+	use Has_Template;
+
+	public static $widget_description = 'Display a text area with customizable type, placeholder, default value, required, readonly, and attributes.';
+
+	public static function get_element_type(): string {
+		return 'e-form-textarea';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Text area', 'elementor-pro' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-atomic-text-area';
+	}
+
+	public function get_categories(): array {
+		return [ 'atomic-form' ];
+	}
+
+	public function get_keywords() {
+		return [ 'atomic', 'form', 'textarea', 'text', 'email' ];
+	}
+
+	protected static function define_props_schema(): array {
+		return [
+			'classes' => Classes_Prop_Type::make()
+				->default( [] ),
+			'placeholder' => String_Prop_Type::make()
+				->default( '' ),
+			'rows' => Number_Prop_Type::make()
+				->default( 4 ),
+			'required' => Boolean_Prop_Type::make()
+				->default( false ),
+			'readonly' => Boolean_Prop_Type::make()
+				->default( false ),
+			'resizable' => Boolean_Prop_Type::make()
+				->default( true ),
+			'minlength' => Number_Prop_Type::make(),
+			'maxlength' => Number_Prop_Type::make(),
+			'attributes' => Attributes_Prop_Type::make(),
+		];
+	}
+
+	protected function define_atomic_controls(): array {
+		return [
+			Section::make()
+				->set_label( __( 'Content', 'elementor-pro' ) )
+				->set_items( [
+					Text_Control::bind_to( 'placeholder' )
+					  ->set_placeholder( 'Enter placeholder text' )
+						->set_label( __( 'Text area placeholder', 'elementor-pro' ) ),
+					Number_Control::bind_to( 'rows' )
+						->set_label( __( 'Rows', 'elementor-pro' ) )
+						->set_min( 1 )
+						->set_step( 1 ),
+					Switch_Control::bind_to( 'required' )
+						->set_label( __( 'Required', 'elementor-pro' ) ),
+					Switch_Control::bind_to( 'readonly' )
+						->set_label( __( 'Read only', 'elementor-pro' ) ),
+					Switch_Control::bind_to( 'resizable' )
+						->set_label( __( 'Resizable', 'elementor-pro' ) ),
+					Number_Control::bind_to( 'minlength' )
+						->set_label( __( 'Min length', 'elementor-pro' ) )
+						->set_min( 0 )
+						->set_step( 1 ),
+					Number_Control::bind_to( 'maxlength' )
+						->set_label( __( 'Max length', 'elementor-pro' ) )
+						->set_min( 0 )
+						->set_step( 1 ),
+				] ),
+			Section::make()
+				->set_label( __( 'Settings', 'elementor-pro' ) )
+				->set_id( 'settings' )
+				->set_items( $this->get_settings_controls() ),
+		];
+	}
+
+	protected function get_settings_controls(): array {
+		return [
+			Text_Control::bind_to( '_cssid' )
+				->set_label( __( 'ID', 'elementor-pro' ) )
+				->set_meta( $this->get_css_id_control_meta() ),
+		];
+	}
+
+	protected function get_templates(): array {
+		return [
+			'textarea' => __DIR__ . '/../templates/textarea.html.twig',
+		];
+	}
+
+	protected function define_base_styles(): array {
+		return [
+			'base' => Style_Definition::make(),
+		];
+	}
+
+	protected function get_css_id_control_meta(): array {
+		return [
+			'layout' => 'two-columns',
+			'topDivider' => false,
+		];
+	}
+}