From 77235c5665d226184175f89d202afd1111768d2e Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 25 Mar 2024 14:23:45 +1100
Subject: [PATCH] Initial commit - testing things

---
 .../global-styles/background-panel.js         | 190 +++++++++++++-----
 .../src/components/global-styles/style.scss   |  30 ++-
 2 files changed, 162 insertions(+), 58 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
index 17d9066067f792..86f86998620a31 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -22,6 +22,8 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -30,6 +32,7 @@ import { useCallback, Platform, useRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { isBlobURL } from '@wordpress/blob';
+import { reusableBlock, Icon, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -134,48 +137,120 @@ export const backgroundPositionToCoords = ( value ) => {
 	return { x, y };
 };
 
-function InspectorImagePreview( { label, filename, url: imgUrl } ) {
+
+const popoverProps = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+}
+function InspectorImagePreview( { label, filename, url: imgUrl, children, allowPopover = false } ) {
 	const imgLabel = label || getFilename( imgUrl );
-	return (
-		<ItemGroup as="span">
-			<HStack justify="flex-start" as="span">
-				<span
-					className={ classnames(
-						'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
-						{
-							'has-image': imgUrl,
-						}
-					) }
-					aria-hidden
-				>
-					{ imgUrl && (
-						<span
-							className="block-editor-global-styles-background-panel__inspector-image-indicator"
-							style={ {
-								backgroundImage: `url(${ imgUrl })`,
-							} }
-						/>
-					) }
-				</span>
-				<FlexItem as="span">
-					<Truncate
-						numberOfLines={ 1 }
-						className="block-editor-global-styles-background-panel__inspector-media-replace-title"
+	// @TODO abstract
+	if ( ! allowPopover ) {
+		return (
+			<ItemGroup as="span" className="block-editor-global-styles-background-panel__image-preview">
+				<HStack justify="flex-start" as="span" className="block-editor-global-styles-background-panel__image-preview-content">
+					<span
+						className={ classnames(
+							'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
+							{
+								'has-image': imgUrl,
+							}
+						) }
+						aria-hidden
 					>
-						{ imgLabel }
-					</Truncate>
-					<VisuallyHidden as="span">
-						{ filename
-							? sprintf(
+						{ imgUrl && (
+							<span
+								className="block-editor-global-styles-background-panel__inspector-image-indicator"
+								style={ {
+									backgroundImage: `url(${ imgUrl })`,
+								} }
+							/>
+						) }
+					</span>
+					<FlexItem as="span">
+						<Truncate
+							numberOfLines={ 1 }
+							className="block-editor-global-styles-background-panel__inspector-media-replace-title"
+						>
+							{ imgLabel }
+						</Truncate>
+						<VisuallyHidden as="span">
+							{ filename
+								? sprintf(
 									/* translators: %s: file name */
 									__( 'Selected image: %s' ),
 									filename
-							  )
-							: __( 'No image selected' ) }
-					</VisuallyHidden>
-				</FlexItem>
-			</HStack>
-		</ItemGroup>
+								)
+								: __( 'No image selected' ) }
+						</VisuallyHidden>
+					</FlexItem>
+				</HStack>
+			</ItemGroup>
+		);
+	}
+	return(
+		<Dropdown
+			popoverProps={ popoverProps }
+			className="block-editor-global-styles-background-panel__inspector-media-replace"
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const toggleProps = {
+					onClick: onToggle,
+					className: classnames(
+						'block-editor-global-styles-background-panel__dropdown',
+						{ 'is-open': isOpen }
+					),
+					'aria-expanded': isOpen,
+					'aria-label': __( 'Background size, position and repeat options.' ),
+				};
+				return (
+					<ItemGroup as="button" { ...toggleProps }>
+						<HStack justify="flex-start" as="span">
+							<span
+								className={ classnames(
+									'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
+									{
+										'has-image': imgUrl,
+									}
+								) }
+								aria-hidden
+							>
+								{ imgUrl && (
+									<span
+										className="block-editor-global-styles-background-panel__inspector-image-indicator"
+										style={ {
+											backgroundImage: `url(${ imgUrl })`,
+										} }
+									/>
+								) }
+							</span>
+							<FlexItem as="span">
+								<Truncate
+									numberOfLines={ 1 }
+									className="block-editor-global-styles-background-panel__inspector-media-replace-title"
+								>
+									{ imgLabel }
+								</Truncate>
+								<VisuallyHidden as="span">
+									{ filename
+										? sprintf(
+											/* translators: %s: file name */
+											__( 'Selected image: %s' ),
+											filename
+										)
+										: __( 'No image selected' ) }
+								</VisuallyHidden>
+							</FlexItem>
+						</HStack>
+					</ItemGroup>
+				);
+			} }
+			renderContent={ ( { onClose } ) => (
+				<DropdownContentWrapper>
+					{ children }
+				</DropdownContentWrapper>
+			) }
+		/>
 	);
 }
 
@@ -185,6 +260,8 @@ function BackgroundImageToolsPanelItem( {
 	onChange,
 	style,
 	inheritedValue,
+	settings,
+	defaultControlValues,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -273,6 +350,8 @@ function BackgroundImageToolsPanelItem( {
 		hasBackgroundImageValue( style ) ||
 		hasBackgroundImageValue( inheritedValue );
 
+	const shouldShowBackgroundSizeControls = hasValue && settings?.background?.backgroundSize;
+
 	return (
 		<ToolsPanelItem
 			className="single-column"
@@ -287,20 +366,31 @@ function BackgroundImageToolsPanelItem( {
 				className="block-editor-global-styles-background-panel__inspector-media-replace-container"
 				ref={ replaceContainerRef }
 			>
+				<InspectorImagePreview
+					label={ __( 'Background image' ) }
+					filename={ title || __( 'Untitled' ) }
+					url={ url }
+					allowPopover={ shouldShowBackgroundSizeControls }
+				>
+					<BackgroundSizeToolsPanelItem
+						onChange={ onChange }
+						panelId={ panelId }
+						isShownByDefault={ true }
+						style={ style }
+						inheritedValue={ inheritedValue }
+						defaultControlValues={ defaultControlValues }
+					/>
+				</InspectorImagePreview>
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ url }
 					allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
 					accept="image/*"
 					onSelect={ onSelectMedia }
+					variant="secondary"
 					name={
-						<InspectorImagePreview
-							label={ __( 'Background image' ) }
-							filename={ title || __( 'Untitled' ) }
-							url={ url }
-						/>
+						<Icon icon={ reusableBlock } />
 					}
-					variant="secondary"
 				>
 					{ hasValue && (
 						<MenuItem
@@ -565,8 +655,6 @@ export default function BackgroundPanel( {
 			background: {},
 		};
 	}, [] );
-	const shouldShowBackgroundSizeControls =
-		settings?.background?.backgroundSize;
 
 	return (
 		<Wrapper
@@ -581,17 +669,9 @@ export default function BackgroundPanel( {
 				isShownByDefault={ defaultControls.backgroundImage }
 				style={ value }
 				inheritedValue={ inheritedValue }
+				defaultControlValues={ defaultControlValues }
+				settings={ settings }
 			/>
-			{ shouldShowBackgroundSizeControls && (
-				<BackgroundSizeToolsPanelItem
-					onChange={ onChange }
-					panelId={ panelId }
-					isShownByDefault={ defaultControls.backgroundSize }
-					style={ value }
-					inheritedValue={ inheritedValue }
-					defaultControlValues={ defaultControlValues }
-				/>
-			) }
 		</Wrapper>
 	);
 }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index b64fc10a7ebba0..df7d9ed221f1f6 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -72,6 +72,33 @@
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
+
+	/* TEST */
+
+	border: 1px solid $gray-300;
+	border-radius: 2px;
+	display: flex;
+	justify-content: center;
+	align-items: stretch;
+
+	.block-editor-global-styles-background-panel__image-preview,
+	.block-editor-global-styles-background-panel__inspector-media-replace {
+		flex-grow: 1;
+	}
+
+	.block-editor-global-styles-background-panel__image-preview-content,
+	.block-editor-global-styles-background-panel__dropdown {
+		height: 100%;
+		width: 100%;
+		padding-left: $grid-unit-15;
+	}
+
+	.block-editor-global-styles-background-panel__dropdown {
+		cursor: pointer;
+		background: transparent;
+		border: none;
+	}
+
 	position: relative;
 	// Since there is no option to skip rendering the drag'n'drop icon in drop
 	// zone, we hide it for now.
@@ -81,7 +108,6 @@
 
 	button.components-button {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-300;
 		width: 100%;
 		display: block;
 		height: $grid-unit-50;
@@ -114,10 +140,8 @@
 	background: #fff linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); // Show a diagonal line (crossed out) for empty background image.
 	border-radius: $radius-round !important; // Override the default border-radius inherited from FlexItem.
 	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
-	display: block;
 	width: 20px;
 	height: 20px;
-	flex: none;
 
 	&.has-image {
 		background: #fff; // No diagonal line for non-empty background image. A background color is in use to account for partially transparent images.