From 441c4e1bcc38a781d5723f983df31ce262f022f5 Mon Sep 17 00:00:00 2001 From: Renatho De Carli Rosa Date: Fri, 18 Oct 2024 11:49:47 -0300 Subject: [PATCH 01/20] Remove not used variable --- packages/base-styles/_z-index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 77238c6f386084..7b900c60007f91 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -34,7 +34,6 @@ $z-layers: ( ".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. ".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, From 1c2837872a5b6c62f62466d6abc77bb5835d8bc2 Mon Sep 17 00:00:00 2001 From: Renatho De Carli Rosa Date: Fri, 18 Oct 2024 12:17:15 -0300 Subject: [PATCH 02/20] 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. --- .../block-library/src/cover/deprecated.js | 153 +++++++++++++++++- .../block-library/src/cover/edit/index.js | 44 ++--- packages/block-library/src/cover/save.js | 44 ++--- 3 files changed, 198 insertions(+), 43 deletions(-) diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js index 5e5fc64d12c16f..28e67a53caf34e 100644 --- a/packages/block-library/src/cover/deprecated.js +++ b/packages/block-library/src/cover/deprecated.js @@ -244,6 +244,157 @@ const v12BlockSupports = { }, }; +// Deprecation for blocks that have z-index. +const v14 = { + attributes: v12BlockAttributes, + supports: v12BlockSupports, + 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 ( + +