@elementor/editor-editing-panel 4.3.0-beta2 → 4.3.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.3.0-beta2",
+  "version": "4.3.0-beta3",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,32 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-beta2",
-    "@elementor/editor-canvas": "4.3.0-beta2",
-    "@elementor/editor-controls": "4.3.0-beta2",
-    "@elementor/editor-documents": "4.3.0-beta2",
-    "@elementor/editor-elements": "4.3.0-beta2",
-    "@elementor/editor-interactions": "4.3.0-beta2",
-    "@elementor/editor-notifications": "4.3.0-beta2",
-    "@elementor/editor-panels": "4.3.0-beta2",
-    "@elementor/editor-props": "4.3.0-beta2",
-    "@elementor/editor-responsive": "4.3.0-beta2",
-    "@elementor/editor-styles": "4.3.0-beta2",
-    "@elementor/editor-styles-repository": "4.3.0-beta2",
-    "@elementor/editor-ui": "4.3.0-beta2",
-    "@elementor/editor-v1-adapters": "4.3.0-beta2",
-    "@elementor/http-client": "4.3.0-beta2",
+    "@elementor/editor": "4.3.0-beta3",
+    "@elementor/editor-canvas": "4.3.0-beta3",
+    "@elementor/editor-controls": "4.3.0-beta3",
+    "@elementor/editor-current-user": "4.3.0-beta3",
+    "@elementor/editor-documents": "4.3.0-beta3",
+    "@elementor/editor-elements": "4.3.0-beta3",
+    "@elementor/editor-interactions": "4.3.0-beta3",
+    "@elementor/editor-notifications": "4.3.0-beta3",
+    "@elementor/editor-panels": "4.3.0-beta3",
+    "@elementor/editor-props": "4.3.0-beta3",
+    "@elementor/editor-responsive": "4.3.0-beta3",
+    "@elementor/editor-styles": "4.3.0-beta3",
+    "@elementor/editor-styles-repository": "4.3.0-beta3",
+    "@elementor/editor-ui": "4.3.0-beta3",
+    "@elementor/editor-v1-adapters": "4.3.0-beta3",
+    "@elementor/http-client": "4.3.0-beta3",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.3.0-beta2",
-    "@elementor/locations": "4.3.0-beta2",
-    "@elementor/menus": "4.3.0-beta2",
-    "@elementor/query": "4.3.0-beta2",
-    "@elementor/schema": "4.3.0-beta2",
-    "@elementor/session": "4.3.0-beta2",
+    "@elementor/editor-variables": "4.3.0-beta3",
+    "@elementor/locations": "4.3.0-beta3",
+    "@elementor/menus": "4.3.0-beta3",
+    "@elementor/query": "4.3.0-beta3",
+    "@elementor/schema": "4.3.0-beta3",
+    "@elementor/session": "4.3.0-beta3",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-beta2",
-    "@elementor/wp-media": "4.3.0-beta2",
+    "@elementor/utils": "4.3.0-beta3",
+    "@elementor/wp-media": "4.3.0-beta3",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/content-only-infotip.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { type PropsWithChildren, useState } from 'react';
+import { InfoCircleFilledIcon } from '@elementor/icons';
+import { Alert, AlertTitle, Box, Infotip, Link } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const LEARN_MORE_URL = 'https://go.elementor.com/content-only-access-infotip';
+
+const INFOTIP_WIDTH = 300;
+
+export const ContentOnlyInfotip = ( { children }: PropsWithChildren ) => {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	return (
+		<Infotip
+			open={ isOpen }
+			placement="bottom"
+			color="secondary"
+			content={
+				<Alert color="secondary" icon={ <InfoCircleFilledIcon /> } size="small">
+					<AlertTitle>{ __( 'Content-only access', 'elementor' ) }</AlertTitle>
+					<Box component="span">
+						{ __( 'Your Site Admin has limited this role to content editing.', 'elementor' ) }{ ' ' }
+						<Link href={ LEARN_MORE_URL } target="_blank" rel="noreferrer" color="info.main">
+							{ __( 'Learn More', 'elementor' ) }
+						</Link>
+					</Box>
+				</Alert>
+			}
+			slotProps={ {
+				popper: {
+					sx: { width: INFOTIP_WIDTH },
+					// The popper is portaled, so it needs its own hover handlers to stay open while the pointer
+					// travels from the tab to the "Learn More" link.
+					onMouseEnter: () => setIsOpen( true ),
+					onMouseLeave: () => setIsOpen( false ),
+				},
+			} }
+		>
+			{ /* A disabled MUI tab sets pointer-events: none, so the trigger has to opt back in to receive hover. */ }
+			<Box
+				component="span"
+				sx={ { pointerEvents: 'auto' } }
+				onMouseEnter={ () => setIsOpen( true ) }
+				onMouseLeave={ () => setIsOpen( false ) }
+			>
+				{ children }
+			</Box>
+		</Infotip>
+	);
+};

package/src/components/editing-panel-tabs.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import * as React from 'react';
+import { useHasContentOnlyAccess } from '@elementor/editor-current-user';
 import { getWidgetsCache } from '@elementor/editor-elements';
 import { Divider, Stack, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -8,12 +9,17 @@ import { useElement } from '../contexts/element-context';
 import { ScrollProvider } from '../contexts/scroll-context';
 import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
 import { useStateByElement } from '../hooks/use-state-by-element';
+import { ContentOnlyInfotip } from './content-only-infotip';
 import { InteractionsTab } from './interactions-tab';
 import { SettingsTab } from './settings-tab';
 import { stickyHeaderStyles, StyleTab } from './style-tab';
 
 type TabValue = 'settings' | 'style' | 'interactions';
 
+const CONTENT_ONLY_TAB: TabValue = 'settings';
+
+const DESIGN_TABS: TabValue[] = [ 'style', 'interactions' ];
+
 export const EditingPanelTabs = () => {
 	const { element } = useElement();
 
@@ -31,10 +37,24 @@ const PanelTabContent = () => {
 	const editorDefaults = useDefaultPanelSettings();
 	const defaultComponentTab = editorDefaults.defaultTab as TabValue;
 	const isPromotedElement = !! getWidgetsCache()?.[ element.type ]?.meta?.is_pro_promotion;
+	const hasContentOnlyAccess = useHasContentOnlyAccess();
+
+	// A promoted element has no General tab, and its Style tab only renders an upsell, so restricting it would leave the panel empty.
+	const areDesignTabsRestricted = hasContentOnlyAccess && ! isPromotedElement;
 
 	const [ storedTab, setCurrentTab ] = useStateByElement< TabValue >( 'tab', defaultComponentTab );
-	const currentTab = isPromotedElement && storedTab === 'settings' ? 'style' : storedTab;
+	const currentTab = resolveCurrentTab( { storedTab, isPromotedElement, areDesignTabsRestricted } );
 	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( currentTab );
+
+	const getDesignTabProps = ( tab: TabValue ) => ( {
+		...getTabProps( tab ),
+		disabled: areDesignTabsRestricted,
+		sx: areDesignTabsRestricted ? { pointerEvents: 'auto' } : undefined,
+	} );
+
+	const withRestrictionInfotip = ( label: string ) =>
+		areDesignTabsRestricted ? <ContentOnlyInfotip>{ label }</ContentOnlyInfotip> : label;
+
 	return (
 		<ScrollProvider>
 			<Stack direction="column" sx={ { width: '100%' } }>
@@ -45,6 +65,10 @@ const PanelTabContent = () => {
 						sx={ { mt: 0.5 } }
 						{ ...getTabsProps() }
 						onChange={ ( _: unknown, newValue: TabValue ) => {
+							if ( areDesignTabsRestricted && DESIGN_TABS.includes( newValue ) ) {
+								return;
+							}
+
 							getTabsProps().onChange( _, newValue );
 							setCurrentTab( newValue );
 						} }
@@ -52,8 +76,14 @@ const PanelTabContent = () => {
 						{ ! isPromotedElement && (
 							<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
 						) }
-						<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
-						<Tab label={ __( 'Interactions', 'elementor' ) } { ...getTabProps( 'interactions' ) } />
+						<Tab
+							label={ withRestrictionInfotip( __( 'Style', 'elementor' ) ) }
+							{ ...getDesignTabProps( 'style' ) }
+						/>
+						<Tab
+							label={ withRestrictionInfotip( __( 'Interactions', 'elementor' ) ) }
+							{ ...getDesignTabProps( 'interactions' ) }
+						/>
 					</Tabs>
 					<Divider />
 				</Stack>
@@ -62,13 +92,37 @@ const PanelTabContent = () => {
 						<SettingsTab />
 					</TabPanel>
 				) }
-				<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
-					<StyleTab />
-				</TabPanel>
-				<TabPanel { ...getTabPanelProps( 'interactions' ) } disablePadding>
-					<InteractionsTab />
-				</TabPanel>
+				{ ! areDesignTabsRestricted && (
+					<>
+						<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
+							<StyleTab />
+						</TabPanel>
+						<TabPanel { ...getTabPanelProps( 'interactions' ) } disablePadding>
+							<InteractionsTab />
+						</TabPanel>
+					</>
+				) }
 			</Stack>
 		</ScrollProvider>
 	);
 };
+
+const resolveCurrentTab = ( {
+	storedTab,
+	isPromotedElement,
+	areDesignTabsRestricted,
+}: {
+	storedTab: TabValue;
+	isPromotedElement: boolean;
+	areDesignTabsRestricted: boolean;
+} ): TabValue => {
+	if ( areDesignTabsRestricted && DESIGN_TABS.includes( storedTab ) ) {
+		return CONTENT_ONLY_TAB;
+	}
+
+	if ( isPromotedElement && storedTab === 'settings' ) {
+		return 'style';
+	}
+
+	return storedTab;
+};

package/src/controls-registry/controls-registry.tsx

@@ -10,6 +10,7 @@ import {
 	InlineEditingControl,
 	KeyValueControl,
 	LinkControl,
+	NoticeControl,
 	NumberControl,
 	QueryChipsControl,
 	QueryControl,
@@ -97,6 +98,7 @@ const controlTypes = {
 		propTypeUtil: timeRangePropTypeUtil,
 	},
 	'attachment-type': { component: AttachmentTypeControl, layout: 'custom', propTypeUtil: stringPropTypeUtil },
+	notice: { component: NoticeControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 } as const satisfies ControlRegistry;
 
 export type ControlType = keyof typeof controlTypes;

package/src/controls-registry/element-controls/accordion-items-control/accordion-items-control.tsx

@@ -101,11 +101,22 @@ export const AccordionItemsControl = ( { label }: { label: string } ) => {
 const ItemLabel = ( { value }: { value: AccordionItem } ) => {
 	return (
 		<Stack sx={ { minHeight: 20 } } direction="row" alignItems="center" gap={ 1.5 }>
-			<span>{ value?.title }</span>
+			{ value.id ? (
+				<AccordionItemRepeaterLabel elementId={ value.id } fallbackTitle={ value.title } />
+			) : (
+				<span>{ value?.title }</span>
+			) }
 		</Stack>
 	);
 };
 
+const AccordionItemRepeaterLabel = ( { elementId, fallbackTitle }: { elementId: string; fallbackTitle?: string } ) => {
+	const editorSettings = useElementEditorSettings( elementId );
+	const label = editorSettings?.title ?? fallbackTitle ?? '';
+
+	return <span>{ label }</span>;
+};
+
 const ItemContent = ( { value }: { value: AccordionItem } ) => {
 	if ( ! value.id ) {
 		return null;

package/src/controls-registry/element-controls/list-items-control/list-actions.ts

@@ -21,7 +21,6 @@ export const LIST_ITEM_ELEMENT_TYPE = 'e-list-item';
 const LIST_ITEM_MARKER_ELEMENT_TYPE = 'e-list-item-marker';
 const LIST_ITEM_CONTENT_ELEMENT_TYPE = 'e-list-item-content';
 const PARAGRAPH_WIDGET_TYPE = 'e-paragraph';
-const SVG_WIDGET_TYPE = 'e-svg';
 
 const TRAILING_NUMBER = /(\d+)\s*$/;
 
@@ -69,9 +68,13 @@ const buildItemModel = ( position: number, showMarkers: boolean ): V1ElementData
 				elements: [
 					{
 						elType: 'widget',
-						widgetType: SVG_WIDGET_TYPE,
+						widgetType: PARAGRAPH_WIDGET_TYPE,
 						id: generateElementId(),
 						elements: [],
+						settings: {
+							tag: { $$type: 'string', value: 'span' },
+							paragraph: escapedHtmlPropTypeUtil.create( '•' ),
+						},
 					},
 				],
 			},

package/src/controls-registry/element-controls/tabs-control/tabs-control.tsx

@@ -109,16 +109,25 @@ export const TabsControlContent = ( { label }: { label: string } ) => {
 };
 
 const ItemLabel = ( { value, index }: { value: TabItem; index: number } ) => {
-	const elementTitle = value?.title;
-
 	return (
 		<Stack sx={ { minHeight: 20 } } direction="row" alignItems="center" gap={ 1.5 }>
-			<span>{ elementTitle }</span>
+			{ value.id ? (
+				<TabRepeaterLabel elementId={ value.id } fallbackTitle={ value.title } />
+			) : (
+				<span>{ value?.title }</span>
+			) }
 			<ItemDefaultTab index={ index } />
 		</Stack>
 	);
 };
 
+const TabRepeaterLabel = ( { elementId, fallbackTitle }: { elementId: string; fallbackTitle?: string } ) => {
+	const editorSettings = useElementEditorSettings( elementId );
+	const label = editorSettings?.title ?? fallbackTitle ?? '';
+
+	return <span>{ label }</span>;
+};
+
 const ItemDefaultTab = ( { index }: { index: number } ) => {
 	const { value: defaultItem } = useBoundProp( numberPropTypeUtil );
 

package/src/controls-registry/settings-field.tsx

@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { PropKeyProvider, PropProvider, type SetValueMeta } from '@elementor/editor-controls';
+import { PropKeyProvider, PropProvider, type SetValueMeta, useBoundProp } from '@elementor/editor-controls';
 import { setDocumentModifiedStatus } from '@elementor/editor-documents';
 import { type ElementID, getElementLabel, getElementSettings, updateElementSettings } from '@elementor/editor-elements';
-import { type CreateOptions, type PropKey, type Props } from '@elementor/editor-props';
+import {
+	type CreateOptions,
+	type PropKey,
+	type Props,
+	responsiveFallbackChain,
+	responsivePropTypeUtil,
+} from '@elementor/editor-props';
+import { type BreakpointId, useActiveBreakpoint, useBreakpoints } from '@elementor/editor-responsive';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
+import { isResponsivePropType } from '../utils/is-responsive-prop-type';
 import {
 	extractDependencyEffect,
 	extractOrderedDependencies,
@@ -24,6 +32,7 @@ type SettingsFieldProps = {
 };
 
 const HISTORY_DEBOUNCE_WAIT = 800;
+const DESKTOP_BREAKPOINT: BreakpointId = 'desktop';
 
 export const SettingsField = ( { bind, children, propDisplayName }: SettingsFieldProps ) => {
 	const {
@@ -62,7 +71,36 @@ export const SettingsField = ( { bind, children, propDisplayName }: SettingsFiel
 
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ isDisabled }>
-			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
+			<PropKeyProvider bind={ bind }>
+				{ isResponsivePropType( propsSchema[ bind ] ) ? (
+					<ResponsiveBinding>{ children }</ResponsiveBinding>
+				) : (
+					children
+				) }
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
+const ResponsiveBinding = ( { children }: { children: React.ReactNode } ) => {
+	const { value, setValue, propType, disabled } = useBoundProp( responsivePropTypeUtil );
+	const breakpoint = useActiveBreakpoint() ?? DESKTOP_BREAKPOINT;
+	const activeBreakpoints = ( useBreakpoints() ?? [] ).map( ( { id } ) => id );
+
+	const inherited = responsiveFallbackChain( breakpoint )
+		.filter( ( key ) => key !== breakpoint && activeBreakpoints.includes( key as BreakpointId ) )
+		.map( ( key ) => value?.[ key ] )
+		.find( ( entry ) => entry !== null && entry !== undefined );
+
+	return (
+		<PropProvider
+			propType={ propType }
+			value={ value }
+			setValue={ setValue }
+			placeholder={ { [ breakpoint ]: inherited } }
+			isDisabled={ () => disabled }
+		>
+			<PropKeyProvider bind={ breakpoint }>{ children }</PropKeyProvider>
 		</PropProvider>
 	);
 };

package/src/utils/is-responsive-prop-type.ts

@@ -0,0 +1,19 @@
+import { type PropType, type UnionPropType } from '@elementor/editor-props';
+
+export function isResponsivePropType( propType: PropType | undefined ): boolean {
+	if ( ! propType ) {
+		return false;
+	}
+
+	if ( 'key' in propType && propType.key === 'responsive' ) {
+		return true;
+	}
+
+	if ( propType.kind === 'union' ) {
+		return Object.values( ( propType as UnionPropType ).prop_types ).some( ( inner ) =>
+			isResponsivePropType( inner )
+		);
+	}
+
+	return false;
+}