Rejigging components, catering for no-background-image-controls

WordPress · Jun 19, 2024 · bdab991 · bdab991
1 parent 37f1319
commit bdab991
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 55 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
@@ -28,7 +28,13 @@ import {
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
-import { useCallback, Platform, useRef, useState } from '@wordpress/element';
+import {
+	useCallback,
+	Platform,
+	useRef,
+	useState,
+	useEffect,
+} from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { isBlobURL } from '@wordpress/blob';
@@ -53,6 +59,7 @@ const BACKGROUND_POPOVER_PROPS = {
 	offset: 36,
 	shift: true,
 };
+const noop = () => {};
 
 /**
  * Checks site settings to see if the background panel may be used.
@@ -156,33 +163,39 @@ function InspectorImagePreviewItem( {
 	filename,
 	label,
 	className,
+	onToggleCallback = noop,
 } ) {
+	useEffect( () => {
+		if ( typeof toggleProps?.isOpen !== 'undefined' ) {
+			onToggleCallback( toggleProps?.isOpen );
+		}
+	}, [ toggleProps?.isOpen ] );
 	return (
 		<ItemGroup as={ as } className={ className } { ...toggleProps }>
 			<HStack
 				justify="flex-start"
 				as="span"
 				className="block-editor-global-styles-background-panel__inspector-preview-inner"
 			>
-				<span
-					className={ clsx(
-						'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
-						{
-							'has-image': imgUrl,
-						}
-					) }
-					aria-hidden
-				>
-					{ imgUrl && (
+				{ imgUrl && (
+					<span
+						className={ clsx(
+							'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
+							{
+								'has-image': imgUrl,
+							}
+						) }
+						aria-hidden
+					>
 						<span
 							className="block-editor-global-styles-background-panel__inspector-image-indicator"
 							style={ {
 								backgroundImage: `url(${ imgUrl })`,
 							} }
 						/>
-					) }
-				</span>
-				<FlexItem as="span">
+					</span>
+				) }
+				<FlexItem as="span" style={ { flexGrow: 1 } }>
 					<Truncate
 						numberOfLines={ 1 }
 						className="block-editor-global-styles-background-panel__inspector-media-replace-title"
@@ -204,14 +217,11 @@ function InspectorImagePreviewItem( {
 	);
 }
 
-const noop = () => {};
-
 function InspectorImagePreviewToggle( {
 	label,
 	filename,
 	url: imgUrl,
 	children,
-	allowPopover = false,
 	onToggle: onToggleCallback = noop,
 	hasImageValue,
 } ) {
@@ -222,16 +232,6 @@ function InspectorImagePreviewToggle( {
 	const imgLabel =
 		label || getFilename( imgUrl ) || __( 'Add background image' );
 
-	if ( ! allowPopover ) {
-		return (
-			<InspectorImagePreviewItem
-				className="block-editor-global-styles-background-panel__image-preview"
-				imgUrl={ imgUrl }
-				filename={ filename }
-				label={ imgLabel }
-			/>
-		);
-	}
 	return (
 		<Dropdown
 			popoverProps={ BACKGROUND_POPOVER_PROPS }
@@ -245,15 +245,16 @@ function InspectorImagePreviewToggle( {
 					'aria-label': __(
 						'Background size, position and repeat options.'
 					),
+					isOpen,
 				};
-				onToggleCallback( isOpen );
 				return (
 					<InspectorImagePreviewItem
 						imgUrl={ imgUrl }
 						filename={ filename }
 						label={ imgLabel }
 						toggleProps={ toggleProps }
 						as="button"
+						onToggleCallback={ onToggleCallback }
 					/>
 				);
 			} }
@@ -275,6 +276,7 @@ function BackgroundImageToolsPanelItem( {
 	onChange,
 	style,
 	inheritedValue,
+	shouldShowBackgroundImageControls,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -390,16 +392,23 @@ function BackgroundImageToolsPanelItem( {
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
 	const imgLabel =
 		title || getFilename( url ) || __( 'Add background image' );
+
 	return (
 		<ToolsPanelItem
-			className="single-column"
+			className={ clsx(
+				'single-column',
+				'block-editor-global-styles-background-panel__image-tools-panel-item',
+				{
+					'is-wide':
+						hasImageValue && ! shouldShowBackgroundImageControls,
+				}
+			) }
 			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
 			onDeselect={ resetBackgroundImage }
 			isShownByDefault={ isShownByDefault }
 			resetAllFilter={ resetAllFilter }
 			panelId={ panelId }
-			style={ hasImageValue ? {} : { width: '100%' } }
 		>
 			<div ref={ replaceContainerRef }>
 				<MediaReplaceFlow
@@ -409,10 +418,11 @@ function BackgroundImageToolsPanelItem( {
 					accept="image/*"
 					onSelect={ onSelectMedia }
 					name={
-						hasImageValue ? (
+						hasImageValue && shouldShowBackgroundImageControls ? (
 							<Icon icon={ reusableBlock } />
 						) : (
 							<InspectorImagePreviewItem
+								className="block-editor-global-styles-background-panel__image-preview"
 								imgUrl={ url }
 								filename={ title }
 								label={ imgLabel }
@@ -706,7 +716,6 @@ export default function BackgroundPanel( {
 				backgroundSize: undefined,
 			} )
 		);
-	//@TODO This causes "Cannot update a component while rendering a different component (`Dropdown`)" error
 	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
 
 	return (
@@ -720,34 +729,38 @@ export default function BackgroundPanel( {
 			<div
 				className={ clsx(
 					'block-editor-global-styles-background-panel__inspector-media-replace-container',
-					{ 'is-open': isDropDownOpen }
+					{ 'is-open': isDropDownOpen, 'has-image': hasImageValue }
 				) }
 			>
-				<InspectorImagePreviewToggle
-					label={ __( 'Background image' ) }
-					filename={ title }
-					url={ getResolvedThemeFilePath( url, themeFileURIs ) }
-					allowPopover={ shouldShowBackgroundImageControls }
-					onToggle={ ( isOpen ) => setIsDropDownOpen( isOpen ) }
-					hasImageValue={ hasImageValue }
-				>
-					<BackgroundSizeToolsPanelItem
-						onChange={ onChange }
-						panelId={ panelId }
-						isShownByDefault={ defaultControls.backgroundImage }
-						style={ value }
-						defaultValues={ defaultValues }
-						inheritedValue={ inheritedValue }
-						themeFileURIs={ themeFileURIs }
-					/>
-				</InspectorImagePreviewToggle>
+				{ shouldShowBackgroundImageControls && (
+					<InspectorImagePreviewToggle
+						label={ title }
+						filename={ title }
+						url={ getResolvedThemeFilePath( url, themeFileURIs ) }
+						onToggle={ setIsDropDownOpen }
+						hasImageValue={ hasImageValue }
+					>
+						<BackgroundSizeToolsPanelItem
+							onChange={ onChange }
+							panelId={ panelId }
+							isShownByDefault={ defaultControls.backgroundImage }
+							style={ value }
+							defaultValues={ defaultValues }
+							inheritedValue={ inheritedValue }
+							themeFileURIs={ themeFileURIs }
+						/>
+					</InspectorImagePreviewToggle>
+				) }
 				<BackgroundImageToolsPanelItem
 					onChange={ onChange }
 					panelId={ panelId }
 					style={ value }
 					inheritedValue={ inheritedValue }
 					settings={ settings }
 					isShownByDefault={ defaultControls.backgroundImage }
+					shouldShowBackgroundImageControls={
+						shouldShowBackgroundImageControls
+					}
 				/>
 			</div>
 

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -75,12 +75,15 @@
 	position: relative;
 	border: 1px solid $gray-300;
 	border-radius: 2px;
-	display: flex;
 	justify-content: center;
 	align-items: stretch;
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
 
+	&.has-image {
+		display: flex;
+	}
+
 	&.is-open {
 		background-color: $gray-100;
 	}
@@ -89,6 +92,15 @@
 		height: 100%;
 	}
 
+	.block-editor-global-styles-background-panel__image-tools-panel-item {
+		&.is-wide {
+			width: 100%;
+			.block-editor-global-styles-background-panel__inspector-preview-inner {
+				justify-content: center;
+			}
+		}
+	}
+
 	.block-editor-global-styles-background-panel__image-preview,
 	.block-editor-global-styles-background-panel__inspector-media-replace {
 		flex-grow: 1;
@@ -115,7 +127,7 @@
 
 	button.components-button {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-400;
+		//box-shadow: inset 0 0 0 $border-width $gray-400;
 		width: 100%;
 		display: block;
 
@@ -180,7 +192,7 @@
 }
 
 .block-editor-global-styles-background-panel__hidden-tools-panel-item {
-	height: 0px;
+	height: 0;
+	width: 0;
 	position: absolute;
-	width: 0px;
 }