@wordpress/block-library 8.2.0 → 8.3.0

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,50 +50,32 @@ export const Gallery = ( props ) => {
 					{ mediaPlaceholder }
 				</View>
 			) }
-			<RichTextVisibilityHelper
-				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
-				identifier="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,

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,7 +49,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 		),
 	};
 	return (
-		<InspectorControls __experimentalGroup="advanced">
+		<InspectorControls group="advanced">
 			<SelectControl
 				__nextHasNoMarginBottom
 				label={ __( 'HTML element' ) }
@@ -117,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,

package/src/image/image.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty, map } from 'lodash';
+import { get, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -28,7 +28,6 @@ import {
 	store as blockEditorStore,
 	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
-	__experimentalImageEditingProvider as ImageEditingProvider,
 	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
@@ -165,12 +164,11 @@ export default function Image( {
 		allowResize &&
 		! isContentLocked &&
 		! ( isWideAligned && isLargeViewport );
-	const imageSizeOptions = map(
-		imageSizes.filter( ( { slug } ) =>
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) =>
 			get( image, [ 'media_details', 'sizes', slug, 'source_url' ] )
-		),
-		( { name, slug } ) => ( { value: slug, label: name } )
-	);
+		)
+		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
 	// If an image is externally hosted, try to fetch the image data. This may
 	// fail if the image host doesn't allow CORS with the domain. If it works,
@@ -437,8 +435,9 @@ export default function Image( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Title attribute' ) }
 					value={ title || '' }
 					onChange={ onSetTitle }
@@ -518,13 +517,20 @@ export default function Image( {
 	if ( canEditImage && isEditingImage ) {
 		img = (
 			<ImageEditor
-				borderProps={ isRounded ? undefined : borderProps }
+				id={ id }
 				url={ url }
 				width={ width }
 				height={ height }
 				clientWidth={ clientWidth }
 				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
+				onSaveImage={ ( imageAttributes ) =>
+					setAttributes( imageAttributes )
+				}
+				onFinishEditing={ () => {
+					setIsEditingImage( false );
+				} }
+				borderProps={ isRounded ? undefined : borderProps }
 			/>
 		);
 	} else if ( ! isResizable || ! imageWidthWithinContainer ) {
@@ -609,18 +615,7 @@ export default function Image( {
 	}
 
 	return (
-		<ImageEditingProvider
-			id={ id }
-			url={ url }
-			naturalWidth={ naturalWidth }
-			naturalHeight={ naturalHeight }
-			clientWidth={ clientWidth }
-			onSaveImage={ ( imageAttributes ) =>
-				setAttributes( imageAttributes )
-			}
-			isEditing={ isEditingImage }
-			onFinishEditing={ () => setIsEditingImage( false ) }
-		>
+		<>
 			{ /* Hide controls during upload to avoid component remount,
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
@@ -648,6 +643,6 @@ export default function Image( {
 						}
 					/>
 				) }
-		</ImageEditingProvider>
+		</>
 	);
 }

package/src/latest-comments/block.json

@@ -29,6 +29,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/latest-posts/block.json

@@ -84,6 +84,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/latest-posts/index.php

@@ -173,25 +173,24 @@ function render_block_core_latest_posts( $attributes ) {
 
 	remove_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
 
-	$class = 'wp-block-latest-posts__list';
-
+	$classes = array( 'wp-block-latest-posts__list' );
 	if ( isset( $attributes['postLayout'] ) && 'grid' === $attributes['postLayout'] ) {
-		$class .= ' is-grid';
+		$classes[] = 'is-grid';
 	}
-
 	if ( isset( $attributes['columns'] ) && 'grid' === $attributes['postLayout'] ) {
-		$class .= ' columns-' . $attributes['columns'];
+		$classes[] = 'columns-' . $attributes['columns'];
 	}
-
 	if ( isset( $attributes['displayPostDate'] ) && $attributes['displayPostDate'] ) {
-		$class .= ' has-dates';
+		$classes[] = 'has-dates';
 	}
-
 	if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
-		$class .= ' has-author';
+		$classes[] = 'has-author';
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<ul %1$s>%2$s</ul>',

package/src/list/ordered-list-settings.js

@@ -9,6 +9,7 @@ const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
 	<InspectorControls>
 		<PanelBody title={ __( 'Ordered list settings' ) }>
 			<TextControl
+				__nextHasNoMarginBottom
 				label={ __( 'Start value' ) }
 				type="number"
 				onChange={ ( value ) => {

package/src/loginout/block.json

@@ -18,6 +18,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"className": true,
 		"typography": {
 			"fontSize": false

package/src/media-text/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -225,12 +224,9 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		setAttributes( { verticalAlignment: alignment } );
 	};
 
-	const imageSizeOptions = map(
-		imageSizes.filter( ( { slug } ) =>
-			getImageSourceUrlBySizeSlug( image, slug )
-		),
-		( { name, slug } ) => ( { value: slug, label: name } )
-	);
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => getImageSourceUrlBySizeSlug( image, slug ) )
+		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 	const updateImage = ( newMediaSizeSlug ) => {
 		const newUrl = getImageSourceUrlBySizeSlug( image, newMediaSizeSlug );
 

package/src/missing/edit.native.js

@@ -298,13 +298,12 @@ export class UnsupportedBlockEdit extends Component {
 
 export default compose( [
 	withSelect( ( select, { attributes } ) => {
-		const { getSettings } = select( blockEditorStore );
+		const { capabilities } = select( blockEditorStore ).getSettings();
 		return {
 			isUnsupportedBlockEditorSupported:
-				getSettings( 'capabilities' ).unsupportedBlockEditor === true,
+				capabilities?.unsupportedBlockEditor === true,
 			canEnableUnsupportedBlockEditor:
-				getSettings( 'capabilities' )
-					.canEnableUnsupportedBlockEditor === true,
+				capabilities?.canEnableUnsupportedBlockEditor === true,
 			isEditableInUnsupportedBlockEditor:
 				! UBE_INCOMPATIBLE_BLOCKS.includes( attributes.originalName ),
 		};

package/src/missing/test/edit.native.js

@@ -68,7 +68,7 @@ describe( 'Missing block', () => {
 			beforeEach( () => {
 				// By default we set the web editor as available.
 				storeConfig.selectors.getSettings.mockReturnValue( {
-					unsupportedBlockEditor: true,
+					capabilities: { unsupportedBlockEditor: true },
 				} );
 			} );
 
@@ -86,7 +86,7 @@ describe( 'Missing block', () => {
 
 			it( 'does not render edit action if UBE is not available', () => {
 				storeConfig.selectors.getSettings.mockReturnValue( {
-					unsupportedBlockEditor: false,
+					capabilities: { unsupportedBlockEditor: false },
 				} );
 
 				const testInstance = getTestComponentWithContent();

package/src/navigation/block.json

@@ -92,6 +92,7 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"anchor": true,
 		"html": false,
 		"inserter": true,
 		"typography": {
@@ -119,6 +120,7 @@
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowVerticalAlignment": false,
+			"allowSizingOnChildren": true,
 			"default": {
 				"type": "flex"
 			}

package/src/navigation/edit/deleted-navigation-warning.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { Warning } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function DeletedNavigationWarning( { onCreateNew } ) {
+	return (
+		<Warning>
+			{ __( 'Navigation menu has been deleted or is unavailable. ' ) }
+			<Button onClick={ onCreateNew } variant="link">
+				{ __( 'Create a new menu?' ) }
+			</Button>
+		</Warning>
+	);
+}
+
+export default DeletedNavigationWarning;

package/src/navigation/edit/index.js

@@ -67,6 +67,7 @@ import { useInnerBlocks } from './use-inner-blocks';
 import { detectColors } from './utils';
 import ManageMenusButton from './manage-menus-button';
 import MenuInspectorControls from './menu-inspector-controls';
+import DeletedNavigationWarning from './deleted-navigation-warning';
 
 function Navigation( {
 	attributes,
@@ -89,9 +90,6 @@ function Navigation( {
 	hasColorSettings = true,
 	customPlaceholder: CustomPlaceholder = null,
 } ) {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	const {
 		openSubmenusOnClick,
 		overlayMenu,
@@ -467,10 +465,19 @@ function Navigation( {
 			setDetectedColor,
 			setDetectedBackgroundColor
 		);
+
 		const subMenuElement = navRef.current?.querySelector(
-			'[data-type="core/navigation-link"] [data-type="core/navigation-link"]'
+			'[data-type="core/navigation-submenu"] [data-type="core/navigation-link"]'
 		);
-		if ( subMenuElement ) {
+
+		if ( ! subMenuElement ) {
+			return;
+		}
+
+		// Only detect submenu overlay colors if they have previously been explicitly set.
+		// This avoids the contrast checker from reporting on inherited submenu colors and
+		// showing the contrast warning twice.
+		if ( overlayTextColor.color || overlayBackgroundColor.color ) {
 			detectColors(
 				subMenuElement,
 				setDetectedOverlayColor,
@@ -589,6 +596,7 @@ function Navigation( {
 						) }
 						<h3>{ __( 'Overlay Menu' ) }</h3>
 						<ToggleGroupControl
+							__nextHasNoMarginBottom
 							label={ __( 'Configure overlay menu' ) }
 							value={ overlayMenu }
 							help={ __(
@@ -644,7 +652,7 @@ function Navigation( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="color">
+			<InspectorControls group="color">
 				{ hasColorSettings && (
 					<>
 						<ColorGradientSettingsDropdown
@@ -771,17 +779,9 @@ function Navigation( {
 					onSelectNavigationMenu={ onSelectNavigationMenu }
 					isLoading={ isLoading }
 				/>
-				<Warning>
-					{ __(
-						'Navigation menu has been deleted or is unavailable. '
-					) }
-					<Button
-						onClick={ createUntitledEmptyNavigationMenu }
-						variant="link"
-					>
-						{ __( 'Create a new menu?' ) }
-					</Button>
-				</Warning>
+				<DeletedNavigationWarning
+					onCreateNew={ createUntitledEmptyNavigationMenu }
+				/>
 			</TagName>
 		);
 	}
@@ -848,7 +848,7 @@ function Navigation( {
 				/>
 				{ stylingInspectorControls }
 				{ isEntityAvailable && (
-					<InspectorControls __experimentalGroup="advanced">
+					<InspectorControls group="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&
 							canUserUpdateNavigationMenu && (
 								<NavigationMenuNameControl />
@@ -870,12 +870,10 @@ function Navigation( {
 									} }
 								/>
 							) }
-						{ isOffCanvasNavigationEditorEnabled && (
-							<ManageMenusButton
-								disabled={ isManageMenusButtonDisabled }
-								className="wp-block-navigation-manage-menus-button"
-							/>
-						) }
+						<ManageMenusButton
+							disabled={ isManageMenusButtonDisabled }
+							className="wp-block-navigation-manage-menus-button"
+						/>
 					</InspectorControls>
 				) }
 

package/src/navigation/edit/inner-blocks.js

@@ -31,11 +31,6 @@ const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
 };
 
-const LAYOUT = {
-	type: 'default',
-	alignments: [],
-};
-
 export default function NavigationInnerBlocks( {
 	clientId,
 	hasCustomPlaceholder,
@@ -131,7 +126,6 @@ export default function NavigationInnerBlocks( {
 				parentOrChildHasSelection
 					? InnerBlocks.ButtonBlockAppender
 					: false,
-			__experimentalLayout: LAYOUT,
 			placeholder: showPlaceholder ? placeholder : undefined,
 		}
 	);

package/src/navigation/edit/manage-menus-button.js

@@ -2,20 +2,31 @@
  * WordPress dependencies
  */
 import { addQueryArgs } from '@wordpress/url';
-import { Button } from '@wordpress/components';
+import { Button, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const ManageMenusButton = ( { className = '', disabled } ) => (
-	<Button
-		variant="link"
-		disabled={ disabled }
-		className={ className }
-		href={ addQueryArgs( 'edit.php', {
-			post_type: 'wp_navigation',
-		} ) }
-	>
-		{ __( 'Manage menus' ) }
-	</Button>
-);
+const ManageMenusButton = ( {
+	className = '',
+	disabled,
+	isMenuItem = false,
+} ) => {
+	let ComponentName = Button;
+	if ( isMenuItem ) {
+		ComponentName = MenuItem;
+	}
+
+	return (
+		<ComponentName
+			variant="link"
+			disabled={ disabled }
+			className={ className }
+			href={ addQueryArgs( 'edit.php', {
+				post_type: 'wp_navigation',
+			} ) }
+		>
+			{ __( 'Manage menus' ) }
+		</ComponentName>
+	);
+};
 
 export default ManageMenusButton;