first commit

wp-content/plugins/elementor/modules/variables/classes/css-renderer.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace Elementor\Modules\Variables\Classes;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class CSS_Renderer {
+	private Variables $variables;
+
+	public function __construct( Variables $variables ) {
+		$this->variables = $variables;
+	}
+
+	private function global_variables(): array {
+		return $this->variables->get_all();
+	}
+
+	public function raw_css(): string {
+		$list_of_variables = $this->global_variables();
+
+		if ( empty( $list_of_variables ) ) {
+			return '';
+		}
+
+		$css_entries = $this->css_entries_for( $list_of_variables );
+
+		if ( empty( $css_entries ) ) {
+			return '';
+		}
+
+		return $this->wrap_with_root( $css_entries );
+	}
+
+	private function css_entries_for( array $list_of_variables ): array {
+		$entries = [];
+
+		foreach ( $list_of_variables as $variable_id => $variable ) {
+			$entry = $this->build_css_variable_entry( $variable_id, $variable );
+
+			if ( empty( $entry ) ) {
+				continue;
+			}
+
+			$entries[] = $entry;
+		}
+
+		return $entries;
+	}
+
+	private function build_css_variable_entry( string $id, array $variable ): ?string {
+		$variable_name = sanitize_text_field( $id );
+		$value = sanitize_text_field( $variable['value'] ?? '' );
+
+		if ( empty( $value ) || empty( $variable_name ) ) {
+			return null;
+		}
+
+		return "--{$variable_name}:{$value};";
+	}
+
+	private function wrap_with_root( array $css_entries ): string {
+		return ':root { ' . implode( ' ', $css_entries ) . ' }';
+	}
+}

wp-content/plugins/elementor/modules/variables/classes/fonts.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Elementor\Modules\Variables\Classes;
+
+use Elementor\Plugin;
+use Elementor\Core\Files\CSS\Post as Post_CSS;
+use Elementor\Modules\Variables\PropTypes\Font_Variable_Prop_Type;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Fonts {
+	public function append_to( Post_CSS $post_css ) {
+		if ( ! Plugin::$instance->kits_manager->is_kit( $post_css->get_post_id() ) ) {
+			return;
+		}
+
+		$list_of_variables = ( new Variables() )->get_all();
+
+		foreach ( $list_of_variables as $variable ) {
+			if ( Font_Variable_Prop_Type::get_key() !== $variable['type'] ) {
+				continue;
+			}
+
+			$font_family = sanitize_text_field( $variable['value'] ?? '' );
+
+			if ( empty( $font_family ) ) {
+				continue;
+			}
+
+			$post_css->add_font( $font_family );
+		}
+
+		return $this;
+	}
+}

wp-content/plugins/elementor/modules/variables/classes/rest-api.php

@@ -0,0 +1,356 @@
+<?php
+
+namespace Elementor\Modules\Variables\Classes;
+
+use Exception;
+use WP_Error;
+use WP_REST_Response;
+use WP_REST_Request;
+use WP_REST_Server;
+
+use Elementor\Plugin;
+use Elementor\Modules\Variables\PropTypes\Color_Variable_Prop_Type;
+use Elementor\Modules\Variables\PropTypes\Font_Variable_Prop_Type;
+use Elementor\Modules\Variables\Storage\Repository as Variables_Repository;
+use Elementor\Modules\Variables\Storage\Exceptions\VariablesLimitReached;
+use Elementor\Modules\Variables\Storage\Exceptions\RecordNotFound;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Rest_Api {
+	const API_NAMESPACE = 'elementor/v1';
+	const API_BASE = 'variables';
+
+	const HTTP_OK = 200;
+	const HTTP_CREATED = 201;
+	const HTTP_BAD_REQUEST = 400;
+	const HTTP_NOT_FOUND = 404;
+	const HTTP_SERVER_ERROR = 500;
+
+	const MAX_ID_LENGTH = 64;
+	const MAX_LABEL_LENGTH = 50;
+	const MAX_VALUE_LENGTH = 512;
+
+	private Variables_Repository $variables_repository;
+
+	public function __construct( Variables_Repository $variables_repository ) {
+		$this->variables_repository = $variables_repository;
+	}
+
+	public function enough_permissions_to_perform_action() {
+		return current_user_can( 'edit_posts' );
+	}
+
+	public function register_routes() {
+		register_rest_route( self::API_NAMESPACE, '/' . self::API_BASE . '/list', [
+			'methods' => WP_REST_Server::READABLE,
+			'callback' => [ $this, 'get_variables' ],
+			'permission_callback' => [ $this, 'enough_permissions_to_perform_action' ],
+		] );
+
+		register_rest_route( self::API_NAMESPACE, '/' . self::API_BASE . '/create', [
+			'methods' => WP_REST_Server::CREATABLE,
+			'callback' => [ $this, 'create_variable' ],
+			'permission_callback' => [ $this, 'enough_permissions_to_perform_action' ],
+			'args' => [
+				'type' => [
+					'required' => true,
+					'type' => 'string',
+					'validate_callback' => [ $this, 'is_valid_variable_type' ],
+					'sanitize_callback' => [ $this, 'trim_and_sanitize_text_field' ],
+				],
+				'label' => [
+					'required' => true,
+					'type' => 'string',
+					'validate_callback' => [ $this, 'is_valid_variable_label' ],
+					'sanitize_callback' => [ $this, 'trim_and_sanitize_text_field' ],
+				],
+				'value' => [
+					'required' => true,
+					'type' => 'string',
+					'validate_callback' => [ $this, 'is_valid_variable_value' ],
+					'sanitize_callback' => [ $this, 'trim_and_sanitize_text_field' ],
+				],
+			],
+		] );
+
+		register_rest_route( self::API_NAMESPACE, '/' . self::API_BASE . '/update', [
+			'methods' => WP_REST_Server::EDITABLE,
+			'callback' => [ $this, 'update_variable' ],
+			'permission_callback' => [ $this, 'enough_permissions_to_perform_action' ],
+			'args' => [
+				'id' => [
+					'required' => true,
+					'type' => 'string',
+					'validate_callback' => [ $this, 'is_valid_variable_id' ],
+					'sanitize_callback' => [ $this, 'trim_and_sanitize_text_field' ],
+				],
+				'label' => [
+					'required' => true,
+					'type' => 'string',
+					'validate_callback' => [ $this, 'is_valid_variable_label' ],
+					'sanitize_callback' => [ $this, 'trim_and_sanitize_text_field' ],
+				],
+				'value' => [
+					'required' => true,
+					'type' => 'string',
+					'validate_callback' => [ $this, 'is_valid_variable_value' ],
+					'sanitize_callback' => [ $this, 'trim_and_sanitize_text_field' ],
+				],
+			],
+		] );
+
+		register_rest_route( self::API_NAMESPACE, '/' . self::API_BASE . '/delete', [
+			'methods' => WP_REST_Server::DELETABLE,
+			'callback' => [ $this, 'delete_variable' ],
+			'permission_callback' => [ $this, 'enough_permissions_to_perform_action' ],
+			'args' => [
+				'id' => [
+					'required' => true,
+					'type' => 'string',
+					'validate_callback' => [ $this, 'is_valid_variable_id' ],
+					'sanitize_callback' => [ $this, 'trim_and_sanitize_text_field' ],
+				],
+			],
+		] );
+
+		register_rest_route( self::API_NAMESPACE, '/' . self::API_BASE . '/restore', [
+			'methods' => WP_REST_Server::EDITABLE,
+			'callback' => [ $this, 'restore_variable' ],
+			'permission_callback' => [ $this, 'enough_permissions_to_perform_action' ],
+			'args' => [
+				'id' => [
+					'required' => true,
+					'type' => 'string',
+					'validate_callback' => [ $this, 'is_valid_variable_id' ],
+					'sanitize_callback' => [ $this, 'trim_and_sanitize_text_field' ],
+				],
+			],
+		] );
+	}
+
+	public function trim_and_sanitize_text_field( $value ) {
+		return trim( sanitize_text_field( $value ) );
+	}
+
+	public function is_valid_variable_id( $id ) {
+		$id = trim( $id );
+
+		if ( empty( $id ) ) {
+			return new WP_Error(
+				'invalid_variable_id_empty',
+				__( 'ID cannot be empty', 'elementor' )
+			);
+		}
+
+		if ( self::MAX_ID_LENGTH < strlen( $id ) ) {
+			return new WP_Error( 'invalid_variable_id_length', sprintf(
+				__( 'ID cannot exceed %d characters', 'elementor' ),
+				self::MAX_ID_LENGTH
+			) );
+		}
+
+		return true;
+	}
+
+	public function is_valid_variable_type( $type ) {
+		return in_array( $type, [
+			Color_Variable_Prop_Type::get_key(),
+			Font_Variable_Prop_Type::get_key(),
+		], true );
+	}
+
+	public function is_valid_variable_label( $label ) {
+		$label = trim( $label );
+
+		if ( empty( $label ) ) {
+			return new WP_Error(
+				'invalid_variable_label_empty',
+				__( 'Label cannot be empty', 'elementor' )
+			);
+		}
+
+		if ( self::MAX_LABEL_LENGTH < strlen( $label ) ) {
+			return new WP_Error( 'invalid_variable_label_length', sprintf(
+				__( 'Label cannot exceed %d characters', 'elementor' ),
+				self::MAX_LABEL_LENGTH
+			) );
+		}
+
+		return true;
+	}
+
+	public function is_valid_variable_value( $value ) {
+		$value = trim( $value );
+
+		if ( empty( $value ) ) {
+			return new WP_Error(
+				'invalid_variable_value_empty',
+				__( 'Value cannot be empty', 'elementor' )
+			);
+		}
+
+		if ( self::MAX_VALUE_LENGTH < strlen( $value ) ) {
+			return new WP_Error( 'invalid_variable_value_length', sprintf(
+				__( 'Value cannot exceed %d characters', 'elementor' ),
+				self::MAX_VALUE_LENGTH
+			) );
+		}
+
+		return true;
+	}
+
+	public function create_variable( WP_REST_Request $request ) {
+		try {
+			return $this->create_new_variable( $request );
+		} catch ( Exception $e ) {
+			return $this->error_response( $e );
+		}
+	}
+
+	protected function clear_cache() {
+		Plugin::$instance->files_manager->clear_cache();
+	}
+
+	private function create_new_variable( WP_REST_Request $request ) {
+		$type = $request->get_param( 'type' );
+		$label = $request->get_param( 'label' );
+		$value = $request->get_param( 'value' );
+
+		$result = $this->variables_repository->create( [
+			'type' => $type,
+			'label' => $label,
+			'value' => $value,
+		] );
+
+		$this->clear_cache();
+
+		return $this->success_response( [
+			'variable' => $result['variable'],
+			'watermark' => $result['watermark'],
+		], self::HTTP_CREATED );
+	}
+
+	public function update_variable( WP_REST_Request $request ) {
+		try {
+			return $this->update_existing_variable( $request );
+		} catch ( Exception $e ) {
+			return $this->error_response( $e );
+		}
+	}
+
+	private function update_existing_variable( WP_REST_Request $request ) {
+		$id = $request->get_param( 'id' );
+		$label = $request->get_param( 'label' );
+		$value = $request->get_param( 'value' );
+
+		$result = $this->variables_repository->update( $id, [
+			'label' => $label,
+			'value' => $value,
+		] );
+
+		return $this->success_response( [
+			'variable' => $result['variable'],
+			'watermark' => $result['watermark'],
+		] );
+	}
+
+	public function delete_variable( WP_REST_Request $request ) {
+		try {
+			return $this->delete_existing_variable( $request );
+		} catch ( Exception $e ) {
+			return $this->error_response( $e );
+		}
+	}
+
+	private function delete_existing_variable( WP_REST_Request $request ) {
+		$id = $request->get_param( 'id' );
+
+		$result = $this->variables_repository->delete( $id );
+
+		return $this->success_response( [
+			'variable' => $result['variable'],
+			'watermark' => $result['watermark'],
+		] );
+	}
+
+	public function restore_variable( WP_REST_Request $request ) {
+		try {
+			return $this->restore_existing_variable( $request );
+		} catch ( Exception $e ) {
+			return $this->error_response( $e );
+		}
+	}
+
+	private function restore_existing_variable( WP_REST_Request $request ) {
+		$id = $request->get_param( 'id' );
+
+		$result = $this->variables_repository->restore( $id );
+
+		return $this->success_response( [
+			'variable' => $result['variable'],
+			'watermark' => $result['watermark'],
+		] );
+	}
+
+	public function get_variables() {
+		try {
+			return $this->list_of_variables();
+		} catch ( Exception $e ) {
+			return $this->error_response( $e );
+		}
+	}
+
+	private function list_of_variables() {
+		$db_record = $this->variables_repository->load();
+
+		return $this->success_response( [
+			'variables' => $db_record['data'],
+			'total' => count( $db_record['data'] ),
+			'watermark' => $db_record['watermark'],
+		] );
+	}
+
+	private function success_response( $payload, $status_code = null ) {
+		return new WP_REST_Response( [
+			'success' => true,
+			'data' => $payload,
+		], $status_code ?? self::HTTP_OK );
+	}
+
+	private function error_response( Exception $e ) {
+		if ( $e instanceof VariablesLimitReached ) {
+			return $this->prepare_error_response(
+				self::HTTP_BAD_REQUEST,
+				'invalid_variable_limit_reached',
+				__( 'Reached the maximum number of variables', 'elementor' )
+			);
+		}
+
+		if ( $e instanceof RecordNotFound ) {
+			return $this->prepare_error_response(
+				self::HTTP_NOT_FOUND,
+				'variable_not_found',
+				__( 'Variable not found', 'elementor' )
+			);
+		}
+
+		return $this->prepare_error_response(
+			self::HTTP_SERVER_ERROR,
+			'unexpected_server_error',
+			__( 'Unexpected server error', 'elementor' )
+		);
+	}
+
+	private function prepare_error_response( $status_code, $error, $message ) {
+		return new WP_REST_Response( [
+			'code' => $error,
+			'message' => $message,
+			'data' => [
+				'status' => $status_code,
+			],
+		], $status_code );
+	}
+}

wp-content/plugins/elementor/modules/variables/classes/style-schema.php

@@ -0,0 +1,91 @@
+<?php
+
+namespace Elementor\Modules\Variables\Classes;
+
+use Elementor\Modules\AtomicWidgets\PropTypes\Base\Array_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Base\Object_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Color_Prop_Type;
+use Elementor\Modules\AtomicWidgets\PropTypes\Union_Prop_Type;
+use Elementor\Modules\Variables\PropTypes\Color_Variable_Prop_Type;
+use Elementor\Modules\Variables\PropTypes\Font_Variable_Prop_Type;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Style_Schema {
+	public function augment( array $schema ): array {
+		foreach ( $schema as $key => $prop_type ) {
+			$schema[ $key ] = $this->update( $prop_type );
+		}
+
+		if ( isset( $schema['font-family'] ) ) {
+			$schema['font-family'] = $this->update_font_family( $schema['font-family'] );
+		}
+
+		return $schema;
+	}
+
+	private function update( $prop_type ) {
+		if ( $prop_type instanceof Color_Prop_Type ) {
+			return $this->update_color( $prop_type );
+		}
+
+		if ( $prop_type instanceof Union_Prop_Type ) {
+			return $this->update_union( $prop_type );
+		}
+
+		if ( $prop_type instanceof Object_Prop_Type ) {
+			return $this->update_object( $prop_type );
+		}
+
+		if ( $prop_type instanceof Array_Prop_Type ) {
+			return $this->update_array( $prop_type );
+		}
+
+		return $prop_type;
+	}
+
+	private function update_font_family( String_Prop_Type $prop_type ): Union_Prop_Type {
+		return Union_Prop_Type::create_from( $prop_type )
+			->add_prop_type( Font_Variable_Prop_Type::make() );
+	}
+
+	private function update_color( Color_Prop_Type $color_prop_type ): Union_Prop_Type {
+		return Union_Prop_Type::create_from( $color_prop_type )
+			->add_prop_type( Color_Variable_Prop_Type::make() );
+	}
+
+	private function update_array( Array_Prop_Type $array_prop_type ): Array_Prop_Type {
+		return $array_prop_type->set_item_type(
+			$this->update( $array_prop_type->get_item_type() )
+		);
+	}
+
+	private function update_object( Object_Prop_Type $object_prop_type ): Object_Prop_Type {
+		return $object_prop_type->set_shape(
+			$this->augment( $object_prop_type->get_shape() )
+		);
+	}
+
+	private function update_union( Union_Prop_Type $union_prop_type ): Union_Prop_Type {
+		$new_union = Union_Prop_Type::make();
+
+		foreach ( $union_prop_type->get_prop_types() as $prop_type ) {
+			$updated = $this->update( $prop_type );
+
+			if ( $updated instanceof Union_Prop_Type ) {
+				foreach ( $updated->get_prop_types() as $updated_prop_type ) {
+					$new_union->add_prop_type( $updated_prop_type );
+				}
+
+				continue;
+			}
+
+			$new_union->add_prop_type( $updated );
+		}
+
+		return $new_union;
+	}
+}

wp-content/plugins/elementor/modules/variables/classes/style-transformers.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Elementor\Modules\Variables\Classes;
+
+use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers_Registry;
+use Elementor\Modules\Variables\PropTypes\Color_Variable_Prop_Type;
+use Elementor\Modules\Variables\PropTypes\Font_Variable_Prop_Type;
+use Elementor\Modules\Variables\Transformers\Global_Variable_Transformer;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Style_Transformers {
+	public function append_to( Transformers_Registry $transformers_registry ): self {
+		$transformers_registry->register( Color_Variable_Prop_Type::get_key(), new Global_Variable_Transformer() );
+		$transformers_registry->register( Font_Variable_Prop_Type::get_key(), new Global_Variable_Transformer() );
+
+		return $this;
+	}
+}

wp-content/plugins/elementor/modules/variables/classes/variables.php

@@ -0,0 +1,188 @@
+<?php
+
+namespace Elementor\Modules\Variables\Classes;
+
+use Elementor\Modules\Variables\PropTypes\Color_Variable_Prop_Type;
+use Elementor\Modules\Variables\PropTypes\Font_Variable_Prop_Type;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Variables {
+	const FILTER = 'elementor/atomic-variables/variables';
+
+	public function get_all() {
+		$variables = array_merge( $this->get_color_variables(), $this->get_font_variables() );
+
+		return apply_filters( self::FILTER, $variables );
+	}
+
+	private function get_color_variables(): array {
+		$type = Color_Variable_Prop_Type::get_key();
+
+		return [
+			'e-gc-001' => [
+				'type' => $type,
+				'value' => '#ffffff',
+				'label' => 'Main: white',
+			],
+			'e-gc-002' => [
+				'type' => $type,
+				'value' => '#000000',
+				'label' => 'Main: black',
+			],
+			'e-gc-003' => [
+				'type' => $type,
+				'value' => '#404040',
+				'label' => 'Main: text',
+			],
+
+			'e-gc-a01' => [
+				'type' => $type,
+				'value' => '#FF0000',
+				'label' => 'Danger: red',
+			],
+			'e-gc-a02' => [
+				'type' => $type,
+				'value' => '#0000FF',
+				'label' => 'Informative: blue',
+			],
+			'e-gc-a03' => [
+				'type' => $type,
+				'value' => '#FF7BE5',
+				'label' => 'Elementor: pink',
+			],
+			'e-gc-a04' => [
+				'type' => $type,
+				'value' => '#808080',
+				'label' => 'Gray: background',
+			],
+
+			'e-gc-b01' => [
+				'type' => $type,
+				'value' => '#213555',
+				'label' => 'Navy: primary',
+			],
+			'e-gc-b02' => [
+				'type' => $type,
+				'value' => '#3E5879',
+				'label' => 'Navy: secondary',
+			],
+			'e-gc-b03' => [
+				'type' => $type,
+				'value' => '#D8C4B6',
+				'label' => 'Navy: light',
+			],
+			'e-gc-b04' => [
+				'type' => $type,
+				'value' => '#F5EFE7',
+				'label' => 'Navy long text variable name: background',
+			],
+
+			'e-gc-d01' => [
+				'type' => $type,
+				'value' => '#123524',
+				'label' => 'Green: primary',
+			],
+			'e-gc-d02' => [
+				'type' => $type,
+				'value' => '#3E7B27',
+				'label' => 'Green: secondary',
+			],
+			'e-gc-d03' => [
+				'type' => $type,
+				'value' => '#85A947',
+				'label' => 'Green: light',
+			],
+			'e-gc-d04' => [
+				'type' => $type,
+				'value' => '#85A947',
+				'label' => 'Green: background',
+			],
+
+			'e-gc-c01' => [
+				'type' => $type,
+				'value' => '#3B1E54',
+				'label' => 'Violet: primary',
+			],
+			'e-gc-c02' => [
+				'type' => $type,
+				'value' => '#9B7EBD',
+				'label' => 'Violet: secondary',
+			],
+			'e-gc-c03' => [
+				'type' => $type,
+				'value' => '#D4BEE4',
+				'label' => 'Violet: light',
+			],
+			'e-gc-c04' => [
+				'type' => $type,
+				'value' => '#EEEEEE',
+				'label' => 'Violet: background',
+			],
+		];
+	}
+
+	private function get_font_variables(): array {
+		$type = Font_Variable_Prop_Type::get_key();
+
+		return [
+			'e-gf-001' => [
+				'type' => $type,
+				'value' => 'Almendra SC',
+				'label' => 'Almendra',
+			],
+			'e-gf-002' => [
+				'type' => $type,
+				'value' => 'Montserrat',
+				'label' => 'Montserrat',
+			],
+			'e-gf-003' => [
+				'type' => $type,
+				'value' => 'Raleway',
+				'label' => 'Raleway',
+			],
+			'e-gf-004' => [
+				'type' => $type,
+				'value' => 'ADLaM Display',
+				'label' => 'ADLaM',
+			],
+			'e-gf-005' => [
+				'type' => $type,
+				'value' => 'Aclonica',
+				'label' => 'Aclonica',
+			],
+			'e-gf-006' => [
+				'type' => $type,
+				'value' => 'Aguafina Script',
+				'label' => 'Aguafina',
+			],
+			'e-gf-007' => [
+				'type' => $type,
+				'value' => 'Alfa Slab One',
+				'label' => 'Alfa Slab',
+			],
+			'e-gf-008' => [
+				'type' => $type,
+				'value' => 'Bruno Ace SC',
+				'label' => 'Bruno Ace',
+			],
+			'e-gf-009' => [
+				'type' => $type,
+				'value' => 'Bungee Shade',
+				'label' => 'Bungee',
+			],
+			'e-gf-010' => [
+				'type' => $type,
+				'value' => 'Uncial Antiqua',
+				'label' => 'Uncial',
+			],
+			'e-gf-011' => [
+				'type' => $type,
+				'value' => 'Vast Shadow',
+				'label' => 'Vast',
+			],
+		];
+	}
+}

wp-content/plugins/elementor/modules/variables/hooks.php

@@ -0,0 +1,133 @@
+<?php
+
+namespace Elementor\Modules\Variables;
+
+use Elementor\Plugin;
+use Elementor\Core\Files\CSS\Post as Post_CSS;
+use Elementor\Modules\Variables\Classes\CSS_Renderer as Variables_CSS_Renderer;
+use Elementor\Modules\Variables\Classes\Fonts;
+use Elementor\Modules\Variables\Classes\Rest_Api as Variables_API;
+use Elementor\Modules\Variables\Classes\Variables;
+use Elementor\Modules\Variables\Storage\Repository as Variables_Repository;
+use Elementor\Modules\Variables\Classes\Style_Schema;
+use Elementor\Modules\Variables\Classes\Style_Transformers;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Hooks {
+	const PACKAGES = [
+		'editor-variables',
+	];
+
+	public function register() {
+		$this->register_styles_transformers()
+			->register_packages()
+			->filter_for_style_schema()
+			->register_css_renderer()
+			->register_fonts()
+			->register_api_endpoints();
+
+		// TODO: Remove this, later, temporary solution
+		$this->filter_for_stored_variables();
+
+		return $this;
+	}
+
+	private function filter_for_stored_variables() {
+		add_filter( Variables::FILTER, function ( $variables ) {
+			$db_record = ( new Variables_Repository(
+				Plugin::$instance->kits_manager->get_active_kit()
+			) )->load();
+
+			foreach ( $db_record['data'] as $id => $variable ) {
+				$variables[ $id ] = $variable;
+			}
+
+			return $variables;
+		} );
+
+		return $this;
+	}
+
+	private function register_packages() {
+		add_filter( 'elementor/editor/v2/packages', function ( $packages ) {
+			return array_merge( $packages, self::PACKAGES );
+		} );
+
+		return $this;
+	}
+
+	private function register_styles_transformers() {
+		add_action( 'elementor/atomic-widgets/styles/transformers/register', function ( $registry ) {
+			( new Style_Transformers() )->append_to( $registry );
+		} );
+
+		return $this;
+	}
+
+	private function filter_for_style_schema() {
+		add_filter( 'elementor/atomic-widgets/styles/schema', function ( array $schema ) {
+			return ( new Style_Schema() )->augment( $schema );
+		} );
+
+		return $this;
+	}
+
+	private function register_css_renderer() {
+		add_action( 'elementor/css-file/post/parse', function ( Post_CSS $post_css ) {
+			if ( ! Plugin::$instance->kits_manager->is_kit( $post_css->get_post_id() ) ) {
+				return;
+			}
+
+			$post_css->get_stylesheet()->add_raw_css(
+				( new Variables_CSS_Renderer( new Variables() ) )->raw_css()
+			);
+		} );
+
+		return $this;
+	}
+
+	private function register_fonts() {
+		add_action( 'elementor/css-file/post/parse', function ( $post_css ) {
+			( new Fonts() )->append_to( $post_css );
+		} );
+
+		return $this;
+	}
+
+	private function rest_api() {
+		return new Variables_API(
+			new Variables_Repository(
+				Plugin::$instance->kits_manager->get_active_kit()
+			)
+		);
+	}
+
+	private function register_api_endpoints() {
+		add_action( 'rest_api_init', function () {
+			$this->rest_api()->register_routes();
+		} );
+
+		// TODO: Remove this, when there are API-endpoints available to access the list of variables
+		add_action( 'elementor/editor/before_enqueue_scripts', function () {
+			// We must enqueue a random script, so that localize will be triggered as well...
+			wp_enqueue_script(
+				'e-variables',
+				ELEMENTOR_ASSETS_URL . '/variables-' . md5( microtime() ) . '.js',
+				[],
+				ELEMENTOR_VERSION,
+				true
+			);
+
+			wp_localize_script(
+				'e-variables',
+				'ElementorV4Variables',
+				( new Variables() )->get_all()
+			);
+		} );
+
+		return $this;
+	}
+}

wp-content/plugins/elementor/modules/variables/module.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace Elementor\Modules\Variables;
+
+use Elementor\Core\Base\Module as BaseModule;
+use Elementor\Core\Experiments\Manager as ExperimentsManager;
+use Elementor\Modules\AtomicWidgets\Module as AtomicWidgetsModule;
+use Elementor\Plugin;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Module extends BaseModule {
+	const MODULE_NAME = 'e-variables';
+	const EXPERIMENT_NAME = 'e_variables';
+
+	public function get_name() {
+		return self::MODULE_NAME;
+	}
+
+	public static function get_experimental_data(): array {
+		return [
+			'name' => self::EXPERIMENT_NAME,
+			'title' => esc_html__( 'Variables', 'elementor' ),
+			'description' => esc_html__( 'Enable variables. (For this feature to work - Atomic Widgets must be active)', 'elementor' ),
+			'hidden' => true,
+			'default' => ExperimentsManager::STATE_INACTIVE,
+			'release_status' => ExperimentsManager::RELEASE_STATUS_ALPHA,
+		];
+	}
+
+	private function hooks() {
+		return new Hooks();
+	}
+
+	public function __construct() {
+		parent::__construct();
+
+		if ( ! $this->is_experiment_active() ) {
+			return;
+		}
+
+		$this->hooks()->register();
+	}
+
+	private function is_experiment_active(): bool {
+		return Plugin::$instance->experiments->is_feature_active( self::EXPERIMENT_NAME )
+			&& Plugin::$instance->experiments->is_feature_active( AtomicWidgetsModule::EXPERIMENT_NAME );
+	}
+}

wp-content/plugins/elementor/modules/variables/prop-types/color-variable-prop-type.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace Elementor\Modules\Variables\PropTypes;
+
+use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Color_Variable_Prop_Type extends String_Prop_Type {
+	public static function get_key(): string {
+		return 'global-color-variable';
+	}
+}

wp-content/plugins/elementor/modules/variables/prop-types/font-variable-prop-type.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace Elementor\Modules\Variables\PropTypes;
+
+use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Font_Variable_Prop_Type extends String_Prop_Type {
+	public static function get_key(): string {
+		return 'global-font-variable';
+	}
+}

wp-content/plugins/elementor/modules/variables/storage/exceptions/fatal-error.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace Elementor\Modules\Variables\Storage\Exceptions;
+
+use Exception;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class FatalError extends Exception {}

wp-content/plugins/elementor/modules/variables/storage/exceptions/record-not-found.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace Elementor\Modules\Variables\Storage\Exceptions;
+
+use Exception;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class RecordNotFound extends Exception {}

wp-content/plugins/elementor/modules/variables/storage/exceptions/variables-limit-reached.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace Elementor\Modules\Variables\Storage\Exceptions;
+
+use Exception;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class VariablesLimitReached extends Exception {}

wp-content/plugins/elementor/modules/variables/storage/repository.php

@@ -0,0 +1,218 @@
+<?php
+
+namespace Elementor\Modules\Variables\Storage;
+
+use Elementor\Core\Kits\Documents\Kit;
+use Elementor\Modules\AtomicWidgets\Utils;
+use Elementor\Modules\Variables\Storage\Exceptions\RecordNotFound;
+use Elementor\Modules\Variables\Storage\Exceptions\VariablesLimitReached;
+use Elementor\Modules\Variables\Storage\Exceptions\FatalError;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Repository {
+	const TOTAL_VARIABLES_COUNT = 100;
+
+	const FORMAT_VERSION_V1 = 1;
+	const VARIABLES_META_KEY = '_elementor_global_variables';
+
+	private Kit $kit;
+
+	public function __construct( Kit $kit ) {
+		$this->kit = $kit;
+	}
+
+	/**
+	 * @throws VariablesLimitReached
+	 */
+	private function assert_if_variables_limit_reached( array $db_record ) {
+		$variables_in_use = 0;
+
+		foreach ( $db_record['data'] as $variable ) {
+			if ( isset( $variable['deleted'] ) && $variable['deleted'] ) {
+				continue;
+			}
+
+			++$variables_in_use;
+		}
+
+		if ( self::TOTAL_VARIABLES_COUNT < $variables_in_use ) {
+			throw new VariablesLimitReached( 'Total variables count limit reached' );
+		}
+	}
+
+	public function load(): array {
+		$db_record = $this->kit->get_json_meta( static::VARIABLES_META_KEY );
+
+		if ( is_array( $db_record ) && ! empty( $db_record ) ) {
+			return $db_record;
+		}
+
+		return $this->get_default_meta();
+	}
+
+	/**
+	 * @throws FatalError
+	 */
+	public function create( array $variable ) {
+		$db_record = $this->load();
+
+		$list_of_variables = $db_record['data'] ?? [];
+
+		$id = $this->new_id_for( $list_of_variables );
+
+		$list_of_variables[ $id ] = $this->extract_from( $variable, [
+			'type',
+			'label',
+			'value',
+		] );
+
+		$db_record['data'] = $list_of_variables;
+
+		$this->assert_if_variables_limit_reached( $db_record );
+
+		$watermark = $this->save( $db_record );
+
+		if ( false === $watermark ) {
+			throw new FatalError( 'Failed to create variable' );
+		}
+
+		return [
+			'variable' => array_merge( [ 'id' => $id ], $list_of_variables[ $id ] ),
+			'watermark' => $watermark,
+		];
+	}
+
+	/**
+	 * @throws RecordNotFound
+	 * @throws FatalError
+	 */
+	public function update( string $id, array $variable ) {
+		$db_record = $this->load();
+
+		$list_of_variables = $db_record['data'] ?? [];
+
+		if ( ! isset( $list_of_variables[ $id ] ) ) {
+			throw new RecordNotFound( 'Variable not found' );
+		}
+
+		$list_of_variables[ $id ] = array_merge( $list_of_variables[ $id ], $this->extract_from( $variable, [
+			'label',
+			'value',
+		] ) );
+
+		$db_record['data'] = $list_of_variables;
+
+		$watermark = $this->save( $db_record );
+
+		if ( false === $watermark ) {
+			throw new FatalError( 'Failed to update variable' );
+		}
+
+		return [
+			'variable' => array_merge( [ 'id' => $id ], $list_of_variables[ $id ] ),
+			'watermark' => $watermark,
+		];
+	}
+
+	/**
+	 * @throws RecordNotFound
+	 * @throws FatalError
+	 */
+	public function delete( string $id ) {
+		$db_record = $this->load();
+
+		$list_of_variables = $db_record['data'] ?? [];
+
+		if ( ! isset( $list_of_variables[ $id ] ) ) {
+			throw new RecordNotFound( 'Variable not found' );
+		}
+
+		$list_of_variables[ $id ]['deleted'] = true;
+		$list_of_variables[ $id ]['deleted_at'] = $this->now();
+
+		$db_record['data'] = $list_of_variables;
+
+		$watermark = $this->save( $db_record );
+
+		if ( false === $watermark ) {
+			throw new FatalError( 'Failed to delete variable' );
+		}
+
+		return [
+			'variable' => array_merge( [ 'id' => $id ], $list_of_variables[ $id ] ),
+			'watermark' => $watermark,
+		];
+	}
+
+	/**
+	 * @throws RecordNotFound
+	 * @throws FatalError
+	 */
+	public function restore( string $id ) {
+		$db_record = $this->load();
+
+		$list_of_variables = $db_record['data'] ?? [];
+
+		if ( ! isset( $list_of_variables[ $id ] ) ) {
+			throw new RecordNotFound( 'Variable not found' );
+		}
+
+		$list_of_variables[ $id ] = $this->extract_from( $list_of_variables[ $id ], [
+			'label',
+			'value',
+			'type',
+		] );
+
+		$db_record['data'] = $list_of_variables;
+
+		$this->assert_if_variables_limit_reached( $db_record );
+
+		$watermark = $this->save( $db_record );
+
+		if ( false === $watermark ) {
+			throw new FatalError( 'Failed to restore variable' );
+		}
+
+		return [
+			'variable' => array_merge( [ 'id' => $id ], $list_of_variables[ $id ] ),
+			'watermark' => $watermark,
+		];
+	}
+
+	private function save( array $db_record ) {
+		if ( PHP_INT_MAX === $db_record['watermark'] ) {
+			$db_record['watermark'] = 0;
+		}
+
+		++$db_record['watermark'];
+
+		if ( $this->kit->update_json_meta( static::VARIABLES_META_KEY, $db_record ) ) {
+			return $db_record['watermark'];
+		}
+
+		return false;
+	}
+
+	private function new_id_for( array $list_of_variables ): string {
+		return Utils::generate_id( 'e-gv-', array_keys( $list_of_variables ) );
+	}
+
+	private function now(): string {
+		return gmdate( 'Y-m-d H:i:s' );
+	}
+
+	private function extract_from( array $source, array $fields ): array {
+		return array_intersect_key( $source, array_flip( $fields ) );
+	}
+
+	private function get_default_meta(): array {
+		return [
+			'data' => [],
+			'watermark' => 0,
+			'version' => self::FORMAT_VERSION_V1,
+		];
+	}
+}

wp-content/plugins/elementor/modules/variables/transformers/global-variable-transformer.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace Elementor\Modules\Variables\Transformers;
+
+use Elementor\Modules\AtomicWidgets\PropsResolver\Transformer_Base;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Global_Variable_Transformer extends Transformer_Base {
+	public function transform( $value, $key ) {
+		if ( ! trim( $value ) ) {
+			return null;
+		}
+
+		return "var(--{$value})";
+	}
+}