From fb7b17a0995a4e0c8e9e12035f9047d260bcffa3 Mon Sep 17 00:00:00 2001 From: Renatho De Carli Rosa Date: Wed, 30 Oct 2024 20:28:50 -0300 Subject: [PATCH] Improve cover block z-index solution (#66249) * Remove not used variable * Change the order of the elements to the expected layers order So we don't need to set z-index in all the elements, creating the stacking context for the inner blocks, for example. * Update z-index styles to be applied only for backward compatibility * Add position relative to keep inner content on the top * Fix spinner position to be over the overlay * Add new fixture * Update cover fixtures * Update deprecation to match last update from trunk * Add class to the editor * Remove class in favor of a new approach checking the children * Use styles only on frontend for backward compatibility * Fix loading state * Revert "Update cover fixtures" This reverts commit 0ae62731398295ede211eb9d199b4853ddcfea0c. * Fix deprecations and fixtures * Revert "Add the has-modal-open to the editor reproducing the same behavior of the frontend" This reverts commit 64c14d3d4ff081a07bbb8583812650992b9138e0. * Improve documentation comments in the code * Fix native tests * Update snapshots * Fix order of the properties on the generated fixtures * Add alt attribute as part of the attributes changed in the previous version --------- Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: renatho Co-authored-by: aaronrobertshaw Co-authored-by: andrewserong --- packages/base-styles/_z-index.scss | 6 +- .../block-library/src/cover/deprecated.js | 186 +++++++++++++++++- .../block-library/src/cover/edit/index.js | 45 +++-- packages/block-library/src/cover/editor.scss | 5 +- packages/block-library/src/cover/save.js | 47 +++-- packages/block-library/src/cover/style.scss | 56 ++++-- .../test/__snapshots__/edit.native.js.snap | 18 +- .../__snapshots__/transforms.native.js.snap | 8 +- .../src/cover/test/edit.native.js | 8 +- .../src/cover/test/transforms.native.js | 8 +- .../__snapshots__/transforms.native.js.snap | 2 +- .../__snapshots__/transforms.native.js.snap | 4 +- .../src/navigation/edit/index.js | 33 +--- .../__snapshots__/transforms.native.js.snap | 2 +- .../fixtures/blocks/core__cover.html | 2 +- .../fixtures/blocks/core__cover.parsed.json | 4 +- .../blocks/core__cover.serialized.html | 2 +- .../core__cover__alt-fixed-background.html | 4 +- ...e__cover__alt-fixed-background.parsed.json | 4 +- ...over__alt-fixed-background.serialized.html | 2 +- .../core__cover__deprecated-1.serialized.html | 2 +- .../blocks/core__cover__deprecated-10.json | 2 +- ...core__cover__deprecated-10.serialized.html | 2 +- .../blocks/core__cover__deprecated-14.html | 5 + .../blocks/core__cover__deprecated-14.json | 37 ++++ .../core__cover__deprecated-14.parsed.json | 37 ++++ ...core__cover__deprecated-14.serialized.html | 5 + .../core__cover__deprecated-2.serialized.html | 2 +- .../core__cover__deprecated-3.serialized.html | 2 +- .../core__cover__deprecated-4.serialized.html | 2 +- .../core__cover__deprecated-5.serialized.html | 2 +- .../core__cover__deprecated-6.serialized.html | 6 +- .../core__cover__deprecated-7.serialized.html | 2 +- .../core__cover__deprecated-8.serialized.html | 2 +- ...core__cover__duotone-fixed-background.html | 4 +- ...over__duotone-fixed-background.parsed.json | 4 +- ...__duotone-fixed-background.serialized.html | 2 +- .../blocks/core__cover__gradient-image.html | 2 +- .../core__cover__gradient-image.parsed.json | 4 +- ...ore__cover__gradient-image.serialized.html | 2 +- .../blocks/core__cover__gradient-video.html | 2 +- .../core__cover__gradient-video.parsed.json | 4 +- ...ore__cover__gradient-video.serialized.html | 2 +- .../blocks/core__cover__video-overlay.html | 4 +- .../blocks/core__cover__video-overlay.json | 6 +- .../core__cover__video-overlay.parsed.json | 7 +- ...core__cover__video-overlay.serialized.html | 2 +- .../fixtures/blocks/core__cover__video.html | 2 +- .../blocks/core__cover__video.parsed.json | 4 +- .../blocks/core__cover__video.serialized.html | 2 +- 50 files changed, 441 insertions(+), 166 deletions(-) create mode 100644 test/integration/fixtures/blocks/core__cover__deprecated-14.html create mode 100644 test/integration/fixtures/blocks/core__cover__deprecated-14.json create mode 100644 test/integration/fixtures/blocks/core__cover__deprecated-14.parsed.json create mode 100644 test/integration/fixtures/blocks/core__cover__deprecated-14.serialized.html diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 7bb71732546053..e4d6ce4ce1b1c9 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -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 ".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: diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js index 5e5fc64d12c16f..6dfad9735457f6 100644 --- a/packages/block-library/src/cover/deprecated.js +++ b/packages/block-library/src/cover/deprecated.js @@ -164,7 +164,7 @@ const v8ToV11BlockAttributes = { }, }; -const v12BlockAttributes = { +const v12toV13BlockAttributes = { ...v8ToV11BlockAttributes, useFeaturedImage: { type: 'boolean', @@ -176,6 +176,20 @@ const v12BlockAttributes = { }, }; +const v14BlockAttributes = { + ...v12toV13BlockAttributes, + isUserOverlayColor: { + type: 'boolean', + }, + sizeSlug: { + type: 'string', + }, + alt: { + type: 'string', + default: '', + }, +}; + const v7toV11BlockSupports = { anchor: true, align: true, @@ -244,9 +258,173 @@ const v12BlockSupports = { }, }; +const v14BlockSupports = { + ...v12BlockSupports, + shadow: true, + dimensions: { + aspectRatio: true, + }, + interactivity: { + clientNavigation: true, + }, +}; + +// Deprecation for blocks that have z-index. +const v14 = { + 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 ( + +