diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js index cb8225ca33f965..ad864aca8ec412 100644 --- a/packages/block-library/src/cover/deprecated.js +++ b/packages/block-library/src/cover/deprecated.js @@ -14,6 +14,7 @@ import { InnerBlocks, __experimentalGetGradientClass, useBlockProps, + useInnerBlocksProps, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; @@ -26,6 +27,7 @@ import { backgroundImageStyles, getPositionClassName, isContentPositionCenter, + dimRatioToClass, } from './shared'; /** @@ -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 ( +
+