the background size panel displays by default in the site editor for …

…top-level styles, but only when there's an image available. Using constant for "image"
WordPress · Apr 14, 2024 · 133f9c0 · 133f9c0
1 parent 2b8443c
commit 133f9c0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -40,6 +40,10 @@ import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
 
 const IMAGE_BACKGROUND_TYPE = 'image';
+const DEFAULT_CONTROLS = {
+	backgroundImage: true,
+	backgroundSize: false,
+};
 
 /**
  * Checks site settings to see if the background panel may be used.
@@ -248,7 +252,7 @@ function BackgroundImageToolsPanelItem( {
 
 	const onFilesDrop = ( filesList ) => {
 		mediaUpload( {
-			allowedTypes: [ 'image' ],
+			allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
 			filesList,
 			onFileChange( [ image ] ) {
 				if ( isBlobURL( image?.url ) ) {
@@ -540,11 +544,6 @@ function BackgroundToolsPanel( {
 	);
 }
 
-const DEFAULT_CONTROLS = {
-	backgroundImage: true,
-	backgroundSize: false,
-};
-
 export default function BackgroundPanel( {
 	as: Wrapper = BackgroundToolsPanel,
 	value,

diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -29,6 +29,13 @@ export default function BackgroundPanel() {
 	} );
 	const [ settings ] = useGlobalSetting( '' );
 
+	const defaultControls = {
+		backgroundImage: true,
+		backgroundSize:
+			!! style?.background?.backgroundImage &&
+			!! inheritedStyle?.background?.backgroundImage,
+	};
+
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }
@@ -37,6 +44,7 @@ export default function BackgroundPanel() {
 			settings={ settings }
 			headerLabel={ __( 'Image' ) }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
+			defaultControls={ defaultControls }
 		/>
 	);
 }