Add default controls support

WordPress · Dec 18, 2023 · 8d59e4e · 8d59e4e
1 parent 36a18ef
commit 8d59e4e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
@@ -177,7 +177,11 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 	);
 }
 
-function BackgroundImagePanelItem( { clientId, setAttributes } ) {
+function BackgroundImagePanelItem( {
+	clientId,
+	isShownByDefault,
+	setAttributes,
+} ) {
 	const style = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
@@ -286,7 +290,7 @@ function BackgroundImagePanelItem( { clientId, setAttributes } ) {
 			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
 			onDeselect={ () => resetBackgroundImage( style, setAttributes ) }
-			isShownByDefault={ true }
+			isShownByDefault={ isShownByDefault }
 			resetAllFilter={ resetAllFilter }
 			panelId={ clientId }
 		>
@@ -346,7 +350,11 @@ function backgroundSizeHelpText( value ) {
 	return __( 'Repeat the image, and set a fixed size.' );
 }
 
-function BackgroundSizePanelItem( { clientId, setAttributes } ) {
+function BackgroundSizePanelItem( {
+	clientId,
+	isShownByDefault,
+	setAttributes,
+} ) {
 	const style = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
@@ -398,7 +406,7 @@ function BackgroundSizePanelItem( { clientId, setAttributes } ) {
 			hasValue={ () => hasValue }
 			label={ __( 'Background size' ) }
 			onDeselect={ () => resetBackgroundSize( style, setAttributes ) }
-			isShownByDefault={ true }
+			isShownByDefault={ isShownByDefault }
 			resetAllFilter={ resetAllFilter }
 			panelId={ clientId }
 		>
@@ -457,10 +465,23 @@ function BackgroundImagePanelPure( props ) {
 		backgroundSize && hasBackgroundSupport( props.name, 'backgroundSize' )
 	);
 
+	const defaultControls = getBlockSupport( props.name, [
+		BACKGROUND_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
 	return (
 		<InspectorControls group="background">
-			<BackgroundImagePanelItem { ...props } />
-			{ showBackgroundSize && <BackgroundSizePanelItem { ...props } /> }
+			<BackgroundImagePanelItem
+				isShownByDefault={ defaultControls?.backgroundImage }
+				{ ...props }
+			/>
+			{ showBackgroundSize && (
+				<BackgroundSizePanelItem
+					isShownByDefault={ defaultControls?.backgroundSize }
+					{ ...props }
+				/>
+			) }
 		</InspectorControls>
 	);
 }

diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
@@ -30,7 +30,10 @@
 		"html": false,
 		"background": {
 			"backgroundImage": true,
-			"backgroundSize": true
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
 		},
 		"color": {
 			"gradients": true,