@wordpress/block-library 7.5.0 → 7.8.0

package/src/cover/deprecated.js

@@ -24,12 +24,15 @@ import { __ } from '@wordpress/i18n';
 import {
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
-	backgroundImageStyles,
 	getPositionClassName,
 	isContentPositionCenter,
 	dimRatioToClass,
 } from './shared';
 
+function backgroundImageStyles( url ) {
+	return url ? { backgroundImage: `url(${ url })` } : {};
+}
+
 /**
  * Original function to determine the background opacity classname
  *
@@ -81,91 +84,231 @@ 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 ],
-		},
+const v8ToV10BlockAttributes = {
+	url: {
+		type: 'string',
 	},
-	supports: {
-		anchor: true,
-		align: true,
-		html: false,
-		spacing: {
+	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 ],
+	},
+};
+
+const v7toV10BlockSupports = {
+	anchor: true,
+	align: true,
+	html: false,
+	spacing: {
+		padding: true,
+		__experimentalDefaultControls: {
 			padding: true,
-			__experimentalDefaultControls: {
-				padding: true,
-			},
-		},
-		color: {
-			__experimentalDuotone:
-				'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
-			text: false,
-			background: false,
 		},
 	},
+	color: {
+		__experimentalDuotone:
+			'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+		text: false,
+		background: false,
+	},
+};
+
+// Deprecation for blocks that renders fixed background as backgroud from the main block container.
+const v10 = {
+	attributes: v8ToV10BlockAttributes,
+	supports: v7toV10BlockSupports,
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+		} = 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 = {
+			...( isImageBackground && ! isImgElement && ! useFeaturedImage
+				? 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 }
+				/>
+
+				{ ! useFeaturedImage &&
+					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>
+		);
+	},
+};
+
+// Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
+const v9 = {
+	attributes: v8ToV10BlockAttributes,
+	supports: v7toV10BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -224,9 +367,8 @@ const v9 = {
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
 				'is-repeated': isRepeated,
-				'has-custom-content-position': ! isContentPositionCenter(
-					contentPosition
-				),
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
 			},
 			getPositionClassName( contentPosition )
 		);
@@ -296,89 +438,8 @@ const v9 = {
 
 // 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,
-		},
-	},
+	attributes: v8ToV10BlockAttributes,
+	supports: v7toV10BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -437,9 +498,8 @@ const v8 = {
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
 				'is-repeated': isRepeated,
-				'has-custom-content-position': ! isContentPositionCenter(
-					contentPosition
-				),
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
 			},
 			getPositionClassName( contentPosition )
 		);
@@ -532,23 +592,7 @@ const v7 = {
 			default: '',
 		},
 	},
-	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,
-		},
-	},
+	supports: v7toV10BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -607,9 +651,8 @@ const v7 = {
 				'is-repeated': isRepeated,
 				'has-background-gradient': gradient || customGradient,
 				[ gradientClass ]: ! url && gradientClass,
-				'has-custom-content-position': ! isContentPositionCenter(
-					contentPosition
-				),
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
 			},
 			getPositionClassName( contentPosition )
 		);
@@ -759,9 +802,8 @@ const v6 = {
 				'is-repeated': isRepeated,
 				'has-background-gradient': gradient || customGradient,
 				[ gradientClass ]: ! url && gradientClass,
-				'has-custom-content-position': ! isContentPositionCenter(
-					contentPosition
-				),
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
 			},
 			getPositionClassName( contentPosition )
 		);
@@ -1231,4 +1273,4 @@ const v1 = {
 	},
 };
 
-export default [ v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

package/src/cover/edit/block-controls.js

@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+import {
+	BlockControls,
+	MediaReplaceFlow,
+	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
+	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_MEDIA_TYPES, IMAGE_BACKGROUND_TYPE } from '../shared';
+
+export default function CoverBlockControls( {
+	attributes,
+	setAttributes,
+	onSelectMedia,
+	currentSettings,
+} ) {
+	const {
+		contentPosition,
+		id,
+		useFeaturedImage,
+		dimRatio,
+		minHeight,
+		minHeightUnit,
+	} = attributes;
+	const { hasInnerBlocks, url } = currentSettings;
+
+	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
+	const [ prevMinHeightUnit, setPrevMinHeightUnit ] =
+		useState( minHeightUnit );
+	const isMinFullHeight = minHeightUnit === 'vh' && minHeight === 100;
+	const toggleMinFullHeight = () => {
+		if ( isMinFullHeight ) {
+			// If there aren't previous values, take the default ones.
+			if ( prevMinHeightUnit === 'vh' && prevMinHeightValue === 100 ) {
+				return setAttributes( {
+					minHeight: undefined,
+					minHeightUnit: undefined,
+				} );
+			}
+
+			// Set the previous values of height.
+			return setAttributes( {
+				minHeight: prevMinHeightValue,
+				minHeightUnit: prevMinHeightUnit,
+			} );
+		}
+
+		setPrevMinHeightValue( minHeight );
+		setPrevMinHeightUnit( minHeightUnit );
+
+		// Set full height.
+		return setAttributes( {
+			minHeight: 100,
+			minHeightUnit: 'vh',
+		} );
+	};
+
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			id: undefined,
+			url: undefined,
+			useFeaturedImage: ! useFeaturedImage,
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+			backgroundType: useFeaturedImage
+				? IMAGE_BACKGROUND_TYPE
+				: undefined,
+		} );
+	};
+	return (
+		<>
+			<BlockControls group="block">
+				<BlockAlignmentMatrixControl
+					label={ __( 'Change content position' ) }
+					value={ contentPosition }
+					onChange={ ( nextPosition ) =>
+						setAttributes( {
+							contentPosition: nextPosition,
+						} )
+					}
+					isDisabled={ ! hasInnerBlocks }
+				/>
+				<FullHeightAlignmentControl
+					isActive={ isMinFullHeight }
+					onToggle={ toggleMinFullHeight }
+					isDisabled={ ! hasInnerBlocks }
+				/>
+			</BlockControls>
+			<BlockControls group="other">
+				<MediaReplaceFlow
+					mediaId={ id }
+					mediaURL={ url }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					accept="image/*,video/*"
+					onSelect={ onSelectMedia }
+					onToggleFeaturedImage={ toggleUseFeaturedImage }
+					useFeaturedImage={ useFeaturedImage }
+					name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+				/>
+			</BlockControls>
+		</>
+	);
+}

package/src/cover/edit/cover-placeholder.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockIcon, MediaPlaceholder } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { cover as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_MEDIA_TYPES } from '../shared';
+
+export default function CoverPlaceholder( {
+	disableMediaButtons = false,
+	children,
+	onSelectMedia,
+	onError,
+	style,
+} ) {
+	return (
+		<MediaPlaceholder
+			icon={ <BlockIcon icon={ icon } /> }
+			labels={ {
+				title: __( 'Cover' ),
+				instructions: __(
+					'Drag and drop onto this block, upload, or select existing media from your library.'
+				),
+			} }
+			onSelect={ onSelectMedia }
+			accept="image/*,video/*"
+			allowedTypes={ ALLOWED_MEDIA_TYPES }
+			disableMediaButtons={ disableMediaButtons }
+			onError={ onError }
+			style={ style }
+		>
+			{ children }
+		</MediaPlaceholder>
+	);
+}