@wordpress/block-library 7.0.2 → 7.1.0

package/src/cover/controls.native.js

@@ -76,7 +76,7 @@ function Controls( {
 			'vw',
 			'vh',
 		],
-		defaultValues: { px: '430', em: '20', rem: '20', vw: '20', vh: '50' },
+		defaultValues: { px: 430, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 
 	const onOpacityChange = useCallback( ( value ) => {

package/src/cover/deprecated.js

@@ -81,6 +81,219 @@ const blockAttributes = {
 	},
 };
 
+// Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
+const v9 = {
+	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 )
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<div { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'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 }
+				/>
+
+				{ isImageBackground && isImgElement && url && (
+					<img
+						className={ classnames(
+							'wp-block-cover__image-background',
+							id ? `wp-image-${ id }` : null
+						) }
+						alt={ alt }
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				{ isVideoBackground && url && (
+					<video
+						className={ classnames(
+							'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',
+					} ) }
+				/>
+			</div>
+		);
+	},
+};
+
 // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
 const v8 = {
 	attributes: {
@@ -1018,4 +1231,4 @@ const v1 = {
 	},
 };
 
-export default [ v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

package/src/cover/edit.js

@@ -110,7 +110,7 @@ function CoverHeightInput( {
 			'vw',
 			'vh',
 		],
-		defaultValues: { px: '430', em: '20', rem: '20', vw: '20', vh: '50' },
+		defaultValues: { px: 430, '%': 20, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 
 	const handleOnChange = ( unprocessedValue ) => {
@@ -125,9 +125,6 @@ function CoverHeightInput( {
 		}
 		setTemporaryInput( null );
 		onChange( inputValue );
-		if ( inputValue === undefined ) {
-			onUnitChange();
-		}
 	};
 
 	const handleOnBlur = () => {
@@ -244,7 +241,7 @@ function useCoverIsDark( url, dimRatio = 50, overlayColor, elementRef ) {
 	}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
 	useEffect( () => {
 		if ( ! url && ! overlayColor ) {
-			// Reset isDark
+			// Reset isDark.
 			setIsDark( false );
 		}
 	}, [ ! url && ! overlayColor, setIsDark ] );
@@ -402,9 +399,10 @@ function CoverEdit( {
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
-	const minHeightWithUnit = minHeightUnit
-		? `${ minHeight }${ minHeightUnit }`
-		: minHeight;
+	const minHeightWithUnit =
+		minHeight && minHeightUnit
+			? `${ minHeight }${ minHeightUnit }`
+			: minHeight;
 
 	const isImgElement = ! ( hasParallax || isRepeated );
 

package/src/cover/edit.native.js

@@ -121,7 +121,7 @@ const Cover = ( {
 	useEffect( () => {
 		let isCurrent = true;
 
-		// sync with local media store
+		// Sync with local media store.
 		mediaUploadSync();
 		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
 			'screenReaderChanged',
@@ -186,21 +186,21 @@ const Cover = ( {
 	// parent styles for the current block. If there are,
 	// it will use that color instead.
 	useEffect( () => {
-		// While we don't support theme colors
+		// While we don't support theme colors.
 		if ( ! attributes.overlayColor || ( ! attributes.overlay && url ) ) {
 			setAttributes( { childrenStyles: styles.defaultColor } );
 		}
 	}, [ setAttributes ] );
 
-	// initialize uploading flag to false, awaiting sync
+	// Initialize uploading flag to false, awaiting sync.
 	const [ isUploadInProgress, setIsUploadInProgress ] = useState( false );
 
-	// initialize upload failure flag to true if url is local
+	// Initialize upload failure flag to true if url is local.
 	const [ didUploadFail, setDidUploadFail ] = useState(
 		id && getProtocol( url ) === 'file:'
 	);
 
-	// don't show failure if upload is in progress
+	// Don't show failure if upload is in progress.
 	const shouldShowFailure = didUploadFail && ! isUploadInProgress;
 
 	const onSelectMedia = ( media ) => {
@@ -243,7 +243,7 @@ const Cover = ( {
 		const colorValue = getColorObjectByColorValue( colorsDefault, color );
 
 		setAttributes( {
-			// clear all related attributes (only one should be set)
+			// Clear all related attributes (only one should be set).
 			overlayColor: colorValue?.slug ?? undefined,
 			customOverlayColor: ( ! colorValue?.slug && color ) ?? undefined,
 			gradient: undefined,
@@ -272,7 +272,7 @@ const Cover = ( {
 				style?.color?.background ||
 				styles.overlay?.color,
 		},
-		// While we don't support theme colors we add a default bg color
+		// While we don't support theme colors we add a default bg color.
 		! overlayColorValue.color && ! url ? backgroundColor : {},
 		isImage &&
 			isParentSelected &&
@@ -440,7 +440,7 @@ const Cover = ( {
 						onLoadStart={ onVideoLoadStart }
 						style={ [
 							styles.background,
-							// Hide Video component since it has black background while loading the source
+							// Hide Video component since it has black background while loading the source.
 							{ opacity: isVideoLoading ? 0 : 1 },
 						] }
 					/>

package/src/cover/overlay-color-settings.native.js

@@ -38,7 +38,7 @@ function OverlayColorSettings( {
 	const settings = useMemo( () => {
 		const setOverlayAttribute = ( attributeName, value ) => {
 			setAttributes( {
-				// clear all related attributes (only one should be set)
+				// Clear all related attributes (only one should be set)
 				overlayColor: undefined,
 				customOverlayColor: undefined,
 				gradient: undefined,
@@ -48,7 +48,7 @@ function OverlayColorSettings( {
 		};
 
 		const onColorChange = ( value ) => {
-			// do nothing for falsy values
+			// Do nothing for falsy values.
 			if ( ! value ) {
 				return;
 			}
@@ -61,7 +61,7 @@ function OverlayColorSettings( {
 		};
 
 		const onGradientChange = ( value ) => {
-			// do nothing for falsy values
+			// Do nothing for falsy values.
 			if ( ! value ) {
 				return;
 			}

package/src/cover/save.js

@@ -49,9 +49,10 @@ export default function save( { attributes } ) {
 		overlayColor
 	);
 	const gradientClass = __experimentalGetGradientClass( gradient );
-	const minHeight = minHeightUnit
-		? `${ minHeightProp }${ minHeightUnit }`
-		: minHeightProp;
+	const minHeight =
+		minHeightProp && minHeightUnit
+			? `${ minHeightProp }${ minHeightUnit }`
+			: minHeightProp;
 
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;

package/src/cover/shared.js

@@ -44,7 +44,7 @@ export function attributesFromMedia( setAttributes, dimRatio ) {
 		}
 
 		let mediaType;
-		// for media selections originated from a file upload.
+		// For media selections originated from a file upload.
 		if ( media.media_type ) {
 			if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
 				mediaType = IMAGE_BACKGROUND_TYPE;
@@ -54,7 +54,7 @@ export function attributesFromMedia( setAttributes, dimRatio ) {
 				mediaType = VIDEO_BACKGROUND_TYPE;
 			}
 		} else {
-			// for media selections originated from existing files in the media library.
+			// For media selections originated from existing files in the media library.
 			if (
 				media.type !== IMAGE_BACKGROUND_TYPE &&
 				media.type !== VIDEO_BACKGROUND_TYPE

package/src/cover/style.scss

@@ -55,8 +55,7 @@
 	}
 
 	// the first selector is required for old Cover markup
-	&.has-background-dim::before,
-	.has-background-dim::before {
+	&.has-background-dim::before {
 		content: "";
 		background-color: inherit;
 	}
@@ -64,7 +63,6 @@
 	// The first selector is required for old Cover markup/
 	// Keep .wp-block-cover__gradient-background for v8 deprecation.
 	&.has-background-dim:not(.has-background-gradient)::before,
-	.has-background-dim:not(.has-background-gradient)::before,
 	.wp-block-cover__background,
 	.wp-block-cover__gradient-background {
 		position: absolute;