From 38d1b54bb84eece64ff1e322e7cb3f5636d2d6cf Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Fri, 2 Sep 2022 23:03:52 +0530
Subject: [PATCH 01/20] Feat: Add block attributes related to the overlay

---
 .../src/post-featured-image/block.json              | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
index dd5956a4f9290..2c65f7017e4b3 100644
--- a/packages/block-library/src/post-featured-image/block.json
+++ b/packages/block-library/src/post-featured-image/block.json
@@ -32,6 +32,19 @@
 		"linkTarget": {
 			"type": "string",
 			"default": "_self"
+		},
+		"overlayColor": {
+			"type": "string"
+		},
+		"dimRatio": {
+			"type": "number",
+			"default": 100
+		},
+		"gradient": {
+			"type": "string"
+		},
+		"customGradient": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

From 6dc42cfab50251d0102e895939c5d39270435005 Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Fri, 2 Sep 2022 23:07:34 +0530
Subject: [PATCH 02/20] Feat: Add overlay settings and markup for editor

---
 .../src/post-featured-image/edit.js           | 112 +++++++++++++++++-
 1 file changed, 109 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index e95c8c2253dc4..b15a8aa45d7a7 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -15,6 +15,8 @@ import {
 	Placeholder,
 	Button,
 	TextControl,
+	RangeControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -24,6 +26,9 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseGradient,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
@@ -49,8 +54,17 @@ function PostFeaturedImageDisplay( {
 	context: { postId, postType: postTypeSlug, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { isLink, height, width, scale, sizeSlug, rel, linkTarget } =
-		attributes;
+	const {
+		isLink,
+		height,
+		width,
+		scale,
+		sizeSlug,
+		rel,
+		linkTarget,
+		dimRatio,
+		overlayColor,
+	} = attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
@@ -58,6 +72,16 @@ function PostFeaturedImageDisplay( {
 		postId
 	);
 
+	const { gradientClass, gradientValue, setGradient } =
+		__experimentalUseGradient();
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+	const dimRatioToClass = ( ratio ) => {
+		return ratio === undefined
+			? null
+			: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
+	};
+
 	const { media, postType } = useSelect(
 		( select ) => {
 			const { getMedia, getPostType } = select( coreStore );
@@ -91,6 +115,10 @@ function PostFeaturedImageDisplay( {
 		style: { width, height },
 	} );
 	const borderProps = useBorderProps( attributes );
+	const overlayStyles = {
+		backgroundColor: overlayColor,
+		...borderProps.style,
+	};
 
 	const placeholder = ( content ) => {
 		return (
@@ -163,6 +191,65 @@ function PostFeaturedImageDisplay( {
 					) }
 				</PanelBody>
 			</InspectorControls>
+			<InspectorControls __experimentalGroup="color">
+				<ColorGradientSettingsDropdown
+					__experimentalHasMultipleOrigins
+					__experimentalIsRenderedInSidebar
+					settings={ [
+						{
+							colorValue: overlayColor,
+							gradientValue,
+							label: __( 'Overlay' ),
+							onColorChange: ( updatedOverlayColor ) =>
+								setAttributes( {
+									overlayColor: updatedOverlayColor,
+								} ),
+							onGradientChange: setGradient,
+							isShownByDefault: true,
+							resetAllFilter: () => ( {
+								overlayColor: undefined,
+								customOverlayColor: undefined,
+								gradient: undefined,
+								customGradient: undefined,
+							} ),
+						},
+					] }
+					panelId={ clientId }
+					{ ...colorGradientSettings }
+				/>
+				<ToolsPanelItem
+					hasValue={ () => {
+						// If there's a media background the dimRatio will be
+						// defaulted to 50 whereas it will be 100 for colors.
+						return dimRatio === undefined
+							? false
+							: dimRatio !== ( mediaUrl ? 50 : 100 );
+					} }
+					label={ __( 'Overlay opacity' ) }
+					onDeselect={ () =>
+						setAttributes( { dimRatio: mediaUrl ? 50 : 100 } )
+					}
+					resetAllFilter={ () => ( {
+						dimRatio: mediaUrl ? 50 : 100,
+					} ) }
+					isShownByDefault
+					panelId={ clientId }
+				>
+					<RangeControl
+						label={ __( 'Overlay opacity' ) }
+						value={ dimRatio }
+						onChange={ ( newDimRatio ) =>
+							setAttributes( {
+								dimRatio: newDimRatio,
+							} )
+						}
+						min={ 0 }
+						max={ 100 }
+						step={ 10 }
+						required
+					/>
+				</ToolsPanelItem>
+			</InspectorControls>
 		</>
 	);
 	let image;
@@ -247,7 +334,26 @@ function PostFeaturedImageDisplay( {
 					</MediaReplaceFlow>
 				</BlockControls>
 			) }
-			<figure { ...blockProps }>{ image }</figure>
+			<figure { ...blockProps }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-post-featured-image__background',
+						dimRatioToClass( dimRatio ),
+						blockProps.className,
+						{
+							'has-background-dim': dimRatio !== undefined,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ {
+						backgroundImage: gradientValue,
+						...overlayStyles,
+					} }
+				/>
+				{ image }
+			</figure>
 		</>
 	);
 }

From 360194c9e44caea985e5be8e8117304a6363ed7a Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Fri, 2 Sep 2022 23:10:53 +0530
Subject: [PATCH 03/20] Feat: Add overlay markup for the front-end

---
 .../src/post-featured-image/index.php         | 68 +++++++++++++++++--
 1 file changed, 62 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index 5e7ed6f70332d..03d8a3e803406 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -19,10 +19,11 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
-	$is_link    = isset( $attributes['isLink'] ) && $attributes['isLink'];
-	$size_slug  = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
-	$post_title = trim( strip_tags( get_the_title( $post_ID ) ) );
-	$attr       = get_block_core_post_featured_image_border_attributes( $attributes );
+	$is_link                   = isset( $attributes['isLink'] ) && $attributes['isLink'];
+	$size_slug                 = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
+	$post_title                = trim( strip_tags( get_the_title( $post_ID ) ) );
+	$attr                      = get_block_core_post_featured_image_border_attributes( $attributes );
+	$background_element_markup = get_block_core_post_featured_image_background_element_markup( $attributes );
 
 	if ( $is_link ) {
 		$attr['alt'] = $post_title;
@@ -42,7 +43,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	$has_width  = ! empty( $attributes['width'] );
 	$has_height = ! empty( $attributes['height'] );
 	if ( ! $has_height && ! $has_width ) {
-		return "<figure $wrapper_attributes>$featured_image</figure>";
+		return "<figure {$wrapper_attributes}>{$background_element_markup}{$featured_image}</figure>";
 	}
 
 	if ( $has_width ) {
@@ -57,7 +58,62 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = str_replace( 'src=', 'style="' . esc_attr( $image_styles ) . '" src=', $featured_image );
 	}
 
-	return "<figure $wrapper_attributes>$featured_image</figure>";
+	return "<figure {$wrapper_attributes}>{$background_element_markup}{$featured_image}</figure>";
+}
+
+/**
+ * Generate markup for the HTML element that will be used for the overlay.
+ *
+ * @param array $attributes Block attributes.
+ *
+ * @return string HTML markup in string format.
+ */
+function get_block_core_post_featured_image_background_element_markup( $attributes ) {
+	$has_dim_background  = isset( $attributes['dimRatio'] ) && $attributes['dimRatio'];
+	$has_gradient        = ( isset( $attributes['gradient'] ) && $attributes['gradient'] );
+	$has_custom_gradient = ( isset( $attributes['customGradient'] ) && $attributes['customGradient'] );
+	$class_names         = array(
+		'wp-block-post-featured-image__background',
+	);
+	$styles_properties   = array();
+
+	if ( ! $has_dim_background && ! $has_gradient && ! $has_custom_gradient ) {
+		return '';
+	}
+
+	if ( $has_dim_background ) {
+		$class_names[] = 'has-background-dim';
+		$class_names[] = "has-background-dim-{$attributes['dimRatio']}";
+	}
+
+	if ( $has_gradient || $has_custom_gradient ) {
+		$class_names[] = 'has-background-gradient';
+	}
+
+	if ( $has_gradient ) {
+		$class_names[] = "has-{$attributes['gradient']}-gradient-background";
+	}
+
+	if ( ! empty( $attributes['style']['border']['radius'] ) ) {
+		$styles_properties['border-radius'] = $attributes['style']['border']['radius'];
+	}
+
+	if ( ! empty( $attributes['style']['border']['width'] ) ) {
+		$styles_properties['border-width'] = $attributes['style']['border']['width'];
+	}
+
+	$styles = '';
+
+	foreach ( $styles_properties as $style_attribute => $style_attribute_value ) {
+		$styles .= "{$style_attribute}: $style_attribute_value; ";
+	}
+
+	return sprintf(
+		'<span class="%s" style="%s" aria-hidden="true"></span>',
+		esc_attr( implode( ' ', $class_names ) ),
+		esc_attr( trim( $styles ) )
+	);
+
 }
 
 /**

From 1bbb77b97b076df8a80d0ffc466f2f1504958748 Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Fri, 2 Sep 2022 23:11:45 +0530
Subject: [PATCH 04/20] Feat: Add styles for the overlay

---
 .../src/post-featured-image/style.scss        | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss
index 7af2f5331c82c..ebaed9186cbb3 100644
--- a/packages/block-library/src/post-featured-image/style.scss
+++ b/packages/block-library/src/post-featured-image/style.scss
@@ -16,4 +16,26 @@
 	&.alignfull img {
 		width: 100%;
 	}
+
+	.wp-block-post-featured-image__background {
+		&.has-background-dim {
+			position: absolute;
+			inset: 0;
+			background-color: $black;
+
+			@at-root .wp-block-post-featured-image {
+				position: relative;
+			}
+		}
+
+		&.has-background-gradient {
+			background-color: transparent;
+		}
+
+		@for $i from 0 through 10 {
+			&.has-background-dim-#{ $i * 10 } {
+				opacity: $i * 0.1;
+			}
+		}
+	}
 }

From 9725c48b661430dc943d438b232f7b98029b78cb Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Fri, 2 Sep 2022 23:21:17 +0530
Subject: [PATCH 05/20] Feat: Add custom gradient on front-end

---
 packages/block-library/src/post-featured-image/index.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index 03d8a3e803406..9c2cf488a51d3 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -102,6 +102,10 @@ function get_block_core_post_featured_image_background_element_markup( $attribut
 		$styles_properties['border-width'] = $attributes['style']['border']['width'];
 	}
 
+	if ( $has_custom_gradient ) {
+		$styles_properties['background-image'] = $attributes['customGradient'];
+	}
+
 	$styles = '';
 
 	foreach ( $styles_properties as $style_attribute => $style_attribute_value ) {

From d45e19154322eeabfd000fefca30526f00378ee2 Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Sat, 3 Sep 2022 00:51:42 +0530
Subject: [PATCH 06/20] Refact: Use overlay instead of background for variable
 names

---
 .../src/post-featured-image/edit.js            |  2 +-
 .../src/post-featured-image/index.php          | 18 +++++++++---------
 .../src/post-featured-image/style.scss         |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index b15a8aa45d7a7..ae665f0e217aa 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -338,7 +338,7 @@ function PostFeaturedImageDisplay( {
 				<span
 					aria-hidden="true"
 					className={ classnames(
-						'wp-block-post-featured-image__background',
+						'wp-block-post-featured-image__overlay',
 						dimRatioToClass( dimRatio ),
 						blockProps.className,
 						{
diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index 9c2cf488a51d3..9fc4c53650f70 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -19,11 +19,11 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
-	$is_link                   = isset( $attributes['isLink'] ) && $attributes['isLink'];
-	$size_slug                 = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
-	$post_title                = trim( strip_tags( get_the_title( $post_ID ) ) );
-	$attr                      = get_block_core_post_featured_image_border_attributes( $attributes );
-	$background_element_markup = get_block_core_post_featured_image_background_element_markup( $attributes );
+	$is_link                = isset( $attributes['isLink'] ) && $attributes['isLink'];
+	$size_slug              = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
+	$post_title             = trim( strip_tags( get_the_title( $post_ID ) ) );
+	$attr                   = get_block_core_post_featured_image_border_attributes( $attributes );
+	$overlay_element_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
 	if ( $is_link ) {
 		$attr['alt'] = $post_title;
@@ -43,7 +43,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	$has_width  = ! empty( $attributes['width'] );
 	$has_height = ! empty( $attributes['height'] );
 	if ( ! $has_height && ! $has_width ) {
-		return "<figure {$wrapper_attributes}>{$background_element_markup}{$featured_image}</figure>";
+		return "<figure {$wrapper_attributes}>{$overlay_element_markup}{$featured_image}</figure>";
 	}
 
 	if ( $has_width ) {
@@ -58,7 +58,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = str_replace( 'src=', 'style="' . esc_attr( $image_styles ) . '" src=', $featured_image );
 	}
 
-	return "<figure {$wrapper_attributes}>{$background_element_markup}{$featured_image}</figure>";
+	return "<figure {$wrapper_attributes}>{$overlay_element_markup}{$featured_image}</figure>";
 }
 
 /**
@@ -68,12 +68,12 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
  *
  * @return string HTML markup in string format.
  */
-function get_block_core_post_featured_image_background_element_markup( $attributes ) {
+function get_block_core_post_featured_image_overlay_element_markup( $attributes ) {
 	$has_dim_background  = isset( $attributes['dimRatio'] ) && $attributes['dimRatio'];
 	$has_gradient        = ( isset( $attributes['gradient'] ) && $attributes['gradient'] );
 	$has_custom_gradient = ( isset( $attributes['customGradient'] ) && $attributes['customGradient'] );
 	$class_names         = array(
-		'wp-block-post-featured-image__background',
+		'wp-block-post-featured-image__overlay',
 	);
 	$styles_properties   = array();
 
diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss
index ebaed9186cbb3..d4cfbc7273638 100644
--- a/packages/block-library/src/post-featured-image/style.scss
+++ b/packages/block-library/src/post-featured-image/style.scss
@@ -17,7 +17,7 @@
 		width: 100%;
 	}
 
-	.wp-block-post-featured-image__background {
+	.wp-block-post-featured-image__overlay {
 		&.has-background-dim {
 			position: absolute;
 			inset: 0;

From d24db873391b0d0b24df2e2522b90e3ac4069188 Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Sat, 3 Sep 2022 22:53:48 +0530
Subject: [PATCH 07/20] Chore: Remove default opacity

---
 packages/block-library/src/post-featured-image/block.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
index 2c65f7017e4b3..e7e5fed5823b1 100644
--- a/packages/block-library/src/post-featured-image/block.json
+++ b/packages/block-library/src/post-featured-image/block.json
@@ -37,8 +37,7 @@
 			"type": "string"
 		},
 		"dimRatio": {
-			"type": "number",
-			"default": 100
+			"type": "number"
 		},
 		"gradient": {
 			"type": "string"

From 285e1bdb0b045c23a7f1775df8a3cc7b573afd55 Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Sat, 3 Sep 2022 22:54:40 +0530
Subject: [PATCH 08/20] Feat: Export the Overlay settings as a component

---
 .../post-featured-image/overlay-controls.js   | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 packages/block-library/src/post-featured-image/overlay-controls.js

diff --git a/packages/block-library/src/post-featured-image/overlay-controls.js b/packages/block-library/src/post-featured-image/overlay-controls.js
new file mode 100644
index 0000000000000..279cbc791e8f9
--- /dev/null
+++ b/packages/block-library/src/post-featured-image/overlay-controls.js
@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RangeControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import {
+	InspectorControls,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseGradient,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+const OverlayControls = ( { clientId, attributes, setAttributes } ) => {
+	const { dimRatio, overlayColor, mediaUrl } = attributes;
+
+	const { gradientValue, setGradient } = __experimentalUseGradient();
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+	return (
+		<InspectorControls __experimentalGroup="color">
+			<ColorGradientSettingsDropdown
+				__experimentalHasMultipleOrigins
+				__experimentalIsRenderedInSidebar
+				settings={ [
+					{
+						colorValue: overlayColor,
+						gradientValue,
+						label: __( 'Overlay' ),
+						onColorChange: ( updatedOverlayColor ) =>
+							setAttributes( {
+								overlayColor: updatedOverlayColor,
+							} ),
+						onGradientChange: setGradient,
+						isShownByDefault: true,
+						resetAllFilter: () => ( {
+							overlayColor: undefined,
+							customOverlayColor: undefined,
+							gradient: undefined,
+							customGradient: undefined,
+						} ),
+					},
+				] }
+				panelId={ clientId }
+				{ ...colorGradientSettings }
+			/>
+			<ToolsPanelItem
+				hasValue={ () => {
+					// If there's a media background the dimRatio will be
+					// defaulted to 50 whereas it will be 100 for colors.
+					return dimRatio === undefined
+						? false
+						: dimRatio !== ( mediaUrl ? 50 : 100 );
+				} }
+				label={ __( 'Overlay opacity' ) }
+				onDeselect={ () =>
+					setAttributes( { dimRatio: mediaUrl ? 50 : 100 } )
+				}
+				resetAllFilter={ () => ( {
+					dimRatio: mediaUrl ? 50 : 100,
+				} ) }
+				isShownByDefault
+				panelId={ clientId }
+			>
+				<RangeControl
+					label={ __( 'Overlay opacity' ) }
+					value={ dimRatio }
+					onChange={ ( newDimRatio ) =>
+						setAttributes( {
+							dimRatio: newDimRatio,
+						} )
+					}
+					min={ 0 }
+					max={ 100 }
+					step={ 10 }
+					required
+				/>
+			</ToolsPanelItem>
+		</InspectorControls>
+	);
+};
+
+export default OverlayControls;

From 97294df5d61216d3c9c485652eb88d28b7ef6e07 Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Sat, 3 Sep 2022 22:55:20 +0530
Subject: [PATCH 09/20] Feat: Add the Overlay settings in the site editor

---
 .../src/post-featured-image/edit.js           | 78 +++----------------
 1 file changed, 12 insertions(+), 66 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index ae665f0e217aa..3f3539ee72044 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -15,8 +15,6 @@ import {
 	Placeholder,
 	Button,
 	TextControl,
-	RangeControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -26,9 +24,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
-	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
@@ -38,6 +34,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import DimensionControls from './dimension-controls';
+import OverlayControls from './overlay-controls';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -72,9 +69,7 @@ function PostFeaturedImageDisplay( {
 		postId
 	);
 
-	const { gradientClass, gradientValue, setGradient } =
-		__experimentalUseGradient();
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const { gradientClass, gradientValue } = __experimentalUseGradient();
 
 	const dimRatioToClass = ( ratio ) => {
 		return ratio === undefined
@@ -191,65 +186,11 @@ function PostFeaturedImageDisplay( {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="color">
-				<ColorGradientSettingsDropdown
-					__experimentalHasMultipleOrigins
-					__experimentalIsRenderedInSidebar
-					settings={ [
-						{
-							colorValue: overlayColor,
-							gradientValue,
-							label: __( 'Overlay' ),
-							onColorChange: ( updatedOverlayColor ) =>
-								setAttributes( {
-									overlayColor: updatedOverlayColor,
-								} ),
-							onGradientChange: setGradient,
-							isShownByDefault: true,
-							resetAllFilter: () => ( {
-								overlayColor: undefined,
-								customOverlayColor: undefined,
-								gradient: undefined,
-								customGradient: undefined,
-							} ),
-						},
-					] }
-					panelId={ clientId }
-					{ ...colorGradientSettings }
-				/>
-				<ToolsPanelItem
-					hasValue={ () => {
-						// If there's a media background the dimRatio will be
-						// defaulted to 50 whereas it will be 100 for colors.
-						return dimRatio === undefined
-							? false
-							: dimRatio !== ( mediaUrl ? 50 : 100 );
-					} }
-					label={ __( 'Overlay opacity' ) }
-					onDeselect={ () =>
-						setAttributes( { dimRatio: mediaUrl ? 50 : 100 } )
-					}
-					resetAllFilter={ () => ( {
-						dimRatio: mediaUrl ? 50 : 100,
-					} ) }
-					isShownByDefault
-					panelId={ clientId }
-				>
-					<RangeControl
-						label={ __( 'Overlay opacity' ) }
-						value={ dimRatio }
-						onChange={ ( newDimRatio ) =>
-							setAttributes( {
-								dimRatio: newDimRatio,
-							} )
-						}
-						min={ 0 }
-						max={ 100 }
-						step={ 10 }
-						required
-					/>
-				</ToolsPanelItem>
-			</InspectorControls>
+			<OverlayControls
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				clientId={ clientId }
+			/>
 		</>
 	);
 	let image;
@@ -373,6 +314,11 @@ export default function PostFeaturedImageEdit( props ) {
 					withIllustration={ true }
 					style={ borderProps.style }
 				/>
+				<OverlayControls
+					attributes={ props.attributes }
+					setAttributes={ props.setAttributes }
+					clientId={ props.clientId }
+				/>
 			</div>
 		);
 	}

From e3f710cb673a09032ce314a5bda5a78dd739791b Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Sat, 3 Sep 2022 23:00:11 +0530
Subject: [PATCH 10/20] Refact: Set default overlay opacity to 0

---
 packages/block-library/src/post-featured-image/block.json      | 3 ++-
 .../block-library/src/post-featured-image/overlay-controls.js  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
index e7e5fed5823b1..8e98eaa5e3cf8 100644
--- a/packages/block-library/src/post-featured-image/block.json
+++ b/packages/block-library/src/post-featured-image/block.json
@@ -37,7 +37,8 @@
 			"type": "string"
 		},
 		"dimRatio": {
-			"type": "number"
+			"type": "number",
+			"default": 0
 		},
 		"gradient": {
 			"type": "string"
diff --git a/packages/block-library/src/post-featured-image/overlay-controls.js b/packages/block-library/src/post-featured-image/overlay-controls.js
index 279cbc791e8f9..61f52a679d424 100644
--- a/packages/block-library/src/post-featured-image/overlay-controls.js
+++ b/packages/block-library/src/post-featured-image/overlay-controls.js
@@ -59,7 +59,7 @@ const OverlayControls = ( { clientId, attributes, setAttributes } ) => {
 					setAttributes( { dimRatio: mediaUrl ? 50 : 100 } )
 				}
 				resetAllFilter={ () => ( {
-					dimRatio: mediaUrl ? 50 : 100,
+					dimRatio: 0,
 				} ) }
 				isShownByDefault
 				panelId={ clientId }

From 7519d4475ca96434108e9006ebb6f544e9b4bb34 Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Mon, 5 Sep 2022 03:45:06 +0530
Subject: [PATCH 11/20] Refact: Export the overlay markup in the separate
 component

---
 .../src/post-featured-image/edit.js           |  57 ++-------
 .../post-featured-image/overlay-controls.js   |  85 -------------
 .../src/post-featured-image/overlay.js        | 118 ++++++++++++++++++
 3 files changed, 127 insertions(+), 133 deletions(-)
 delete mode 100644 packages/block-library/src/post-featured-image/overlay-controls.js
 create mode 100644 packages/block-library/src/post-featured-image/overlay.js

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 3f3539ee72044..af7860a0fb0d3 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -24,7 +24,6 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
-	__experimentalUseGradient,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
@@ -34,7 +33,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import DimensionControls from './dimension-controls';
-import OverlayControls from './overlay-controls';
+import Overlay from './overlay';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -51,17 +50,8 @@ function PostFeaturedImageDisplay( {
 	context: { postId, postType: postTypeSlug, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const {
-		isLink,
-		height,
-		width,
-		scale,
-		sizeSlug,
-		rel,
-		linkTarget,
-		dimRatio,
-		overlayColor,
-	} = attributes;
+	const { isLink, height, width, scale, sizeSlug, rel, linkTarget } =
+		attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
@@ -69,14 +59,6 @@ function PostFeaturedImageDisplay( {
 		postId
 	);
 
-	const { gradientClass, gradientValue } = __experimentalUseGradient();
-
-	const dimRatioToClass = ( ratio ) => {
-		return ratio === undefined
-			? null
-			: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
-	};
-
 	const { media, postType } = useSelect(
 		( select ) => {
 			const { getMedia, getPostType } = select( coreStore );
@@ -110,10 +92,6 @@ function PostFeaturedImageDisplay( {
 		style: { width, height },
 	} );
 	const borderProps = useBorderProps( attributes );
-	const overlayStyles = {
-		backgroundColor: overlayColor,
-		...borderProps.style,
-	};
 
 	const placeholder = ( content ) => {
 		return (
@@ -186,11 +164,6 @@ function PostFeaturedImageDisplay( {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			<OverlayControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				clientId={ clientId }
-			/>
 		</>
 	);
 	let image;
@@ -276,24 +249,12 @@ function PostFeaturedImageDisplay( {
 				</BlockControls>
 			) }
 			<figure { ...blockProps }>
-				<span
-					aria-hidden="true"
-					className={ classnames(
-						'wp-block-post-featured-image__overlay',
-						dimRatioToClass( dimRatio ),
-						blockProps.className,
-						{
-							'has-background-dim': dimRatio !== undefined,
-							'has-background-gradient': gradientValue,
-							[ gradientClass ]: gradientClass,
-						}
-					) }
-					style={ {
-						backgroundImage: gradientValue,
-						...overlayStyles,
-					} }
-				/>
 				{ image }
+				<Overlay
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
 			</figure>
 		</>
 	);
@@ -314,7 +275,7 @@ export default function PostFeaturedImageEdit( props ) {
 					withIllustration={ true }
 					style={ borderProps.style }
 				/>
-				<OverlayControls
+				<Overlay
 					attributes={ props.attributes }
 					setAttributes={ props.setAttributes }
 					clientId={ props.clientId }
diff --git a/packages/block-library/src/post-featured-image/overlay-controls.js b/packages/block-library/src/post-featured-image/overlay-controls.js
deleted file mode 100644
index 61f52a679d424..0000000000000
--- a/packages/block-library/src/post-featured-image/overlay-controls.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	RangeControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import {
-	InspectorControls,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-	__experimentalUseGradient,
-	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
-} from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-
-const OverlayControls = ( { clientId, attributes, setAttributes } ) => {
-	const { dimRatio, overlayColor, mediaUrl } = attributes;
-
-	const { gradientValue, setGradient } = __experimentalUseGradient();
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
-
-	return (
-		<InspectorControls __experimentalGroup="color">
-			<ColorGradientSettingsDropdown
-				__experimentalHasMultipleOrigins
-				__experimentalIsRenderedInSidebar
-				settings={ [
-					{
-						colorValue: overlayColor,
-						gradientValue,
-						label: __( 'Overlay' ),
-						onColorChange: ( updatedOverlayColor ) =>
-							setAttributes( {
-								overlayColor: updatedOverlayColor,
-							} ),
-						onGradientChange: setGradient,
-						isShownByDefault: true,
-						resetAllFilter: () => ( {
-							overlayColor: undefined,
-							customOverlayColor: undefined,
-							gradient: undefined,
-							customGradient: undefined,
-						} ),
-					},
-				] }
-				panelId={ clientId }
-				{ ...colorGradientSettings }
-			/>
-			<ToolsPanelItem
-				hasValue={ () => {
-					// If there's a media background the dimRatio will be
-					// defaulted to 50 whereas it will be 100 for colors.
-					return dimRatio === undefined
-						? false
-						: dimRatio !== ( mediaUrl ? 50 : 100 );
-				} }
-				label={ __( 'Overlay opacity' ) }
-				onDeselect={ () =>
-					setAttributes( { dimRatio: mediaUrl ? 50 : 100 } )
-				}
-				resetAllFilter={ () => ( {
-					dimRatio: 0,
-				} ) }
-				isShownByDefault
-				panelId={ clientId }
-			>
-				<RangeControl
-					label={ __( 'Overlay opacity' ) }
-					value={ dimRatio }
-					onChange={ ( newDimRatio ) =>
-						setAttributes( {
-							dimRatio: newDimRatio,
-						} )
-					}
-					min={ 0 }
-					max={ 100 }
-					step={ 10 }
-					required
-				/>
-			</ToolsPanelItem>
-		</InspectorControls>
-	);
-};
-
-export default OverlayControls;
diff --git a/packages/block-library/src/post-featured-image/overlay.js b/packages/block-library/src/post-featured-image/overlay.js
new file mode 100644
index 0000000000000..1016bb609839b
--- /dev/null
+++ b/packages/block-library/src/post-featured-image/overlay.js
@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RangeControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import {
+	InspectorControls,
+	withColors,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseGradient,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	__experimentalUseBorderProps as useBorderProps,
+} from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { dimRatioToClass } from './utils';
+
+const Overlay = ( {
+	clientId,
+	attributes,
+	setAttributes,
+	overlayColor,
+	setOverlayColor,
+} ) => {
+	const { dimRatio } = attributes;
+	const { gradientClass, gradientValue, setGradient } =
+		__experimentalUseGradient();
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+	const borderProps = useBorderProps( attributes );
+	const overlayStyles = {
+		backgroundColor: overlayColor.color,
+		backgroundImage: gradientValue ?? undefined,
+		...borderProps.style,
+	};
+
+	return (
+		<>
+			<span
+				aria-hidden="true"
+				className={ classnames(
+					'wp-block-post-featured-image__overlay',
+					dimRatioToClass( dimRatio ),
+					{
+						[ overlayColor.class ]: overlayColor.class,
+						'has-background-dim': dimRatio !== undefined,
+						'has-background-gradient': gradientValue,
+						[ gradientClass ]: gradientClass,
+					}
+				) }
+				style={ { backgroundImage: gradientValue, ...overlayStyles } }
+			/>
+			<InspectorControls __experimentalGroup="color">
+				<ColorGradientSettingsDropdown
+					__experimentalHasMultipleOrigins
+					__experimentalIsRenderedInSidebar
+					settings={ [
+						{
+							colorValue: overlayColor.color,
+							gradientValue,
+							label: __( 'Overlay' ),
+							onColorChange: setOverlayColor,
+							onGradientChange: setGradient,
+							isShownByDefault: true,
+							resetAllFilter: () => ( {
+								overlayColor: undefined,
+								customOverlayColor: undefined,
+								gradient: undefined,
+								customGradient: undefined,
+							} ),
+						},
+					] }
+					panelId={ clientId }
+					{ ...colorGradientSettings }
+				/>
+				<ToolsPanelItem
+					hasValue={ () => dimRatio !== undefined }
+					label={ __( 'Overlay opacity' ) }
+					onDeselect={ () => setAttributes( { dimRatio: 0 } ) }
+					resetAllFilter={ () => ( {
+						dimRatio: 0,
+					} ) }
+					isShownByDefault
+					panelId={ clientId }
+				>
+					<RangeControl
+						label={ __( 'Overlay opacity' ) }
+						value={ dimRatio }
+						onChange={ ( newDimRatio ) =>
+							setAttributes( {
+								dimRatio: newDimRatio,
+							} )
+						}
+						min={ 0 }
+						max={ 100 }
+						step={ 10 }
+						required
+					/>
+				</ToolsPanelItem>
+			</InspectorControls>
+		</>
+	);
+};
+
+export default compose( [
+	withColors( { overlayColor: 'background-color' } ),
+] )( Overlay );

From c4f28e14b24358499463cb4dec5da494a65ea157 Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Mon, 5 Sep 2022 03:45:40 +0530
Subject: [PATCH 12/20] Feat: Export the utility function to a separate file

---
 .../block-library/src/post-featured-image/utils.js   | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 packages/block-library/src/post-featured-image/utils.js

diff --git a/packages/block-library/src/post-featured-image/utils.js b/packages/block-library/src/post-featured-image/utils.js
new file mode 100644
index 0000000000000..94dfc5410a84a
--- /dev/null
+++ b/packages/block-library/src/post-featured-image/utils.js
@@ -0,0 +1,12 @@
+/**
+ * Generates the opacity/dim class based on given number.
+ *
+ * @param {number} ratio Dim/opacity number.
+ *
+ * @return {string} Generated class.
+ */
+export function dimRatioToClass( ratio ) {
+	return ratio === undefined
+		? null
+		: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
+}

From a67c73ac861e23143888bf094658f882d925b981 Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Mon, 5 Sep 2022 03:46:12 +0530
Subject: [PATCH 13/20] Fix: Add missing custom overlay attribute

---
 packages/block-library/src/post-featured-image/block.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
index 8e98eaa5e3cf8..1072c7576d645 100644
--- a/packages/block-library/src/post-featured-image/block.json
+++ b/packages/block-library/src/post-featured-image/block.json
@@ -36,6 +36,9 @@
 		"overlayColor": {
 			"type": "string"
 		},
+		"customOverlayColor": {
+			"type": "string"
+		},
 		"dimRatio": {
 			"type": "number",
 			"default": 0

From 3734817080f2684a5aca6719a095918a7d354a35 Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Mon, 5 Sep 2022 03:46:40 +0530
Subject: [PATCH 14/20] Fix: Links not working because of the overlay

---
 .../src/post-featured-image/index.php         | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index 9fc4c53650f70..a1d3bab7518b9 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -37,13 +37,22 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( $is_link ) {
 		$link_target    = $attributes['linkTarget'];
 		$rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
-		$featured_image = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $link_target ), $rel, $featured_image );
+		$featured_image = sprintf(
+			'<a href="%1$s" target="%2$s" %3$s>%4$s%5$s</a>',
+			get_the_permalink( $post_ID ),
+			esc_attr( $link_target ),
+			$rel,
+			$featured_image,
+			$overlay_element_markup
+		);
+	} else {
+		$featured_image = $featured_image . $overlay_element_markup;
 	}
 
 	$has_width  = ! empty( $attributes['width'] );
 	$has_height = ! empty( $attributes['height'] );
 	if ( ! $has_height && ! $has_width ) {
-		return "<figure {$wrapper_attributes}>{$overlay_element_markup}{$featured_image}</figure>";
+		return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 	}
 
 	if ( $has_width ) {
@@ -58,7 +67,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = str_replace( 'src=', 'style="' . esc_attr( $image_styles ) . '" src=', $featured_image );
 	}
 
-	return "<figure {$wrapper_attributes}>{$overlay_element_markup}{$featured_image}</figure>";
+	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }
 
 /**
@@ -72,20 +81,27 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 	$has_dim_background  = isset( $attributes['dimRatio'] ) && $attributes['dimRatio'];
 	$has_gradient        = ( isset( $attributes['gradient'] ) && $attributes['gradient'] );
 	$has_custom_gradient = ( isset( $attributes['customGradient'] ) && $attributes['customGradient'] );
+	$has_solid_overlay   = ( isset( $attributes['overlayColor'] ) && $attributes['overlayColor'] );
+	$has_custom_overlay  = ( isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'] );
 	$class_names         = array(
 		'wp-block-post-featured-image__overlay',
 	);
 	$styles_properties   = array();
 
-	if ( ! $has_dim_background && ! $has_gradient && ! $has_custom_gradient ) {
+	if ( ! $has_dim_background ) {
 		return '';
 	}
 
+	// Generate required classes for the element.
 	if ( $has_dim_background ) {
 		$class_names[] = 'has-background-dim';
 		$class_names[] = "has-background-dim-{$attributes['dimRatio']}";
 	}
 
+	if ( $has_solid_overlay ) {
+		$class_names[] = "has-{$attributes['overlayColor']}-background-color";
+	}
+
 	if ( $has_gradient || $has_custom_gradient ) {
 		$class_names[] = 'has-background-gradient';
 	}
@@ -94,6 +110,7 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 		$class_names[] = "has-{$attributes['gradient']}-gradient-background";
 	}
 
+	// Generate required CSS properties and their values.
 	if ( ! empty( $attributes['style']['border']['radius'] ) ) {
 		$styles_properties['border-radius'] = $attributes['style']['border']['radius'];
 	}
@@ -106,6 +123,10 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 		$styles_properties['background-image'] = $attributes['customGradient'];
 	}
 
+	if ( $has_custom_overlay ) {
+		$styles_properties['background-color'] = $attributes['customOverlayColor'];
+	}
+
 	$styles = '';
 
 	foreach ( $styles_properties as $style_attribute => $style_attribute_value ) {

From def7a858762424f1b0705149f2e4b290aa6c076e Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Mon, 5 Sep 2022 03:47:17 +0530
Subject: [PATCH 15/20] Fix: The upload button on placeholder not working

---
 .../src/post-featured-image/editor.scss       | 147 +++++++++---------
 1 file changed, 77 insertions(+), 70 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
index be7b9a9dafa53..c52d14f44f7a6 100644
--- a/packages/block-library/src/post-featured-image/editor.scss
+++ b/packages/block-library/src/post-featured-image/editor.scss
@@ -1,85 +1,92 @@
 // Provide special styling for the placeholder.
 // @todo: this particular minimal style of placeholder could be componentized further.
-.wp-block-post-featured-image.wp-block-post-featured-image {
-	// Style the placeholder.
-	.wp-block-post-featured-image__placeholder,
-	.components-placeholder {
-		justify-content: center;
-		align-items: center;
-		padding: 0;
-
-		// Hide the upload button, as it's also available in the media library.
-		.components-form-file-upload {
-			display: none;
-		}
+.wp-block-post-featured-image {
+	.block-editor-media-placeholder {
+		z-index: 1; // Need to put it above the overlay so the upload button works.
+		backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
+	}
 
-		// Style the upload button.
-		.components-button.components-button {
-			padding: 0;
-			display: flex;
+	&.wp-block-post-featured-image {
+		// Style the placeholder.
+		.wp-block-post-featured-image__placeholder,
+		.components-placeholder {
 			justify-content: center;
 			align-items: center;
-			width: $grid-unit-60;
-			height: $grid-unit-60;
-			border-radius: 50%;
-			position: relative;
-			background: var(--wp-admin-theme-color);
-			border-color: var(--wp-admin-theme-color);
-			border-style: solid;
-			color: $white;
+			padding: 0;
 
-			> svg {
-				color: inherit;
+			// Hide the upload button, as it's also available in the media library.
+			.components-form-file-upload {
+				display: none;
 			}
-		}
 
-		// Show default placeholder height when not resized.
-		min-height: 200px;
+			// Style the upload button.
+			.components-button.components-button {
+				padding: 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: $grid-unit-60;
+				height: $grid-unit-60;
+				border-radius: 50%;
+				position: relative;
+				background: var(--wp-admin-theme-color);
+				border-color: var(--wp-admin-theme-color);
+				border-style: solid;
+				color: $white;
 
-		// The following override the default placeholder styles that remove
-		// its border so that a user selection for border color or width displays
-		// a visual border.
-		&:where(.has-border-color) {
-			border-style: solid;
-		}
-		&:where([style*="border-top-color"]) {
-			border-top-style: solid;
-		}
-		&:where([style*="border-right-color"]) {
-			border-right-style: solid;
-		}
-		&:where([style*="border-bottom-color"]) {
-			border-bottom-style: solid;
-		}
-		&:where([style*="border-left-color"]) {
-			border-left-style: solid;
-		}
+				> svg {
+					color: inherit;
+				}
+			}
 
-		&:where([style*="border-width"]) {
-			border-style: solid;
-		}
-		&:where([style*="border-top-width"]) {
-			border-top-style: solid;
-		}
-		&:where([style*="border-right-width"]) {
-			border-right-style: solid;
-		}
-		&:where([style*="border-bottom-width"]) {
-			border-bottom-style: solid;
-		}
-		&:where([style*="border-left-width"]) {
-			border-left-style: solid;
+			// Show default placeholder height when not resized.
+			min-height: 200px;
+
+			// The following override the default placeholder styles that remove
+			// its border so that a user selection for border color or width displays
+			// a visual border.
+			&:where(.has-border-color) {
+				border-style: solid;
+			}
+			&:where([style*="border-top-color"]) {
+				border-top-style: solid;
+			}
+			&:where([style*="border-right-color"]) {
+				border-right-style: solid;
+			}
+			&:where([style*="border-bottom-color"]) {
+				border-bottom-style: solid;
+			}
+			&:where([style*="border-left-color"]) {
+				border-left-style: solid;
+			}
+
+			&:where([style*="border-width"]) {
+				border-style: solid;
+			}
+			&:where([style*="border-top-width"]) {
+				border-top-style: solid;
+			}
+			&:where([style*="border-right-width"]) {
+				border-right-style: solid;
+			}
+			&:where([style*="border-bottom-width"]) {
+				border-bottom-style: solid;
+			}
+			&:where([style*="border-left-width"]) {
+				border-left-style: solid;
+			}
 		}
-	}
 
-	// Provide a minimum size for the placeholder when resized.
-	// Note, this should be as small as we can afford it, and exists only
-	// to ensure there's room for the upload button.
-	&[style*="height"] .components-placeholder {
-		min-height: $grid-unit-60;
-		min-width: $grid-unit-60;
-		height: 100%;
-		width: 100%;
+		// Provide a minimum size for the placeholder when resized.
+		// Note, this should be as small as we can afford it, and exists only
+		// to ensure there's room for the upload button.
+		&[style*="height"] .components-placeholder {
+			min-height: $grid-unit-60;
+			min-width: $grid-unit-60;
+			height: 100%;
+			width: 100%;
+		}
 	}
 }
 

From 4375805f1c90529457528ae5c90032f6d0ecf7ba Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Mon, 5 Sep 2022 03:53:21 +0530
Subject: [PATCH 16/20] Refact: Rename variable to a shorten name

'overlay_element_markup' to 'overlay_markup'
---
 .../src/post-featured-image/index.php              | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index a1d3bab7518b9..b1c86ccda2b1a 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -19,11 +19,11 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
-	$is_link                = isset( $attributes['isLink'] ) && $attributes['isLink'];
-	$size_slug              = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
-	$post_title             = trim( strip_tags( get_the_title( $post_ID ) ) );
-	$attr                   = get_block_core_post_featured_image_border_attributes( $attributes );
-	$overlay_element_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
+	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
+	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
+	$post_title     = trim( strip_tags( get_the_title( $post_ID ) ) );
+	$attr           = get_block_core_post_featured_image_border_attributes( $attributes );
+	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
 	if ( $is_link ) {
 		$attr['alt'] = $post_title;
@@ -43,10 +43,10 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 			esc_attr( $link_target ),
 			$rel,
 			$featured_image,
-			$overlay_element_markup
+			$overlay_markup
 		);
 	} else {
-		$featured_image = $featured_image . $overlay_element_markup;
+		$featured_image = $featured_image . $overlay_markup;
 	}
 
 	$has_width  = ! empty( $attributes['width'] );

From 86e4ecd04b26a604c5d1a72f032c11e7e80375de Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Mon, 5 Sep 2022 03:56:21 +0530
Subject: [PATCH 17/20] Chore: Remove unnecessary brackets

---
 packages/block-library/src/post-featured-image/index.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index b1c86ccda2b1a..931d87c0265c1 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -79,10 +79,10 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
  */
 function get_block_core_post_featured_image_overlay_element_markup( $attributes ) {
 	$has_dim_background  = isset( $attributes['dimRatio'] ) && $attributes['dimRatio'];
-	$has_gradient        = ( isset( $attributes['gradient'] ) && $attributes['gradient'] );
-	$has_custom_gradient = ( isset( $attributes['customGradient'] ) && $attributes['customGradient'] );
-	$has_solid_overlay   = ( isset( $attributes['overlayColor'] ) && $attributes['overlayColor'] );
-	$has_custom_overlay  = ( isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'] );
+	$has_gradient        = isset( $attributes['gradient'] ) && $attributes['gradient'];
+	$has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient'];
+	$has_solid_overlay   = isset( $attributes['overlayColor'] ) && $attributes['overlayColor'];
+	$has_custom_overlay  = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'];
 	$class_names         = array(
 		'wp-block-post-featured-image__overlay',
 	);

From ecd6c3ec2c13b4e5c45cfa5bf3d65a397882c33d Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Mon, 5 Sep 2022 04:02:06 +0530
Subject: [PATCH 18/20] Refact: Remove duplicate style property

---
 packages/block-library/src/post-featured-image/overlay.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/overlay.js b/packages/block-library/src/post-featured-image/overlay.js
index 1016bb609839b..572cef64801e7 100644
--- a/packages/block-library/src/post-featured-image/overlay.js
+++ b/packages/block-library/src/post-featured-image/overlay.js
@@ -41,7 +41,7 @@ const Overlay = ( {
 	const borderProps = useBorderProps( attributes );
 	const overlayStyles = {
 		backgroundColor: overlayColor.color,
-		backgroundImage: gradientValue ?? undefined,
+		backgroundImage: gradientValue,
 		...borderProps.style,
 	};
 
@@ -59,7 +59,7 @@ const Overlay = ( {
 						[ gradientClass ]: gradientClass,
 					}
 				) }
-				style={ { backgroundImage: gradientValue, ...overlayStyles } }
+				style={ overlayStyles }
 			/>
 			<InspectorControls __experimentalGroup="color">
 				<ColorGradientSettingsDropdown

From 33e82a05160ae0a65ab3836380b83aff0f9c522f Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Mon, 5 Sep 2022 04:07:51 +0530
Subject: [PATCH 19/20] Feat: Add overlay when block is used inside query loop

---
 packages/block-library/src/post-featured-image/edit.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index af7860a0fb0d3..1cdc0d0fd32eb 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -171,7 +171,14 @@ function PostFeaturedImageDisplay( {
 		return (
 			<>
 				{ controls }
-				<div { ...blockProps }>{ placeholder() }</div>
+				<div { ...blockProps }>
+					{ placeholder() }
+					<Overlay
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						clientId={ clientId }
+					/>
+				</div>
 			</>
 		);
 	}

From b1e40ec5fd4f8e2a0e917f6e9576bf711dd9987b Mon Sep 17 00:00:00 2001
From: RahiDroid <rahi.prajapati@rtcamp.com>
Date: Mon, 5 Sep 2022 04:34:03 +0530
Subject: [PATCH 20/20] Fix: Missing attribute in unit test and doc

---
 docs/reference-guides/core-blocks.md                            | 2 +-
 test/integration/fixtures/blocks/core__post-featured-image.json | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 7488b6b9cdfe8..87f3a92810fe8 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -546,7 +546,7 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber
 -	**Name:** core/post-featured-image
 -	**Category:** theme
 -	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~
--	**Attributes:** height, isLink, linkTarget, rel, scale, sizeSlug, width
+-	**Attributes:** customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
 
 ## Post Navigation Link
 
diff --git a/test/integration/fixtures/blocks/core__post-featured-image.json b/test/integration/fixtures/blocks/core__post-featured-image.json
index 7086665089d63..29a7ccbe5c65a 100644
--- a/test/integration/fixtures/blocks/core__post-featured-image.json
+++ b/test/integration/fixtures/blocks/core__post-featured-image.json
@@ -3,6 +3,7 @@
 		"name": "core/post-featured-image",
 		"isValid": true,
 		"attributes": {
+			"dimRatio": 0,
 			"isLink": false,
 			"scale": "cover",
 			"rel": "",