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.

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 block: background element's classname consistency #38392

Merged
merged 10 commits into from
Feb 9, 2022
212 changes: 211 additions & 1 deletion packages/block-library/src/cover/deprecated.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
InnerBlocks,
__experimentalGetGradientClass,
useBlockProps,
useInnerBlocksProps,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

Expand All @@ -26,6 +27,7 @@ import {
backgroundImageStyles,
getPositionClassName,
isContentPositionCenter,
dimRatioToClass,
} from './shared';

/**
Expand Down Expand Up @@ -79,6 +81,214 @@ const blockAttributes = {
},
};

// v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
const v8 = {
attributes: {
url: {
type: 'string',
},
id: {
type: 'number',
},
alt: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'alt',
default: '',
},
hasParallax: {
type: 'boolean',
default: false,
},
isRepeated: {
type: 'boolean',
default: false,
},
dimRatio: {
type: 'number',
default: 100,
},
overlayColor: {
type: 'string',
},
customOverlayColor: {
type: 'string',
},
backgroundType: {
type: 'string',
default: 'image',
},
focalPoint: {
type: 'object',
},
minHeight: {
type: 'number',
},
minHeightUnit: {
type: 'string',
},
gradient: {
type: 'string',
},
customGradient: {
type: 'string',
},
contentPosition: {
type: 'string',
},
isDark: {
type: 'boolean',
default: true,
},
allowedBlocks: {
type: 'array',
},
templateLock: {
type: [ 'string', 'boolean' ],
enum: [ 'all', 'insert', false ],
},
},
supports: {
anchor: true,
align: true,
html: false,
spacing: {
padding: true,
__experimentalDefaultControls: {
padding: true,
},
},
color: {
__experimentalDuotone:
'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
text: false,
background: false,
},
},
save( { attributes } ) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
hasParallax,
isDark,
isRepeated,
overlayColor,
url,
alt,
id,
minHeight: minHeightProp,
minHeightUnit,
} = attributes;
const overlayColorClass = getColorClassName(
'background-color',
overlayColor
);
const gradientClass = __experimentalGetGradientClass( gradient );
const minHeight = minHeightUnit
? `${ minHeightProp }${ minHeightUnit }`
: minHeightProp;

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

const isImgElement = ! ( hasParallax || isRepeated );

const style = {
...( isImageBackground && ! isImgElement
? backgroundImageStyles( url )
: {} ),
minHeight: minHeight || undefined,
};

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

const objectPosition =
// prettier-ignore
focalPoint && isImgElement
? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
: undefined;

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

return (
<div { ...useBlockProps.save( { className: classes, style } ) }>
<span
aria-hidden="true"
className={ classnames(
overlayColorClass,
dimRatioToClass( dimRatio ),
'wp-block-cover__gradient-background',
gradientClass,
{
'has-background-dim': dimRatio !== undefined,
'has-background-gradient':
gradient || customGradient,
[ gradientClass ]: ! url && gradientClass,
}
) }
style={ bgStyle }
/>

{ isImageBackground && isImgElement && url && (
<img
className={ classnames(
'wp-block-cover__image-background',
id ? `wp-image-${ id }` : null
) }
alt={ alt }
src={ url }
style={ { objectPosition } }
data-object-fit="cover"
data-object-position={ objectPosition }
/>
) }
{ isVideoBackground && url && (
<video
className={ classnames(
'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',
} ) }
/>
</div>
);
},
};

const v7 = {
attributes: {
...blockAttributes,
Expand Down Expand Up @@ -808,4 +1018,4 @@ const v1 = {
},
};

export default [ v7, v6, v5, v4, v3, v2, v1 ];
export default [ v8, v7, v6, v5, v4, v3, v2, v1 ];
12 changes: 8 additions & 4 deletions packages/block-library/src/cover/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -726,14 +726,18 @@ function CoverEdit( {
<span
aria-hidden="true"
className={ classnames(
'wp-block-cover__background',
dimRatioToClass( dimRatio ),
{ [ overlayColor.class ]: overlayColor.class },
'wp-block-cover__gradient-background',
gradientClass,
{
[ overlayColor.class ]: overlayColor.class,
'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 ]: ! url && gradientClass,
[ gradientClass ]: gradientClass,
}
) }
style={ { backgroundImage: gradientValue, ...bgStyle } }
Expand Down
14 changes: 10 additions & 4 deletions packages/block-library/src/cover/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,19 +88,25 @@ export default function save( { attributes } ) {
getPositionClassName( contentPosition )
);

const gradientValue = gradient || customGradient;

return (
<div { ...useBlockProps.save( { className: classes, style } ) }>
<span
aria-hidden="true"
className={ classnames(
'wp-block-cover__background',
overlayColorClass,
dimRatioToClass( dimRatio ),
'wp-block-cover__gradient-background',
gradientClass,
{
'has-background-dim': dimRatio !== undefined,
'has-background-gradient': gradient || customGradient,
[ gradientClass ]: ! url && gradientClass,
// 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 }
Expand Down
9 changes: 7 additions & 2 deletions packages/block-library/src/cover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,11 @@
background-color: inherit;
}

// the first selector is required for old Cover markup
// The first selector is required for old Cover markup/
// Keep .wp-block-cover__gradient-background for v8 deprecation.
&.has-background-dim:not(.has-background-gradient)::before,
.has-background-dim:not(.has-background-gradient)::before,
.wp-block-cover__background,
.wp-block-cover__gradient-background {
position: absolute;
top: 0;
Expand All @@ -77,14 +79,17 @@
@for $i from 1 through 10 {
&.has-background-dim.has-background-dim-#{ $i * 10 } {
&:not(.has-background-gradient)::before,
.wp-block-cover__background,
.wp-block-cover__gradient-background {
opacity: $i * 0.1;
}
}
}

@for $i from 0 through 10 {
.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 } {
// Keep .wp-block-cover__gradient-background for v8 deprecation
.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 },
.wp-block-cover__background.has-background-dim.has-background-dim-#{ $i * 10 } {
opacity: $i * 0.1;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,31 @@

exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
"<!-- wp:cover -->
<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
<div class=\\"wp-block-cover\\"><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>
<!-- /wp:cover -->"
`;

exports[`color settings sets a color for the overlay background when the placeholder is visible 1`] = `
"<!-- wp:cover {\\"overlayColor\\":\\"vivid-red\\"} -->
<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-vivid-red-background-color has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-vivid-red-background-color 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>
<!-- /wp:cover -->"
`;

exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background 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…\\"} -->
<div class=\\"wp-block-cover\\"><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>
<!-- /wp:cover -->"
`;

exports[`color settings toggles between solid colors and gradients 1`] = `
"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background 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…\\"} -->
<div class=\\"wp-block-cover\\"><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>
<!-- /wp:cover -->"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
<!-- /wp:paragraph -->

<!-- wp:cover {\\"isDark\\":false} -->
<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"></div></div>
<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\\"></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
Expand Down
17 changes: 9 additions & 8 deletions test/integration/fixtures/blocks/core__cover.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
<div class="wp-block-cover">
<span aria-hidden="true" class="has-background-dim-40 wp-block-cover__gradient-background has-background-dim"></span>
<img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/>
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
<img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" 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">
Guten Berg!
</p>
<!-- /wp:paragraph -->
</div>
<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">
Guten Berg!
</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:cover -->

Loading