@elementor/editor-editing-panel 3.32.0-95 → 3.33.0-101

package/package.json

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

package/src/components/custom-css-field.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type PropsWithChildren } from 'react';
+import { ControlAdornmentsProvider } from '@elementor/editor-controls';
+
+import { CustomCssIndicator } from './custom-css-indicator';
+
+export const CustomCssField = ( { children }: PropsWithChildren< object > ) => {
+	return (
+		<ControlAdornmentsProvider
+			items={ [
+				{
+					id: 'custom-css-indicator',
+					Adornment: CustomCssIndicator,
+				},
+			] }
+		>
+			{ children }
+		</ControlAdornmentsProvider>
+	);
+};

package/src/components/custom-css-indicator.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { useCustomCss } from '../hooks/use-custom-css';
+import { StyleIndicator } from './style-indicator';
+
+export const CustomCssIndicator = () => {
+	const { customCss } = useCustomCss();
+
+	const hasContent = Boolean( customCss?.raw?.trim() );
+
+	if ( ! hasContent ) {
+		return null;
+	}
+
+	return <StyleIndicator getColor={ ( theme ) => theme.palette.accent.main } />;
+};

package/src/components/custom-css.tsx

@@ -1,19 +1,36 @@
 import * as React from 'react';
-import { CssEditor } from '@elementor/editor-controls';
+import { ControlAdornments, ControlFormLabel, CssEditor } from '@elementor/editor-controls';
+import { Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { useCustomCss } from '../hooks/use-custom-css';
+import { CustomCssField } from './custom-css-field';
 import { SectionContent } from './section-content';
 
 export const CustomCss = () => {
 	const { customCss, setCustomCss } = useCustomCss();
+	const [ localState, setLocalState ] = React.useState( {
+		value: customCss?.raw || '',
+		isValid: true,
+	} );
 
-	const handleChange = ( value: string ) => {
-		setCustomCss( value, { history: { propDisplayName: 'Custom CSS' } } );
+	const handleChange = ( value: string, isValid: boolean ) => {
+		setLocalState( { value, isValid } );
+
+		if ( isValid ) {
+			setCustomCss( value, { history: { propDisplayName: 'Custom CSS' } } );
+		}
 	};
 
 	return (
 		<SectionContent>
-			<CssEditor value={ customCss?.raw || '' } onChange={ handleChange } />
+			<CustomCssField>
+				<Stack direction="row" alignItems="center" gap={ 1 }>
+					<ControlFormLabel>{ __( 'CSS code', 'elementor' ) }</ControlFormLabel>
+					<ControlAdornments />
+				</Stack>
+			</CustomCssField>
+			<CssEditor value={ localState.value } onChange={ handleChange } />
 		</SectionContent>
 	);
 };

package/src/components/section.tsx

@@ -11,9 +11,10 @@ type Props = PropsWithChildren< {
 	title: string;
 	defaultExpanded?: boolean;
 	titleEnd?: CollapsibleValue< ReactNode | string >;
+	unmountOnExit?: boolean;
 } >;
 
-export function Section( { title, children, defaultExpanded = false, titleEnd }: Props ) {
+export function Section( { title, children, defaultExpanded = false, titleEnd, unmountOnExit = true }: Props ) {
 	const [ isOpen, setIsOpen ] = useStateByElement( title, !! defaultExpanded );
 	const ref = useRef< HTMLElement >( null );
 
@@ -43,7 +44,13 @@ export function Section( { title, children, defaultExpanded = false, titleEnd }:
 				</Stack>
 				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>
-			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto" unmountOnExit>
+			<Collapse
+				id={ contentId }
+				aria-labelledby={ labelId }
+				in={ isOpen }
+				timeout="auto"
+				unmountOnExit={ unmountOnExit }
+			>
 				<SectionRefContext.Provider value={ ref }>
 					<Stack ref={ ref } gap={ 2.5 } p={ 2 }>
 						{ children }

package/src/components/style-tab-section.tsx

@@ -10,16 +10,21 @@ type Section = {
 	title: string;
 };
 
-type Props = { section: Section; fields?: string[] };
+type Props = { section: Section; fields?: string[]; unmountOnExit?: boolean };
 
-export const StyleTabSection = ( { section, fields = [] }: Props ) => {
+export const StyleTabSection = ( { section, fields = [], unmountOnExit = true }: Props ) => {
 	const { component, name, title } = section;
 	const tabDefaults = useDefaultPanelSettings();
 	const SectionComponent = component;
 	const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes( name );
 
 	return (
-		<Section title={ title } defaultExpanded={ isExpanded } titleEnd={ getStylesInheritanceIndicators( fields ) }>
+		<Section
+			title={ title }
+			defaultExpanded={ isExpanded }
+			titleEnd={ getStylesInheritanceIndicators( fields ) }
+			unmountOnExit={ unmountOnExit }
+		>
 			<SectionComponent />
 		</Section>
 	);

package/src/components/style-tab.tsx

@@ -175,6 +175,8 @@ export const StyleTab = () => {
 										name: 'Custom CSS',
 										title: __( 'Custom CSS', 'elementor' ),
 									} }
+									fields={ [ 'custom_css' ] }
+									unmountOnExit={ false }
 								/>
 							) }
 						</SectionsList>

package/src/styles-inheritance/components/styles-inheritance-section-indicators.tsx

@@ -5,6 +5,7 @@ import { isElementsStylesProvider } from '@elementor/editor-styles-repository';
 import { Stack, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { CustomCssIndicator } from '../../components/custom-css-indicator';
 import { StyleIndicator } from '../../components/style-indicator';
 import { useStyle } from '../../contexts/style-context';
 import { useStylesInheritanceSnapshot } from '../../contexts/styles-inheritance-context';
@@ -18,6 +19,10 @@ export const StylesInheritanceSectionIndicators = ( { fields }: Props ) => {
 	const { id, meta, provider } = useStyle();
 	const snapshot = useStylesInheritanceSnapshot();
 
+	if ( fields.includes( 'custom_css' ) ) {
+		return <CustomCssIndicator />;
+	}
+
 	const snapshotFields = Object.fromEntries(
 		Object.entries( snapshot ?? {} ).filter( ( [ key ] ) => fields.includes( key as PropKey ) )
 	);