first commit

wp-content/plugins/elementor/modules/design-system-sync/classes/classes-provider.php

@@ -0,0 +1,180 @@
+<?php
+
+namespace Elementor\Modules\DesignSystemSync\Classes;
+
+use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
+use Elementor\Modules\AtomicWidgets\PropsResolver\Render_Props_Resolver;
+use Elementor\Modules\AtomicWidgets\Styles\Style_Schema;
+use Elementor\Modules\DesignSystemSync\Module;
+use Elementor\Modules\GlobalClasses\Global_Classes_Repository;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Classes_Provider {
+	private static $cached_classes = null;
+
+	public static function get_all_classes(): array {
+		if ( null !== self::$cached_classes ) {
+			return self::$cached_classes;
+		}
+
+		$classes_data = Global_Classes_Repository::make()
+			->context( Global_Classes_Repository::CONTEXT_FRONTEND )
+			->all()
+			->get();
+
+		self::$cached_classes = $classes_data['items'] ?? [];
+
+		return self::$cached_classes;
+	}
+
+	public static function get_synced_classes(): array {
+		$all_classes = self::get_all_classes();
+		$synced_classes = [];
+
+		foreach ( $all_classes as $id => $class ) {
+			if ( empty( $class['sync_to_v3'] ) ) {
+				continue;
+			}
+
+			$synced_classes[ $id ] = $class;
+		}
+
+		return $synced_classes;
+	}
+
+	public static function clear_cache() {
+		self::$cached_classes = null;
+	}
+
+	public static function get_default_breakpoint_props( array $variants ): array {
+		$all = self::get_all_normal_state_variant_props( $variants );
+
+		return $all[ Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP ] ?? [];
+	}
+
+	public static function get_all_normal_state_variant_props( array $variants ): array {
+		$result = [];
+
+		foreach ( $variants as $variant ) {
+			if ( ! isset( $variant['meta'] ) ) {
+				continue;
+			}
+
+			$meta = $variant['meta'];
+
+			if ( ! array_key_exists( 'breakpoint', $meta ) || ! array_key_exists( 'state', $meta ) ) {
+				continue;
+			}
+
+			$state = $meta['state'];
+
+			if ( ! in_array( $state, [ null, 'normal' ], true ) ) {
+				continue;
+			}
+
+			$breakpoint = $meta['breakpoint'];
+			$breakpoint_key = ( null === $breakpoint ) ? Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP : $breakpoint;
+
+			$result[ $breakpoint_key ] = $variant['props'] ?? [];
+		}
+
+		return $result;
+	}
+
+	public static function has_typography_props( array $props ): bool {
+		foreach ( Sync_Typography_Props::get_css_props() as $key ) {
+			if ( isset( $props[ $key ] ) ) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	public static function get_typography_classes(): array {
+		$synced_classes = self::get_synced_classes();
+
+		if ( empty( $synced_classes ) ) {
+			return [];
+		}
+
+		$typography_classes = [];
+
+		foreach ( $synced_classes as $id => $class ) {
+			$variants = $class['variants'] ?? [];
+			$default_props = self::get_default_breakpoint_props( $variants );
+
+			if ( empty( $default_props ) ) {
+				continue;
+			}
+
+			if ( ! self::has_typography_props( $default_props ) ) {
+				continue;
+			}
+
+			$typography_classes[] = [
+				'id' => $id,
+				'label' => $class['label'] ?? '',
+				'props' => $default_props,
+				'variants_props' => self::get_all_normal_state_variant_props( $variants ),
+			];
+		}
+
+		return $typography_classes;
+	}
+
+	public static function get_synced_typography_css_entries(): array {
+		$synced_classes = self::get_synced_classes();
+		$grouped_entries = [];
+
+		$schema = Style_Schema::get();
+		$props_resolver = Render_Props_Resolver::for_styles();
+
+		foreach ( $synced_classes as $id => $class ) {
+			$label = sanitize_text_field( $class['label'] ?? '' );
+
+			if ( empty( $label ) ) {
+				continue;
+			}
+
+			$all_variant_props = self::get_all_normal_state_variant_props( $class['variants'] ?? [] );
+
+			if ( empty( $all_variant_props ) ) {
+				continue;
+			}
+
+			$desktop_props = $all_variant_props[ Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP ] ?? [];
+
+			if ( ! self::has_typography_props( $desktop_props ) ) {
+				continue;
+			}
+
+			$v3_id = Module::get_v3_sync_id( $label );
+
+			foreach ( $all_variant_props as $device => $props ) {
+				if ( empty( $props ) ) {
+					continue;
+				}
+
+				$resolved_props = $props_resolver->resolve( $schema, $props );
+
+				if ( ! isset( $grouped_entries[ $device ] ) ) {
+					$grouped_entries[ $device ] = [];
+				}
+
+				foreach ( Sync_Typography_Props::get_css_props() as $prop_name ) {
+					if ( empty( $resolved_props[ $prop_name ] ) ) {
+						continue;
+					}
+
+					$grouped_entries[ $device ][] = "--e-global-typography-{$v3_id}-{$prop_name}:{$resolved_props[ $prop_name ]};";
+				}
+			}
+		}
+
+		return $grouped_entries;
+	}
+}

wp-content/plugins/elementor/modules/design-system-sync/classes/controller.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace Elementor\Modules\DesignSystemSync\Classes;
+
+use Exception;
+use WP_REST_Server;
+use WP_REST_Response;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Controller {
+	const API_NAMESPACE = 'elementor/v1';
+	const API_BASE = 'design-system-sync';
+	const HTTP_CREATED = 201;
+	const HTTP_INTERNAL_SERVER_ERROR = 500;
+
+	public function register_hooks() {
+		add_action( 'rest_api_init', [ $this, 'register_routes' ] );
+	}
+
+	public function register_routes() {
+		register_rest_route( self::API_NAMESPACE, '/' . self::API_BASE . '/stylesheet', [
+			'methods' => WP_REST_Server::CREATABLE,
+			'callback' => [ $this, 'generate' ],
+			'permission_callback' => [ $this, 'has_permission' ],
+		] );
+	}
+
+	public function generate(): WP_REST_Response {
+		try {
+			$stylesheet = new Stylesheet_Manager();
+			$result = $stylesheet->generate();
+
+			return new WP_REST_Response( $result, self::HTTP_CREATED );
+		} catch ( Exception $e ) {
+			return new WP_REST_Response(
+				[ 'message' => $e->getMessage() ],
+				self::HTTP_INTERNAL_SERVER_ERROR
+			);
+		}
+	}
+
+	public function has_permission(): bool {
+		return current_user_can( 'edit_posts' );
+	}
+}

wp-content/plugins/elementor/modules/design-system-sync/classes/global-colors-extension.php

@@ -0,0 +1,116 @@
+<?php
+
+namespace Elementor\Modules\DesignSystemSync\Classes;
+
+use Elementor\Controls_Manager;
+use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
+use Elementor\Modules\DesignSystemSync\Controls\V4_Color_Variable_List;
+use Elementor\Modules\DesignSystemSync\Module;
+use Elementor\Plugin;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Global_Colors_Extension {
+	public function register_hooks() {
+		add_action( 'elementor/kit/global-colors/register_controls', [ $this, 'add_v4_variables_section' ] );
+		add_filter( 'elementor/globals/colors/items', [ $this, 'add_v4_variables_section_to_color_selector' ] );
+	}
+
+	public function add_v4_variables_section( Global_Colors $tab ) {
+		if ( ! Plugin::$instance->editor->is_edit_mode() ) {
+			return;
+		}
+
+		$v4_colors = $this->get_v4_color_variables();
+
+		if ( empty( $v4_colors ) ) {
+			return;
+		}
+
+		$items = [];
+		foreach ( $v4_colors as $variable ) {
+			$items[] = [
+				'_id' => $variable['id'],
+				'title' => $variable['label'],
+				'color' => strtoupper( $variable['value'] ),
+			];
+		}
+
+		$tab->add_control(
+			'heading_v4_variables',
+			[
+				'type' => Controls_Manager::HEADING,
+				'label' => esc_html__( 'Atomic Variables', 'elementor' ),
+				'separator' => 'before',
+			]
+		);
+
+		$tab->add_control(
+			'v4_color_variables_display',
+			[
+				'type' => V4_Color_Variable_List::TYPE,
+				'items' => $items,
+			]
+		);
+	}
+
+	public function add_v4_variables_section_to_color_selector( array $items ): array {
+		$v4_colors = $this->get_v4_color_variables();
+
+		if ( empty( $v4_colors ) ) {
+			return $items;
+		}
+
+		foreach ( $v4_colors as $color ) {
+			$label = sanitize_text_field( $color['label'] ?? '' );
+
+			if ( empty( $label ) ) {
+				continue;
+			}
+
+			$id = Module::get_v3_sync_id( $label );
+
+			$items[ $id ] = [
+				'id' => $id,
+				'title' => $label,
+				'value' => strtoupper( $color['value'] ),
+				'group' => 'v4',
+			];
+		}
+
+		return $items;
+	}
+
+	private function get_v4_color_variables(): array {
+		$synced_variables = Variables_Provider::get_synced_color_variables();
+
+		if ( empty( $synced_variables ) ) {
+			return [];
+		}
+
+		$color_variables = [];
+
+		foreach ( $synced_variables as $id => $variable ) {
+			$value = $variable['value'] ?? '';
+
+			if ( is_array( $value ) && isset( $value['value'] ) ) {
+				$value = $value['value'];
+			}
+
+			$color_variables[] = [
+				'id' => $id,
+				'label' => $variable['label'] ?? '',
+				'value' => $value,
+				'order' => $variable['order'] ?? 0,
+			];
+		}
+
+		usort( $color_variables, function( $a, $b ) {
+			return $a['order'] <=> $b['order'];
+		} );
+
+		return $color_variables;
+	}
+}

wp-content/plugins/elementor/modules/design-system-sync/classes/global-typography-extension.php

@@ -0,0 +1,157 @@
+<?php
+
+namespace Elementor\Modules\DesignSystemSync\Classes;
+
+use Elementor\Controls_Manager;
+use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
+use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
+use Elementor\Modules\DesignSystemSync\Controls\V4_Typography_List;
+use Elementor\Modules\DesignSystemSync\Module;
+use Elementor\Plugin;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Global_Typography_Extension {
+	public function register_hooks() {
+		add_action( 'elementor/kit/global-typography/register_controls', [ $this, 'add_v4_classes_section' ] );
+		add_filter( 'elementor/globals/typography/items', [ $this, 'add_v4_classes_to_typography_selector' ] );
+	}
+
+	public function add_v4_classes_section( Global_Typography $tab ) {
+		if ( ! Plugin::$instance->editor->is_edit_mode() ) {
+			return;
+		}
+
+		$v4_typography_classes = Classes_Provider::get_typography_classes();
+
+		if ( empty( $v4_typography_classes ) ) {
+			return;
+		}
+
+		$tab->add_control(
+			'heading_v4_typography_classes',
+			[
+				'type' => Controls_Manager::HEADING,
+				'label' => esc_html__( 'Atomic Classes', 'elementor' ),
+				'separator' => 'before',
+			]
+		);
+
+		$tab->add_control(
+			'heading_v4_typography_classes_description',
+			[
+				'type' => Controls_Manager::RAW_HTML,
+				'raw' => esc_html__( 'V4 classes can only be edited when applied on an atom.', 'elementor' ),
+				'content_classes' => 'elementor-descriptor',
+			]
+		);
+
+		$items = [];
+
+		foreach ( $v4_typography_classes as $class ) {
+			$label = sanitize_text_field( $class['label'] ?? '' );
+
+			if ( empty( $label ) ) {
+				continue;
+			}
+
+			$items[] = [ 'title' => $label ];
+		}
+
+		$tab->add_control(
+			'v4_typography_classes_display',
+			[
+				'type' => V4_Typography_List::TYPE,
+				'items' => $items,
+			]
+		);
+	}
+
+	public function add_v4_classes_to_typography_selector( array $items ): array {
+		$v4_classes = Classes_Provider::get_typography_classes();
+
+		if ( empty( $v4_classes ) ) {
+			return $items;
+		}
+
+		$v4_items = [];
+
+		foreach ( $v4_classes as $class ) {
+			$label = sanitize_text_field( $class['label'] ?? '' );
+
+			if ( empty( $label ) ) {
+				continue;
+			}
+
+			$id = Module::get_v3_sync_id( $label );
+			$props = $class['props'] ?? [];
+
+			if ( empty( $props ) ) {
+				continue;
+			}
+
+			$value = $this->convert_v4_props_to_v3_format( $props );
+
+			$variants_props = $class['variants_props'] ?? [];
+
+			foreach ( $variants_props as $breakpoint => $bp_props ) {
+				if ( Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP === $breakpoint ) {
+					continue;
+				}
+
+				if ( empty( $bp_props ) ) {
+					continue;
+				}
+
+				$bp_values = $this->convert_v4_props_to_v3_format( $bp_props );
+
+				foreach ( $bp_values as $key => $val ) {
+					if ( $this->is_responsive_prop( $key ) ) {
+						$value[ $key . '_' . $breakpoint ] = $val;
+					}
+				}
+			}
+
+			$v4_items[ $id ] = [
+				'id' => $id,
+				'title' => $label,
+				'value' => $value,
+				'group' => 'v4',
+			];
+		}
+
+		return array_merge( $v4_items, $items );
+	}
+
+	private function is_responsive_prop( string $v3_key ): bool {
+		return in_array( $v3_key, Sync_Typography_Props::RESPONSIVE_V3_PROPS, true );
+	}
+
+	private function convert_v4_props_to_v3_format( array $v4_props ): array {
+		$v3_format = [];
+
+		foreach ( Sync_Typography_Props::PROP_MAP as $v4_prop => $v3_prop ) {
+			if ( ! isset( $v4_props[ $v4_prop ] ) || empty( $v4_props[ $v4_prop ] ) ) {
+				continue;
+			}
+
+			$v3_format[ $v3_prop ] = $this->extract_v4_prop_value( $v4_props[ $v4_prop ] );
+		}
+
+		if ( ! empty( $v3_format ) ) {
+			$v3_format['typography_typography'] = 'custom';
+		}
+
+		return $v3_format;
+	}
+
+	private function extract_v4_prop_value( $prop ) {
+		if ( ! empty( $prop['value'] ) ) {
+			return $prop['value'];
+		}
+
+		return $prop;
+	}
+}

wp-content/plugins/elementor/modules/design-system-sync/classes/stylesheet-manager.php

@@ -0,0 +1,75 @@
+<?php
+
+namespace Elementor\Modules\DesignSystemSync\Classes;
+
+use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
+use Elementor\Core\Files\Base as Base_File;
+use Elementor\Plugin;
+use Elementor\Stylesheet;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Stylesheet_Manager extends Base_File {
+	const FILE_NAME = 'design-system-sync.css';
+	const DEFAULT_FILES_DIR = 'design-system-sync/';
+	const META_KEY = '_elementor_design_system_sync_css_meta';
+
+	public function __construct() {
+		parent::__construct( self::FILE_NAME );
+	}
+
+	public function generate(): array {
+		$this->update();
+
+		return [
+			'url' => $this->get_url(),
+			'version' => $this->get_meta( 'time' ),
+		];
+	}
+
+	public function enqueue(): void {
+		if ( ! file_exists( $this->get_path() ) ) {
+			$this->generate();
+		}
+
+		if ( ! file_exists( $this->get_path() ) ) {
+			return;
+		}
+
+		wp_enqueue_style(
+			'elementor-design-system-sync',
+			$this->get_url(),
+			[],
+			$this->get_meta( 'time' )
+		);
+	}
+
+	protected function parse_content(): string {
+		$stylesheet = new Stylesheet();
+
+		$breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
+
+		foreach ( $breakpoints as $breakpoint_name => $breakpoint ) {
+			$stylesheet->add_device( $breakpoint_name, $breakpoint->get_value() );
+		}
+
+		$color_entries = Variables_Provider::get_synced_color_css_entries();
+
+		if ( ! empty( $color_entries ) ) {
+			$stylesheet->add_raw_css( ':root { ' . implode( ' ', $color_entries ) . ' }' );
+		}
+
+		$typography_entries = Classes_Provider::get_synced_typography_css_entries();
+
+		foreach ( $typography_entries as $device => $entries ) {
+			$css = ':root { ' . implode( ' ', $entries ) . ' }';
+			$device_key = ( Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP === $device ) ? '' : $device;
+
+			$stylesheet->add_raw_css( $css, $device_key );
+		}
+
+		return (string) $stylesheet;
+	}
+}

wp-content/plugins/elementor/modules/design-system-sync/classes/sync-typography-props.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Elementor\Modules\DesignSystemSync\Classes;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Sync_Typography_Props {
+	const PROP_MAP = [
+		'font-family' => 'typography_font_family',
+		'font-size' => 'typography_font_size',
+		'font-weight' => 'typography_font_weight',
+		'font-style' => 'typography_font_style',
+		'text-decoration' => 'typography_text_decoration',
+		'line-height' => 'typography_line_height',
+		'letter-spacing' => 'typography_letter_spacing',
+		'word-spacing' => 'typography_word_spacing',
+		'text-transform' => 'typography_text_transform',
+	];
+
+	const RESPONSIVE_V3_PROPS = [
+		'typography_font_size',
+		'typography_line_height',
+		'typography_letter_spacing',
+		'typography_word_spacing',
+	];
+
+	public static function get_css_props(): array {
+		return array_keys( self::PROP_MAP );
+	}
+}

wp-content/plugins/elementor/modules/design-system-sync/classes/variables-provider.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace Elementor\Modules\DesignSystemSync\Classes;
+
+use Elementor\Modules\DesignSystemSync\Module;
+use Elementor\Modules\Variables\Services\Batch_Operations\Batch_Processor;
+use Elementor\Modules\Variables\Services\Variables_Service;
+use Elementor\Modules\Variables\Storage\Variables_Repository;
+use Elementor\Plugin;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Variables_Provider {
+	private static $cached_variables = null;
+
+	public static function get_all_variables(): array {
+		if ( null !== self::$cached_variables ) {
+			return self::$cached_variables;
+		}
+
+		$kit = Plugin::$instance->kits_manager->get_active_kit();
+
+		if ( ! $kit ) {
+			return [];
+		}
+
+		$repository = new Variables_Repository( $kit );
+		$service = new Variables_Service( $repository, new Batch_Processor() );
+		self::$cached_variables = $service->get_variables_list();
+
+		return self::$cached_variables;
+	}
+
+	public static function get_synced_color_variables(): array {
+		$all_variables = self::get_all_variables();
+		$color_variables = [];
+
+		foreach ( $all_variables as $id => $variable ) {
+			if ( isset( $variable['deleted'] ) && $variable['deleted'] ) {
+				continue;
+			}
+
+			if ( empty( $variable['type'] ) || 'global-color-variable' !== $variable['type'] ) {
+				continue;
+			}
+
+			if ( empty( $variable['sync_to_v3'] ) ) {
+				continue;
+			}
+
+			$color_variables[ $id ] = $variable;
+		}
+		return $color_variables;
+	}
+
+	public static function clear_cache() {
+		self::$cached_variables = null;
+	}
+
+	public static function get_synced_color_css_entries(): array {
+		$synced_variables = self::get_synced_color_variables();
+		$css_entries = [];
+
+		foreach ( $synced_variables as $id => $variable ) {
+			$label = sanitize_text_field( $variable['label'] ?? '' );
+
+			if ( empty( $label ) ) {
+				continue;
+			}
+
+			$v3_id = Module::get_v3_sync_id( $label );
+
+			$css_entries[] = "--e-global-color-{$v3_id}:var(--{$label});";
+		}
+
+		return $css_entries;
+	}
+}

wp-content/plugins/elementor/modules/design-system-sync/controls/v4-color-variable-list.php

@@ -0,0 +1,53 @@
+<?php
+namespace Elementor\Modules\DesignSystemSync\Controls;
+
+use Elementor\Base_UI_Control;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class V4_Color_Variable_List extends Base_UI_Control {
+
+	const TYPE = 'v4_color_variable_list';
+
+	public function get_type() {
+		return self::TYPE;
+	}
+
+	public function content_template() {
+		?>
+		<label>
+			<span class="elementor-control-title">{{{ data.label }}}</span>
+		</label>
+		<div class="elementor-repeater-fields-wrapper" role="list">
+			<# _.each( data.items, function( item ) {
+				var title = item[ data.title_field ] || '';
+				var color = item[ data.color_field ] || '';
+				#>
+				<div class="elementor-repeater-fields" role="listitem">
+					<div class="elementor-repeater-row-controls e-v4-color-variable-list__row">
+						<span class="elementor-control-title e-v4-color-variable-list__title">{{{ title }}}</span>
+						<span class="e-v4-color-variable-list__edit-btn-wrapper">
+							<button class="e-v4-color-variable-list__edit-btn" onclick="window.dispatchEvent( new CustomEvent( 'elementor/open-variables-manager' ) )">
+								<i class="eicon-pencil" aria-hidden="true"></i>
+							</button>
+							<span class="e-v4-color-variable-list__tooltip"><?php echo esc_html__( 'Edit in Variables manager', 'elementor' ); ?></span>
+						</span>
+						<span class="e-v4-color-variable-list__color-value">{{ color }}</span>
+						<span class="e-v4-color-variable-list__color-swatch" style="background-color:{{ color }}; box-shadow: inset 0 0 0 7px var(--e-a-bg-default), 0 0 0 1px var(--e-a-border-color);"></span>
+					</div>
+				</div>
+			<# } ); #>
+		</div>
+		<?php
+	}
+
+	protected function get_default_settings() {
+		return [
+			'items' => [],
+			'title_field' => 'title',
+			'color_field' => 'color',
+		];
+	}
+}

wp-content/plugins/elementor/modules/design-system-sync/controls/v4-typography-list.php

@@ -0,0 +1,46 @@
+<?php
+namespace Elementor\Modules\DesignSystemSync\Controls;
+
+use Elementor\Base_UI_Control;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class V4_Typography_List extends Base_UI_Control {
+
+	const TYPE = 'v4_typography_list';
+
+	public function get_type() {
+		return self::TYPE;
+	}
+
+	public function content_template() {
+		?>
+		<label>
+			<span class="elementor-control-title">{{{ data.label }}}</span>
+		</label>
+		<div class="elementor-repeater-fields-wrapper" role="list">
+			<# _.each( data.items, function( item ) {
+				var title = item[ data.title_field ] || '';
+				#>
+				<div class="elementor-repeater-fields" role="listitem">
+					<div class="elementor-repeater-row-controls e-v4-typography-list__row">
+						<span class="elementor-control-title e-v4-typography-list__title">{{{ title }}}</span>
+						<button class="e-v4-typography-list__edit-btn" disabled>
+							<i class="eicon-edit" aria-hidden="true"></i>
+						</button>
+					</div>
+				</div>
+			<# } ); #>
+		</div>
+		<?php
+	}
+
+	protected function get_default_settings() {
+		return [
+			'items' => [],
+			'title_field' => 'title',
+		];
+	}
+}

wp-content/plugins/elementor/modules/design-system-sync/module.php

@@ -0,0 +1,75 @@
+<?php
+
+namespace Elementor\Modules\DesignSystemSync;
+
+use Elementor\Core\Base\Module as BaseModule;
+use Elementor\Modules\DesignSystemSync\Classes\Stylesheet_Manager;
+use Elementor\Modules\DesignSystemSync\Classes\Controller;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Module extends BaseModule {
+	const MODULE_NAME = 'design-system-sync';
+	public static function get_v3_sync_id( string $label ): string {
+		return 'v4-' . strtolower( $label );
+	}
+
+	public function get_name() {
+		return self::MODULE_NAME;
+	}
+
+	public function __construct() {
+		parent::__construct();
+
+		$this->register_hooks();
+	}
+
+	private function register_hooks() {
+		( new Classes\Global_Colors_Extension() )->register_hooks();
+		( new Classes\Global_Typography_Extension() )->register_hooks();
+		( new Controller() )->register_hooks();
+
+		add_action( 'elementor/controls/register', [ $this, 'register_controls' ] );
+		add_action( 'elementor/editor/after_enqueue_scripts', [ $this, 'enqueue_editor_scripts' ] );
+		add_action( 'elementor/editor/after_enqueue_styles', [ $this, 'enqueue_editor_styles' ] );
+		add_action( 'elementor/global_classes/update', [ $this, 'clear_classes_cache' ] );
+		add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_sync_stylesheet' ] );
+	}
+
+	public function register_controls( $controls_manager ) {
+		require_once __DIR__ . '/controls/v4-color-variable-list.php';
+		require_once __DIR__ . '/controls/v4-typography-list.php';
+
+		$controls_manager->register( new Controls\V4_Color_Variable_List() );
+		$controls_manager->register( new Controls\V4_Typography_List() );
+	}
+
+	public function enqueue_editor_scripts() {
+		wp_enqueue_script(
+			'elementor-design-system-sync-editor',
+			$this->get_js_assets_url( 'design-system-sync' ),
+			[],
+			ELEMENTOR_VERSION,
+			true
+		);
+	}
+
+	public function enqueue_editor_styles() {
+		wp_enqueue_style(
+			'elementor-design-system-sync-editor',
+			$this->get_css_assets_url( 'modules/design-system-sync/design-system-sync' ),
+			[],
+			ELEMENTOR_VERSION
+		);
+	}
+
+	public function clear_classes_cache() {
+		Classes\Classes_Provider::clear_cache();
+	}
+
+	public function enqueue_sync_stylesheet() {
+		( new Stylesheet_Manager() )->enqueue();
+	}
+}