Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cover: Try allowing the auto overlay color when changing images to be more permissive #65077

Closed
wants to merge 3 commits into from
Closed

Cover: Try allowing the auto overlay color when changing images to be more permissive #65077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4fc9e98
Cover: Try allowing the auto overlay color when changing images to be…
andrewserong Sep 5, 2024
aad3b32
Update native snapshots
andrewserong Sep 5, 2024
352316e
Add link to PR
andrewserong Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 5 additions & 162 deletions packages/block-library/src/cover/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,167 +394,10 @@ const v13 = {
},
};

// Deprecation for blocks to prevent auto overlay color from overriding previously set values.
const v12 = {
attributes: v12BlockAttributes,
supports: v12BlockSupports,
isEligible( attributes ) {
return (
attributes.customOverlayColor !== undefined ||
attributes.overlayColor !== undefined
);
},
migrate( attributes ) {
return {
...attributes,
isUserOverlayColor: true,
};
},
save( { attributes } ) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
useFeaturedImage,
hasParallax,
isDark,
isRepeated,
overlayColor,
url,
alt,
id,
minHeight: minHeightProp,
minHeightUnit,
tagName: Tag,
} = attributes;
const overlayColorClass = getColorClassName(
'background-color',
overlayColor
);
const gradientClass = __experimentalGetGradientClass( gradient );
const minHeight =
minHeightProp && minHeightUnit
? `${ minHeightProp }${ minHeightUnit }`
: minHeightProp;

const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;

const isImgElement = ! ( hasParallax || isRepeated );

const style = {
minHeight: minHeight || undefined,
};

const bgStyle = {
backgroundColor: ! overlayColorClass
? customOverlayColor
: undefined,
background: customGradient ? customGradient : undefined,
};

const objectPosition =
// prettier-ignore
focalPoint && isImgElement
? mediaPosition(focalPoint)
: undefined;

const backgroundImage = url ? `url(${ url })` : undefined;

const backgroundPosition = mediaPosition( focalPoint );

const classes = clsx(
{
'is-light': ! isDark,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-custom-content-position':
! isContentPositionCenter( contentPosition ),
},
getPositionClassName( contentPosition )
);

const imgClasses = clsx(
'wp-block-cover__image-background',
id ? `wp-image-${ id }` : null,
{
'has-parallax': hasParallax,
'is-repeated': isRepeated,
}
);

const gradientValue = gradient || customGradient;

return (
<Tag { ...useBlockProps.save( { className: classes, style } ) }>
<span
aria-hidden="true"
className={ clsx(
'wp-block-cover__background',
overlayColorClass,
dimRatioToClass( dimRatio ),
{
'has-background-dim': dimRatio !== undefined,
// For backwards compatibility. Former versions of the Cover Block applied
// `.wp-block-cover__gradient-background` in the presence of
// media, a gradient and a dim.
'wp-block-cover__gradient-background':
url && gradientValue && dimRatio !== 0,
'has-background-gradient': gradientValue,
[ gradientClass ]: gradientClass,
}
) }
style={ bgStyle }
/>

{ ! useFeaturedImage &&
isImageBackground &&
url &&
( isImgElement ? (
<img
className={ imgClasses }
alt={ alt }
src={ url }
style={ { objectPosition } }
data-object-fit="cover"
data-object-position={ objectPosition }
/>
) : (
<div
role="img"
className={ imgClasses }
style={ { backgroundPosition, backgroundImage } }
/>
) ) }
{ isVideoBackground && url && (
<video
className={ clsx(
'wp-block-cover__video-background',
'intrinsic-ignore'
) }
autoPlay
muted
loop
playsInline
src={ url }
style={ { objectPosition } }
data-object-fit="cover"
data-object-position={ objectPosition }
/>
) }
<div
{ ...useInnerBlocksProps.save( {
className: 'wp-block-cover__inner-container',
} ) }
/>
</Tag>
);
},
};
// Note: The v12 deprecation was removed so as to no longer prevent the auto overlay color
// from overriding previously set values. The desired behavior now is to allow the auto
// overlay color to override any previously set values, unless `isUserOverlayColor` is set.
// See: https://github.com/WordPress/gutenberg/pull/65077

// Deprecation for blocks that does not have a HTML tag option.
const v11 = {
Expand Down Expand Up @@ -1823,4 +1666,4 @@ const v1 = {
},
};

export default [ v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
export default [ v13, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
22 changes: 11 additions & 11 deletions packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
"<!-- wp:cover {"isUserOverlayColor":true,"isDark":false} -->
"<!-- wp:cover {"isDark":false} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
<p class="has-text-align-center"></p>
<!-- /wp:paragraph --></div></div>
Expand All @@ -17,7 +17,7 @@ exports[`color settings sets a color for the overlay background when the placeho
`;

exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
"<!-- wp:cover {"isUserOverlayColor":true,"gradient":"light-green-cyan-to-vivid-green-cyan","isDark":false} -->
"<!-- wp:cover {"gradient":"light-green-cyan-to-vivid-green-cyan","isDark":false} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
<p class="has-text-align-center"></p>
<!-- /wp:paragraph --></div></div>
Expand All @@ -33,71 +33,71 @@ exports[`color settings toggles between solid colors and gradients 1`] = `
`;

exports[`minimum height settings changes the height value between units 1`] = `
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":50,"minHeightUnit":"px","isDark":false} -->
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":50,"minHeightUnit":"px","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:50px"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->"
`;

exports[`minimum height settings changes the height value to 20(vw) 1`] = `
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":20,"minHeightUnit":"vw","isDark":false} -->
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":20,"minHeightUnit":"vw","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:20vw"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->"
`;

exports[`minimum height settings disables the decrease button when reaching the minimum value for Pixels (px) 1`] = `
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":50,"minHeightUnit":"px","isDark":false} -->
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":50,"minHeightUnit":"px","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:50px"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->"
`;

exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to parent font size (em) 1`] = `
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"em","isDark":false} -->
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"em","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:1em"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->"
`;

exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to root font size (rem) 1`] = `
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"rem","isDark":false} -->
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"rem","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:1rem"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->"
`;

exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport height (vh) 1`] = `
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"vh","isDark":false} -->
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"vh","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:1vh"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->"
`;

exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport width (vw) 1`] = `
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"vw","isDark":false} -->
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"vw","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:1vw"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->"
`;

exports[`when an image is attached updates background opacity 1`] = `
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":15,"overlayColor":"foreground","isUserOverlayColor":true,"isDark":false} -->
"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":15,"overlayColor":"foreground","isDark":false} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->"
`;

exports[`when no media is attached and overlay color is set adds image 1`] = `
"<!-- wp:cover {"url":"https://test.files.wordpress.com/local-image-1.mp4","id":2000,"dimRatio":50,"overlayColor":"cyan-bluish-gray","isUserOverlayColor":true} -->
"<!-- wp:cover {"url":"https://test.files.wordpress.com/local-image-1.mp4","id":2000,"dimRatio":50,"overlayColor":"cyan-bluish-gray"} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-2000" src="https://test.files.wordpress.com/local-image-1.mp4" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
<p class="has-text-align-center"></p>
<!-- /wp:paragraph --></div></div>
Expand Down
Loading
Loading