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

Improve cover z-index solution #66249

Merged
merged 20 commits into from
Oct 30, 2024
Merged

Improve cover z-index solution #66249

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
441c4e1
Remove not used variable
renatho Oct 18, 2024
1c28378
Change the order of the elements to the expected layers order
renatho Oct 18, 2024
233b4ae
Update z-index styles to be applied only for backward compatibility
renatho Oct 18, 2024
0e736bd
Add position relative to keep inner content on the top
renatho Oct 18, 2024
a9fe8da
Fix spinner position to be over the overlay
renatho Oct 18, 2024
4f01593
Add new fixture
renatho Oct 22, 2024
0ae6273
Update cover fixtures
renatho Oct 22, 2024
4b67126
Update deprecation to match last update from trunk
renatho Oct 22, 2024
3369f0f
Add class to the editor
renatho Oct 22, 2024
0e25fed
Remove class in favor of a new approach checking the children
renatho Oct 23, 2024
9a6d996
Use styles only on frontend for backward compatibility
renatho Oct 23, 2024
e29b238
Fix loading state
renatho Oct 23, 2024
71b3ae8
Revert "Update cover fixtures"
aaronrobertshaw Oct 24, 2024
03ac4bf
Fix deprecations and fixtures
aaronrobertshaw Oct 24, 2024
7226f4b
Revert "Add the has-modal-open to the editor reproducing the same beh…
renatho Oct 24, 2024
f0640db
Improve documentation comments in the code
renatho Oct 25, 2024
eaac4cd
Fix native tests
renatho Oct 25, 2024
9ae3345
Update snapshots
renatho Oct 25, 2024
e9516a2
Fix order of the properties on the generated fixtures
renatho Oct 28, 2024
689d9e6
Add alt attribute as part of the attributes changed in the previous v…
renatho Oct 28, 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
6 changes: 4 additions & 2 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,14 @@ $z-layers: (
".interface-interface-skeleton__header": 30,
".interface-interface-skeleton__content": 20,
".edit-widgets-header": 30,
".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block.

".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder.
// These z-index are now used only for a deprecated version of the cover block.
".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block.
".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
".block-library-cover__padding-visualizer": 2, // BoxControl visualizer needs to be +1 higher than .wp-block-cover.has-background-dim::before
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
".wp-block-cover__image-background": 0, // Image background inside cover block.
".wp-block-cover__video-background": 0, // Video background inside cover block.

".wp-block-template-part__placeholder-preview-filter-input": 1,

// Fixed position appender:
Expand Down
182 changes: 178 additions & 4 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 @@ -164,7 +164,7 @@ const v8ToV11BlockAttributes = {
},
};

const v12BlockAttributes = {
const v12toV13BlockAttributes = {
...v8ToV11BlockAttributes,
useFeaturedImage: {
type: 'boolean',
Expand All @@ -176,6 +176,16 @@ const v12BlockAttributes = {
},
};

const v14BlockAttributes = {
...v12toV13BlockAttributes,
isUserOverlayColor: {
type: 'boolean',
},
sizeSlug: {
type: 'string',
},
};

const v7toV11BlockSupports = {
anchor: true,
align: true,
Expand Down Expand Up @@ -244,9 +254,173 @@ const v12BlockSupports = {
},
};

const v14BlockSupports = {
...v12BlockSupports,
shadow: true,
dimensions: {
aspectRatio: true,
},
interactivity: {
clientNavigation: true,
},
};

// Deprecation for blocks that have z-index.
const v14 = {
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
attributes: v14BlockAttributes,
supports: v14BlockSupports,
save( { attributes } ) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
useFeaturedImage,
hasParallax,
isDark,
isRepeated,
overlayColor,
url,
alt,
id,
minHeight: minHeightProp,
minHeightUnit,
tagName: Tag,
sizeSlug,
} = 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,
{
[ `size-${ sizeSlug }` ]: sizeSlug,
'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={ alt ? 'img' : undefined }
aria-label={ alt ? alt : undefined }
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>
);
},
};

// Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.
const v13 = {
attributes: v12BlockAttributes,
attributes: v12toV13BlockAttributes,
supports: v12BlockSupports,
save( { attributes } ) {
const {
Expand Down Expand Up @@ -396,7 +570,7 @@ const v13 = {

// Deprecation for blocks to prevent auto overlay color from overriding previously set values.
const v12 = {
attributes: v12BlockAttributes,
attributes: v12toV13BlockAttributes,
supports: v12BlockSupports,
isEligible( attributes ) {
return (
Expand Down Expand Up @@ -1824,4 +1998,4 @@ const v1 = {
},
};

export default [ v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
export default [ v14, v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
45 changes: 24 additions & 21 deletions packages/block-library/src/cover/edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -528,27 +528,6 @@ function CoverEdit( {
data-url={ url }
>
{ resizeListener }
{ showOverlay && (
<span
aria-hidden="true"
className={ clsx(
'wp-block-cover__background',
dimRatioToClass( dimRatio ),
{
[ 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 ]: gradientClass,
}
) }
style={ { backgroundImage: gradientValue, ...bgStyle } }
/>
) }

{ ! url && useFeaturedImage && (
<Placeholder
Expand Down Expand Up @@ -590,7 +569,31 @@ function CoverEdit( {
style={ mediaStyle }
/>
) }

{ showOverlay && (
<span
aria-hidden="true"
className={ clsx(
'wp-block-cover__background',
dimRatioToClass( dimRatio ),
{
[ 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 ]: gradientClass,
}
) }
style={ { backgroundImage: gradientValue, ...bgStyle } }
/>
) }

{ isUploadingMedia && <Spinner /> }

<CoverPlaceholder
disableMediaButtons
onSelectMedia={ onSelectMedia }
Expand Down
5 changes: 4 additions & 1 deletion packages/block-library/src/cover/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,15 @@
width: 100%;
z-index: 1;
}

.wp-block-cover__inner-container {
z-index: 2;
}
}

// Shown while media is being uploaded
.components-spinner {
position: absolute;
z-index: z-index(".wp-block-cover__inner-container");
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // Account for spinner dimensions
Expand Down
41 changes: 21 additions & 20 deletions packages/block-library/src/cover/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,26 +106,6 @@ export default function save( { attributes } ) {

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 &&
Expand Down Expand Up @@ -162,6 +142,27 @@ export default function save( { attributes } ) {
data-object-position={ objectPosition }
/>
) }

<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 }
/>

<div
{ ...useInnerBlocksProps.save( {
className: 'wp-block-cover__inner-container',
Expand Down
Loading
Loading