Cover block: Change dimRatio to 50 if media added and dimRatio is set…

… to 100 (#35789) * Change opacity to 50 if media added and opacity is set to 100 to prevent background color obscuring image * Fixes cover opacity bug on mobile (#35792) Co-authored-by: Glen Davies <[email protected]> Co-authored-by: Antonis Lilis <[email protected]>
WordPress · Oct 20, 2021 · 7b7b0d0 · 7b7b0d0
1 parent 3df8596
commit 7b7b0d0
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -333,7 +333,7 @@ function CoverEdit( {
 		gradientValue,
 		setGradient,
 	} = __experimentalUseGradient();
-	const onSelectMedia = attributesFromMedia( setAttributes );
+	const onSelectMedia = attributesFromMedia( setAttributes, dimRatio );
 	const isUploadingMedia = isTemporaryMedia( id, url );
 
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -190,7 +190,7 @@ const Cover = ( {
 
 	const onSelectMedia = ( media ) => {
 		setDidUploadFail( false );
-		const onSelect = attributesFromMedia( setAttributes );
+		const onSelect = attributesFromMedia( setAttributes, dimRatio );
 		onSelect( media );
 	};
 

diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
@@ -32,7 +32,7 @@ export function dimRatioToClass( ratio ) {
 		: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
 }
 
-export function attributesFromMedia( setAttributes ) {
+export function attributesFromMedia( setAttributes, dimRatio ) {
 	return ( media ) => {
 		if ( ! media || ! media.url ) {
 			setAttributes( { url: undefined, id: undefined } );
@@ -65,6 +65,7 @@ export function attributesFromMedia( setAttributes ) {
 		}
 
 		setAttributes( {
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
 			url: media.url,
 			id: media.id,
 			alt: media?.alt,