Skip to content

Commit

Permalink
Add an 'is-light' class to the cover block when it's saved with a lig…
Browse files Browse the repository at this point in the history
…ht background
  • Loading branch information
scruffian committed Jul 22, 2021
1 parent d810fc4 commit 1dfae20
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 17 deletions.
4 changes: 4 additions & 0 deletions packages/block-library/src/cover/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@
},
"contentPosition": {
"type": "string"
},
"isDark": {
"type": "boolean",
"default": true
}
},
"supports": {
Expand Down
39 changes: 24 additions & 15 deletions packages/block-library/src/cover/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -209,49 +209,56 @@ function ResizableCover( {
* color are set, dimRatio is used to decide what is used
* for background darkness checking purposes.
* @param {?string} overlayColor String containing the overlay color value if one exists.
* The default is black to match the CSS.
* @param {?Object} elementRef If a media background is set, elementRef should contain a reference to a
* dom element that renders that media.
*
* @return {boolean} True if the cover background is considered "dark" and false otherwise.
* @param {?Function} setAttributes Function to set attributes on the block.
*/
function useCoverIsDark(
url,
dimRatio = 50,
overlayColor = '#000000',
elementRef
elementRef,
setAttributes
) {
const [ isDark, setIsDark ] = useState( false );
useEffect( () => {
// If opacity is lower than 50 the dominant color is the image or video color,
// so use that color for the dark mode computation.
if ( url && dimRatio <= 50 && elementRef.current ) {
retrieveFastAverageColor().getColorAsync(
elementRef.current,
( color ) => {
setIsDark( color.isDark );
setAttributes( {
isDark: color.isDark,
} );
}
);
}
}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );
}, [ url, url && dimRatio <= 50 && elementRef.current, setAttributes ] );
useEffect( () => {
// If opacity is greater than 50 the dominant color is the overlay color,
// so use that color for the dark mode computation.
if ( dimRatio > 50 || ! url ) {
if ( ! overlayColor ) {
// If no overlay color exists the overlay color is black (isDark )
setIsDark( true );
setAttributes( {
isDark: true,
} );
return;
}
setIsDark( tinycolor( overlayColor ).isDark() );
setAttributes( {
isDark: tinycolor( overlayColor ).isDark(),
} );
}
}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
}, [ overlayColor, dimRatio > 50 || ! url, setAttributes ] );
useEffect( () => {
if ( ! url && ! overlayColor ) {
// Reset isDark
setIsDark( false );
setAttributes( {
isDark: false,
} );
}
}, [ ! url && ! overlayColor, setIsDark ] );
return isDark;
}, [ ! url && ! overlayColor, setAttributes ] );
}

function mediaPosition( { x, y } ) {
Expand Down Expand Up @@ -324,6 +331,7 @@ function CoverEdit( {
minHeightUnit,
style: styleAttribute,
url,
isDark,
} = attributes;
const {
gradientClass,
Expand Down Expand Up @@ -380,11 +388,12 @@ function CoverEdit( {
};

const isDarkElement = useRef();
const isDark = useCoverIsDark(
useCoverIsDark(
url,
dimRatio,
overlayColor.color,
isDarkElement
isDarkElement,
setAttributes
);

const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
Expand Down Expand Up @@ -609,7 +618,7 @@ function CoverEdit( {
const classes = classnames(
dimRatioToClass( dimRatio ),
{
'is-dark-theme': isDark,
'is-light': ! isDark,
'has-background-dim': dimRatio !== 0,
'is-transient': isUploadingMedia,
'has-parallax': hasParallax,
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/cover/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export default function save( { attributes } ) {
id,
minHeight: minHeightProp,
minHeightUnit,
isDark,
} = attributes;
const overlayColorClass = getColorClassName(
'background-color',
Expand Down Expand Up @@ -75,6 +76,7 @@ export default function save( { attributes } ) {
dimRatioToClass( dimRatio ),
overlayColorClass,
{
'is-light': ! isDark,
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
Expand Down
5 changes: 3 additions & 2 deletions packages/block-library/src/cover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -102,14 +102,15 @@
}

.wp-block-cover__inner-container {
color: $white;
width: 100%;
z-index: z-index(".wp-block-cover__inner-container");

}

&.is-dark-theme {
&.is-light {
.wp-block-cover__inner-container {
color: $white;
color: $black;
}
}

Expand Down

0 comments on commit 1dfae20

Please sign in to comment.