From c199c090b49317d24781c780ec45c45e2398fb2f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Oct 2021 01:36:20 +1300 Subject: [PATCH] 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 Co-authored-by: Antonis Lilis --- packages/block-library/src/cover/edit.js | 2 +- packages/block-library/src/cover/edit.native.js | 2 +- packages/block-library/src/cover/shared.js | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index bcb34a81e24d1..1ad26c19a0659 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -331,7 +331,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 index aff0c997360a3..5ffdcec84547e 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -188,7 +188,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 index 5c4c20a7cb4ec..4a45c145518f0 100644 --- 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,