@elementor/editor-editing-panel 1.18.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.18.0",
+  "version": "1.19.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.0",
     "@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/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/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' ) } />;
+};