@elementor/editor-editing-panel 0.19.0 → 1.0.0

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+import { EyeIcon, EyeOffIcon, ExpandBottomIcon } from '@elementor/icons';
+import { ToggleButtonGroupItem, ToggleControl } from '../../../controls';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+type Overflows = 'visible' | 'hidden' | 'auto';
+
+const options: ToggleButtonGroupItem< Overflows >[] = [
+	{
+		value: 'visible',
+		label: __( 'Visible', 'elementor' ),
+		icon: EyeIcon,
+		showTooltip: true,
+	},
+	{
+		value: 'hidden',
+		label: __( 'Hidden', 'elementor' ),
+		icon: EyeOffIcon,
+		showTooltip: true,
+	},
+	{
+		value: 'auto',
+		label: __( 'Auto', 'elementor' ),
+		icon: ExpandBottomIcon,
+		showTooltip: true,
+	},
+];
+
+export const OverflowField = () => {
+	return (
+		<StylesField bind={ 'overflow' }>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Overflow', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+					<ToggleControl options={ options } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Divider, Grid, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { OverflowField } from './overflow-field';
+import { AccordionSection } from '../../accordion-section';
+import { StylesField, StylesFieldProps } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+import { SizeControl } from '../../../controls';
+
+export const SizeSection = () => {
+	return (
+		<AccordionSection title={ __( 'Size', 'elementor' ) }>
+			<Stack gap={ 1.5 }>
+				<Grid container spacing={ 2 }>
+					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } />
+					<SizeField bind="height" label={ __( 'Height', 'elementor' ) } />
+				</Grid>
+				<Grid container spacing={ 2 }>
+					<SizeField bind="min-width" label={ __( 'Min. Width', 'elementor' ) } />
+					<SizeField bind="min-height" label={ __( 'Min. Height', 'elementor' ) } />
+				</Grid>
+				<Grid container spacing={ 2 }>
+					<SizeField bind="max-width" label={ __( 'Max. Width', 'elementor' ) } />
+					<SizeField bind="max-height" label={ __( 'Max. Height', 'elementor' ) } />
+				</Grid>
+				<Divider />
+				<Stack>
+					<OverflowField />
+				</Stack>
+			</Stack>
+		</AccordionSection>
+	);
+};
+
+type ControlProps = {
+	bind: StylesFieldProps[ 'bind' ];
+	label: string;
+};
+
+const SizeField = ( { label, bind }: ControlProps ) => {
+	return (
+		<Grid item xs={ 6 }>
+			<StylesField bind={ bind }>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ label }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<SizeControl />
+					</Grid>
+				</Grid>
+			</StylesField>
+		</Grid>
+	);
+};

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

@@ -2,20 +2,20 @@ import * as React from 'react';
 import { AccordionSection } from '../../accordion-section';
 import { Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { LinkedDimensionsControl } from './linked-dimensions-control';
-import { StyleControl } from '../../../controls/style-control';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { LinkedDimensionsControl } from '../../../controls/controls/linked-dimensions-control';
 
 export const SpacingSection = () => {
 	return (
 		<AccordionSection title={ __( 'Spacing', 'elementor' ) }>
 			<Stack gap={ 1.5 }>
-				<StyleControl bind={ 'padding' }>
+				<StylesField bind={ 'padding' }>
 					<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
-				</StyleControl>
+				</StylesField>
 				<Divider />
-				<StyleControl bind={ 'margin' }>
+				<StylesField bind={ 'margin' }>
 					<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
-				</StyleControl>
+				</StylesField>
 			</Stack>
 		</AccordionSection>
 	);

package/src/components/style-sections/typography-section/font-size-field.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { SizeControl } from '../../../controls';
+import { ControlLabel } from '../../control-label';
+
+export const FontSizeField = () => {
+	return (
+		<StylesField bind="font-size">
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Font Size', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/typography-section/{font-weight-control.tsx → font-weight-field.tsx}

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { SelectControl } from '../../../controls/control-types/select-control';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { SelectControl } from '../../../controls';
+import { ControlLabel } from '../../control-label';
 
 const fontWeightOptions = [
 	{ label: __( 'Light - 400', 'elementor' ), value: '400' },
@@ -12,17 +13,17 @@ const fontWeightOptions = [
 	{ label: __( 'Black - 900', 'elementor' ), value: '900' },
 ];
 
-export const FontWeightControl = () => {
+export const FontWeightField = () => {
 	return (
-		<StyleControl bind="font-weight">
+		<StylesField bind="font-weight">
 			<Grid container spacing={ 1 } alignItems="center">
 				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Font Weight', 'elementor' ) }</StyleControl.Label>
+					<ControlLabel>{ __( 'Font Weight', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<SelectControl options={ fontWeightOptions } />
 				</Grid>
 			</Grid>
-		</StyleControl>
+		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/letter-spacing-field.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { SizeControl } from '../../../controls';
+import { ControlLabel } from '../../control-label';
+
+export const LetterSpacingField = () => {
+	return (
+		<StylesField bind="letter-spacing">
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Letter Spacing', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/typography-section/{text-alignment-control.tsx → text-alignment-field.tsx}

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Grid } from '@elementor/ui';
 import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifiedIcon } from '@elementor/icons';
-import { ToggleButtonGroupItem } from '../../../controls/components/control-toggle-button-group';
-import { StyleControl } from '../../../controls/style-control';
-import { ToggleControl } from '../../../controls/control-types/toggle-control';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ToggleControl, ToggleButtonGroupItem } from '../../../controls';
+import { ControlLabel } from '../../control-label';
 
 type Alignments = 'left' | 'center' | 'right' | 'justify';
 
@@ -31,17 +31,17 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 	},
 ];
 
-export const TextAlignmentControl = () => {
+export const TextAlignmentField = () => {
 	return (
-		<StyleControl bind={ 'text-align' }>
+		<StylesField bind={ 'text-align' }>
 			<Grid container spacing={ 1 } alignItems="center">
 				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Alignment', 'elementor' ) }</StyleControl.Label>
+					<ControlLabel>{ __( 'Alignment', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 } display="flex" justifyContent="end">
 					<ToggleControl options={ options } />
 				</Grid>
 			</Grid>
-		</StyleControl>
+		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/text-color-field.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ColorControl } from '../../../controls';
+import { ControlLabel } from '../../control-label';
+
+export const TextColorField = () => {
+	return (
+		<StylesField bind="color">
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Text Color', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<ColorControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/typography-section/{text-direction-control.tsx → text-direction-field.tsx}

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Grid } from '@elementor/ui';
 import { TextDirectionLtrIcon, TextDirectionRtlIcon } from '@elementor/icons';
-import { ToggleButtonGroupItem } from '../../../controls/components/control-toggle-button-group';
-import { StyleControl } from '../../../controls/style-control';
-import { ToggleControl } from '../../../controls/control-types/toggle-control';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ToggleControl, ToggleButtonGroupItem } from '../../../controls';
+import { ControlLabel } from '../../control-label';
 
 type Direction = 'ltr' | 'rtl';
 
@@ -21,17 +21,17 @@ const options: ToggleButtonGroupItem< Direction >[] = [
 	},
 ];
 
-export const TextDirectionControl = () => {
+export const TextDirectionField = () => {
 	return (
-		<StyleControl bind={ 'direction' }>
+		<StylesField bind={ 'direction' }>
 			<Grid container spacing={ 1 } alignItems="center">
 				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Direction', 'elementor' ) }</StyleControl.Label>
+					<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 } display="flex" justifyContent="end">
 					<ToggleControl options={ options } />
 				</Grid>
 			</Grid>
-		</StyleControl>
+		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/text-stroke-field.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { CollapsibleField } from '../../collapsible-field';
+import { ControlLabel } from '../../control-label';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { StrokeControl } from '../../../controls';
+
+export const TextStrokeField = () => {
+	return (
+		<StylesField bind="-webkit-text-stroke">
+			<CollapsibleField label={ <ControlLabel>{ __( 'Text Stroke', 'elementor' ) }</ControlLabel> }>
+				<StrokeControl />
+			</CollapsibleField>
+		</StylesField>
+	);
+};

package/src/components/style-sections/typography-section/{text-style-control.tsx → text-style-field.tsx}

@@ -3,13 +3,13 @@ import { __ } from '@wordpress/i18n';
 import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, ToggleButtonProps } from '@elementor/ui';
 import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
 import { ControlLabel } from '../../control-label';
-import { useStyleControl } from '../../../controls/hooks/use-style-control';
+import { useStylesField } from '../../../hooks/use-styles-field';
 
 const buttonSize = 'tiny';
 
-export const TextStyleControl = () => {
-	const [ fontStyle, setFontStyle ] = useStyleControl< string | null >( 'font-style' );
-	const [ textDecoration, setTextDecoration ] = useStyleControl< string | null >( 'text-decoration' );
+export const TextStyleField = () => {
+	const [ fontStyle, setFontStyle ] = useStylesField< string | null >( 'font-style' );
+	const [ textDecoration, setTextDecoration ] = useStylesField< string | null >( 'text-decoration' );
 
 	const formats = [ fontStyle, ...( textDecoration || '' ).split( ' ' ) ];
 

package/src/components/style-sections/typography-section/{transform-control.tsx → transform-field.tsx}

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Grid } from '@elementor/ui';
 import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from '@elementor/icons';
-import { StyleControl } from '../../../controls/style-control';
-import { ToggleControl } from '../../../controls/control-types/toggle-control';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ToggleControl } from '../../../controls';
+import { ControlLabel } from '../../control-label';
 
 const options = [
 	{ value: 'capitalize', label: __( 'Capitalize', 'elementor' ), icon: LetterCaseIcon },
@@ -11,15 +12,15 @@ const options = [
 	{ value: 'lowercase', label: __( 'Lowercase', 'elementor' ), icon: LetterCaseLowerIcon },
 ];
 
-export const TransformControl = () => (
-	<StyleControl bind={ 'text-transform' }>
+export const TransformField = () => (
+	<StylesField bind={ 'text-transform' }>
 		<Grid container spacing={ 1 } alignItems="center">
 			<Grid item xs={ 6 }>
-				<StyleControl.Label>{ __( 'Transform', 'elementor' ) }</StyleControl.Label>
+				<ControlLabel>{ __( 'Transform', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item xs={ 6 } display="flex" justifyContent="end">
 				<ToggleControl options={ options } />
 			</Grid>
 		</Grid>
-	</StyleControl>
+	</StylesField>
 );

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

@@ -1,35 +1,37 @@
 import * as React from 'react';
 import { AccordionSection } from '../../accordion-section';
 import { Divider, Stack } from '@elementor/ui';
-import { TextStyleControl } from './text-style-control';
+import { TextStyleField } from './text-style-field';
 import { __ } from '@wordpress/i18n';
-import { FontSizeControl } from './font-size-control';
-import { FontWeightControl } from './font-weight-control';
-import { TextColorControl } from './text-color-control';
-import { LetterSpacingControl } from './letter-spacing-control';
-import { WordSpacingControl } from './word-spacing-control';
+import { FontSizeField } from './font-size-field';
+import { FontWeightField } from './font-weight-field';
+import { TextColorField } from './text-color-field';
+import { LetterSpacingField } from './letter-spacing-field';
+import { WordSpacingField } from './word-spacing-field';
 import { CollapsibleContent } from '../../collapsible-content';
-import { TransformControl } from './transform-control';
-import { TextAlignmentControl } from './text-alignment-control';
-import { TextDirectionControl } from './text-direction-control';
+import { TransformField } from './transform-field';
+import { TextAlignmentField } from './text-alignment-field';
+import { TextDirectionField } from './text-direction-field';
+import { TextStrokeField } from './text-stroke-field';
 
 export const TypographySection = () => {
 	return (
 		<AccordionSection title={ __( 'Typography', 'elementor' ) }>
 			<Stack gap={ 1.5 }>
-				<FontWeightControl />
-				<FontSizeControl />
+				<FontWeightField />
+				<FontSizeField />
 				<Divider />
-				<TextColorControl />
+				<TextColorField />
 				<CollapsibleContent>
 					<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
-						<LetterSpacingControl />
-						<WordSpacingControl />
+						<LetterSpacingField />
+						<WordSpacingField />
 						<Divider />
-						<TextAlignmentControl />
-						<TextStyleControl />
-						<TransformControl />
-						<TextDirectionControl />
+						<TextAlignmentField />
+						<TextStyleField />
+						<TransformField />
+						<TextDirectionField />
+						<TextStrokeField />
 					</Stack>
 				</CollapsibleContent>
 			</Stack>

package/src/components/style-sections/typography-section/word-spacing-field.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { SizeControl } from '../../../controls';
+import { ControlLabel } from '../../control-label';
+
+export const WordSpacingField = () => {
+	return (
+		<StylesField bind="word-spacing">
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Word Spacing', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-tab.tsx

@@ -1,37 +1,61 @@
 import * as React from 'react';
-import { StyleContext } from '../contexts/style-context';
-import { useElement } from '../controls/providers/element-provider';
-import { useElementStyles } from '../hooks/use-element-styles';
+import { useState } from 'react';
 import { Stack } from '@elementor/ui';
-import { SizeSection } from './style-sections/size-section';
+import { generateId, StyleDefinition } from '@elementor/editor-styles';
+import { useActiveBreakpoint } from '@elementor/editor-responsive';
+import { getElementStyles, getElementSetting } from '@elementor/editor-elements';
+import { StyleProvider } from '../contexts/style-context';
+import { SizeSection } from './style-sections/size-section/size-section';
 import { TypographySection } from './style-sections/typography-section/typography-section';
 import { PositionSection } from './style-sections/position-section/position-section';
-import { StyleDefinition } from '@elementor/editor-style';
 import { SpacingSection } from './style-sections/spacing-section/spacing-section';
 import { EffectsSection } from './style-sections/effects-section/effects-section';
 import { BackgroundSection } from './style-sections/background-section/background-section';
+import { BorderSection } from './style-sections/border-section/border-section';
+import { useElement } from '../contexts/element-context';
+import { ClassesPropValue, PropKey } from '@elementor/editor-props';
+import { ClassesPropProvider } from '../contexts/classes-prop-context';
 
 const CLASSES_PROP_KEY = 'classes';
 
 export const StyleTab = () => {
-	const styleDefinition = useStyleDefinition();
-	const classesProp = useClassesProp();
+	const currentClassesProp = useCurrentClassesProp();
+	const [ selectedStyleDefId ] = useSelectedStyleDefId( currentClassesProp );
+	const breakpoint = useActiveBreakpoint();
 
 	return (
-		<StyleContext selectedStyleDef={ styleDefinition } selectedClassesProp={ classesProp }>
-			<Stack>
-				<SizeSection />
-				<PositionSection />
-				<TypographySection />
-				<BackgroundSection />
-				<SpacingSection />
-				<EffectsSection />
-			</Stack>
-		</StyleContext>
+		<ClassesPropProvider prop={ currentClassesProp }>
+			<StyleProvider meta={ { breakpoint, state: null } } id={ selectedStyleDefId }>
+				<Stack>
+					<SpacingSection />
+					<SizeSection />
+					<PositionSection />
+					<TypographySection />
+					<BackgroundSection />
+					<BorderSection />
+					<EffectsSection />
+				</Stack>
+			</StyleProvider>
+		</ClassesPropProvider>
 	);
 };
 
-function useClassesProp(): string {
+function useSelectedStyleDefId( currentClassesProp: PropKey ) {
+	const { element } = useElement();
+
+	const [ selectedStyleDefId, setSelectedStyleDefId ] = useState< StyleDefinition[ 'id' ] >( () => {
+		const styleIds = getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value ?? [];
+		const stylesDefs = getElementStyles( element.id ) ?? {};
+
+		return (
+			styleIds.find( ( id ) => id in stylesDefs ) ?? generateId( `e-${ element.id }-`, Object.keys( stylesDefs ) )
+		);
+	} );
+
+	return [ selectedStyleDefId, setSelectedStyleDefId ] as const;
+}
+
+function useCurrentClassesProp(): string {
 	const { elementType } = useElement();
 
 	const prop = Object.entries( elementType.propsSchema ).find(
@@ -44,10 +68,3 @@ function useClassesProp(): string {
 
 	return prop[ 0 ];
 }
-
-function useStyleDefinition(): StyleDefinition | null {
-	const { element } = useElement();
-	const elementStyles = useElementStyles( element.id );
-
-	return Object.values( elementStyles || {} )[ 0 ] ?? null;
-}

package/src/contexts/classes-prop-context.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+type ContextValue = {
+	prop: string;
+};
+
+const Context = createContext< ContextValue | null >( null );
+
+type Props = PropsWithChildren< ContextValue >;
+
+export function ClassesPropProvider( { children, prop }: Props ) {
+	return <Context.Provider value={ { prop } }>{ children }</Context.Provider>;
+}
+
+export function useClassesProp() {
+	const context = useContext( Context );
+
+	if ( ! context ) {
+		throw new Error( 'useClassesProp must be used within a ClassesPropProvider' );
+	}
+
+	return context.prop;
+}

package/src/{controls/providers/element-provider.tsx → contexts/element-context.tsx}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { createContext, ReactNode, useContext } from 'react';
-import { Element, ElementType } from '../types';
+import { createContext, PropsWithChildren, useContext } from 'react';
+import { ElementType, Element } from '@elementor/editor-elements';
 
 type ContextValue = {
 	element: Element;
@@ -9,11 +9,7 @@ type ContextValue = {
 
 const Context = createContext< ContextValue | null >( null );
 
-type Props = {
-	element: Element;
-	children?: ReactNode;
-	elementType: ElementType;
-};
+type Props = PropsWithChildren< ContextValue >;
 
 export function ElementProvider( { children, element, elementType }: Props ) {
 	return <Context.Provider value={ { element, elementType } }>{ children }</Context.Provider>;

package/src/contexts/style-context.tsx

@@ -1,35 +1,21 @@
 import * as React from 'react';
-import { createContext, ReactNode, useContext } from 'react';
-import { useActiveBreakpoint } from '@elementor/editor-responsive';
-import { StyleDefinition, StyleVariant } from '@elementor/editor-style';
+import { createContext, PropsWithChildren, useContext } from 'react';
+import { StyleDefinition, StyleVariant } from '@elementor/editor-styles';
 
 type ContextValue = {
-	selectedStyleDef: StyleDefinition | null;
-	selectedMeta: StyleVariant[ 'meta' ];
-	selectedClassesProp: string;
+	id: StyleDefinition[ 'id' ];
+	meta: StyleVariant[ 'meta' ];
 };
 
 const Context = createContext< ContextValue | null >( null );
 
-type Props = {
-	children: ReactNode;
-	selectedStyleDef: StyleDefinition | null;
-	selectedClassesProp: string;
-};
-
-export function StyleContext( { children, selectedStyleDef, selectedClassesProp }: Props ) {
-	const breakpoint = useActiveBreakpoint();
-	// TODO: Handle state when we support it.
-	const selectedMeta = { breakpoint, state: null } as const;
+type Props = PropsWithChildren< ContextValue >;
 
-	return (
-		<Context.Provider value={ { selectedStyleDef, selectedMeta, selectedClassesProp } }>
-			{ children }
-		</Context.Provider>
-	);
+export function StyleProvider( { children, id, meta }: Props ) {
+	return <Context.Provider value={ { id, meta } }>{ children }</Context.Provider>;
 }
 
-export function useStyleContext() {
+export function useStyle() {
 	const context = useContext( Context );
 
 	if ( ! context ) {

package/src/control-replacement.tsx

@@ -1,3 +1,3 @@
-import { createControlReplacement } from './controls/create-control-replacement';
+import { createControlReplacement } from './controls';
 
 export const { replaceControl, getControlReplacement } = createControlReplacement();