New: Implement caching mechanism on render elements [ED-13883]

assets/dev/js/editor/editor-base.js

@@ -286,6 +286,26 @@ export default class EditorBase extends Marionette.Application {
 			if ( ! this.widgetsCache[ widgetType ].commonMerged ) {
 				jQuery.extend( this.widgetsCache[ widgetType ].controls, this.widgetsCache.common.controls );
 
+				this.widgetsCache[ widgetType ].controls = elementor.hooks.applyFilters( 'elements/widget/controls/common', this.widgetsCache[ widgetType ].controls, widgetType, this.widgetsCache[ widgetType ] );
+
+				// TODO: Move this code to own file.
+				if ( this.widgetsCache[ widgetType ].controls?._element_cache ) {
+					let elementCacheDescription = __( 'The default cache status for this element:', 'elementor' );
+
+					elementCacheDescription += ' <strong>';
+					if ( this.widgetsCache[ widgetType ]?.is_dynamic_content ) {
+						elementCacheDescription += __( 'Inactive', 'elementor' );
+					} else {
+						elementCacheDescription += __( 'Active', 'elementor' );
+					}
+					elementCacheDescription += '</strong><br />';
+					elementCacheDescription += __( 'Activating cache improves loading times by storing a static version of this element.', 'elementor' );
+					elementCacheDescription += ' <a href="https://go.elementor.com/element-caching-help/" target="_blank">' + __( 'Learn more', 'elementor' ) + '</a>.';
+
+					this.widgetsCache[ widgetType ].controls._element_cache.description = elementCacheDescription;
+				}
+				// TODO: End of code to move.
+
 				this.widgetsCache[ widgetType ].commonMerged = true;
 			}
 

core/base/document.php

@@ -43,6 +43,8 @@ abstract class Document extends Controls_Stack {
 
 	const BUILT_WITH_ELEMENTOR_META_KEY = '_elementor_edit_mode';
 
+	const CACHE_META_KEY = '_elementor_element_cache';
+
 	/**
 	 * Document publish status.
 	 */
@@ -857,6 +859,9 @@ public function save( $data ) {
 
 		$post_css->delete();
 
+		// Remove Document Cache
+		$this->delete_cache();
+
 		/**
 		 * After document save.
 		 *
@@ -1447,7 +1452,7 @@ public function get_main_meta( $key ) {
 	 * @access public
 	 *
 	 * @param string $key   Meta data key.
-	 * @param string $value Meta data value.
+	 * @param mixed $value Meta data value.
 	 *
 	 * @return bool|int
 	 */
@@ -1785,6 +1790,68 @@ protected function save_settings( $settings ) {
 	 * @access protected
 	 */
 	protected function print_elements( $elements_data ) {
+		if ( ! Plugin::$instance->experiments->is_feature_active( 'e_element_cache' ) ) {
+			$this->do_print_elements( $elements_data );
+
+			return;
+		}
+
+		$cached_data = $this->get_document_cache();
+
+		if ( false === $cached_data ) {
+			add_filter( 'elementor/element/should_render_shortcode', '__return_true' );
+
+			$scripts_to_queue = [];
+			$styles_to_queue = [];
+
+			global $wp_scripts, $wp_styles;
+
+			$should_store_scripts = $wp_scripts instanceof \WP_Scripts && $wp_styles instanceof \WP_Styles;
+			if ( $should_store_scripts ) {
+				$scripts_ignored = $wp_scripts->queue;
+				$styles_ignored = $wp_styles->queue;
+			}
+
+			ob_start();
+
+			$this->do_print_elements( $elements_data );
+
+			if ( $should_store_scripts ) {
+				$scripts_to_queue = array_values( array_diff( $wp_scripts->queue, $scripts_ignored ) );
+				$styles_to_queue = array_values( array_diff( $wp_styles->queue, $styles_ignored ) );
+			}
+
+			$cached_data = [
+				'content' => ob_get_clean(),
+				'scripts' => $scripts_to_queue,
+				'styles' => $styles_to_queue,
+			];
+
+			if ( $this->should_store_cache_elements() ) {
+				$this->set_document_cache( $cached_data );
+			}
+
+			remove_filter( 'elementor/element/should_render_shortcode', '__return_true' );
+		} else {
+			if ( ! empty( $cached_data['scripts'] ) ) {
+				foreach ( $cached_data['scripts'] as $script_handle ) {
+					wp_enqueue_script( $script_handle );
+				}
+			}
+
+			if ( ! empty( $cached_data['styles'] ) ) {
+				foreach ( $cached_data['styles'] as $style_handle ) {
+					wp_enqueue_style( $style_handle );
+				}
+			}
+		}
+
+		if ( ! empty( $cached_data['content'] ) ) {
+			echo $cached_data['content']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		}
+	}
+
+	protected function do_print_elements( $elements_data ) {
 		// Collect all data updaters that should be updated on runtime.
 		$runtime_elements_iteration_actions = $this->get_runtime_elements_iteration_actions();
 
@@ -1803,6 +1870,52 @@ protected function print_elements( $elements_data ) {
 		}
 	}
 
+	public function set_document_cache( $value ) {
+		$expiration = '+12 hours';
+
+		$data = [
+			'timeout' => strtotime( $expiration, current_time( 'timestamp' ) ),
+			'value' => $value,
+		];
+
+		$this->update_json_meta( static::CACHE_META_KEY, $data );
+	}
+
+	private function get_document_cache() {
+		$cache = $this->get_json_meta( static::CACHE_META_KEY );
+
+		if ( empty( $cache['timeout'] ) ) {
+			return false;
+		}
+
+		if ( current_time( 'timestamp' ) > $cache['timeout'] ) {
+			return false;
+		}
+
+		if ( ! is_array( $cache['value'] ) ) {
+			return false;
+		}
+
+		return $cache['value'];
+	}
+
+	protected function delete_cache() {
+		$this->delete_meta( static::CACHE_META_KEY );
+	}
+
+	private function should_store_cache_elements() {
+		static $should_store_cache_elements = null;
+
+		if ( null === $should_store_cache_elements ) {
+			$should_store_cache_elements = (
+				! is_admin()
+				&& ! Plugin::$instance->preview->is_preview_mode()
+			);
+		}
+
+		return $should_store_cache_elements;
+	}
+
 	protected function register_document_controls() {
 		$this->start_controls_section(
 			'document_settings',

core/files/manager.php

@@ -1,6 +1,7 @@
 <?php
 namespace Elementor\Core\Files;
 
+use Elementor\Core\Base\Document as Document_Base;
 use Elementor\Core\Common\Modules\Ajax\Module as Ajax;
 use Elementor\Core\Files\CSS\Global_CSS;
 use Elementor\Core\Files\CSS\Post as Post_CSS;
@@ -112,6 +113,7 @@ public function clear_cache() {
 		}
 
 		delete_post_meta_by_key( Post_CSS::META_KEY );
+		delete_post_meta_by_key( Document_Base::CACHE_META_KEY );
 
 		delete_option( Global_CSS::META_KEY );
 		delete_option( Frontend::META_KEY );

core/modules-manager.php

@@ -113,6 +113,7 @@ public function get_modules_names() {
 			'announcements',
 			'site-navigation',
 			'styleguide',
+			'element-cache',
 			'apps',
 			'home',
 			'conversion-center',

core/page-assets/loader.php

@@ -57,6 +57,12 @@ public function enable_assets( array $assets_data ) {
 		foreach ( $assets_data as $assets_type => $assets_list ) {
 			foreach ( $assets_list as $asset_name ) {
 				$this->assets[ $assets_type ][ $asset_name ]['enabled'] = true;
+
+				if ( 'scripts' === $assets_type ) {
+					wp_enqueue_script( $asset_name );
+				} else {
+					wp_enqueue_style( $asset_name );
+				}
 			}
 		}
 	}
@@ -75,6 +81,9 @@ public function add_assets( array $assets ) {
 		$this->assets = array_replace_recursive( $this->assets, $assets );
 	}
 
+	/**
+	 * @deprecated 3.22.0
+	 */
 	public function enqueue_assets() {
 		$assets = $this->get_assets();
 		$is_preview_mode = Plugin::$instance->preview->is_preview_mode();

includes/base/element-base.php

@@ -285,6 +285,20 @@ protected function should_print_empty() {
 		return true;
 	}
 
+	/**
+	 * Whether the element returns dynamic content.
+	 *
+	 * set to determine whether to cache the element output or not.
+	 *
+	 * @since 3.22.0
+	 * @access protected
+	 *
+	 * @return bool Whether to cache the element output.
+	 */
+	protected function is_dynamic_content(): bool {
+		return true;
+	}
+
 	/**
 	 * Get child elements.
 	 *
@@ -430,6 +444,11 @@ public function add_link_attributes( $element, array $url_control, $overwrite =
 	public function print_element() {
 		$element_type = $this->get_type();
 
+		if ( $this->should_render_shortcode() ) {
+			echo '[elementor-element data="' . esc_attr( base64_encode( wp_json_encode( $this->get_raw_data() ) ) ) . '"]';
+			return;
+		}
+
 		/**
 		 * Before frontend element render.
 		 *
@@ -523,6 +542,36 @@ public function print_element() {
 		do_action( 'elementor/frontend/after_render', $this );
 	}
 
+	protected function should_render_shortcode() {
+		$should_render_shortcode = apply_filters( 'elementor/element/should_render_shortcode', false );
+
+		if ( ! $should_render_shortcode ) {
+			return false;
+		}
+
+		$raw_data = $this->get_raw_data();
+
+		if ( ! empty( $raw_data['settings']['_element_cache'] ) ) {
+			return 'yes' === $raw_data['settings']['_element_cache'];
+		}
+
+		if ( $this->is_dynamic_content() ) {
+			return true;
+		}
+
+		if ( empty( $raw_data['settings']['__dynamic__'] ) ) {
+			return false;
+		}
+
+		$is_dynamic_content = apply_filters( 'elementor/element/is_dynamic_content', false, $raw_data, $this );
+
+		if ( $is_dynamic_content ) {
+			return true;
+		}
+
+		return false;
+	}
+
 	/**
 	 * Get the element raw data.
 	 *

includes/base/widget-base.php

@@ -380,6 +380,7 @@ protected function get_initial_config() {
 			'show_in_panel' => $this->show_in_panel(),
 			'hide_on_search' => $this->hide_on_search(),
 			'upsale_data' => $this->get_upsale_data(),
+			'is_dynamic_content' => $this->is_dynamic_content(),
 		];
 
 		if ( isset( $config['upsale_data'] ) && is_array( $config['upsale_data'] ) ) {

includes/elements/column.php

@@ -74,6 +74,10 @@ public function get_icon() {
 		return 'eicon-column';
 	}
 
+	protected function is_dynamic_content(): bool {
+		return false;
+	}
+
 	/**
 	 * Get initial config.
 	 *

includes/elements/container.php

@@ -27,6 +27,10 @@ class Container extends Element_Base {
 	 */
 	private $active_kit;
 
+	protected function is_dynamic_content(): bool {
+		return false;
+	}
+
 	/**
 	 * Container constructor.
 	 *

includes/elements/section.php

@@ -92,6 +92,10 @@ public function get_icon() {
 		return 'eicon-columns';
 	}
 
+	protected function is_dynamic_content(): bool {
+		return false;
+	}
+
 	/**
 	 * Get presets.
 	 *

includes/widgets/accordion.php

@@ -74,6 +74,10 @@ public function get_keywords() {
 		return [ 'accordion', 'tabs', 'toggle' ];
 	}
 
+	protected function is_dynamic_content(): bool {
+		return false;
+	}
+
 	/**
 	 * Hide widget from panel.
 	 *

includes/widgets/alert.php

@@ -74,6 +74,10 @@ public function get_keywords() {
 		return [ 'alert', 'notice', 'message' ];
 	}
 
+	protected function is_dynamic_content(): bool {
+		return false;
+	}
+
 	/**
 	 * Register alert widget controls.
 	 *

includes/widgets/audio.php

@@ -81,6 +81,10 @@ public function get_keywords() {
 		return [ 'audio', 'player', 'soundcloud', 'embed' ];
 	}
 
+	protected function is_dynamic_content(): bool {
+		return false;
+	}
+
 	/**
 	 * Register audio widget controls.
 	 *

includes/widgets/button.php

@@ -77,6 +77,10 @@ public function get_categories() {
 		return [ 'basic' ];
 	}
 
+	protected function is_dynamic_content(): bool {
+		return false;
+	}
+
 	/**
 	 * Get widget upsale data.
 	 *

includes/widgets/counter.php

@@ -87,6 +87,10 @@ public function get_keywords() {
 		return [ 'counter' ];
 	}
 
+	protected function is_dynamic_content(): bool {
+		return false;
+	}
+
 	/**
 	 * Register counter widget controls.
 	 *