Merge branch '3.23' into internal/widget-button-markup-ga

assets/dev/js/admin/admin.js

@@ -118,6 +118,22 @@ import FloatingButtonsHandler from 'elementor/modules/floating-buttons/assets/js
 				} );
 			} );
 
+			$( '.e-notice--cta.e-notice--dismissible[data-notice_id="plugin_image_optimization"] a.e-button--cta' ).on( 'click', function() {
+				elementorCommon.ajax.addRequest( 'elementor_image_optimization_campaign', {
+					data: {
+						source: 'io-wp-media-library-install',
+					},
+				} );
+			} );
+
+			$( '.e-a-apps .e-a-item[data-plugin="image-optimization/image-optimization.php"] a.e-btn' ).on( 'click', function() {
+				elementorCommon.ajax.addRequest( 'elementor_image_optimization_campaign', {
+					data: {
+						source: 'io-esetting-addons-install',
+					},
+				} );
+			} );
+
 			$( '#elementor-clear-cache-button' ).on( 'click', function( event ) {
 				event.preventDefault();
 				var $thisButton = $( this );

assets/dev/js/admin/hints/media.js

@@ -108,6 +108,7 @@
 					dismissId: event.target.closest( '.e-hint__container' ).dataset.event,
 				},
 			} );
+
 			this.hideHint( event );
 		},
 

assets/dev/js/editor/controls/gallery.js

@@ -258,6 +258,13 @@ ControlMediaItemView = ControlBaseDataView.extend( {
 		if ( actionURL ) {
 			window.open( actionURL, '_blank' );
 		}
+
+		elementorCommon.ajax.addRequest( 'elementor_image_optimization_campaign', {
+			data: {
+				source: 'io-editor-gallery-install',
+			},
+		} );
+
 		this.hidePromotion();
 	},
 

assets/dev/js/editor/controls/media.js

@@ -221,6 +221,13 @@ ControlMediaItemView = ControlMultipleBaseItemView.extend( {
 		if ( ! eventName ) {
 			eventName = this.getDismissPromotionEventName();
 		}
+
+		elementorCommon.ajax.addRequest( 'elementor_image_optimization_campaign', {
+			data: {
+				source: 'io-editor-image-install',
+			},
+		} );
+
 		// Prevent opening the same promotion again in current editor session.
 		elementor.config.user.dismissed_editor_notices.push( eventName );
 	},

core/admin/admin.php

@@ -878,6 +878,8 @@ public function __construct() {
 		add_action( 'in_plugin_update_message-' . ELEMENTOR_PLUGIN_BASE, function( $plugin_data ) {
 			$this->version_update_warning( ELEMENTOR_VERSION, $plugin_data['new_version'] );
 		} );
+
+		add_action( 'elementor/ajax/register_actions', [ $this, 'register_ajax_hints' ] );
 	}
 
 	/**
@@ -987,4 +989,22 @@ private function maybe_enqueue_hints() {
 
 		wp_enqueue_script( 'media-hints' );
 	}
+
+	public function register_ajax_hints( $ajax_manager ) {
+		$ajax_manager->register_ajax_action( 'elementor_image_optimization_campaign', [ $this, 'ajax_set_image_optimization_campaign' ] );
+	}
+
+	public function ajax_set_image_optimization_campaign( $request ) {
+		if ( empty( $request['source'] ) ) {
+			return;
+		}
+
+		$campaign_data = [
+			'source' => sanitize_key( $request['source'] ),
+			'campaign' => 'io-plg',
+			'medium' => 'wp-dash',
+		];
+
+		set_transient( 'elementor_image_optimization_campaign', $campaign_data, 30 * DAY_IN_SECONDS );
+	}
 }

modules/ai/assets/js/editor/api/index.js

@@ -1,6 +1,10 @@
 const request = ( endpoint, data = {}, immediately = false, signal ) => {
 	if ( Object.keys( data ).length ) {
-		data.context = window.elementorAiCurrentContext;
+		if ( window.elementorAiCurrentContext ) {
+			data.context = window.elementorAiCurrentContext;
+		} else {
+			data.context = window.elementorWpAiCurrentContext;
+		}
 	}
 
 	return new Promise( ( resolve, reject ) => {

modules/ai/assets/js/gutenberg/edit-text-with-ai.js

@@ -0,0 +1,47 @@
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { AiText } from './text-with-ai';
+import { AIIcon } from '@elementor/icons';
+import React from 'react';
+const { ToolbarButton } = wp.components;
+const { BlockControls } = wp.blockEditor;
+
+export const EditTextWithAi = ( props ) => {
+	const [ shouldRenderAiApp, setShouldRenderAiApp ] = useState( false );
+	const BlockEdit = props.blockEdit;
+
+	const supportedBlocks = [ 'core/paragraph', 'core/heading' ];
+
+	if ( ! supportedBlocks.includes( props.name ) ) {
+		return <BlockEdit { ...props } />;
+	}
+
+	if ( shouldRenderAiApp ) {
+		return <AiText onClose={ () => setShouldRenderAiApp( false ) }
+			blockName={ props.name }
+			initialValue={ props.attributes.content ? String( props.attributes.content ) : '' }
+			blockClientId={ props.clientId }
+		/>;
+	}
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarButton
+					icon={ <AIIcon color="secondary" /> }
+					label={ __( 'Edit with Elementor AI', 'elementor' ) }
+					onClick={ () => setShouldRenderAiApp( true ) }
+				/>
+			</BlockControls>
+			{ <BlockEdit { ...props } /> }
+		</>
+	);
+};
+
+EditTextWithAi.propTypes = {
+	name: PropTypes.string,
+	blockEdit: PropTypes.func,
+	attributes: PropTypes.object,
+	clientId: PropTypes.string,
+};
+

modules/ai/assets/js/gutenberg/excerpt.js

@@ -26,7 +26,7 @@ const GenerateExcerptWithAI = () => {
 	};
 
 	return (
-		<div style={ { paddingBottom: '0.6em' } }>
+		<div style={ { paddingTop: '0.6em' } }>
 			<RequestIdsProvider>
 				<Icon className={ 'eicon-ai' } />
 				<AiLink onClick={ handleButtonClick }>{ __( 'Generate with Elementor AI', 'elementor' ) }</AiLink>

modules/ai/assets/js/gutenberg/index.js

@@ -2,6 +2,8 @@ import { createRoot } from '@wordpress/element';
 import GenerateExcerptWithAI from './excerpt';
 import GenerateFeaturedImageWithAI from './featured-image';
 import { GenerateTextWithAi } from './text-with-ai';
+import React from 'react';
+import { EditTextWithAi } from './edit-text-with-ai';
 
 ( function() {
 	'use strict';
@@ -48,14 +50,16 @@ import { GenerateTextWithAi } from './text-with-ai';
 			}
 		};
 
-		const addTextWithAI = ( blockName ) => {
-			const textPanel = document.querySelector( '.block-editor-block-card__content' );
-			if ( textPanel && ! document.querySelector( '.e-text-ai' ) ) {
+		const addTextWithAI = ( blockName, blockClientId ) => {
+			const textPanel = document.querySelector( '.block-editor-block-card__description, .block-editor-block-card__content' );
+			if ( textPanel && ! document.querySelector( `.e-text-ai[data-client-id="${ blockClientId }"]` ) ) {
+				removeAiIndicator();
 				const rootElement = document.createElement( 'div' );
 				rootElement.classList.add( 'e-text-ai' );
+				rootElement.setAttribute( 'data-client-id', blockClientId );
 				textPanel.appendChild( rootElement );
 				const root = createRoot( rootElement );
-				root.render( <GenerateTextWithAi blockName={ blockName } /> );
+				root.render( <GenerateTextWithAi blockName={ blockName } blockClientId={ blockClientId } /> );
 			}
 		};
 
@@ -78,7 +82,7 @@ import { GenerateTextWithAi } from './text-with-ai';
 		const addAiIndicatorToTextBlock = ( blockNames ) => {
 			const selectedBlock = wp.data.select( 'core/block-editor' )?.getSelectedBlock();
 			if ( selectedBlock && blockNames.some( ( name ) => selectedBlock.name.includes( name ) ) ) {
-				addTextWithAI( selectedBlock.name );
+				addTextWithAI( selectedBlock.name, selectedBlock.clientId );
 			} else {
 				removeAiIndicator();
 			}
@@ -89,5 +93,57 @@ import { GenerateTextWithAi } from './text-with-ai';
 			addAiIndicator( 'featured-image', addGenerateFeaturedImageWithAI );
 			addAiIndicatorToTextBlock( [ 'paragraph', 'heading' ] );
 		} );
+
+		const observer = new MutationObserver( ( mutationsList ) => {
+			for ( const mutation of mutationsList ) {
+				if ( 'childList' === mutation.type ) {
+					if ( document.querySelector( '.editor-post-excerpt' ) ) {
+						addGenerateExcerptWithAI();
+					}
+				}
+			}
+		} );
+
+		observer.observe( document.body, { childList: true, subtree: true } );
+		window.addEventListener( 'beforeunload', () => {
+			observer.disconnect();
+		} );
 	} );
 } )( jQuery );
+
+( function( wp ) {
+	const { addFilter } = wp.hooks;
+
+	const addAiButtonToToolbar = ( BlockEdit ) => {
+		return ( props ) => {
+			return <EditTextWithAi { ...props } blockEdit={ BlockEdit } />;
+		};
+	};
+
+	addFilter( 'editor.BlockEdit', 'elementor-ai-toolbar-button', addAiButtonToToolbar );
+} )( window.wp );
+
+( function() {
+	'use strict';
+
+	const setElementorWpAiCurrentContext = () => {
+		const selectedBlock = wp.data.select( 'core/block-editor' ).getSelectedBlock();
+		if ( selectedBlock ) {
+			const blockName = 'core/heading' === selectedBlock.name ? 'heading' : selectedBlock.name;
+			window.elementorWpAiCurrentContext = {
+				widgetType: blockName,
+				controlName: blockName,
+			};
+		} else {
+			window.elementorWpAiCurrentContext = null;
+		}
+	};
+
+	wp.data.subscribe( setElementorWpAiCurrentContext );
+
+	const clearElementorAiCurrentContext = () => {
+		window.elementorWpAiCurrentContext = null;
+	};
+
+	window.addEventListener( 'beforeunload', clearElementorAiCurrentContext );
+} )();

modules/ai/assets/js/gutenberg/text-with-ai.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 const { useDispatch, useSelect } = wp.data;
 const { createBlock } = wp.blocks;
 
-const AiText = ( { onClose, blockName } ) => {
+export const AiText = ( { onClose, blockName, initialValue = '', blockClientId = '' } ) => {
 	const { replaceBlocks, insertBlocks } = useDispatch( 'core/block-editor' );
 	const insertTextIntoParagraph = ( text ) => {
 		if ( paragraphBlock ) {
@@ -31,7 +31,7 @@ const AiText = ( { onClose, blockName } ) => {
 
 	const { paragraphBlock } = useSelect( ( ) => {
 		const currentBlocks = wp.data.select( 'core/block-editor' )?.getBlocks();
-		const foundParagraphBlock = currentBlocks.find( ( block ) => blockName === block.name );
+		const foundParagraphBlock = currentBlocks.find( ( block ) => blockName === block.name && blockClientId === block.clientId );
 		return {
 			blocks: currentBlocks,
 			paragraphBlock: foundParagraphBlock,
@@ -44,7 +44,9 @@ const AiText = ( { onClose, blockName } ) => {
 		<>
 			<App
 				type={ appType }
-				getControlValue={ () => {} }
+				getControlValue={ () => {
+					return initialValue;
+				} }
 				setControlValue={ ( value ) => {
 					insertTextIntoParagraph( value );
 				} }
@@ -59,9 +61,11 @@ const AiText = ( { onClose, blockName } ) => {
 AiText.propTypes = {
 	onClose: PropTypes.func.isRequired,
 	blockName: PropTypes.string.isRequired,
+	initialValue: PropTypes.string,
+	blockClientId: PropTypes.string,
 };
 
-export const GenerateTextWithAi = ( { blockName } ) => {
+export const GenerateTextWithAi = ( { blockName, blockClientId } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 
 	const handleButtonClick = () => {
@@ -77,11 +81,12 @@ export const GenerateTextWithAi = ( { blockName } ) => {
 			<RequestIdsProvider>
 				<Icon className={ 'eicon-ai' } />
 				<AiLink onClick={ handleButtonClick }>{ __( 'Generate with Elementor AI', 'elementor' ) }</AiLink>
-				{ isOpen && <AiText onClose={ handleClose } blockName={ blockName } /> }
+				{ isOpen && <AiText onClose={ handleClose } blockName={ blockName } blockClientId={ blockClientId } /> }
 			</RequestIdsProvider>
 		</div> );
 };
 
 GenerateTextWithAi.propTypes = {
 	blockName: PropTypes.string.isRequired,
+	blockClientId: PropTypes.string.isRequired,
 };

modules/ai/module.php

@@ -119,6 +119,10 @@ public function __construct() {
 					'wp-element',
 					'wp-editor',
 					'wp-data',
+					'wp-components',
+					'wp-compose',
+					'wp-i18n',
+					'wp-hooks',
 				],
 			ELEMENTOR_VERSION, true );
 

modules/apps/admin-apps-page.php

@@ -163,7 +163,7 @@ private static function is_elementor_pro_installed() {
 
 	private static function render_plugin_item( $plugin ) {
 		?>
-		<div class="e-a-item">
+		<div class="e-a-item"<?php echo ! empty( $plugin['file_path'] ) ? ' data-plugin="' . esc_attr( $plugin['file_path'] ) . '"' : ''; ?>>
 			<div class="e-a-heading">
 				<img class="e-a-img" src="<?php echo esc_url( $plugin['image'] ); ?>" alt="<?php echo esc_attr( $plugin['name'] ); ?>">
 				<?php if ( ! empty( $plugin['badge'] ) ) : ?>