Merge branch 'develop' into feat/more-guided-tours

# Conflicts:
#	src/welcome/getting-started.scss

Author: kaeizen

plugin.php

@@ -288,6 +288,7 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/block-styles/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );
+
 if ( ! is_admin() ) {
 	require_once( plugin_dir_path( __FILE__ ) . 'src/lightbox/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/accordion/index.php' );
@@ -314,6 +315,7 @@ function is_frontend() {
  */
 require_once( plugin_dir_path( __FILE__ ) . 'src/welcome/getting-started.php' );
 if ( is_admin() ) {
+	require_once( plugin_dir_path( __FILE__ ) . 'src/welcome/useful-plugins.php' ); // For cross-marketing
 	require_once( plugin_dir_path( __FILE__ ) . 'src/welcome/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/welcome/news.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/welcome/freemius.php' );

src/compatibility/ewww.php

@@ -6,7 +6,7 @@
 }
 
 if ( ! function_exists( 'stackable_load_image_optimizer_polyfill_frontend_script' ) ) {
-	function stackable_load_image_optimizer_polyfill_frontend_script( $block_content, $block ) {
+	function stackable_load_image_optimizer_polyfill_frontend_script( $block_content ) {
 		// If Easy IO setting is activated for EWWW Image Optimizer, dynamic images becomes blurry.
 		// Load the script to fix the issue.
 		if ( ! is_admin() ) {
@@ -26,7 +26,7 @@ function stackable_load_image_optimizer_polyfill_frontend_script( $block_content
 	function stackable_ewww_image_optimzer_plugin_checker() {
 		if ( ! is_admin() && defined( 'EWWW_IMAGE_OPTIMIZER_PLUGIN_FILE' ) ) {
 			// Load the script in the frontend if EWWW Image Optimizer is active.
-			add_action( 'stackable/enqueue_scripts', 'stackable_load_image_optimizer_polyfill_frontend_script', 10, 2 );
+			add_action( 'stackable/enqueue_scripts', 'stackable_load_image_optimizer_polyfill_frontend_script' );
 		}
 	}
 

src/components/design-library-list/favorite-button.js

@@ -11,7 +11,7 @@ import Button from '../button'
  * External dependencies
  */
 import classnames from 'classnames'
-import { i18n } from 'stackable'
+import { i18n, cimo } from 'stackable'
 import {
 	useAttributeName, useBlockAttributesContext, useBlockSetAttributesContext,
 } from '~stackable/hooks'
@@ -20,8 +20,11 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n'
-import { Fragment, memo } from '@wordpress/element'
+import {
+	Fragment, memo, useEffect, useState,
+} from '@wordpress/element'
 import { MediaUpload } from '@wordpress/block-editor'
+import { currentUserHasCapability } from '~stackable/util'
 
 const ImageControl = memo( props => {
 	const attrNameId = useAttributeName( `${ props.attribute }Id`, props.responsive, props.hover )
@@ -81,7 +84,37 @@ const ImageControl = memo( props => {
 		} )
 	}
 
-	return (
+	const [ CimoDownloadNotice, setCimoDownloadNotice ] = useState( null )
+
+	useEffect( () => {
+		// Skip displaying the Cimo notice if the plugin is already activated or the user has chosen to hide the notice
+		if ( ! cimo || cimo.hideNotice || cimo.status === 'activated' ) {
+			return
+		}
+
+		const userCanInstall = currentUserHasCapability( 'install_plugins' )
+		const userCanActivate = currentUserHasCapability( 'activate_plugins' )
+		// Show the Cimo notice only if the user has permissions to install or activate plugins
+		if ( ( cimo.status === 'not_installed' && userCanInstall ) || ( cimo.status === 'installed' && userCanActivate ) ) {
+			const loadNotice = async () => {
+				try {
+					// Import the Cimo notice component with explicit chunk naming
+					const { default: CimoNoticeComponent } = await import(
+						/* webpackChunkName: "cimo-download-notice" */
+						/* webpackMode: "lazy" */
+						'../../lazy-components/cimo'
+					)
+					setCimoDownloadNotice( () => CimoNoticeComponent )
+				} catch ( err ) {
+					// eslint-disable-next-line no-console
+					console.error( 'Failed to load Cimo download notice component:', err )
+				}
+			}
+			loadNotice()
+		}
+	}, [] )
+
+	return ( <>
 		<AdvancedControl
 			{ ...controlProps }
 			valueCheckAttribute={ props.attribute + 'Url' }
@@ -112,7 +145,7 @@ const ImageControl = memo( props => {
 										/>
 									) }
 									{ type === 'image' && (
-									// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+										// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 										<img
 											className="ugb-image-preview"
 											draggable="false"
@@ -172,6 +205,8 @@ const ImageControl = memo( props => {
 				hasPanelModifiedIndicator={ props.hasPanelModifiedIndicator }
 			/>
 		</AdvancedControl>
+		{ CimoDownloadNotice && <CimoDownloadNotice onDismiss={ () => setCimoDownloadNotice( null ) } /> }
+	</>
 	)
 } )
 

src/components/design-library-list/images/heart-fill.svg

@@ -20,7 +20,6 @@ export { default as SortControl } from './sort-control'
 export { default as PanelAdvancedSettings } from './panel-advanced-settings'
 export { default as PanelDesignLibrary } from './panel-design-library'
 export { default as InspectorPanelControls } from './panel-tabs/inspector-panel-controls'
-export { default as DesignLibraryList } from './design-library-list'
 export { default as PanelTabs } from './panel-tabs'
 export { default as Button } from './button'
 export { default as DesignPanelBody } from './design-panel-body'

src/components/design-library-list/images/heart.svg

@@ -1,13 +1,10 @@
-/**
- * Internal dependencies
- */
-import { ModalDesignLibrary } from './modal'
-
 /**
  * WordPress dependencies
  */
 import { applyFilters } from '@wordpress/hooks'
-import { useMemo, useCallback } from '@wordpress/element'
+import {
+	useMemo, useCallback, Suspense, lazy,
+} from '@wordpress/element'
 import { useLocalStorage } from '~stackable/util'
 
 export const Switcher = props => {
@@ -21,19 +18,25 @@ export const Switcher = props => {
 	// disabled, always default to the first version
 	const apiVersion = versions.includes( _apiVersion ) ? _apiVersion : versions[ 0 ]
 
+	// Lazy-load the ModalDesignLibrary to reduce initial bundle size
+	// Note: We import the named export and set it as default for React.lazy
+	const LazyModalDesignLibrary = lazy( () => import( /* webpackChunkName: "design-library" */ '~stackable/lazy-components/design-library' ) )
+
 	const ModalComponent = useMemo( () => {
-		return applyFilters( 'stackable.design-library.modal-component', ModalDesignLibrary, apiVersion )
+		return applyFilters( 'stackable.design-library.modal-component', LazyModalDesignLibrary, apiVersion )
 	}, [ apiVersion ] )
 
 	const onChangeApiVersion = useCallback( v => setApiVersion( v ), [] )
 
 	return (
-		<ModalComponent
-			hasVersionSwitcher={ versions.length > 1 }
-			apiVersion={ apiVersion }
-			onChangeApiVersion={ onChangeApiVersion }
-			{ ...props }
-		/>
+		<Suspense fallback={ null }>
+			<ModalComponent
+				hasVersionSwitcher={ versions.length > 1 }
+				apiVersion={ apiVersion }
+				onChangeApiVersion={ onChangeApiVersion }
+				{ ...props }
+			/>
+		</Suspense>
 	)
 }
 

src/components/image-control2/index.js

@@ -29,13 +29,13 @@ export const fetchDesignLibrary = async ( forceReset = false, version = '', type
 		designLibrary[ type ] = designsPerType
 
 		if ( type === 'patterns' ) {
-			designs = designsPerType[ LATEST_API_VERSION ]
+			designs = designsPerType[ LATEST_API_VERSION ] ?? {}
 		} else {
-			pages = designsPerType[ LATEST_API_VERSION ]
+			pages = designsPerType[ LATEST_API_VERSION ] ?? {}
 		}
 	}
 
-	return designLibrary[ type ][ version || LATEST_API_VERSION ]
+	return designLibrary[ type ]?.[ version || LATEST_API_VERSION ] ?? designLibrary[ type ]
 }
 
 export const fetchDesign = async designId => {
@@ -63,6 +63,13 @@ export const getDesigns = async ( {
 } ) => {
 	const designLibrary = await fetchDesignLibrary( reset, LATEST_API_VERSION, type )
 
+	if ( designLibrary.wp_remote_get_error || designLibrary.content_error ) {
+		const error = designLibrary.wp_remote_get_error ?? designLibrary.content_error
+		// eslint-disable-next-line no-console
+		console.error( 'Stackable: ', error )
+		return { error }
+	}
+
 	// pre-fetch patterns
 	if ( type === 'pages' ) {
 		await fetchDesignLibrary()