@elementor/editor-app-bar 3.33.0-98 → 3.34.2

package/src/extensions/documents-settings/hooks/use-action-props.ts

@@ -0,0 +1,51 @@
+import {
+	__useActiveDocument as useActiveDocument,
+	__useHostDocument as useHostDocument,
+} from '@elementor/editor-documents';
+import {
+	__privateOpenRoute as openRoute,
+	__privateUseRouteStatus as useRouteStatus,
+} from '@elementor/editor-v1-adapters';
+import { FileSettingsIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { type ExtendedWindow } from '../../../types';
+
+export default function useActionProps() {
+	const activeDocument = useActiveDocument();
+	const hostDocument = useHostDocument();
+	const { isActive, isBlocked } = useRouteStatus( 'panel/page-settings' );
+
+	const document = activeDocument && activeDocument.type.value !== 'kit' ? activeDocument : hostDocument;
+
+	const ButtonTitle = document
+		? /* translators: %s: Post type label. */
+		  __( '%s Settings', 'elementor' ).replace( '%s', document.type.label )
+		: __( 'Document Settings', 'elementor' );
+
+	return {
+		title: ButtonTitle,
+		icon: FileSettingsIcon,
+		onClick: () => {
+			if ( ! document ) {
+				return;
+			}
+
+			const extendedWindow = window as unknown as ExtendedWindow;
+			const config = extendedWindow?.elementorCommon?.eventsManager?.config;
+
+			if ( config ) {
+				extendedWindow.elementorCommon.eventsManager.dispatchEvent( config.names.topBar.documentSettings, {
+					location: config.locations.topBar,
+					secondaryLocation: config.secondaryLocations[ 'document-settings' ],
+					trigger: config.triggers.click,
+					element: config.elements.buttonIcon,
+				} );
+			}
+
+			openRoute( 'panel/page-settings/settings' );
+		},
+		selected: isActive,
+		disabled: isBlocked || ! document,
+	};
+}

package/src/extensions/documents-settings/index.ts

@@ -0,0 +1,10 @@
+import { toolsMenu } from '../../locations';
+import useActionProps from './hooks/use-action-props';
+
+export function init() {
+	toolsMenu.registerToggleAction( {
+		id: 'document-settings-button',
+		priority: 2,
+		useProps: useActionProps,
+	} );
+}

package/src/extensions/finder/index.ts

@@ -4,7 +4,7 @@ import useActionProps from './hooks/use-action-props';
 export function init() {
 	utilitiesMenu.registerAction( {
 		id: 'toggle-finder',
-		priority: 15, // Before Preview.
+		priority: 15,
 		useProps: useActionProps,
 	} );
 }

package/src/extensions/help/hooks/use-action-props.ts

@@ -0,0 +1,26 @@
+import { HelpIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { type ExtendedWindow } from '../../../types';
+
+export default function useActionProps() {
+	return {
+		title: __( 'Help Center', 'elementor' ),
+		href: 'https://go.elementor.com/editor-top-bar-learn/',
+		icon: HelpIcon,
+		target: '_blank',
+		onClick: () => {
+			const extendedWindow = window as unknown as ExtendedWindow;
+			const config = extendedWindow?.elementorCommon?.eventsManager?.config;
+
+			if ( config ) {
+				extendedWindow.elementorCommon.eventsManager.dispatchEvent( config.names.topBar.help, {
+					location: config.locations.topBar,
+					secondaryLocation: config.secondaryLocations.help,
+					trigger: config.triggers.click,
+					element: config.elements.buttonIcon,
+				} );
+			}
+		},
+	};
+}

package/src/extensions/help/index.ts

@@ -1,34 +1,11 @@
-import { HelpIcon } from '@elementor/icons';
-import { __ } from '@wordpress/i18n';
-
-import { utilitiesMenu } from '../../locations';
-import { type ExtendedWindow } from '../../types';
+import { mainMenu } from '../../locations';
+import useActionProps from './hooks/use-action-props';
 
 export function init() {
-	utilitiesMenu.registerLink( {
+	mainMenu.registerLink( {
 		id: 'open-help-center',
-		priority: 25, // After Finder.
-		useProps: () => {
-			return {
-				title: __( 'Help', 'elementor' ),
-				href: 'https://go.elementor.com/editor-top-bar-learn/',
-				icon: HelpIcon,
-				target: '_blank',
-				showExternalLinkIcon: true,
-				onClick: () => {
-					const extendedWindow = window as unknown as ExtendedWindow;
-					const config = extendedWindow?.elementorCommon?.eventsManager?.config;
-
-					if ( config ) {
-						extendedWindow.elementorCommon.eventsManager.dispatchEvent( config.names.topBar.help, {
-							location: config.locations.topBar,
-							secondaryLocation: config.secondaryLocations.help,
-							trigger: config.triggers.click,
-							element: config.elements.buttonIcon,
-						} );
-					}
-				},
-			};
-		},
+		group: 'help',
+		priority: 10,
+		useProps: useActionProps,
 	} );
 }

package/src/extensions/history/index.ts

@@ -1,10 +1,10 @@
-import { mainMenu } from '../../locations';
+import { toolsMenu } from '../../locations';
 import useActionProps from './hooks/use-action-props';
 
 export function init() {
-	mainMenu.registerToggleAction( {
+	toolsMenu.registerToggleAction( {
 		id: 'open-history',
-		priority: 20,
+		priority: 15,
 		useProps: useActionProps,
 	} );
 }

package/src/extensions/index.ts

@@ -4,9 +4,9 @@
  */
 
 import { init as initConnect } from './connect';
-import { init as initDocumentsIndicator } from './documents-indicator';
 import { init as initDocumentsPreview } from './documents-preview';
 import { init as initDocumentsSave } from './documents-save';
+import { init as initDocumentsSettings } from './documents-settings';
 import { init as initElements } from './elements';
 import { init as initFinder } from './finder';
 import { init as initHelp } from './help';
@@ -20,9 +20,9 @@ import { init as initUserPreferences } from './user-preferences';
 import { init as initWordpress } from './wordpress';
 
 export function init() {
-	initDocumentsIndicator();
 	initDocumentsPreview();
 	initDocumentsSave();
+	initDocumentsSettings();
 	initElements();
 	initFinder();
 	initHelp();

package/src/extensions/keyboard-shortcuts/index.ts

@@ -5,7 +5,7 @@ export function init() {
 	mainMenu.registerAction( {
 		id: 'open-keyboard-shortcuts',
 		group: 'default',
-		priority: 40, // After user preferences.
+		priority: 40,
 		useProps: useActionProps,
 	} );
 }

package/src/extensions/site-settings/hooks/use-action-props.ts

@@ -2,7 +2,7 @@ import {
 	__privateRunCommand as runCommand,
 	__privateUseRouteStatus as useRouteStatus,
 } from '@elementor/editor-v1-adapters';
-import { AdjustmentsHorizontalIcon } from '@elementor/icons';
+import { SettingsIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
 import { type ExtendedWindow, type ToggleActionProps } from '../../../types';
@@ -14,7 +14,7 @@ export default function useActionProps(): ToggleActionProps {
 
 	return {
 		title: __( 'Site Settings', 'elementor' ),
-		icon: AdjustmentsHorizontalIcon,
+		icon: SettingsIcon,
 		onClick: () => {
 			const extendedWindow = window as unknown as ExtendedWindow;
 			const config = extendedWindow?.elementorCommon?.eventsManager?.config;

package/src/extensions/site-settings/index.ts

@@ -1,6 +1,6 @@
 import { injectIntoTop } from '@elementor/editor';
 
-import { toolsMenu } from '../../locations';
+import { mainMenu } from '../../locations';
 import PortalledPrimaryAction from './components/portalled-primary-action';
 import useActionProps from './hooks/use-action-props';
 
@@ -11,9 +11,10 @@ export function init() {
 		component: PortalledPrimaryAction,
 	} );
 
-	toolsMenu.registerToggleAction( {
+	mainMenu.registerToggleAction( {
 		id: 'toggle-site-settings',
-		priority: 2,
+		group: 'default',
+		priority: 1,
 		useProps: useActionProps,
 	} );
 }

package/src/extensions/structure/hooks/structure-icon-with-popup.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { StructureIcon } from '@elementor/icons';
+import { Button, Card, CardActions, CardContent, Infotip, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type ExtendedWindow } from '../../../types';
+
+const extendedWindow = window as unknown as ExtendedWindow;
+
+const StructurePopupContent = ( { onClose }: { onClose: () => void } ) => {
+	const handleDismiss = async () => {
+		onClose();
+
+		extendedWindow.elementorCommon?.ajax?.addRequest?.( 'structure_popup_dismiss' ).catch( () => {} );
+	};
+
+	const stopEventPropagation = ( event: React.MouseEvent ) => {
+		event.stopPropagation();
+	};
+
+	return (
+		<Card elevation={ 0 } sx={ { maxWidth: 300 } } onClick={ stopEventPropagation }>
+			<CardContent>
+				<Typography variant="subtitle2" sx={ { mb: 2 } }>
+					{ __( 'Refreshed Top Bar layout!', 'elementor' ) }
+				</Typography>
+				<Typography variant="body2">
+					{ __( 'We’ve fine-tuned the Top Bar to make navigation faster and smoother.', 'elementor' ) }
+				</Typography>
+			</CardContent>
+			<CardActions sx={ { pt: 0 } }>
+				<Button
+					size="small"
+					color="secondary"
+					href="https://go.elementor.com/editor-top-bar-learn/"
+					target="_blank"
+				>
+					{ __( 'Learn More', 'elementor' ) }
+				</Button>
+				<Button size="small" variant="contained" onClick={ handleDismiss }>
+					{ __( 'Got it', 'elementor' ) }
+				</Button>
+			</CardActions>
+		</Card>
+	);
+};
+
+export const StructureIconWithPopup = () => {
+	const [ showPopup, setShowPopup ] = useState( false );
+
+	useEffect( () => {
+		if ( extendedWindow.elementorShowInfotip?.shouldShow === '1' ) {
+			setShowPopup( true );
+		}
+	}, [] );
+
+	const handleClosePopup = () => {
+		setShowPopup( false );
+	};
+
+	if ( extendedWindow.elementorShowInfotip?.shouldShow !== '1' ) {
+		return <StructureIcon />;
+	}
+
+	return (
+		<Infotip
+			placement="bottom"
+			arrow={ false }
+			content={ <StructurePopupContent onClose={ handleClosePopup } /> }
+			open={ showPopup }
+			PopperProps={ {
+				modifiers: [
+					{
+						name: 'offset',
+						options: { offset: [ -16, 12 ] },
+					},
+				],
+			} }
+		>
+			<StructureIcon />
+		</Infotip>
+	);
+};

package/src/extensions/structure/hooks/use-action-props.ts

@@ -2,17 +2,17 @@ import {
 	__privateRunCommand as runCommand,
 	__privateUseRouteStatus as useRouteStatus,
 } from '@elementor/editor-v1-adapters';
-import { StructureIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
 import { type ExtendedWindow, type ToggleActionProps } from '../../../types';
+import { StructureIconWithPopup } from './structure-icon-with-popup';
 
 export default function useActionProps(): ToggleActionProps {
 	const { isActive, isBlocked } = useRouteStatus( 'navigator' );
 
 	return {
 		title: __( 'Structure', 'elementor' ),
-		icon: StructureIcon,
+		icon: StructureIconWithPopup,
 		onClick: () => {
 			const extendedWindow = window as unknown as ExtendedWindow;
 			const config = extendedWindow?.elementorCommon?.eventsManager?.config;

package/src/extensions/structure/index.ts

@@ -1,10 +1,10 @@
-import { toolsMenu } from '../../locations';
+import { utilitiesMenu } from '../../locations';
 import useActionProps from './hooks/use-action-props';
 
 export function init() {
-	toolsMenu.registerToggleAction( {
+	utilitiesMenu.registerToggleAction( {
 		id: 'toggle-structure-view',
-		priority: 3,
+		priority: 25,
 		useProps: useActionProps,
 	} );
 }

package/src/extensions/theme-builder/index.ts

@@ -4,6 +4,8 @@ import useThemeBuilderActionProps from './hooks/use-action-props';
 export function init() {
 	mainMenu.registerAction( {
 		id: 'open-theme-builder',
+		group: 'default',
+		priority: 10,
 		useProps: useThemeBuilderActionProps,
 	} );
 }

package/src/extensions/user-preferences/index.ts

@@ -4,7 +4,8 @@ import useActionProps from './hooks/use-action-props';
 export function init() {
 	mainMenu.registerToggleAction( {
 		id: 'open-user-preferences',
-		priority: 30, // After history.
+		group: 'default',
+		priority: 30,
 		useProps: useActionProps,
 	} );
 }

package/src/locations.ts

@@ -18,7 +18,7 @@ const components = {
 };
 
 export const mainMenu = createMenu( {
-	groups: [ 'exits' ],
+	groups: [ 'help', 'exits' ],
 	components,
 } );
 

package/src/types.ts

@@ -12,12 +12,22 @@ export type ExtendedWindow = Window & {
 				};
 			};
 		};
+
+		ajax?: {
+			addRequest: ( action: string, options?: Record< string, unknown > ) => Promise< unknown >;
+		};
+
 		config: {
 			library_connect: {
 				is_connected: boolean;
 			};
 		};
 	};
+
+	elementorShowInfotip?: {
+		shouldShow: string;
+	};
+
 	elementor: {
 		helpers: {
 			hasPro: () => boolean;

package/src/extensions/documents-indicator/components/settings-button.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import {
-	__useActiveDocument as useActiveDocument,
-	__useHostDocument as useHostDocument,
-} from '@elementor/editor-documents';
-import {
-	__privateOpenRoute as openRoute,
-	__privateUseRouteStatus as useRouteStatus,
-} from '@elementor/editor-v1-adapters';
-import { SettingsIcon } from '@elementor/icons';
-import { Box, ToggleButton, Tooltip as BaseTooltip, type TooltipProps } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { type ExtendedWindow } from '../../../types';
-
-export default function SettingsButton() {
-	const activeDocument = useActiveDocument();
-	const hostDocument = useHostDocument();
-
-	const document = activeDocument && activeDocument.type.value !== 'kit' ? activeDocument : hostDocument;
-
-	const { isActive, isBlocked } = useRouteStatus( 'panel/page-settings' );
-
-	if ( ! document ) {
-		return null;
-	}
-
-	/* translators: %s: Post type label. */
-	const title = __( '%s Settings', 'elementor' ).replace( '%s', document.type.label );
-
-	return (
-		<Tooltip title={ title }>
-			{ /* @see https://mui.com/material-ui/react-tooltip/#disabled-elements */ }
-			<Box component="span" aria-label={ undefined }>
-				<ToggleButton
-					value="document-settings"
-					selected={ isActive }
-					disabled={ isBlocked }
-					onChange={ () => {
-						const extendedWindow = window as unknown as ExtendedWindow;
-						const config = extendedWindow?.elementorCommon?.eventsManager?.config;
-
-						if ( config ) {
-							extendedWindow.elementorCommon.eventsManager.dispatchEvent(
-								config.names.topBar.documentSettings,
-								{
-									location: config.locations.topBar,
-									secondaryLocation: config.secondaryLocations[ 'document-settings' ],
-									trigger: config.triggers.click,
-									element: config.elements.buttonIcon,
-								}
-							);
-						}
-
-						openRoute( 'panel/page-settings/settings' );
-					} }
-					aria-label={ title }
-					size="small"
-					sx={ {
-						border: 0, // Temp fix until the style of the ToggleButton component will be decided.
-						'&.Mui-disabled': {
-							border: 0, // Temp fix until the style of the ToggleButton component will be decided.
-						},
-					} }
-				>
-					<SettingsIcon fontSize="small" />
-				</ToggleButton>
-			</Box>
-		</Tooltip>
-	);
-}
-
-function Tooltip( props: TooltipProps ) {
-	return (
-		<BaseTooltip
-			PopperProps={ {
-				sx: {
-					'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
-						mt: 1.7,
-					},
-				},
-			} }
-			{ ...props }
-		/>
-	);
-}

package/src/extensions/documents-indicator/index.ts

@@ -1,12 +0,0 @@
-import { injectIntoPageIndication } from '../../locations';
-import SettingsButton from './components/settings-button';
-
-export function init() {
-	injectIntoPageIndication( {
-		id: 'document-settings-button',
-		component: SettingsButton,
-		options: {
-			priority: 20, // After document indicator.
-		},
-	} );
-}