@elementor/editor-editing-panel 3.35.0-341 → 3.35.0-343

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "3.35.0-341",
+  "version": "3.35.0-343",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,27 +39,27 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-341",
-    "@elementor/editor-canvas": "3.35.0-341",
-    "@elementor/editor-controls": "3.35.0-341",
-    "@elementor/editor-documents": "3.35.0-341",
-    "@elementor/editor-elements": "3.35.0-341",
-    "@elementor/editor-interactions": "3.35.0-341",
-    "@elementor/editor-panels": "3.35.0-341",
-    "@elementor/editor-props": "3.35.0-341",
-    "@elementor/editor-responsive": "3.35.0-341",
-    "@elementor/editor-styles": "3.35.0-341",
-    "@elementor/editor-styles-repository": "3.35.0-341",
-    "@elementor/editor-ui": "3.35.0-341",
-    "@elementor/editor-v1-adapters": "3.35.0-341",
+    "@elementor/editor": "3.35.0-343",
+    "@elementor/editor-canvas": "3.35.0-343",
+    "@elementor/editor-controls": "3.35.0-343",
+    "@elementor/editor-documents": "3.35.0-343",
+    "@elementor/editor-elements": "3.35.0-343",
+    "@elementor/editor-interactions": "3.35.0-343",
+    "@elementor/editor-panels": "3.35.0-343",
+    "@elementor/editor-props": "3.35.0-343",
+    "@elementor/editor-responsive": "3.35.0-343",
+    "@elementor/editor-styles": "3.35.0-343",
+    "@elementor/editor-styles-repository": "3.35.0-343",
+    "@elementor/editor-ui": "3.35.0-343",
+    "@elementor/editor-v1-adapters": "3.35.0-343",
     "@elementor/icons": "^1.62.0",
-    "@elementor/locations": "3.35.0-341",
-    "@elementor/menus": "3.35.0-341",
-    "@elementor/schema": "3.35.0-341",
-    "@elementor/session": "3.35.0-341",
+    "@elementor/locations": "3.35.0-343",
+    "@elementor/menus": "3.35.0-343",
+    "@elementor/schema": "3.35.0-343",
+    "@elementor/session": "3.35.0-343",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-341",
-    "@elementor/wp-media": "3.35.0-341",
+    "@elementor/utils": "3.35.0-343",
+    "@elementor/wp-media": "3.35.0-343",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/collapsible-content.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { type ReactNode, useState } from 'react';
+import { CollapseIcon } from '@elementor/editor-ui';
 import { Button, Collapse, Stack, styled } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { CollapseIcon } from './collapse-icon';
-
 type StaticItem< T = unknown > = T extends ( ...args: unknown[] ) => unknown ? never : T;
 
 type CallbackItem< T > = ( isOpen: boolean ) => T;

package/src/components/editing-panel.tsx

@@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { ElementProvider } from '../contexts/element-context';
 import { getControlReplacements } from '../control-replacement';
 import { controlActionsMenu } from '../controls-actions';
+import { getEditingPanelReplacement } from '../editing-panel-replacement-registry';
 import { EditorPanelErrorFallback } from './editing-panel-error-fallback';
 import { EditingPanelTabs } from './editing-panel-tabs';
 
@@ -31,26 +32,38 @@ export const EditingPanel = () => {
 	/* translators: %s: Element type title. */
 	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );
 
+	const { component: ReplacementComponent } = getEditingPanelReplacement( element, elementType ) ?? {};
+
+	let panelContent = (
+		<>
+			<PanelHeader>
+				<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
+				<AtomIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
+			</PanelHeader>
+			<PanelBody>
+				<EditingPanelTabs />
+			</PanelBody>
+		</>
+	);
+
+	if ( ReplacementComponent ) {
+		panelContent = <ReplacementComponent />;
+	}
+
 	return (
 		<ErrorBoundary fallback={ <EditorPanelErrorFallback /> }>
 			<SessionStorageProvider prefix={ 'elementor' }>
 				<ThemeProvider>
-					<Panel>
-						<PanelHeaderTopSlot />
-						<PanelHeader>
-							<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
-							<AtomIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
-						</PanelHeader>
-						<PanelBody>
-							<ControlActionsProvider items={ menuItems }>
-								<ControlReplacementsProvider replacements={ controlReplacements }>
-									<ElementProvider element={ element } elementType={ elementType }>
-										<EditingPanelTabs />
-									</ElementProvider>
-								</ControlReplacementsProvider>
-							</ControlActionsProvider>
-						</PanelBody>
-					</Panel>
+					<ControlActionsProvider items={ menuItems }>
+						<ControlReplacementsProvider replacements={ controlReplacements }>
+							<ElementProvider element={ element } elementType={ elementType }>
+								<Panel>
+									<PanelHeaderTopSlot />
+									{ panelContent }
+								</Panel>
+							</ElementProvider>
+						</ControlReplacementsProvider>
+					</ControlActionsProvider>
 				</ThemeProvider>
 			</SessionStorageProvider>
 		</ErrorBoundary>

package/src/components/section.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { type PropsWithChildren, type ReactNode, useId, useRef } from 'react';
+import { CollapseIcon } from '@elementor/editor-ui';
 import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
 import { SectionRefContext } from '../contexts/section-context';
 import { useStateByElement } from '../hooks/use-state-by-element';
-import { CollapseIcon } from './collapse-icon';
 import { type CollapsibleValue, getCollapsibleValue } from './collapsible-content';
 
 type Props = PropsWithChildren< {

package/src/editing-panel-replacement-registry.tsx

@@ -0,0 +1,30 @@
+import { type ComponentType } from 'react';
+import { type Element, type ElementType } from '@elementor/editor-elements';
+
+type EditingPanelReplacement = {
+	condition: ( element: Element, elementType: ElementType ) => boolean;
+	component: ComponentType;
+
+	// ordered from lowest to highest
+	priority: number;
+};
+
+const registry = new Map< string, EditingPanelReplacement >();
+
+const DEFAULT_PRIORITY = 10;
+
+export const registerEditingPanelReplacement = ( {
+	id,
+	priority = DEFAULT_PRIORITY,
+	...props
+}: Omit< EditingPanelReplacement, 'priority' > & { id: string; priority?: number } ) => {
+	registry.set( id, { ...props, priority } );
+};
+
+export const getEditingPanelReplacement = (
+	element: Element,
+	elementType: ElementType
+): EditingPanelReplacement | null =>
+	Array.from( registry.values() )
+		.filter( ( { condition } ) => condition( element, elementType ) )
+		.sort( ( a, b ) => a.priority - b.priority )?.[ 0 ] ?? null;

package/src/index.ts

@@ -17,10 +17,11 @@ export { useSectionWidth } from './contexts/section-context';
 export { useStyle } from './contexts/style-context';
 export { registerControlReplacement } from './control-replacement';
 export { controlActionsMenu } from './controls-actions';
-export { controlsRegistry } from './controls-registry/controls-registry';
+export { controlsRegistry, type ControlType } from './controls-registry/controls-registry';
 export { StylesProviderCannotUpdatePropsError } from './errors';
 export { createTopLevelObjectType } from './controls-registry/create-top-level-object-type';
 export { useCustomCss } from './hooks/use-custom-css';
+export { useStateByElement } from './hooks/use-state-by-element';
 export { getSubtitle, getTitle, HISTORY_DEBOUNCE_WAIT } from './hooks/use-styles-fields';
 export { useStylesRerender } from './hooks/use-styles-rerender';
 export { init } from './init';
@@ -29,5 +30,6 @@ export type { PopoverActionProps } from './popover-action';
 export { registerStyleProviderToColors } from './provider-colors-registry';
 export { stylesInheritanceTransformersRegistry } from './styles-inheritance/styles-inheritance-transformers-registry';
 export { registerFieldIndicator, FIELD_TYPE } from './field-indicators-registry';
+export { registerEditingPanelReplacement } from './editing-panel-replacement-registry';
 
 export { doApplyClasses, doGetAppliedClasses, doUnapplyClass } from './apply-unapply-actions';

package/src/components/collapse-icon.tsx

@@ -1,12 +0,0 @@
-import { ChevronDownIcon } from '@elementor/icons';
-import { styled } from '@elementor/ui';
-
-// TODO: Replace this with future Rotate component that will be implemented in elementor-ui
-export const CollapseIcon = styled( ChevronDownIcon, {
-	shouldForwardProp: ( prop ) => prop !== 'open',
-} )< { open: boolean } >( ( { theme, open } ) => ( {
-	transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
-	transition: theme.transitions.create( 'transform', {
-		duration: theme.transitions.duration.standard,
-	} ),
-} ) );