Background image: remove toolspanel placeholder component (#64242)

The dummy tools panel was originally there to allow feature toggling, which hides and shows non-default toolspanel controls. However, now that the background panel is in a popover, space is not so much of an issue. Furthermore for now, background images and their properties can be treated as a control group. Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
WordPress · Aug 7, 2024 · 879a2a3 · 879a2a3
1 parent 9a55d5f
commit 879a2a3
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 54 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
@@ -720,55 +720,56 @@ export default function BackgroundPanel( {
 					}
 				) }
 			>
-				{ shouldShowBackgroundImageControls ? (
-					<BackgroundControlsPanel
-						label={ title }
-						filename={ title }
-						url={ getResolvedThemeFilePath( url, themeFileURIs ) }
-						onToggle={ setIsDropDownOpen }
-						hasImageValue={ hasImageValue }
-					>
-						<VStack spacing={ 3 } className="single-column">
-							<BackgroundImageControls
-								onChange={ onChange }
-								style={ value }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
-								displayInPanel
-								onRemoveImage={ () => {
-									setIsDropDownOpen( false );
-									resetBackground();
-								} }
-							/>
-							<BackgroundSizeControls
-								onChange={ onChange }
-								panelId={ panelId }
-								style={ value }
-								defaultValues={ defaultValues }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
-							/>
-						</VStack>
-					</BackgroundControlsPanel>
-				) : (
-					<BackgroundImageControls
-						onChange={ onChange }
-						style={ value }
-						inheritedValue={ inheritedValue }
-						themeFileURIs={ themeFileURIs }
-					/>
-				) }
+				<ToolsPanelItem
+					hasValue={ () => hasImageValue }
+					label={ __( 'Image' ) }
+					onDeselect={ resetBackground }
+					isShownByDefault={ defaultControls.backgroundImage }
+					panelId={ panelId }
+				>
+					{ shouldShowBackgroundImageControls ? (
+						<BackgroundControlsPanel
+							label={ title }
+							filename={ title }
+							url={ getResolvedThemeFilePath(
+								url,
+								themeFileURIs
+							) }
+							onToggle={ setIsDropDownOpen }
+							hasImageValue={ hasImageValue }
+						>
+							<VStack spacing={ 3 } className="single-column">
+								<BackgroundImageControls
+									onChange={ onChange }
+									style={ value }
+									inheritedValue={ inheritedValue }
+									themeFileURIs={ themeFileURIs }
+									displayInPanel
+									onRemoveImage={ () => {
+										setIsDropDownOpen( false );
+										resetBackground();
+									} }
+								/>
+								<BackgroundSizeControls
+									onChange={ onChange }
+									panelId={ panelId }
+									style={ value }
+									defaultValues={ defaultValues }
+									inheritedValue={ inheritedValue }
+									themeFileURIs={ themeFileURIs }
+								/>
+							</VStack>
+						</BackgroundControlsPanel>
+					) : (
+						<BackgroundImageControls
+							onChange={ onChange }
+							style={ value }
+							inheritedValue={ inheritedValue }
+							themeFileURIs={ themeFileURIs }
+						/>
+					) }
+				</ToolsPanelItem>
 			</div>
-
-			{ /* Dummy ToolsPanel items, so we can control what's in the dropdown popover */ }
-			<ToolsPanelItem
-				hasValue={ () => hasImageValue }
-				label={ __( 'Image' ) }
-				onDeselect={ resetBackground }
-				isShownByDefault={ defaultControls.backgroundImage }
-				panelId={ panelId }
-				className="block-editor-global-styles-background-panel__hidden-tools-panel-item"
-			/>
 		</Wrapper>
 	);
 }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -211,12 +211,6 @@
 	}
 }
 
-.block-editor-global-styles-background-panel__hidden-tools-panel-item {
-	height: 0;
-	width: 0;
-	position: absolute;
-}
-
 // Push control panel into the background when the media modal is open.
 .modal-open .block-editor-global-styles-background-panel__popover {
 	z-index: z-index(".block-editor-global-styles-background-panel__popover");