@elementor/editor-editing-panel 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "^0.16.0",
-    "@elementor/editor-elements": "^0.2.0",
-    "@elementor/editor-props": "^0.2.0",
-    "@elementor/editor-panels": "^0.9.0",
-    "@elementor/editor-responsive": "^0.12.2",
-    "@elementor/editor-styles": "^0.2.0",
-    "@elementor/editor-v1-adapters": "^0.8.3",
-    "@elementor/icons": "^1.18.1",
+    "@elementor/editor": "^0.17.0",
+    "@elementor/editor-controls": "^0.1.0",
+    "@elementor/editor-elements": "^0.3.0",
     "@elementor/menus": "^0.1.1",
-    "@elementor/ui": "^1.21.7",
-    "@elementor/utils": "^0.2.2",
-    "@elementor/wp-media": "^0.2.1",
+    "@elementor/editor-props": "^0.3.0",
+    "@elementor/editor-panels": "^0.10.0",
+    "@elementor/editor-responsive": "^0.12.2",
+    "@elementor/editor-styles": "^0.2.1",
+    "@elementor/editor-v1-adapters": "^0.8.4",
+    "@elementor/icons": "^1.19.0",
+    "@elementor/ui": "^1.21.13",
+    "@elementor/utils": "^0.3.0",
     "@wordpress/i18n": "^4.45.0"
   },
   "peerDependencies": {

package/src/components/add-or-remove-content.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
+import { ControlLabel } from '@elementor/editor-controls';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { Collapse, IconButton, Stack } from '@elementor/ui';
-import { ControlLabel } from './control-label';
 
 const SIZE = 'tiny';
 
@@ -34,7 +34,7 @@ export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children
 					</IconButton>
 				) }
 			</Stack>
-			<Collapse in={ isAdded }>
+			<Collapse in={ isAdded } unmountOnExit>
 				<Stack gap={ 1.5 }>{ children }</Stack>
 			</Collapse>
 		</Stack>

package/src/components/collapse-icon.tsx

@@ -0,0 +1,12 @@
+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,
+	} ),
+} ) );

package/src/components/collapsible-content.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { ChevronDownIcon } from '@elementor/icons';
-import { Button, Collapse, Stack, styled } from '@elementor/ui';
+import { Button, Collapse, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { CollapseIcon } from './collapse-icon';
+
 type CollapsibleContentProps = React.PropsWithChildren< {
 	defaultOpen?: boolean;
 } >;
@@ -23,23 +24,13 @@ export const CollapsibleContent = ( { children, defaultOpen = false }: Collapsib
 				color="secondary"
 				variant="outlined"
 				onClick={ handleToggle }
-				endIcon={ <ChevronIcon open={ open } /> }
+				endIcon={ <CollapseIcon open={ open } /> }
 			>
 				{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
 			</Button>
-			<Collapse in={ open } timeout="auto">
+			<Collapse in={ open } timeout="auto" unmountOnExit>
 				{ children }
 			</Collapse>
 		</Stack>
 	);
 };
-
-// TODO: Replace this with future Rotate component that will be implemented in elementor-ui
-const ChevronIcon = styled( ChevronDownIcon, {
-	shouldForwardProp: ( prop ) => prop !== 'open',
-} )< { open: boolean } >( ( { theme, open } ) => ( {
-	transform: open ? 'rotate(180deg)' : 'rotate(0)',
-	transition: theme.transitions.create( 'transform', {
-		duration: theme.transitions.duration.standard,
-	} ),
-} ) );

package/src/components/collapsible-field.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { __ } from '@wordpress/i18n';
-import { Collapse, IconButton, Stack } from '@elementor/ui';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
+import { Collapse, IconButton, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 type CollapsibleFieldProps = React.PropsWithChildren< {
 	label: React.ReactNode;
@@ -28,7 +28,9 @@ export const CollapsibleField = ( { label, children, defaultOpen = false }: Coll
 					{ open ? <MinusIcon fontSize="tiny" /> : <PlusIcon fontSize="tiny" /> }
 				</IconButton>
 			</Stack>
-			<Collapse in={ open }>{ children }</Collapse>
+			<Collapse in={ open } unmountOnExit>
+				{ children }
+			</Collapse>
 		</Stack>
 	);
 };

package/src/components/css-class-selector-section.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
+import { type ClassesPropValue } from '@elementor/editor-props';
+import { Chip, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useClassesProp } from '../contexts/classes-prop-context';
+import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
+import { MultiCombobox, type Option } from './multi-combobox';
+
+const ID = 'elementor-css-class-selector';
+const TAGS_LIMIT = 8;
+
+export function CssClassSelectorSection() {
+	const options = useOptions();
+
+	const { id: activeId, setId: setActiveId } = useStyle();
+	const appliedIds = useAppliedClassesIds();
+
+	const applied = options.filter( ( option ) => appliedIds.includes( option.value ) );
+	const active = options.find( ( option ) => option.value === activeId ) || null;
+
+	return (
+		<Stack gap={ 1 } p={ 2 }>
+			<Typography component="label" variant="caption" htmlFor={ ID }>
+				{ __( 'CSS Classes', 'elementor' ) }
+			</Typography>
+			<MultiCombobox
+				id={ ID }
+				size="tiny"
+				options={ options }
+				selected={ applied }
+				limitTags={ TAGS_LIMIT }
+				optionsLabel={ __( 'Global CSS Classes', 'elementor' ) }
+				renderTags={ ( tagValue, getTagProps ) =>
+					tagValue.map( ( option, index ) => {
+						const chipProps = getTagProps( { index } );
+
+						return (
+							<Chip
+								{ ...chipProps }
+								key={ chipProps.key }
+								size="small"
+								label={ option.label }
+								variant={ option.value === active?.value ? 'filled' : 'standard' }
+								color={ option.color ?? 'default' }
+								onClick={ () => setActiveId( option.value ) }
+								onDelete={ null }
+							/>
+						);
+					} )
+				}
+			/>
+		</Stack>
+	);
+}
+
+function useAppliedClassesIds() {
+	const { element } = useElement();
+	const currentClassesProp = useClassesProp();
+
+	return useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+}
+
+function useOptions() {
+	const { element } = useElement();
+
+	const styleDefs = useElementStyles( element.id );
+
+	return Object.values( styleDefs ).map< Option >( ( styleDef ) => ( {
+		label: styleDef.label,
+		value: styleDef.id,
+		color: 'primary',
+	} ) );
+}

package/src/components/editing-panel-hooks.tsx

@@ -1,7 +1,9 @@
+import { useCloseEditorPanel } from '../hooks/use-close-editor-panel';
 import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';
 
 export const EditingPanelHooks = () => {
 	useOpenEditorPanel();
+	useCloseEditorPanel();
 
 	return null;
 };

package/src/components/editing-panel-tabs.tsx

@@ -1,26 +1,36 @@
-import { Stack, Tabs, Tab, TabPanel, useTabs } from '@elementor/ui';
 import * as React from 'react';
+import { Fragment } from 'react';
+import { Divider, Stack, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
+
+import { useElement } from '../contexts/element-context';
 import { SettingsTab } from './settings-tab';
 import { StyleTab } from './style-tab';
 
 type TabValue = 'settings' | 'style';
 
 export const EditingPanelTabs = () => {
+	const { element } = useElement();
+
 	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );
 
 	return (
-		<Stack direction="column" sx={ { width: '100%' } }>
-			<Tabs variant="fullWidth" indicatorColor="secondary" textColor="inherit" { ...getTabsProps() }>
-				<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
-				<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
-			</Tabs>
-			<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
-				<SettingsTab />
-			</TabPanel>
-			<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
-				<StyleTab />
-			</TabPanel>
-		</Stack>
+		// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
+		// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
+		<Fragment key={ element.id }>
+			<Stack direction="column" sx={ { width: '100%' } }>
+				<Tabs variant="fullWidth" indicatorColor="secondary" textColor="inherit" { ...getTabsProps() }>
+					<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
+					<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
+				</Tabs>
+				<Divider />
+				<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
+					<SettingsTab />
+				</TabPanel>
+				<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
+					<StyleTab />
+				</TabPanel>
+			</Stack>
+		</Fragment>
 	);
 };

package/src/components/editing-panel.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlActionsProvider, ControlReplacementProvider } from '@elementor/editor-controls';
 import { useSelectedElement } from '@elementor/editor-elements';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import { EditingPanelTabs } from './editing-panel-tabs';
-import { ControlActionsProvider, ControlReplacementProvider } from '../controls';
-import { getControlReplacement } from '../control-replacement';
 import { ErrorBoundary } from '@elementor/ui';
-import { EditorPanelErrorFallback } from './editing-panel-error-fallback';
+import { __ } from '@wordpress/i18n';
+
 import { ElementProvider } from '../contexts/element-context';
-import { useMenuItems } from '../controls-actions';
+import { getControlReplacement } from '../control-replacement';
+import { controlActionsMenu } from '../controls-actions';
+import { EditorPanelErrorFallback } from './editing-panel-error-fallback';
+import { EditingPanelTabs } from './editing-panel-tabs';
+
+const { useMenuItems } = controlActionsMenu;
 
 export const EditingPanel = () => {
 	const { element, elementType } = useSelectedElement();

package/src/components/multi-combobox/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './multi-combobox';
+export * from './use-combobox-actions';

package/src/components/multi-combobox/multi-combobox.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import {
+	Autocomplete,
+	type AutocompleteProps,
+	type AutocompleteRenderGroupParams,
+	Box,
+	Chip,
+	styled,
+	TextField,
+} from '@elementor/ui';
+import { type FilterOptionsState } from '@mui/base';
+
+import { type ActionOption, type Actions, type Option } from './types';
+import { useComboboxActions } from './use-combobox-actions';
+
+type Props = Omit< AutocompleteProps< Option, true, true, true >, 'renderInput' | 'getLimitTagsText' > & {
+	actions?: Actions;
+	selected: Option[];
+	options: Option[];
+	optionsLabel?: string;
+	onApply?: ( value: Option[] ) => void;
+	onCreate?: ( value: string ) => void;
+};
+
+export const MultiCombobox = ( {
+	actions = {},
+	selected,
+	options,
+	optionsLabel,
+	onApply,
+	onCreate,
+	...props
+}: Props ) => {
+	const { action: actionProps, option: optionProps } = useComboboxActions( selected, actions, optionsLabel, onApply );
+
+	const handleSelectOption = ( values: Array< ActionOption | Option | string > ) => {
+		const action = values.find( ( value ) => actionProps.is( value as ActionOption ) );
+
+		if ( action ) {
+			return actionProps.onChange( action as ActionOption );
+		}
+
+		return optionProps.onChange( values as Option[] );
+	};
+
+	const handleCreateOption = ( values: Array< ActionOption | Option | string > ) => {
+		const value = values.find( ( option ) => typeof option === 'string' );
+
+		onCreate?.( value as string );
+	};
+
+	return (
+		<Autocomplete
+			{ ...props }
+			freeSolo
+			multiple
+			clearOnBlur
+			selectOnFocus
+			disableClearable
+			handleHomeEndKeys
+			value={ selected }
+			options={ options }
+			renderGroup={ renderGroup }
+			renderInput={ ( params ) => <TextField { ...params } /> }
+			getLimitTagsText={ ( more ) => <Chip size="tiny" variant="standard" label={ `+${ more }` } clickable /> }
+			onChange={ ( _, values, reason ) => {
+				if ( reason === 'selectOption' ) {
+					return handleSelectOption( values );
+				}
+
+				if ( reason === 'createOption' ) {
+					return handleCreateOption( values );
+				}
+
+				onApply?.( values as ActionOption[] );
+			} }
+			getOptionLabel={ ( option ) => {
+				if ( optionProps.is( option as ActionOption ) ) {
+					return optionProps.getLabel( option as Option );
+				}
+
+				return actionProps.getLabel( option as ActionOption ) ?? '';
+			} }
+			filterOptions={ ( optionList: Option[], params: FilterOptionsState< ActionOption | Option > ) => {
+				const filteredoptions = optionProps.getFilteredOptions( optionList, params );
+
+				const actionOptions = actionProps.getFilteredActions( optionList, params );
+
+				return [ ...actionOptions, ...filteredoptions ];
+			} }
+			groupBy={ ( option ) =>
+				( optionProps.is( option ) ? optionProps.groupBy() : actionProps.groupBy( option ) ) ?? ''
+			}
+		/>
+	);
+};
+
+export const renderGroup = ( params: AutocompleteRenderGroupParams ) => (
+	<Group key={ params.key }>
+		<GroupHeader>{ params.group }</GroupHeader>
+		<GroupItems>{ params.children }</GroupItems>
+	</Group>
+);
+
+const Group = styled( 'li' )`
+	&:not( :last-of-type ) {
+		border-bottom: 1px solid ${ ( { theme } ) => theme.palette.divider };
+	}
+`;
+
+const GroupHeader = styled( Box )( ( { theme } ) => ( {
+	position: 'sticky',
+	top: '-8px',
+	padding: theme.spacing( 1, 2 ),
+	color: theme.palette.text.tertiary,
+} ) );
+
+const GroupItems = styled( 'ul' )`
+	padding: 0;
+`;

package/src/components/multi-combobox/types.ts

@@ -0,0 +1,26 @@
+export type Option = {
+	label: string;
+	value: string;
+	color?: 'primary' | 'global';
+};
+
+export type Action = {
+	getLabel: ( inputValue: string ) => string;
+	apply: ( value: string ) => void;
+	condition: ( options: Option[], inputValue: string ) => boolean;
+};
+
+export type ActionsGroup = {
+	label: string;
+	actions: Action[];
+};
+
+export type ActionOption = Option & {
+	action: {
+		groupLabel: string;
+		apply: Action[ 'apply' ];
+		getLabel: Action[ 'getLabel' ];
+	};
+};
+
+export type Actions = Record< string, ActionsGroup >;

package/src/components/multi-combobox/use-combobox-actions.ts

@@ -0,0 +1,62 @@
+import { createFilterOptions } from '@elementor/ui';
+import { type FilterOptionsState } from '@mui/base';
+
+import { type Action, type ActionOption, type Actions, type Option } from './types';
+
+export const useComboboxActions = (
+	applied: Option[],
+	actions: Actions,
+	optionsLabel?: string,
+	onApply?: ( value: Option[] ) => void
+) => ( {
+	action: {
+		is: ( opt: ActionOption ): opt is ActionOption => !! opt.action,
+		getLabel: ( option: ActionOption ) => option.action.getLabel( option.label ),
+		groupBy: ( option: ActionOption ) => option.action.groupLabel,
+		onChange: ( { action, label }: ActionOption ) => action?.apply( label ),
+		getFilteredActions: ( optionList: Option[], params: FilterOptionsState< ActionOption > ) => {
+			const actionGroups = Object.values( actions );
+
+			return actionGroups.reduce< Option[] >( ( groups, group ) => {
+				const actionOptions = group.actions.reduce< Option[] >( ( groupActions, action ) => {
+					const shouldShowAction = action.condition( optionList, params.inputValue );
+
+					if ( shouldShowAction ) {
+						const actionOption = createActionOption( group.label, action, params.inputValue );
+						groupActions.unshift( actionOption );
+					}
+
+					return groupActions;
+				}, [] );
+
+				return [ ...groups, ...actionOptions ];
+			}, [] );
+		},
+	},
+	option: {
+		is: ( opt: ActionOption | Option ): opt is Option => ! ( 'action' in opt ),
+		getLabel: ( option: Option ) => option.label,
+		groupBy: () => optionsLabel ?? '',
+		onChange: ( optionValues: Option[] ) => onApply?.( optionValues ),
+		getFilteredOptions: ( optionList: Option[], params: FilterOptionsState< Option > ) => {
+			const appliedValues = applied.map( ( option ) => option.value );
+
+			const optionsWithoutApplied = optionList.filter( ( option ) => ! appliedValues.includes( option.value ) );
+
+			return filter( optionsWithoutApplied, params );
+		},
+	},
+} );
+
+// Helper functions.
+const filter = createFilterOptions< Option >();
+
+const createActionOption = ( groupLabel: string, action: Action, inputValue: string ): ActionOption => ( {
+	value: '',
+	label: inputValue,
+	action: {
+		groupLabel,
+		apply: action.apply,
+		getLabel: action.getLabel,
+	},
+} );

package/src/components/section.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type PropsWithChildren, useId, useState } from 'react';
+import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
+
+import { CollapseIcon } from './collapse-icon';
+
+type Props = PropsWithChildren< {
+	title: string;
+	defaultExpanded?: boolean;
+} >;
+
+export function Section( { title, children, defaultExpanded = false }: Props ) {
+	const [ isOpen, setIsOpen ] = useState( !! defaultExpanded );
+
+	const id = useId();
+	const labelId = `label-${ id }`;
+	const contentId = `content-${ id }`;
+
+	return (
+		<>
+			<ListItemButton
+				id={ labelId }
+				aria-controls={ contentId }
+				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+			>
+				<ListItemText secondary={ title } />
+				<CollapseIcon open={ isOpen } color="secondary" />
+			</ListItemButton>
+			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto" unmountOnExit>
+				<Stack gap={ 2.5 } p={ 2 }>
+					{ children }
+				</Stack>
+			</Collapse>
+			<Divider />
+		</>
+	);
+}

package/src/components/sections-list.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { List, type ListProps } from '@elementor/ui';
+
+export function SectionsList( props: ListProps ) {
+	return <List disablePadding component="div" { ...props } />;
+}

package/src/components/settings-tab.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
-import { Stack } from '@elementor/ui';
+import { ControlLabel } from '@elementor/editor-controls';
 import { type Control } from '@elementor/editor-elements';
-import { SettingsField } from '../controls-registry/settings-field';
-import { AccordionSection } from './accordion-section';
+
+import { useElement } from '../contexts/element-context';
 import { Control as BaseControl } from '../controls-registry/control';
-import { ControlType, getControlByType } from '../controls-registry/controls-registry';
 import { ControlTypeContainer } from '../controls-registry/control-type-container';
-import { ControlLabel } from './control-label';
-import { useElement } from '../contexts/element-context';
+import { type ControlType, getControlByType } from '../controls-registry/controls-registry';
+import { SettingsField } from '../controls-registry/settings-field';
+import { Section } from './section';
+import { SectionsList } from './sections-list';
 
 export const SettingsTab = () => {
 	const { elementType } = useElement();
 
 	return (
-		<Stack>
+		<SectionsList>
 			{ elementType.controls.map( ( { type, value }, index ) => {
 				if ( type === 'control' ) {
 					return <Control key={ value.bind } control={ value } />;
@@ -21,7 +22,7 @@ export const SettingsTab = () => {
 
 				if ( type === 'section' ) {
 					return (
-						<AccordionSection key={ type + '.' + index } title={ value.label } defaultExpanded>
+						<Section title={ value.label } key={ type + '.' + index } defaultExpanded={ true }>
 							{ value.items?.map( ( item ) => {
 								if ( item.type === 'control' ) {
 									return <Control key={ item.value.bind } control={ item.value } />;
@@ -30,17 +31,16 @@ export const SettingsTab = () => {
 								// TODO: Handle 2nd level sections
 								return null;
 							} ) }
-						</AccordionSection>
+						</Section>
 					);
 				}
 
 				return null;
 			} ) }
-		</Stack>
+		</SectionsList>
 	);
 };
 
-// TODO: Create control wrapper by type for different layouts.
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 	if ( ! getControlByType( control.type as ControlType ) ) {
 		return null;

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

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

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

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { BackgroundOverlayRepeaterControl } from '@elementor/editor-controls';
 import { Stack } from '@elementor/ui';
-import { AccordionSection } from '../../accordion-section';
+
+import { StylesField } from '../../../controls-registry/styles-field';
 import { BackgroundColorField } from './background-color-field';
 
 export const BackgroundSection = () => {
 	return (
-		<AccordionSection title={ __( 'Background', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<BackgroundColorField />
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<StylesField bind="background-image">
+				<BackgroundOverlayRepeaterControl />
+			</StylesField>
+			<BackgroundColorField />
+		</Stack>
 	);
 };