@wordpress/block-library 8.2.0 → 8.3.0

package/src/cover/deprecated.js

@@ -16,6 +16,7 @@ import {
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -26,6 +27,7 @@ import {
 	getPositionClassName,
 	isContentPositionCenter,
 	dimRatioToClass,
+	mediaPosition,
 } from './shared';
 
 function backgroundImageStyles( url ) {
@@ -53,6 +55,18 @@ function migrateDimRatio( attributes ) {
 	};
 }
 
+function migrateTag( attributes ) {
+	if ( ! attributes.tagName ) {
+		attributes = {
+			...attributes,
+			tagName: 'div',
+		};
+	}
+	return {
+		...attributes,
+	};
+}
+
 const blockAttributes = {
 	url: {
 		type: 'string',
@@ -168,6 +182,155 @@ const v7toV10BlockSupports = {
 	},
 };
 
+// Deprecation for blocks that does not have a HTML tag option.
+const v11 = {
+	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 = {
+			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 = classnames(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = classnames(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		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 &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role="img"
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ 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 that renders fixed background as backgroud from the main block container.
 const v10 = {
 	attributes: v8ToV10BlockAttributes,
@@ -433,6 +596,7 @@ const v9 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
@@ -559,6 +723,7 @@ const v8 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 const v7 = {
@@ -707,7 +872,7 @@ const v7 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v6 = {
@@ -840,7 +1005,7 @@ const v6 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v5 = {
@@ -937,7 +1102,7 @@ const v5 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v4 = {
@@ -1034,7 +1199,7 @@ const v4 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v3 = {
@@ -1117,6 +1282,7 @@ const v3 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
 
 		const { title, contentAlign, ...restAttributes } = newAttribs;
@@ -1202,6 +1368,7 @@ const v2 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
 
 		const { title, contentAlign, align, ...restAttributes } = newAttribs;
@@ -1262,8 +1429,8 @@ const v1 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
-
 		const { title, contentAlign, align, ...restAttributes } = newAttribs;
 
 		return [
@@ -1280,4 +1447,4 @@ const v1 = {
 	},
 };
 
-export default [ v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

package/src/cover/edit/index.js

@@ -94,6 +94,7 @@ function CoverEdit( {
 		alt,
 		allowedBlocks,
 		templateLock,
+		tagName: TagName = 'div',
 	} = attributes;
 
 	const [ featuredImage ] = useEntityProp(
@@ -247,7 +248,7 @@ function CoverEdit( {
 			<>
 				{ blockControls }
 				{ inspectorControls }
-				<div
+				<TagName
 					{ ...blockProps }
 					className={ classnames(
 						'is-placeholder',
@@ -286,7 +287,7 @@ function CoverEdit( {
 						} }
 						showHandle={ isSelected }
 					/>
-				</div>
+				</TagName>
 			</>
 		);
 	}
@@ -308,7 +309,7 @@ function CoverEdit( {
 		<>
 			{ blockControls }
 			{ inspectorControls }
-			<div
+			<TagName
 				{ ...blockProps }
 				className={ classnames( classes, blockProps.className ) }
 				style={ { ...style, ...blockProps.style } }
@@ -399,7 +400,7 @@ function CoverEdit( {
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 				/>
 				<div { ...innerBlocksProps } />
-			</div>
+			</TagName>
 		</>
 	);
 }

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

@@ -11,6 +11,7 @@ import {
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
+	SelectControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
@@ -102,6 +103,7 @@ export default function CoverInspectorControls( {
 		minHeight,
 		minHeightUnit,
 		alt,
+		tagName,
 	} = attributes;
 	const {
 		isVideoBackground,
@@ -140,6 +142,27 @@ export default function CoverInspectorControls( {
 
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
+	const htmlElementMessages = {
+		header: __(
+			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+		),
+		main: __(
+			'The <main> element should be used for the primary content of your document only. '
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		article: __(
+			'The <article> element should represent a self-contained, syndicatable portion of the document.'
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+		footer: __(
+			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+		),
+	};
+
 	return (
 		<>
 			<InspectorControls>
@@ -225,7 +248,7 @@ export default function CoverInspectorControls( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="color">
+			<InspectorControls group="color">
 				<ColorGradientSettingsDropdown
 					__experimentalIsRenderedInSidebar
 					settings={ [
@@ -281,7 +304,7 @@ export default function CoverInspectorControls( {
 					/>
 				</ToolsPanelItem>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="dimensions">
+			<InspectorControls group="dimensions">
 				<ToolsPanelItem
 					hasValue={ () => !! minHeight }
 					label={ __( 'Minimum height' ) }
@@ -312,6 +335,26 @@ export default function CoverInspectorControls( {
 					/>
 				</ToolsPanelItem>
 			</InspectorControls>
+			<InspectorControls group="advanced">
+				<SelectControl
+					__nextHasNoMarginBottom
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<div>)' ), value: 'div' },
+						{ label: '<header>', value: 'header' },
+						{ label: '<main>', value: 'main' },
+						{ label: '<section>', value: 'section' },
+						{ label: '<article>', value: 'article' },
+						{ label: '<aside>', value: 'aside' },
+						{ label: '<footer>', value: 'footer' },
+					] }
+					value={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					help={ htmlElementMessages[ tagName ] }
+				/>
+			</InspectorControls>
 		</>
 	);
 }

package/src/cover/edit.native.js

@@ -636,12 +636,9 @@ export default compose( [
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 
-		const { getSettings } = select( blockEditorStore );
-
 		const hasInnerBlocks = getBlock( clientId )?.innerBlocks.length > 0;
 
 		return {
-			settings: getSettings(),
 			isParentSelected: selectedBlockClientId === clientId,
 			hasInnerBlocks,
 		};

package/src/cover/save.js

@@ -44,6 +44,7 @@ export default function save( { attributes } ) {
 		id,
 		minHeight: minHeightProp,
 		minHeightUnit,
+		tagName: Tag,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -102,7 +103,7 @@ export default function save( { attributes } ) {
 	const gradientValue = gradient || customGradient;
 
 	return (
-		<div { ...useBlockProps.save( { className: classes, style } ) }>
+		<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 			<span
 				aria-hidden="true"
 				className={ classnames(
@@ -163,6 +164,6 @@ export default function save( { attributes } ) {
 					className: 'wp-block-cover__inner-container',
 				} ) }
 			/>
-		</div>
+		</Tag>
 	);
 }

package/src/embed/variations.js

@@ -168,7 +168,7 @@ const variations = [
 		keywords: [ 'polldaddy', __( 'survey' ) ],
 		description: __( 'Embed Crowdsignal (formerly Polldaddy) content.' ),
 		patterns: [
-			/^https?:\/\/((.+\.)?polldaddy\.com|poll\.fm|.+\.survey\.fm)\/.+/i,
+			/^https?:\/\/((.+\.)?polldaddy\.com|poll\.fm|.+\.crowdsignal\.net|.+\.survey\.fm)\/.+/i,
 		],
 		attributes: { providerNameSlug: 'crowdsignal', responsive: true },
 	},

package/src/experiments.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/block-library'
+	);

package/src/gallery/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -668,7 +667,7 @@ const v4 = {
 
 		return {
 			...attributes,
-			ids: map( attributes.ids, ( id ) => {
+			ids: ( attributes.ids ?? [] ).map( ( id ) => {
 				const parsedId = parseInt( id, 10 );
 				return Number.isInteger( parsedId ) ? parsedId : null;
 			} ),
@@ -942,7 +941,7 @@ const v2 = {
 		}
 		return {
 			...attributes,
-			ids: map( attributes.images, ( { id } ) => {
+			ids: ( attributes.images ?? [] ).map( ( { id } ) => {
 				if ( ! id ) {
 					return null;
 				}

package/src/gallery/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
+import { compose, usePrevious } from '@wordpress/compose';
 import {
 	BaseControl,
 	PanelBody,
@@ -14,6 +14,7 @@ import {
 	ToggleControl,
 	RangeControl,
 	Spinner,
+	ToolbarButton,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
@@ -24,7 +25,13 @@ import {
 	BlockControls,
 	MediaReplaceFlow,
 } from '@wordpress/block-editor';
-import { Platform, useEffect, useMemo } from '@wordpress/element';
+import {
+	Platform,
+	useCallback,
+	useEffect,
+	useState,
+	useMemo,
+} from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -32,6 +39,7 @@ import { View } from '@wordpress/primitives';
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
+import { caption as captionIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -65,7 +73,6 @@ const linkOptions = [
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const allowedBlocks = [ 'core/image' ];
-const LAYOUT = { type: 'default', alignments: [] };
 
 const PLACEHOLDER_TEXT = Platform.isNative
 	? __( 'ADD MEDIA' )
@@ -83,9 +90,37 @@ function GalleryEdit( props ) {
 		clientId,
 		isSelected,
 		insertBlocksAfter,
+		isContentLocked,
 	} = props;
 
-	const { columns, imageCrop, linkTarget, linkTo, sizeSlug } = attributes;
+	const { columns, imageCrop, linkTarget, linkTo, sizeSlug, caption } =
+		attributes;
+	const [ showCaption, setShowCaption ] = useState( !! caption );
+	const prevCaption = usePrevious( caption );
+
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( caption && ! prevCaption ) {
+			setShowCaption( true );
+		}
+	}, [ caption, prevCaption ] );
+
+	useEffect( () => {
+		if ( ! isSelected && ! caption ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, caption ] );
+
+	// Focus the caption when we click to add one.
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
 
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
@@ -486,11 +521,16 @@ function GalleryEdit( props ) {
 		className: classnames( className, 'has-nested-images' ),
 	} );
 
+	const nativeInnerBlockProps = Platform.isNative && {
+		marginHorizontal: 0,
+		marginVertical: 0,
+	};
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks,
 		orientation: 'horizontal',
 		renderAppender: false,
-		__experimentalLayout: LAYOUT,
+		...nativeInnerBlockProps,
 	} );
 
 	if ( ! hasImages ) {
@@ -568,6 +608,25 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
+			<BlockControls group="block">
+				{ ! isContentLocked && (
+					<ToolbarButton
+						onClick={ () => {
+							setShowCaption( ! showCaption );
+							if ( showCaption && caption ) {
+								setAttributes( { caption: undefined } );
+							}
+						} }
+						icon={ captionIcon }
+						isPressed={ showCaption }
+						label={
+							showCaption
+								? __( 'Remove caption' )
+								: __( 'Add caption' )
+						}
+					/>
+				) }
+			</BlockControls>
 			<BlockControls group="other">
 				<MediaReplaceFlow
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
@@ -590,6 +649,8 @@ function GalleryEdit( props ) {
 			) }
 			<Gallery
 				{ ...props }
+				showCaption={ showCaption }
+				ref={ Platform.isWeb ? captionRef : undefined }
 				images={ images }
 				mediaPlaceholder={
 					! hasImages || Platform.isNative