diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 77238c6f386084..784e7d33bdb14d 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..677ad098fd01e4 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,13 @@ const v12BlockAttributes = { }, }; +const v14BlockAttributes = { + ...v12toV13BlockAttributes, + sizeSlug: { + type: 'string', + }, +}; + const v7toV11BlockSupports = { anchor: true, align: true, @@ -244,9 +251,162 @@ const v12BlockSupports = { }, }; +// Deprecation for blocks that have z-index. +const v14 = { + attributes: v14BlockAttributes, + 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, + 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 ( + +