Merge develop into master

.github/CODEOWNERS

@@ -33,7 +33,7 @@
 # Core
 /core                                                            @kingyes
 /core/admin/notices                                              @nevoss
-/core/app                                                        @matipojo @kobizz
+/app                                                             @matipojo @kobizz
 /core/base                                                       @matipojo @kobizz
 /core/base/db-upgrades-manager.php                               @matipojo
 /core/base/background-task.php                                   @matipojo

.github/workflows/publish-release.yml

@@ -13,7 +13,7 @@ on:
 
 jobs:
   merge-release-branch-to-develop:
-    if: (github.actor == 'ronkelementor' || github.actor == 'KingYes' || github.actor == 'shilo-ey' || github.actor == 'matipojo') && startsWith(github.repository, 'elementor/')
+    if: (github.actor == 'ronkelementor' || github.actor == 'KingYes' || github.actor == 'shilo-ey' || github.actor == 'matipojo' || github.actor == 'TzviRabinovitch') && startsWith(github.repository, 'elementor/')
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout master branch

.grunt-config/loaders/app-imports.js

@@ -1,7 +1,7 @@
 const path = require( 'path' ),
 	fs = require('fs'),
 	dir = path.resolve( __dirname, '../../' ),
-	importsFile = dir + '/core/app/assets/styles/app-imports.scss';
+	importsFile = dir + '/app/assets/styles/app-imports.scss';
 
 module.exports = function() {
 		const resourceRelativePath = path.relative( path.dirname(importsFile), this.resourcePath ).replace( /\\/g, '/' ),

.grunt-config/postcss.js

@@ -39,7 +39,9 @@ module.exports = {
 			expand: true,
 			src: [
 				'assets/css/*.css',
-				'!assets/css/*.min.css'
+				'!assets/css/*.min.css',
+				'assets/css/modules/**/*.css',
+				'!assets/css/modules/**/*.min.css'
 			],
 			ext: '.min.css'
 		} ]

.grunt-config/sass.js

@@ -21,6 +21,13 @@ const sass = {
 				dest: 'assets/css/modules/container-converter',
 				ext: '.css',
 			},
+			{
+				expand: true,
+				cwd: 'modules/notes/assets/scss',
+				src: 'editor.scss',
+				dest: 'assets/css/modules/notes',
+				ext: '.css',
+			},
 		]
 	}
 };

.grunt-config/webpack.alias.js

@@ -4,7 +4,7 @@ module.exports = {
 	resolve: {
 		alias: {
 			'elementor': path.resolve( __dirname, '../' ),
-			'elementor-app': path.resolve( __dirname, '../core/app/assets/js' ),
+			'elementor-app': path.resolve( __dirname, '../app/assets/js' ),
 			'elementor-admin': path.resolve( __dirname, '../assets/dev/js/admin' ),
 			'elementor-api': path.resolve( __dirname, '../modules/web-cli/assets/js/' ),
 			'elementor-assets-js': path.resolve( __dirname, '../assets/dev/js' ),

.grunt-config/webpack.js

@@ -28,7 +28,7 @@ const getModuleRules = ( presets ) => {
 	return {
 		rules: [
 			{
-				test: /core[/\\]app.*\.(s)?css$/i,
+				test: /app.*\.(s)?css$/i,
 				use: [
 					{
 						loader: './loaders/app-imports.js',
@@ -96,9 +96,9 @@ const entry = {
 	'common': path.resolve( __dirname, '../core/common/assets/js/common.js' ),
 	'gutenberg': path.resolve( __dirname, '../assets/dev/js/admin/gutenberg.js' ),
 	'new-template': path.resolve( __dirname, '../assets/dev/js/admin/new-template/new-template.js' ),
-	'app': path.resolve( __dirname, '../core/app/assets/js/index.js' ),
-	'app-loader': path.resolve( __dirname, '../core/app/assets/js/app-loader' ),
-	'app-packages': path.resolve( __dirname, '../core/app/assets/js/app-packages' ),
+	'app': path.resolve( __dirname, '../app/assets/js/index.js' ),
+	'app-loader': path.resolve( __dirname, '../app/assets/js/app-loader' ),
+	'app-packages': path.resolve( __dirname, '../app/assets/js/app-packages' ),
 	'beta-tester': path.resolve( __dirname, '../assets/dev/js/admin/beta-tester/beta-tester.js' ),
 	'common-modules': path.resolve( __dirname, '../core/common/assets/js/modules' ),
 	'editor-modules': path.resolve( __dirname, '../assets/dev/js/editor/modules.js' ),
@@ -107,7 +107,9 @@ const entry = {
 	'qunit-tests': path.resolve( __dirname, '../tests/qunit/main.js' ),
 	'admin-top-bar': path.resolve( __dirname, '../modules/admin-top-bar/assets/js/admin.js' ),
 	'container-converter': path.resolve( __dirname, '../modules/container-converter/assets/js/editor/module.js' ),
+	'notes': path.resolve( __dirname, '../modules/notes/assets/js/notes.js' ),
 	'web-cli': path.resolve( __dirname, '../modules/web-cli/assets/js/index.js' ),
+	'import-export-admin': path.resolve( __dirname, '../app/modules/import-export/assets/js/admin.js' ),
 };
 
 const frontendEntries = {

core/app/admin-menu-items/theme-builder-menu-item.php → app/admin-menu-items/theme-builder-menu-item.php

@@ -1,5 +1,5 @@
 <?php
-namespace Elementor\Core\App\AdminMenuItems;
+namespace Elementor\App\AdminMenuItems;
 
 use Elementor\Core\Admin\Menu\Interfaces\Admin_Menu_Item;
 use Elementor\TemplateLibrary\Source_Local;

app/app.php

@@ -0,0 +1,270 @@
+<?php
+namespace Elementor\App;
+
+use Elementor\App\AdminMenuItems\Theme_Builder_Menu_Item;
+use Elementor\Core\Admin\Menu\Admin_Menu_Manager;
+use Elementor\Icons_Manager;
+use Elementor\Modules\WebCli\Module as WebCLIModule;
+use Elementor\Core\Base\App as BaseApp;
+use Elementor\Core\Settings\Manager as SettingsManager;
+use Elementor\Plugin;
+use Elementor\TemplateLibrary\Source_Local;
+use Elementor\Utils;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class App extends BaseApp {
+
+	const PAGE_ID = 'elementor-app';
+
+	/**
+	 * Get module name.
+	 *
+	 * Retrieve the module name.
+	 *
+	 * @since 3.0.0
+	 * @access public
+	 *
+	 * @return string Module name.
+	 */
+	public function get_name() {
+		return 'app';
+	}
+
+	public function get_base_url() {
+		return admin_url( 'admin.php?page=' . self::PAGE_ID . '&ver=' . ELEMENTOR_VERSION );
+	}
+
+	private function register_admin_menu( Admin_Menu_Manager $admin_menu ) {
+		$admin_menu->register( static::PAGE_ID, new Theme_Builder_Menu_Item() );
+	}
+
+	public function fix_submenu( $menu ) {
+		global $submenu;
+
+		if ( is_multisite() && is_network_admin() ) {
+			return $menu;
+		}
+
+		// Non admin role / custom wp menu.
+		if ( empty( $submenu[ Source_Local::ADMIN_MENU_SLUG ] ) ) {
+			return $menu;
+		}
+
+		// Hack to add a link to sub menu.
+		foreach ( $submenu[ Source_Local::ADMIN_MENU_SLUG ] as &$item ) {
+			if ( self::PAGE_ID === $item[2] ) {
+				$item[2] = $this->get_settings( 'menu_url' ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+				$item[4] = 'elementor-app-link'; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+			}
+		}
+
+		return $menu;
+	}
+
+	public function is_current() {
+		return ( ! empty( $_GET['page'] ) && self::PAGE_ID === $_GET['page'] );
+	}
+
+	public function admin_init() {
+		do_action( 'elementor/app/init', $this );
+
+		$this->enqueue_assets();
+
+		// Setup default heartbeat options
+		// TODO: Enable heartbeat.
+		add_filter( 'heartbeat_settings', function( $settings ) {
+			$settings['interval'] = 15;
+			return $settings;
+		} );
+
+		$this->render();
+		die;
+	}
+
+	protected function get_init_settings() {
+		$referer = wp_get_referer();
+
+		return [
+			'menu_url' => $this->get_base_url() . '#site-editor/promotion',
+			'assets_url' => ELEMENTOR_ASSETS_URL,
+			'return_url' => $referer ? $referer : admin_url(),
+			'hasPro' => Utils::has_pro(),
+			'admin_url' => admin_url(),
+			'login_url' => wp_login_url(),
+			'base_url' => $this->get_base_url(),
+		];
+	}
+
+	private function render() {
+		require __DIR__ . '/view.php';
+	}
+
+	/**
+	 * Get Elementor UI theme preference.
+	 *
+	 * Retrieve the user UI theme preference as defined by editor preferences manager.
+	 *
+	 * @since 3.0.0
+	 * @access private
+	 *
+	 * @return string Preferred UI theme.
+	 */
+	private function get_elementor_ui_theme_preference() {
+		$editor_preferences = SettingsManager::get_settings_managers( 'editorPreferences' );
+
+		return $editor_preferences->get_model()->get_settings( 'ui_theme' );
+	}
+
+	/**
+	 * Enqueue dark theme detection script.
+	 *
+	 * Enqueues an inline script that detects user-agent settings for dark mode and adds a complimentary class to the body tag.
+	 *
+	 * @since 3.0.0
+	 * @access private
+	 */
+	private function enqueue_dark_theme_detection_script() {
+		if ( 'auto' === $this->get_elementor_ui_theme_preference() ) {
+			wp_add_inline_script( 'elementor-app',
+				'if ( window.matchMedia && window.matchMedia( `(prefers-color-scheme: dark)` ).matches )
+							{ document.body.classList.add( `eps-theme-dark` ); }' );
+		}
+	}
+
+	private function enqueue_assets() {
+		Plugin::$instance->init_common();
+
+		/** @var WebCLIModule $web_cli */
+		$web_cli = Plugin::$instance->modules_manager->get_modules( 'web-cli' );
+		$web_cli->register_scripts();
+
+		Plugin::$instance->common->register_scripts();
+
+		wp_register_style(
+			'select2',
+			$this->get_css_assets_url( 'e-select2', 'assets/lib/e-select2/css/' ),
+			[],
+			'4.0.6-rc.1'
+		);
+
+		wp_register_style(
+			'elementor-icons',
+			$this->get_css_assets_url( 'elementor-icons', 'assets/lib/eicons/css/' ),
+			[],
+			Icons_Manager::ELEMENTOR_ICONS_VERSION
+		);
+
+		wp_register_style(
+			'elementor-common',
+			$this->get_css_assets_url( 'common', null, 'default', true ),
+			[],
+			ELEMENTOR_VERSION
+		);
+
+		wp_register_style(
+			'select2',
+			ELEMENTOR_ASSETS_URL . 'lib/e-select2/css/e-select2.css',
+			[],
+			'4.0.6-rc.1'
+		);
+
+		wp_enqueue_style(
+			'elementor-app',
+			$this->get_css_assets_url( 'app', null, 'default', true ),
+			[
+				'select2',
+				'elementor-icons',
+				'elementor-common',
+				'select2',
+			],
+			ELEMENTOR_VERSION
+		);
+
+		wp_enqueue_script(
+			'elementor-app-packages',
+			$this->get_js_assets_url( 'app-packages' ),
+			[
+				'wp-i18n',
+				'react',
+			],
+			ELEMENTOR_VERSION,
+			true
+		);
+
+		wp_register_script(
+			'select2',
+			$this->get_js_assets_url( 'e-select2.full', 'assets/lib/e-select2/js/' ),
+			[
+				'jquery',
+			],
+			'4.0.6-rc.1',
+			true
+		);
+
+		wp_enqueue_script(
+			'elementor-app',
+			$this->get_js_assets_url( 'app' ),
+			[
+				'wp-url',
+				'wp-i18n',
+				'react',
+				'react-dom',
+				'select2',
+			],
+			ELEMENTOR_VERSION,
+			true
+		);
+
+		if ( ! $this->get_settings( 'disable_dark_theme' ) ) {
+			$this->enqueue_dark_theme_detection_script();
+		}
+
+		wp_set_script_translations( 'elementor-app-packages', 'elementor' );
+		wp_set_script_translations( 'elementor-app', 'elementor' );
+
+		$this->print_config();
+	}
+
+	public function enqueue_app_loader() {
+		wp_enqueue_script(
+			'elementor-app-loader',
+			$this->get_js_assets_url( 'app-loader' ),
+			[
+				'elementor-common',
+			],
+			ELEMENTOR_VERSION,
+			true
+		);
+
+		$this->print_config( 'elementor-app-loader' );
+	}
+
+	public function __construct() {
+		$this->add_component( 'site-editor', new Modules\SiteEditor\Module() );
+
+		if ( current_user_can( 'manage_options' ) && Plugin::$instance->experiments->is_feature_active( 'e_import_export' ) || Utils::is_wp_cli() ) {
+			$this->add_component( 'import-export', new Modules\ImportExport\Module() );
+
+			// Kit library is depended on import-export
+			$this->add_component( 'kit-library', new Modules\KitLibrary\Module() );
+		}
+
+		$this->add_component( 'onboarding', new Modules\Onboarding\Module() );
+
+		add_action( 'elementor/admin/menu/register', function ( Admin_Menu_Manager $admin_menu ) {
+			$this->register_admin_menu( $admin_menu );
+		}, Source_Local::ADMIN_MENU_PRIORITY + 10 );
+
+		// Happens after WP plugin page validation.
+		add_filter( 'add_menu_classes', [ $this, 'fix_submenu' ] );
+
+		if ( $this->is_current() ) {
+			add_action( 'admin_init', [ $this, 'admin_init' ], 0 );
+		} else {
+			add_action( 'elementor/common/after_register_scripts', [ $this, 'enqueue_app_loader' ] );
+		}
+	}
+}

core/app/assets/js/ui/grid/grid-api.scss → app/assets/js/ui/grid/grid-api.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 // COMPONENT API: GRID
 // Used specific path here since, pro loads the grid and 'current path' will be wrong.
-@import "../../../../../../assets/dev/scss/editor/_breakpoints.scss";
+@import "../../../../../assets/dev/scss/editor/_breakpoints.scss";
 
 // MIXIN: Grid Coll generator
 $eps-grid-columns: 12;