@elementor/editor-editing-panel 1.18.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,14 +40,14 @@
   },
   "dependencies": {
     "@elementor/editor": "0.18.3",
-    "@elementor/editor-controls": "0.17.0",
+    "@elementor/editor-controls": "0.18.1",
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.6.3",
+    "@elementor/editor-elements": "0.6.4",
     "@elementor/editor-panels": "0.13.0",
     "@elementor/editor-props": "0.11.0",
     "@elementor/editor-responsive": "0.13.3",
     "@elementor/editor-styles": "0.6.3",
-    "@elementor/editor-styles-repository": "0.7.6",
+    "@elementor/editor-styles-repository": "0.7.7",
     "@elementor/editor-ui": "0.4.2",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.37.0",

package/src/components/control-label-with-adornments.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type PropsWithChildren } from 'react';
+import { ControlAdornments, ControlLabel } from '@elementor/editor-controls';
+import { Stack } from '@elementor/ui';
+
+export const ControlLabelWithAdornments = ( { children }: PropsWithChildren< object > ) => {
+	return (
+		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
+			<ControlLabel>{ children }</ControlLabel>
+			<ControlAdornments />
+		</Stack>
+	);
+};

package/src/components/section.tsx

@@ -22,9 +22,13 @@ export function Section( { title, children, defaultExpanded = false }: Props ) {
 				id={ labelId }
 				aria-controls={ contentId }
 				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+				sx={ { '&:hover': { backgroundColor: 'transparent' } } }
 			>
-				<ListItemText secondary={ title } />
-				<CollapseIcon open={ isOpen } color="secondary" />
+				<ListItemText
+					secondary={ title }
+					secondaryTypographyProps={ { sx: { typography: 'caption', fontWeight: 'bold' } } }
+				/>
+				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>
 			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto" unmountOnExit>
 				<Stack gap={ 2.5 } p={ 2 }>

package/src/components/style-sections/layout-section/display-field.tsx

@@ -37,7 +37,7 @@ export const DisplayField = () => {
 
 	return (
 		<StylesField bind="display">
-			<Stack gap={ 1 }>
+			<Stack gap={ 0.75 }>
 				<ControlLabel>{ __( 'Display', 'elementor' ) }</ControlLabel>
 				<ToggleControl options={ options } fullWidth={ true } />
 			</Stack>

package/src/components/style-sections/layout-section/justify-content-field.tsx

@@ -71,7 +71,7 @@ export const JustifyContentField = () => {
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
 				<StylesField bind="justify-content">
-					<Stack gap={ 1 }>
+					<Stack gap={ 0.75 }>
 						<ControlLabel>{ __( 'Justify content', 'elementor' ) }</ControlLabel>
 						<ToggleControl options={ options } fullWidth={ true } />
 					</Stack>

package/src/components/style-sections/position-section/dimensions-field.tsx

@@ -44,7 +44,7 @@ export const DimensionsField = () => {
 };
 const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
 	return (
-		<Grid container gap={ 1 } alignItems="center">
+		<Grid container gap={ 0.75 } alignItems="center">
 			<Grid item xs={ 12 }>
 				<ControlLabel>{ label }</ControlLabel>
 			</Grid>

package/src/components/style-sections/size-section/size-section.tsx

@@ -60,7 +60,7 @@ type ControlProps = {
 const SizeField = ( { label, bind, extendedValues }: ControlProps ) => {
 	return (
 		<StylesField bind={ bind }>
-			<Grid container gap={ 1 } alignItems="center">
+			<Grid container gap={ 0.75 } alignItems="center">
 				<Grid item xs={ 12 }>
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>

package/src/contexts/styles-inheritance-context.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { createContext, type PropsWithChildren, useContext } from 'react';
-import { useElementSetting } from '@elementor/editor-elements';
+import { getWidgetsCache, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { getBreakpointsTree } from '@elementor/editor-responsive';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 
+import { useStylesRerender } from '../hooks/use-styles-rerender';
 import { createStylesInheritance } from '../styles-inheritance/create-styles-inheritance';
 import { type SnapshotPropValue, type StylesInheritanceSnapshotGetter } from '../styles-inheritance/types';
 import { useClassesProp } from './classes-prop-context';
@@ -56,10 +57,24 @@ export function useStylesInheritanceField( field: string ): SnapshotPropValue[]
 const useAppliedStyles = () => {
 	const { element } = useElement();
 	const currentClassesProp = useClassesProp();
+	const baseStyles = useBaseStyles();
+
+	useStylesRerender();
+
 	const classesProp = useElementSetting< ClassesPropValue >( element.id, currentClassesProp );
 
 	const appliedStyles = classesPropTypeUtil.extract( classesProp );
-	const allStyles = stylesRepository.all();
 
-	return allStyles.filter( ( style ) => appliedStyles?.includes( style.id ) );
+	return stylesRepository
+		.all()
+		.filter( ( style ) => appliedStyles?.includes( style.id ) )
+		.concat( baseStyles );
+};
+
+const useBaseStyles = () => {
+	const { elementType } = useElement();
+	const widgetsCache = getWidgetsCache();
+	const widgetCache = widgetsCache?.[ elementType.key ];
+
+	return Object.values( widgetCache?.base_styles ?? {} );
 };

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
+import { ControlAdornmentsProvider, PropKeyProvider, PropProvider } from '@elementor/editor-controls';
 import { type PropKey, type PropValue } from '@elementor/editor-props';
 import { getStylesSchema } from '@elementor/editor-styles';
 
 import { useStylesField } from '../hooks/use-styles-field';
+import { StylesInheritanceIndicator } from '../styles-inheritance/styles-inheritance-indicator';
 import { createTopLevelOjectType } from './create-top-level-object-type';
 
 export type StylesFieldProps = {
@@ -25,8 +26,17 @@ export const StylesField = ( { bind, children }: StylesFieldProps ) => {
 	};
 
 	return (
-		<PropProvider propType={ propType } value={ values } setValue={ setValues }>
-			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
-		</PropProvider>
+		<ControlAdornmentsProvider
+			items={ [
+				{
+					id: 'styles-inheritance',
+					Adornment: StylesInheritanceIndicator,
+				},
+			] }
+		>
+			<PropProvider propType={ propType } value={ values } setValue={ setValues }>
+				<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
+			</PropProvider>
+		</ControlAdornmentsProvider>
 	);
 };

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -178,7 +178,7 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 
 	return (
 		<DynamicControl bind={ control.bind }>
-			<Grid container gap={ 1 }>
+			<Grid container gap={ 0.75 }>
 				{ control.label ? (
 					<Grid item xs={ 12 }>
 						<ControlLabel>{ control.label }</ControlLabel>

package/src/hooks/use-styles-fields.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useReducer } from 'react';
+import { useMemo } from 'react';
 import {
 	createElementStyle,
 	type CreateElementStyleArgs,
@@ -17,6 +17,7 @@ import { useClassesProp } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
 import { StyleNotFoundUnderProviderError, StylesProviderCannotUpdatePropsError } from '../errors';
+import { useStylesRerender } from './use-styles-rerender';
 
 export function useStylesFields< T extends Props >( propNames: ( keyof T & string )[] ) {
 	const { element } = useElement();
@@ -26,9 +27,7 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 	const undoableUpdateStyle = useUndoableUpdateStyle();
 	const undoableCreateElementStyle = useUndoableCreateElementStyle();
 
-	const [ , reRender ] = useReducer( ( p ) => ! p, false );
-
-	useEffect( () => provider?.subscribe( reRender ), [ provider ] );
+	useStylesRerender();
 
 	const value = getProps< T >( {
 		elementId: element.id,

package/src/hooks/use-styles-rerender.ts

@@ -0,0 +1,10 @@
+import { useEffect, useReducer } from 'react';
+
+import { useStyle } from '../contexts/style-context';
+
+export const useStylesRerender = () => {
+	const { provider } = useStyle();
+	const [ , reRender ] = useReducer( ( p ) => ! p, false );
+
+	useEffect( () => provider?.subscribe( reRender ), [ provider ] );
+};

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { ELEMENTS_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
+import { styled } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useStyle } from '../contexts/style-context';
+import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
+import { useStylesField } from '../hooks/use-styles-field';
+
+const Circle = styled( 'div', {
+	shouldForwardProp: ( prop ) => prop !== 'variant',
+} )< { variant?: 'overridden' | 'local-affects' | 'global-affects' } >`
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background-color: ${ ( { theme, variant } ) => {
+		switch ( variant ) {
+			case 'overridden':
+				return theme.palette.warning.main;
+			case 'global-affects':
+				return theme.palette.global.main;
+			case 'local-affects':
+				return theme.palette.primary.main;
+			default:
+				return theme.palette.text.secondary;
+		}
+	} };
+`;
+
+export const StylesInheritanceIndicator = () => {
+	const { bind } = useBoundProp();
+	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
+	const [ value ] = useStylesField( bind );
+	const inheritanceChain = useStylesInheritanceField( bind );
+
+	if ( ! inheritanceChain.length ) {
+		return null;
+	}
+
+	const [ { styleId, styleVariant } ] = inheritanceChain;
+
+	const { breakpoint, state } = styleVariant.meta;
+
+	if (
+		styleId === currentStyleId &&
+		breakpoint === currentStyleMeta.breakpoint &&
+		state === currentStyleMeta.state
+	) {
+		return (
+			<Circle
+				aria-label={ __( 'This is the final value', 'elementor' ) }
+				variant={
+					currentStyleProvider?.key === ELEMENTS_STYLES_PROVIDER_KEY ? 'local-affects' : 'global-affects'
+				}
+			/>
+		);
+	}
+
+	if ( value !== null && value !== undefined ) {
+		return (
+			<Circle
+				aria-label={ __( 'This value is overridden by another style', 'elementor' ) }
+				variant="overridden"
+			/>
+		);
+	}
+
+	return <Circle aria-label={ __( 'This has value from another style', 'elementor' ) } />;
+};