From c79d35bf46026283d444e46095f1e7d3953b10e8 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Thu, 5 Nov 2020 17:54:48 -0300
Subject: [PATCH 01/10] cover: add BackgroundSizeControl control

---
 packages/block-library/src/cover/edit.js | 44 ++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index ff9d9f8cd6eb47..b0deea868f10d9 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -20,6 +20,7 @@ import {
 	Spinner,
 	ToggleControl,
 	withNotices,
+	ButtonGroup,
 	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
 import { compose, withInstanceId, useInstanceId } from '@wordpress/compose';
@@ -82,6 +83,47 @@ function retrieveFastAverageColor() {
 	return retrieveFastAverageColor.fastAverageColor;
 }
 
+const backgroundSizesOptions = [
+	{
+		slug: 'cover',
+		label: __( 'Cover' ),
+	},
+	{
+		slug: 'contain',
+		label: __( 'Contain' ),
+	},
+	{
+		slug: 'initial',
+		label: __( 'Original' ),
+	},
+	{
+		slug: 'custom',
+		label: __( 'Custom' ),
+	},
+];
+
+function BackgroundSizeControl( { size = 'cover', onSelect } ) {
+	return (
+		<BaseControl
+			label={ __( ' Background size' ) }
+			id={ 'background-size' }
+		>
+			<ButtonGroup label={ __( 'Size' ) } defaultChecked="size-content">
+				{ backgroundSizesOptions.map( ( { slug, label } ) => (
+					<Button
+						key={ slug }
+						isSmall
+						isPressed={ slug === size }
+						onClick={ () => onSelect( slug ) }
+					>
+						{ label }
+					</Button>
+				) ) }
+			</ButtonGroup>
+		</BaseControl>
+	);
+}
+
 function CoverHeightInput( {
 	onChange,
 	onUnitChange,
@@ -360,6 +402,8 @@ function CoverEdit( {
 									checked={ isRepeated }
 									onChange={ toggleIsRepeated }
 								/>
+
+								<BackgroundSizeControl />
 							</Fragment>
 						) }
 						{ showFocalPointPicker && (

From 4ff49a26243b141b4bc25f1e2e9ff2900d2acb38 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Thu, 5 Nov 2020 17:59:47 -0300
Subject: [PATCH 02/10] cover: add backgrouns size attr

---
 packages/block-library/src/cover/block.json |  4 ++++
 packages/block-library/src/cover/edit.js    | 11 ++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 29f1b17d7bb235..727677f36b8996 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -17,6 +17,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"backgroundSize": {
+			"type": "string",
+			"enum": [ "cover", "contain", "initial", "custom" ]
+		},
 		"dimRatio": {
 			"type": "number",
 			"default": 50
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index b0deea868f10d9..264322f81b08b8 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -289,6 +289,7 @@ function CoverEdit( {
 		contentPosition,
 		id,
 		backgroundType,
+		backgroundSize,
 		dimRatio,
 		focalPoint,
 		hasParallax,
@@ -341,6 +342,7 @@ function CoverEdit( {
 		...( isImageBackground ? backgroundImageStyles( url ) : {} ),
 		backgroundColor: overlayColor.color,
 		minHeight: temporaryMinHeight || minHeightWithUnit || undefined,
+		backgroundSize,
 	};
 
 	if ( gradientValue && ! url ) {
@@ -403,7 +405,14 @@ function CoverEdit( {
 									onChange={ toggleIsRepeated }
 								/>
 
-								<BackgroundSizeControl />
+								<BackgroundSizeControl
+									size={ backgroundSize }
+									onSelect={ ( newSize ) =>
+										setAttributes( {
+											backgroundSize: newSize,
+										} )
+									}
+								/>
 							</Fragment>
 						) }
 						{ showFocalPointPicker && (

From 35e451da6464a59d43276d349de7a0145383fc39 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 6 Nov 2020 20:10:55 -0300
Subject: [PATCH 03/10] cover: re-organize default image styles

---
 packages/block-library/src/cover/block.json |  1 +
 packages/block-library/src/cover/style.scss | 12 +++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 727677f36b8996..811a3cb57df82b 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -19,6 +19,7 @@
 		},
 		"backgroundSize": {
 			"type": "string",
+			"default": "cover",
 			"enum": [ "cover", "contain", "initial", "custom" ]
 		},
 		"dimRatio": {
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 1f4f09f9fc9c14..b19949fd83308b 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -1,10 +1,6 @@
 .wp-block-cover-image,
 .wp-block-cover {
 	position: relative;
-	background-size: cover;
-	background-position: center center;
-	min-height: 430px;
-	height: 100%;
 	width: 100%;
 	display: flex;
 	justify-content: center;
@@ -13,6 +9,13 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
+	// Default settings values.
+	min-height: 430px;
+	height: 100%;
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+
 	&.has-parallax {
 		background-attachment: fixed;
 
@@ -31,7 +34,6 @@
 
 	&.is-repeated {
 		background-repeat: repeat;
-		background-size: auto;
 	}
 
 	/**

From ed37b01704dcab10fad387da8e70178558cd0fd2 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 13 Nov 2020 11:48:42 -0300
Subject: [PATCH 04/10] cover: add custom mode to bgsize

---
 packages/block-library/src/cover/block.json |   3 +-
 packages/block-library/src/cover/edit.js    | 118 +++++++++++++-------
 packages/block-library/src/cover/shared.js  |  19 ++++
 3 files changed, 100 insertions(+), 40 deletions(-)

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 811a3cb57df82b..e2e544a2e49af6 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -19,8 +19,7 @@
 		},
 		"backgroundSize": {
 			"type": "string",
-			"default": "cover",
-			"enum": [ "cover", "contain", "initial", "custom" ]
+			"default": "cover"
 		},
 		"dimRatio": {
 			"type": "number",
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 264322f81b08b8..1f090bc33f3456 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -21,6 +21,7 @@ import {
 	ToggleControl,
 	withNotices,
 	ButtonGroup,
+	 __experimentalUnitControl as BaseUnitControl,
 	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
 import { compose, withInstanceId, useInstanceId } from '@wordpress/compose';
@@ -53,6 +54,7 @@ import {
 	VIDEO_BACKGROUND_TYPE,
 	COVER_MIN_HEIGHT,
 	CSS_UNITS,
+	SIZE_OPTIONS,
 	backgroundImageStyles,
 	dimRatioToClass,
 	isContentPositionCenter,
@@ -83,52 +85,82 @@ function retrieveFastAverageColor() {
 	return retrieveFastAverageColor.fastAverageColor;
 }
 
-const backgroundSizesOptions = [
-	{
-		slug: 'cover',
-		label: __( 'Cover' ),
-	},
-	{
-		slug: 'contain',
-		label: __( 'Contain' ),
-	},
-	{
-		slug: 'initial',
-		label: __( 'Original' ),
-	},
-	{
-		slug: 'custom',
-		label: __( 'Custom' ),
-	},
-];
+function CustomSizeControl( { value, onSelect } ) {
+	if ( [ 'cover', 'contain', 'initial'].indexOf( value ) >= 0 ) {
+		return null;
+	}
+
+	// Strip up and get value + units from the CSS inline.
+	let inlineStyleValues = value && value.split( /(%|px)/ );
+	if ( inlineStyleValues.length < 2 ) {
+		inlineStyleValues = [];
+	}
+
+	const xValue = inlineStyleValues[ 0 ] || 50;
+	const xUnit = inlineStyleValues[ 1 ] || 'px';
+
+	return (
+		<CoverValueUnitInput
+			label={ __( 'Custom size' ) }
+			value={ xValue }
+			unit={ xUnit }
+			units={ [
+				{ value: 'px', label: 'px', default: 0 },
+				{ value: '%', label: '%', default: 10 },
+			] }
+			onChange={ ( sizeValue ) => {
+				onSelect( `${ sizeValue }${  xUnit }` );
+			} }
+			onUnitChange={ ( unit ) => {
+				onSelect( `${ xValue }${  unit }` );
+			} }
+			customUnits= { false }
+		/>
+	);
+}
 
 function BackgroundSizeControl( { size = 'cover', onSelect } ) {
+	const isCustomSize =
+		SIZE_OPTIONS.map( ( opt ) => opt.slug ).indexOf( size ) < 0 ||
+		size === 'custom';
+
 	return (
 		<BaseControl
 			label={ __( ' Background size' ) }
 			id={ 'background-size' }
 		>
 			<ButtonGroup label={ __( 'Size' ) } defaultChecked="size-content">
-				{ backgroundSizesOptions.map( ( { slug, label } ) => (
+				{ SIZE_OPTIONS.map( ( { slug, label } ) => (
 					<Button
 						key={ slug }
 						isSmall
-						isPressed={ slug === size }
+						isPressed={
+							slug === size ||
+							( slug === 'custom' && isCustomSize )
+						}
 						onClick={ () => onSelect( slug ) }
 					>
 						{ label }
 					</Button>
 				) ) }
 			</ButtonGroup>
+
+			{ isCustomSize && (
+				<CustomSizeControl value={ size } onSelect={ onSelect } />
+			) }
 		</BaseControl>
 	);
 }
 
-function CoverHeightInput( {
+function CoverValueUnitInput( {
 	onChange,
 	onUnitChange,
 	unit = 'px',
 	value = '',
+
+	label,
+	units = CSS_UNITS,
+	customUnits = true,
 } ) {
 	const [ temporaryInput, setTemporaryInput ] = useState( null );
 	const instanceId = useInstanceId( UnitControl );
@@ -161,21 +193,29 @@ function CoverHeightInput( {
 	const inputValue = temporaryInput !== null ? temporaryInput : value;
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
+	const controlUnitProps = {
+		id: inputId,
+		min,
+		onBlur: handleOnBlur,
+		onChange: handleOnChange,
+		onUnitChange,
+		step: '1',
+		style: { maxWidth: 80 },
+		unit,
+		units,
+		value: inputValue,
+	};
+
 	return (
-		<BaseControl label={ __( 'Minimum height of cover' ) } id={ inputId }>
-			<UnitControl
-				id={ inputId }
-				isResetValueOnUnitChange
-				min={ min }
-				onBlur={ handleOnBlur }
-				onChange={ handleOnChange }
-				onUnitChange={ onUnitChange }
-				step="1"
-				style={ { maxWidth: 80 } }
-				unit={ unit }
-				units={ CSS_UNITS }
-				value={ inputValue }
-			/>
+		<BaseControl label={ label } id={ inputId }>
+			{ customUnits ? (
+				<UnitControl isResetValueOnUnitChange { ...controlUnitProps } />
+			) : (
+				<BaseUnitControl
+					isResetValueOnUnitChange
+					{ ...controlUnitProps }
+				/>
+			) }
 		</BaseControl>
 	);
 }
@@ -407,11 +447,12 @@ function CoverEdit( {
 
 								<BackgroundSizeControl
 									size={ backgroundSize }
-									onSelect={ ( newSize ) =>
+									onSelect={ ( newSize ) => {
+										console.log( { newSize } );
 										setAttributes( {
 											backgroundSize: newSize,
 										} )
-									}
+									} }
 								/>
 							</Fragment>
 						) }
@@ -452,7 +493,7 @@ function CoverEdit( {
 				{ hasBackground && (
 					<>
 						<PanelBody title={ __( 'Dimensions' ) }>
-							<CoverHeightInput
+							<CoverValueUnitInput
 								value={ temporaryMinHeight || minHeight }
 								unit={ minHeightUnit }
 								onChange={ ( newMinHeight ) =>
@@ -463,6 +504,7 @@ function CoverEdit( {
 										minHeightUnit: nextUnit,
 									} );
 								} }
+								label={ __( 'Minimum height of cover' ) }
 							/>
 						</PanelBody>
 						<PanelColorGradientSettings
diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
index a80ce7d28c8701..010583dccc4999 100644
--- a/packages/block-library/src/cover/shared.js
+++ b/packages/block-library/src/cover/shared.js
@@ -55,6 +55,25 @@ export const CSS_UNITS = [
 	},
 ];
 
+export const SIZE_OPTIONS = [
+	{
+		slug: 'cover',
+		label: __( 'Cover' ),
+	},
+	{
+		slug: 'contain',
+		label: __( 'Contain' ),
+	},
+	{
+		slug: 'initial',
+		label: __( 'Original' ),
+	},
+	{
+		slug: 'custom',
+		label: __( 'Custom' ),
+	},
+];
+
 export function dimRatioToClass( ratio ) {
 	return ratio === 0 || ratio === 50 || ! ratio
 		? null

From 4e4807217414fadb338f076e905b62ae70ee67d1 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 13 Nov 2020 13:34:59 -0300
Subject: [PATCH 05/10] cover: bgsize -> replace with icons

---
 packages/block-library/src/cover/edit.js    | 17 +++++---
 packages/block-library/src/cover/shared.js  | 48 +++++++++++++++++++++
 packages/block-library/src/cover/style.scss |  9 ++++
 3 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 1f090bc33f3456..3a9be11ba09895 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -21,7 +21,7 @@ import {
 	ToggleControl,
 	withNotices,
 	ButtonGroup,
-	 __experimentalUnitControl as BaseUnitControl,
+	__experimentalUnitControl as BaseUnitControl,
 	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
 import { compose, withInstanceId, useInstanceId } from '@wordpress/compose';
@@ -129,19 +129,22 @@ function BackgroundSizeControl( { size = 'cover', onSelect } ) {
 			label={ __( ' Background size' ) }
 			id={ 'background-size' }
 		>
-			<ButtonGroup label={ __( 'Size' ) } defaultChecked="size-content">
-				{ SIZE_OPTIONS.map( ( { slug, label } ) => (
+			<ButtonGroup
+				label={ __( 'Size' ) }
+				defaultChecked="size-content"
+				className="background-size-options"
+			>
+				{ SIZE_OPTIONS.map( ( { slug, label, icon: sizeIcon } ) => (
 					<Button
 						key={ slug }
-						isSmall
+						icon={ sizeIcon }
+						label={ label }
 						isPressed={
 							slug === size ||
 							( slug === 'custom' && isCustomSize )
 						}
 						onClick={ () => onSelect( slug ) }
-					>
-						{ label }
-					</Button>
+					/>
 				) ) }
 			</ButtonGroup>
 
diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
index 010583dccc4999..7b5d43eeb8862b 100644
--- a/packages/block-library/src/cover/shared.js
+++ b/packages/block-library/src/cover/shared.js
@@ -4,6 +4,7 @@
 import { getBlobTypeByURL, isBlobURL } from '@wordpress/blob';
 import { __ } from '@wordpress/i18n';
 import { Platform } from '@wordpress/element';
+import { SVG, Rect, Path } from '@wordpress/components';
 
 const POSITION_CLASSNAMES = {
 	'top left': 'is-position-top-left',
@@ -59,18 +60,65 @@ export const SIZE_OPTIONS = [
 	{
 		slug: 'cover',
 		label: __( 'Cover' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Rect height="20" width="20" y="2" x="2" />
+			</SVG>
+		),
 	},
 	{
 		slug: 'contain',
 		label: __( 'Contain' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Rect
+					x="2"
+					y="2"
+					fill="none"
+					width="20"
+					height="20"
+					stroke="currentColor"
+					strokeWidth="2"
+				/>
+				<Rect x="7" y="2" width="10" height="20" />
+			</SVG>
+		),
 	},
 	{
 		slug: 'initial',
 		label: __( 'Original' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Rect
+					x="2"
+					y="2"
+					fill="none"
+					width="20"
+					height="20"
+					stroke="currentColor"
+					strokeWidth="2"
+				/>
+				<Rect x="8" y="4" width="8" height="16" />
+			</SVG>
+		),
 	},
 	{
 		slug: 'custom',
 		label: __( 'Custom' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Rect
+					x="2"
+					y="2"
+					fill="none"
+					width="20"
+					height="20"
+					stroke="currentColor"
+					strokeWidth="2"
+				/>
+				<Rect x="5" y="7" width="14" height="10" />
+			</SVG>
+		),
 	},
 ];
 
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index b19949fd83308b..f7f23e5a626b76 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -182,6 +182,15 @@
 	object-fit: cover;
 }
 
+// Tweak sidebar settings
+.components-button-group.background-size-options {
+	display: flex;
+
+	.components-button {
+		box-shadow: none;
+	}
+}
+
 // Styles bellow only exist to support older versions of the block.
 // Versions that not had inner blocks and used an h2 heading had a section (and not a div) with a class wp-block-cover-image (and not a wp-block-cover).
 // We are using the previous referred differences to target old versions.

From 86887b37721f4d68454f2ab509a83d554e0c3fb9 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 13 Nov 2020 15:41:03 -0300
Subject: [PATCH 06/10] cover: bgs: store prev value

---
 packages/block-library/src/cover/edit.js | 44 +++++++++++++++++-------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 3a9be11ba09895..df1ef612043688 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -86,18 +86,14 @@ function retrieveFastAverageColor() {
 }
 
 function CustomSizeControl( { value, onSelect } ) {
-	if ( [ 'cover', 'contain', 'initial'].indexOf( value ) >= 0 ) {
-		return null;
-	}
-
-	// Strip up and get value + units from the CSS inline.
+	// Split and pick up values + units from the CSS inline.
 	let inlineStyleValues = value && value.split( /(%|px)/ );
 	if ( inlineStyleValues.length < 2 ) {
 		inlineStyleValues = [];
 	}
 
 	const xValue = inlineStyleValues[ 0 ] || 50;
-	const xUnit = inlineStyleValues[ 1 ] || 'px';
+	const xUnit = inlineStyleValues[ 1 ] || '%';
 
 	return (
 		<CoverValueUnitInput
@@ -119,11 +115,20 @@ function CustomSizeControl( { value, onSelect } ) {
 	);
 }
 
-function BackgroundSizeControl( { size = 'cover', onSelect } ) {
-	const isCustomSize =
+/**
+ * Helper function to fetect if the given size is custom or not.
+ *
+ * @param {string} size - Background size
+ * @return {boolean} True if size is custom. Otherwise, False.
+ */
+function isCustomSize( size ) {
+	return (
 		SIZE_OPTIONS.map( ( opt ) => opt.slug ).indexOf( size ) < 0 ||
-		size === 'custom';
+		size === 'custom'
+	);
+}
 
+function BackgroundSizeControl( { size = 'cover', onSelect } ) {
 	return (
 		<BaseControl
 			label={ __( ' Background size' ) }
@@ -141,7 +146,7 @@ function BackgroundSizeControl( { size = 'cover', onSelect } ) {
 						label={ label }
 						isPressed={
 							slug === size ||
-							( slug === 'custom' && isCustomSize )
+							( slug === 'custom' && isCustomSize( size ) )
 						}
 						onClick={ () => onSelect( slug ) }
 					/>
@@ -350,6 +355,16 @@ function CoverEdit( {
 	const onSelectMedia = attributesFromMedia( setAttributes );
 	const isBlogUrl = isBlobURL( url );
 
+	// Store the previous background custom size.
+	const [ prevBackgroundSize, setPrevbackgroundSize ] = useState();
+	useEffect( () => {
+		if ( ! isCustomSize( backgroundSize ) ) {
+			return;
+		}
+
+		setPrevbackgroundSize( backgroundSize );
+	}, [ backgroundSize ] );
+
 	const toggleParallax = () => {
 		setAttributes( {
 			hasParallax: ! hasParallax,
@@ -451,10 +466,13 @@ function CoverEdit( {
 								<BackgroundSizeControl
 									size={ backgroundSize }
 									onSelect={ ( newSize ) => {
-										console.log( { newSize } );
 										setAttributes( {
-											backgroundSize: newSize,
-										} )
+											backgroundSize:
+												newSize === 'custom' &&
+												!! prevBackgroundSize
+													? prevBackgroundSize
+													: newSize,
+										} );
 									} }
 								/>
 							</Fragment>

From ba1652e58dbd1084debd46e5de1f343885c53cdf Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 13 Nov 2020 15:43:01 -0300
Subject: [PATCH 07/10] cover: bgs: tweak custom icon

---
 packages/block-library/src/cover/shared.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
index 7b5d43eeb8862b..f5b55698f3dba7 100644
--- a/packages/block-library/src/cover/shared.js
+++ b/packages/block-library/src/cover/shared.js
@@ -116,7 +116,7 @@ export const SIZE_OPTIONS = [
 					stroke="currentColor"
 					strokeWidth="2"
 				/>
-				<Rect x="5" y="7" width="14" height="10" />
+				<Rect x="7" y="8" width="10" height="8" />
 			</SVG>
 		),
 	},

From 09aebb49e304165b2e65683b149a4ed1ed69a004 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 13 Nov 2020 20:54:59 -0300
Subject: [PATCH 08/10] cover: bgsize first editor approach

---
 packages/block-library/src/cover/edit.js    | 173 +++++++++++++++-----
 packages/block-library/src/cover/shared.js  |   8 +-
 packages/block-library/src/cover/style.scss |  27 ++-
 3 files changed, 156 insertions(+), 52 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index df1ef612043688..2acc4139065a1c 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -21,6 +21,7 @@ import {
 	ToggleControl,
 	withNotices,
 	ButtonGroup,
+	SelectControl,
 	__experimentalUnitControl as BaseUnitControl,
 	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
@@ -86,32 +87,113 @@ function retrieveFastAverageColor() {
 }
 
 function CustomSizeControl( { value, onSelect } ) {
+	let initMode = value.search( /auto/ );
+	if ( initMode < 1 ) {
+		initMode = 'both';
+	} else if ( initMode === 0 ) {
+		initMode = 'width';
+	} else {
+		initMode = 'height';
+	}
+
+	const [ currentMode, setMode ] = useState( initMode );
+
+	const customUnits = [
+		{ value: 'px', label: 'px', default: 0 },
+		{ value: '%', label: '%', default: 10 },
+	];
+
 	// Split and pick up values + units from the CSS inline.
-	let inlineStyleValues = value && value.split( /(%|px)/ );
-	if ( inlineStyleValues.length < 2 ) {
-		inlineStyleValues = [];
+	let wh =
+		value &&
+		value
+			.replace( /auto/, '50%' )
+			.split( /(\d+|%|px|auto)/ )
+			.filter( ( v ) => !! v && v !== ' ' );
+
+	// default values.
+	if ( wh.length < 2 ) {
+		wh = [ '50', '%', '50', '%' ];
 	}
 
-	const xValue = inlineStyleValues[ 0 ] || 50;
-	const xUnit = inlineStyleValues[ 1 ] || '%';
+	function customSizeHandler( data ) {
+		const { mode, w, wu, h, hu } = data;
+
+		if ( mode ) {
+			setMode( mode );
+		}
+
+		let inlineStyle = '';
+		switch ( mode || currentMode ) {
+			case 'width':
+				inlineStyle = `${ w || wh[ 0 ] }${ wu || wh[ 1 ] } auto`;
+				break;
+
+			case 'height':
+				inlineStyle = `auto ${ h || wh[ 2 ] }${ hu || wh[ 3 ] }`;
+				break;
+
+			case 'both':
+				inlineStyle =
+					`${ w || wh[ 0 ] }${ wu || wh[ 1 ] } ` +
+					`${ h || wh[ 2 ] }${ hu || wh[ 3 ] }`;
+				break;
+		}
+
+		onSelect( inlineStyle );
+	}
 
 	return (
-		<CoverValueUnitInput
-			label={ __( 'Custom size' ) }
-			value={ xValue }
-			unit={ xUnit }
-			units={ [
-				{ value: 'px', label: 'px', default: 0 },
-				{ value: '%', label: '%', default: 10 },
-			] }
-			onChange={ ( sizeValue ) => {
-				onSelect( `${ sizeValue }${  xUnit }` );
-			} }
-			onUnitChange={ ( unit ) => {
-				onSelect( `${ xValue }${  unit }` );
-			} }
-			customUnits= { false }
-		/>
+		<Fragment>
+			<SelectControl
+				label={ __( 'Size mode' ) }
+				options={ [
+					{
+						value: 'width',
+						label: __( 'Width' ),
+					},
+					{
+						value: 'height',
+						label: __( 'Height' ),
+					},
+					{
+						value: 'both',
+						label: __( 'Width & Height' ),
+					},
+				] }
+				value={ currentMode }
+				onChange={ ( newMode ) =>
+					customSizeHandler( { mode: newMode } )
+				}
+				labelPosition="top"
+			/>
+
+			<div className="background-size-custom-options">
+				{ ( currentMode === 'width' || currentMode === 'both' ) && (
+					<CoverValueUnitInput
+						label={ __( 'Width' ) }
+						value={ wh[ 0 ] }
+						unit={ wh[ 1 ] }
+						units={ customUnits }
+						onChange={ ( w ) => customSizeHandler( { w } ) }
+						onUnitChange={ ( wu ) => customSizeHandler( { wu } ) }
+						customUnits={ false }
+					/>
+				) }
+
+				{ ( currentMode === 'height' || currentMode === 'both' ) && (
+					<CoverValueUnitInput
+						label={ __( 'Height' ) }
+						value={ wh[ 2 ] }
+						unit={ wh[ 3 ] }
+						units={ customUnits }
+						onChange={ ( h ) => customSizeHandler( { h } ) }
+						onUnitChange={ ( hu ) => customSizeHandler( { hu } ) }
+						customUnits={ false }
+					/>
+				) }
+			</div>
+		</Fragment>
 	);
 }
 
@@ -130,33 +212,34 @@ function isCustomSize( size ) {
 
 function BackgroundSizeControl( { size = 'cover', onSelect } ) {
 	return (
-		<BaseControl
-			label={ __( ' Background size' ) }
-			id={ 'background-size' }
-		>
-			<ButtonGroup
-				label={ __( 'Size' ) }
-				defaultChecked="size-content"
-				className="background-size-options"
+		<Fragment>
+			<BaseControl
+				label={ __( ' Background size' ) }
+				id={ 'background-size' }
 			>
-				{ SIZE_OPTIONS.map( ( { slug, label, icon: sizeIcon } ) => (
-					<Button
-						key={ slug }
-						icon={ sizeIcon }
-						label={ label }
-						isPressed={
-							slug === size ||
-							( slug === 'custom' && isCustomSize( size ) )
-						}
-						onClick={ () => onSelect( slug ) }
-					/>
-				) ) }
-			</ButtonGroup>
-
-			{ isCustomSize && (
+				<ButtonGroup
+					label={ __( 'Size' ) }
+					defaultChecked="size-content"
+					className="background-size-options"
+				>
+					{ SIZE_OPTIONS.map( ( { slug, label, icon: sizeIcon } ) => (
+						<Button
+							key={ slug }
+							icon={ sizeIcon }
+							label={ label }
+							isPressed={
+								slug === size ||
+								( slug === 'custom' && isCustomSize( size ) )
+							}
+							onClick={ () => onSelect( slug ) }
+						/>
+					) ) }
+				</ButtonGroup>
+			</BaseControl>
+			{ isCustomSize( size ) && (
 				<CustomSizeControl value={ size } onSelect={ onSelect } />
 			) }
-		</BaseControl>
+		</Fragment>
 	);
 }
 
diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
index f5b55698f3dba7..265020dbd21a72 100644
--- a/packages/block-library/src/cover/shared.js
+++ b/packages/block-library/src/cover/shared.js
@@ -4,7 +4,7 @@
 import { getBlobTypeByURL, isBlobURL } from '@wordpress/blob';
 import { __ } from '@wordpress/i18n';
 import { Platform } from '@wordpress/element';
-import { SVG, Rect, Path } from '@wordpress/components';
+import { SVG, Rect } from '@wordpress/components';
 
 const POSITION_CLASSNAMES = {
 	'top left': 'is-position-top-left',
@@ -78,7 +78,7 @@ export const SIZE_OPTIONS = [
 					width="20"
 					height="20"
 					stroke="currentColor"
-					strokeWidth="2"
+					strokeWidth="1"
 				/>
 				<Rect x="7" y="2" width="10" height="20" />
 			</SVG>
@@ -96,7 +96,7 @@ export const SIZE_OPTIONS = [
 					width="20"
 					height="20"
 					stroke="currentColor"
-					strokeWidth="2"
+					strokeWidth="1"
 				/>
 				<Rect x="8" y="4" width="8" height="16" />
 			</SVG>
@@ -114,7 +114,7 @@ export const SIZE_OPTIONS = [
 					width="20"
 					height="20"
 					stroke="currentColor"
-					strokeWidth="2"
+					strokeWidth="1"
 				/>
 				<Rect x="7" y="8" width="10" height="8" />
 			</SVG>
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index f7f23e5a626b76..4eddd9b2ca8dfd 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -182,12 +182,33 @@
 	object-fit: cover;
 }
 
-// Tweak sidebar settings
+// Tweak block settings sidebar.
 .components-button-group.background-size-options {
 	display: flex;
-
 	.components-button {
-		box-shadow: none;
+		box-shadow: 0 0 1px inset;
+	}
+}
+
+.background-size-custom-options {
+	display: flex;
+
+	.components-base-control:first-child {
+		margin-right: 10px;
+		margin-bottom: 8px;
+	}
+
+	.components-base-control__field {
+		display: flex;
+		align-items: center;
+
+		.components-base-control__label {
+			margin: 0 12px 0 0;
+		}
+	}
+
+	.components-unit-control-wrapper {
+		width: 65px;
 	}
 }
 

From a3e202b704693f9ebb58a2ff0839b6bdba260a5c Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 13 Nov 2020 21:03:32 -0300
Subject: [PATCH 09/10] cover:parse and save bgsize

---
 packages/block-library/src/cover/edit.js |  2 +-
 packages/block-library/src/cover/save.js | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 2acc4139065a1c..27d5a9c495e9ed 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -203,7 +203,7 @@ function CustomSizeControl( { value, onSelect } ) {
  * @param {string} size - Background size
  * @return {boolean} True if size is custom. Otherwise, False.
  */
-function isCustomSize( size ) {
+export function isCustomSize( size ) {
 	return (
 		SIZE_OPTIONS.map( ( opt ) => opt.slug ).indexOf( size ) < 0 ||
 		size === 'custom'
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index cc9f1d44ab84ae..84e2ec387535a1 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -25,6 +25,8 @@ import {
 	getPositionClassName,
 } from './shared';
 
+import { isCustomSize } from './edit';
+
 export default function save( { attributes } ) {
 	const {
 		backgroundType,
@@ -40,6 +42,7 @@ export default function save( { attributes } ) {
 		url,
 		minHeight: minHeightProp,
 		minHeightUnit,
+		backgroundSize,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -65,6 +68,11 @@ export default function save( { attributes } ) {
 	}
 	style.minHeight = minHeight || undefined;
 
+	const hasCustomBackgroundSize = isCustomSize( backgroundSize );
+	if ( hasCustomBackgroundSize ) {
+		style.backgroundSize = backgroundSize;
+	}
+
 	let positionValue;
 
 	if ( focalPoint ) {
@@ -93,6 +101,10 @@ export default function save( { attributes } ) {
 			'has-custom-content-position': ! isContentPositionCenter(
 				contentPosition
 			),
+			'has-background-size': backgroundSize,
+			[ ! hasCustomBackgroundSize
+				? `is-${ backgroundSize }-background-size`
+				: null ]: ! hasCustomBackgroundSize,
 		},
 		getPositionClassName( contentPosition )
 	);

From bf596cc512f411b9b2d8991db2f3499a537c7e66 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 13 Nov 2020 21:21:43 -0300
Subject: [PATCH 10/10] cover: bgsize: add front-end CSS class

---
 packages/block-library/src/cover/style.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 4eddd9b2ca8dfd..5cdd114f5b98be 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -36,6 +36,18 @@
 		background-repeat: repeat;
 	}
 
+	&.is-cover-background-size {
+		background-size: cover;
+	}
+
+	&.is-contain-background-size {
+		background-size: contain;
+	}
+
+	&.is-initial-background-size {
+		background-size: initial;
+	}
+
 	/**
 	 * Set a default background color for has-background-dim _unless_ it includes another
 	 * background-color class (e.g. has-green-background-color). The presence of another