Skip to content

Commit

Permalink
Cover block: background element's classname consistency (#38392)
Browse files Browse the repository at this point in the history 
* Initial commit:
renaming `wp-block-cover__gradient-background` to `wp-block-cover__background` given that the former class is applied regardless of whether there's a gradient.
Removing duplicate gradientClass

* Updating deprecations

* Added comment to describe deprecation

* Fix block attributes

* Regenerate fixtures

* Updating snapshots to reflect classname changes in the cover block.

* Updating snapshots to reflect classname changes in the cover block.

* Reinstate `.wp-block-cover__gradient-background` where a Cover Block had media, a gradient and a dim for backwards compatibility. See #38392#issuecomment-1028434423

* Update comment

* Adding missing classname `.wp-block-cover__background` to the dim rules

Co-authored-by: Glen Davies <glen.davies@a8c.com>
  • Loading branch information
@ramonjd
ramonjd and Glen Davies committed Feb 9, 2022
1 parent 4288f1a commit 4bfd7b3
Show file tree
Hide file tree
Showing 53 changed files with 547 additions and 82 deletions.
212 changes: 211 additions & 1 deletion packages/block-library/src/cover/deprecated.js
View file
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
View file
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
View file
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
View file
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
8 changes: 4 additions & 4 deletions packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap
View file
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
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
View file
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
View file
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

0 comments on commit 4bfd7b3

Please sign in to comment.