@wordpress/block-library 8.1.0 → 8.3.0

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/embed-preview.js

@@ -143,6 +143,7 @@ class EmbedPreview extends Component {
 				) }
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
+						identifier="caption"
 						tagName="figcaption"
 						className={ __experimentalGetElementClassName(
 							'caption'

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/file/inspector.js

@@ -71,6 +71,7 @@ export default function FileBlockInspector( {
 				) }
 				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ textLinkHref }
 						options={ linkDestinationOptions }

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 ) {
@@ -531,6 +571,7 @@ function GalleryEdit( props ) {
 						help={ getImageCropHelp }
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ linkTo }
 						onChange={ setLinkTo }
@@ -546,6 +587,7 @@ function GalleryEdit( props ) {
 					) }
 					{ imageSizeOptions?.length > 0 && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }
@@ -566,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 }
@@ -588,6 +649,8 @@ function GalleryEdit( props ) {
 			) }
 			<Gallery
 				{ ...props }
+				showCaption={ showCaption }
+				ref={ Platform.isWeb ? captionRef : undefined }
 				images={ images }
 				mediaPlaceholder={
 					! hasImages || Platform.isNative

package/src/gallery/gallery.js

@@ -10,12 +10,12 @@ import {
 	RichText,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { VisuallyHidden } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
+import { forwardRef } from '@wordpress/element';
 
-export const Gallery = ( props ) => {
+export const Gallery = ( props, captionRef ) => {
 	const {
 		attributes,
 		isSelected,
@@ -24,6 +24,7 @@ export const Gallery = ( props ) => {
 		insertBlocksAfter,
 		blockProps,
 		__unstableLayoutClassNames: layoutClassNames,
+		showCaption,
 	} = props;
 
 	const { align, columns, caption, imageCrop } = attributes;
@@ -49,49 +50,32 @@ export const Gallery = ( props ) => {
 					{ mediaPlaceholder }
 				</View>
 			) }
-			<RichTextVisibilityHelper
-				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
-				tagName="figcaption"
-				className={ classnames(
-					'blocks-gallery-caption',
-					__experimentalGetElementClassName( 'caption' )
+			{ showCaption &&
+				( ! RichText.isEmpty( caption ) || isSelected ) && (
+					<RichText
+						identifier="caption"
+						aria-label={ __( 'Gallery caption text' ) }
+						placeholder={ __( 'Write gallery caption…' ) }
+						value={ caption }
+						className={ classnames(
+							'blocks-gallery-caption',
+							__experimentalGetElementClassName( 'caption' )
+						) }
+						ref={ captionRef }
+						tagName="figcaption"
+						onChange={ ( value ) =>
+							setAttributes( { caption: value } )
+						}
+						inlineToolbar
+						__unstableOnSplitAtEnd={ () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+						}
+					/>
 				) }
-				aria-label={ __( 'Gallery caption text' ) }
-				placeholder={ __( 'Write gallery caption…' ) }
-				value={ caption }
-				onChange={ ( value ) => setAttributes( { caption: value } ) }
-				inlineToolbar
-				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
-				}
-			/>
 		</figure>
 	);
 };
 
-function RichTextVisibilityHelper( {
-	isHidden,
-	className,
-	value,
-	placeholder,
-	tagName,
-	captionRef,
-	...richTextProps
-} ) {
-	if ( isHidden ) {
-		return <VisuallyHidden as={ RichText } { ...richTextProps } />;
-	}
-
-	return (
-		<RichText
-			ref={ captionRef }
-			value={ value }
-			placeholder={ placeholder }
-			className={ className }
-			tagName={ tagName }
-			{ ...richTextProps }
-		/>
-	);
-}
-
-export default Gallery;
+export default forwardRef( Gallery );

package/src/gallery/v1/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty, map } from 'lodash';
+import { get, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -148,7 +148,7 @@ function GalleryEdit( props ) {
 				...newAttrs,
 				// Unlike images[ n ].id which is a string, always ensure the
 				// ids array contains numbers as per its attribute type.
-				ids: map( newAttrs.images, ( { id } ) => parseInt( id, 10 ) ),
+				ids: newAttrs.images.map( ( { id } ) => parseInt( id, 10 ) ),
 			};
 		}
 
@@ -298,16 +298,15 @@ function GalleryEdit( props ) {
 
 	function getImagesSizeOptions() {
 		const resizedImageSizes = Object.values( resizedImages );
-		return map(
-			imageSizes.filter( ( { slug } ) =>
+		return imageSizes
+			.filter( ( { slug } ) =>
 				resizedImageSizes.some( ( sizes ) => sizes[ slug ] )
-			),
-			( { name, slug } ) => ( { value: slug, label: name } )
-		);
+			)
+			.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 	}
 
 	function updateImagesSize( newSizeSlug ) {
-		const updatedImages = map( images, ( image ) => {
+		const updatedImages = ( images ?? [] ).map( ( image ) => {
 			if ( ! image.id ) {
 				return image;
 			}
@@ -331,7 +330,7 @@ function GalleryEdit( props ) {
 			images.length > 0 &&
 			images.every( ( { url } ) => isBlobURL( url ) )
 		) {
-			const filesList = map( images, ( { url } ) => getBlobByURL( url ) );
+			const filesList = images.map( ( { url } ) => getBlobByURL( url ) );
 			images.forEach( ( { url } ) => revokeBlobURL( url ) );
 			mediaUpload( {
 				filesList,
@@ -420,6 +419,7 @@ function GalleryEdit( props ) {
 						help={ getImageCropHelp }
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ linkTo }
 						onChange={ setLinkTo }
@@ -428,6 +428,7 @@ function GalleryEdit( props ) {
 					/>
 					{ shouldShowSizeOptions && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }

package/src/group/block.json

@@ -56,6 +56,9 @@
 				"width": true
 			}
 		},
+		"position": {
+			"sticky": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/group/deprecated.js

@@ -108,7 +108,9 @@ const deprecated = [
 			);
 		},
 		isEligible: ( { layout } ) =>
-			! layout || layout.inherit || layout.contentSize,
+			! layout ||
+			layout.inherit ||
+			( layout.contentSize && layout.type !== 'constrained' ),
 		migrate: ( attributes ) => {
 			const { layout = null } = attributes;
 			if ( ! layout ) {

package/src/group/edit.js

@@ -49,8 +49,9 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 		),
 	};
 	return (
-		<InspectorControls __experimentalGroup="advanced">
+		<InspectorControls group="advanced">
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'HTML element' ) }
 				options={ [
 					{ label: __( 'Default (<div>)' ), value: 'div' },
@@ -116,7 +117,6 @@ function GroupEdit( {
 			renderAppender: hasInnerBlocks
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,
-			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
 			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
 	);

package/src/heading/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -41,7 +36,7 @@ export const settings = {
 		}
 
 		if ( context === 'accessibility' ) {
-			return isEmpty( content )
+			return ! content || content.length === 0
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */
 						__( 'Level %s. Empty.' ),

package/src/home-link/block.json

@@ -22,6 +22,7 @@
 		"style"
 	],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"typography": {

package/src/image/edit.native.js

@@ -913,8 +913,7 @@ export default compose( [
 			isSelected,
 			clientId,
 		} = props;
-		const { imageSizes, imageDefaultSize, shouldUseFastImage } =
-			getSettings();
+		const { imageSizes, imageDefaultSize, capabilities } = getSettings();
 		const isNotFileUrl = id && getProtocol( url ) !== 'file:';
 		const featuredImageId = getEditedPostAttribute( 'featured_media' );
 
@@ -932,7 +931,7 @@ export default compose( [
 			image,
 			imageSizes,
 			imageDefaultSize,
-			shouldUseFastImage,
+			shouldUseFastImage: capabilities?.shouldUseFastImage === true,
 			featuredImageId,
 			wasBlockJustInserted: wasBlockJustInserted(
 				clientId,