@wordpress/block-library 7.17.0 → 7.18.0

package/src/file/deprecated.js

@@ -14,7 +14,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 
 // Version of the file block without PR#43050 removing the translated aria-label.
-const v2 = {
+const v3 = {
 	attributes: {
 		id: {
 			type: 'number',
@@ -143,6 +143,134 @@ const v2 = {
 	},
 };
 
+// In #41239 the button was made an element button which added a `wp-element-button` classname
+// to the download link element.
+const v2 = {
+	attributes: {
+		id: {
+			type: 'number',
+		},
+		href: {
+			type: 'string',
+		},
+		fileId: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a:not([download])',
+			attribute: 'id',
+		},
+		fileName: {
+			type: 'string',
+			source: 'html',
+			selector: 'a:not([download])',
+		},
+		textLinkHref: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a:not([download])',
+			attribute: 'href',
+		},
+		textLinkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a:not([download])',
+			attribute: 'target',
+		},
+		showDownloadButton: {
+			type: 'boolean',
+			default: true,
+		},
+		downloadButtonText: {
+			type: 'string',
+			source: 'html',
+			selector: 'a[download]',
+		},
+		displayPreview: {
+			type: 'boolean',
+		},
+		previewHeight: {
+			type: 'number',
+			default: 600,
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+	},
+	save( { attributes } ) {
+		const {
+			href,
+			fileId,
+			fileName,
+			textLinkHref,
+			textLinkTarget,
+			showDownloadButton,
+			downloadButtonText,
+			displayPreview,
+			previewHeight,
+		} = attributes;
+
+		const pdfEmbedLabel = RichText.isEmpty( fileName )
+			? __( 'PDF embed' )
+			: sprintf(
+					/* translators: %s: filename. */
+					__( 'Embed of %s.' ),
+					fileName
+			  );
+
+		const hasFilename = ! RichText.isEmpty( fileName );
+
+		// Only output an `aria-describedby` when the element it's referring to is
+		// actually rendered.
+		const describedById = hasFilename ? fileId : undefined;
+
+		return (
+			href && (
+				<div { ...useBlockProps.save() }>
+					{ displayPreview && (
+						<>
+							<object
+								className="wp-block-file__embed"
+								data={ href }
+								type="application/pdf"
+								style={ {
+									width: '100%',
+									height: `${ previewHeight }px`,
+								} }
+								aria-label={ pdfEmbedLabel }
+							/>
+						</>
+					) }
+					{ hasFilename && (
+						<a
+							id={ describedById }
+							href={ textLinkHref }
+							target={ textLinkTarget }
+							rel={
+								textLinkTarget
+									? 'noreferrer noopener'
+									: undefined
+							}
+						>
+							<RichText.Content value={ fileName } />
+						</a>
+					) }
+					{ showDownloadButton && (
+						<a
+							href={ href }
+							className="wp-block-file__button"
+							download={ true }
+							aria-describedby={ describedById }
+						>
+							<RichText.Content value={ downloadButtonText } />
+						</a>
+					) }
+				</div>
+			)
+		);
+	},
+};
+
 // Version of the file block without PR#28062 accessibility fix.
 const v1 = {
 	attributes: {
@@ -255,6 +383,6 @@ const v1 = {
 	},
 };
 
-const deprecated = [ v2, v1 ];
+const deprecated = [ v3, v2, v1 ];
 
 export default deprecated;

package/src/file/transforms.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -92,7 +87,7 @@ const transforms = {
 				}
 				const { getMedia } = select( coreStore );
 				const media = getMedia( id );
-				return !! media && includes( media.mime_type, 'audio' );
+				return !! media && media.mime_type.includes( 'audio' );
 			},
 			transform: ( attributes ) => {
 				return createBlock( 'core/audio', {
@@ -112,7 +107,7 @@ const transforms = {
 				}
 				const { getMedia } = select( coreStore );
 				const media = getMedia( id );
-				return !! media && includes( media.mime_type, 'video' );
+				return !! media && media.mime_type.includes( 'video' );
 			},
 			transform: ( attributes ) => {
 				return createBlock( 'core/video', {
@@ -132,7 +127,7 @@ const transforms = {
 				}
 				const { getMedia } = select( coreStore );
 				const media = getMedia( id );
-				return !! media && includes( media.mime_type, 'image' );
+				return !! media && media.mime_type.includes( 'image' );
 			},
 			transform: ( attributes ) => {
 				return createBlock( 'core/image', {

package/src/gallery/deprecated.js

@@ -2,12 +2,16 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { map, some } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
 import { createBlock } from '@wordpress/blocks';
 
@@ -127,6 +131,127 @@ export function getImageBlock( image, sizeSlug, linkTo ) {
 	} );
 }
 
+// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
+// to the gallery figcaption element.
+const v7 = {
+	attributes: {
+		images: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: '.blocks-gallery-item',
+			query: {
+				url: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'src',
+				},
+				fullUrl: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-full-url',
+				},
+				link: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-link',
+				},
+				alt: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'alt',
+					default: '',
+				},
+				id: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-id',
+				},
+				caption: {
+					type: 'string',
+					source: 'html',
+					selector: '.blocks-gallery-item__caption',
+				},
+			},
+		},
+		ids: {
+			type: 'array',
+			items: {
+				type: 'number',
+			},
+			default: [],
+		},
+		shortCodeTransforms: {
+			type: 'array',
+			default: [],
+			items: {
+				type: 'object',
+			},
+		},
+		columns: {
+			type: 'number',
+			minimum: 1,
+			maximum: 8,
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: '.blocks-gallery-caption',
+		},
+		imageCrop: {
+			type: 'boolean',
+			default: true,
+		},
+		fixedHeight: {
+			type: 'boolean',
+			default: true,
+		},
+		linkTarget: {
+			type: 'string',
+		},
+		linkTo: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+			default: 'large',
+		},
+		allowResize: {
+			type: 'boolean',
+			default: false,
+		},
+	},
+	save( { attributes } ) {
+		const { caption, columns, imageCrop } = attributes;
+
+		const className = classnames( 'has-nested-images', {
+			[ `columns-${ columns }` ]: columns !== undefined,
+			[ `columns-default` ]: columns === undefined,
+			'is-cropped': imageCrop,
+		} );
+		const blockProps = useBlockProps.save( { className } );
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+		return (
+			<figure { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content
+						tagName="figcaption"
+						className="blocks-gallery-caption"
+						value={ caption }
+					/>
+				) }
+			</figure>
+		);
+	},
+};
+
 const v6 = {
 	attributes: {
 		images: {
@@ -803,7 +928,7 @@ const v2 = {
 			images.length > 0 &&
 			( ( ! ids && images ) ||
 				( ids && images && ids.length !== images.length ) ||
-				some( images, ( id, index ) => {
+				images.some( ( id, index ) => {
 					if ( ! id && ids[ index ] !== null ) {
 						return true;
 					}
@@ -984,4 +1109,4 @@ const v1 = {
 	},
 };
 
-export default [ v6, v5, v4, v3, v2, v1 ];
+export default [ v7, v6, v5, v4, v3, v2, v1 ];

package/src/gallery/gallery.js

@@ -26,6 +26,7 @@ export const Gallery = ( props ) => {
 		mediaPlaceholder,
 		insertBlocksAfter,
 		blockProps,
+		__unstableLayoutClassNames: layoutClassNames,
 	} = props;
 
 	const { align, columns, caption, imageCrop } = attributes;
@@ -42,6 +43,7 @@ export const Gallery = ( props ) => {
 			{ ...innerBlocksProps }
 			className={ classnames(
 				blockProps.className,
+				layoutClassNames,
 				'blocks-gallery-grid',
 				{
 					[ `align${ align }` ]: align,

package/src/gallery/index.php

@@ -76,13 +76,10 @@ function block_core_gallery_render( $attributes, $content ) {
 		}
 	}
 
-	$class   = wp_unique_id( 'wp-block-gallery-' );
-	$content = preg_replace(
-		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="' . $class . ' ',
-		$content,
-		1
-	);
+	$unique_gallery_classname = wp_unique_id( 'wp-block-gallery-' );
+	$processed_content        = new WP_HTML_Tag_Processor( $content );
+	$processed_content->next_tag();
+	$processed_content->add_class( $unique_gallery_classname );
 
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
@@ -102,10 +99,22 @@ function block_core_gallery_render( $attributes, $content ) {
 	}
 
 	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
-	$style = '.wp-block-gallery.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
+	$gallery_styles   = array();
+	$gallery_styles[] = array(
+		'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
+		'declarations' => array(
+			'--wp--style--unstable-gallery-gap' => $gap_column,
+			'gap'                               => $gap_value,
+		),
+	);
 
-	wp_enqueue_block_support_styles( $style, 11 );
-	return $content;
+	gutenberg_style_engine_get_stylesheet_from_css_rules(
+		$gallery_styles,
+		array(
+			'context' => 'block-supports',
+		)
+	);
+	return (string) $processed_content;
 }
 /**
  * Registers the `core/gallery` block on server.

package/src/gallery/use-image-sizes.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, some } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -57,9 +57,10 @@ export default function useImageSizes( images, isSelected, getSettings ) {
 				};
 			}, {} );
 		}
+		const resizedImageSizes = Object.values( resizedImages );
 		return imageSizes
 			.filter( ( { slug } ) =>
-				some( resizedImages, ( sizes ) => sizes[ slug ] )
+				resizedImageSizes.some( ( sizes ) => sizes[ slug ] )
 			)
 			.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 	}

package/src/gallery/v1/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, find, get, isEmpty, map, reduce, some } from 'lodash';
+import { filter, find, get, isEmpty, map, reduce } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -302,9 +302,10 @@ function GalleryEdit( props ) {
 	}
 
 	function getImagesSizeOptions() {
+		const resizedImageSizes = Object.values( resizedImages );
 		return map(
 			filter( imageSizes, ( { slug } ) =>
-				some( resizedImages, ( sizes ) => sizes[ slug ] )
+				resizedImageSizes.some( ( sizes ) => sizes[ slug ] )
 			),
 			( { name, slug } ) => ( { value: slug, label: name } )
 		);

package/src/group/edit.js

@@ -35,7 +35,12 @@ const htmlElementMessages = {
 	),
 };
 
-function GroupEdit( { attributes, setAttributes, clientId } ) {
+function GroupEdit( {
+	attributes,
+	setAttributes,
+	clientId,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
 			const { getBlock, getSettings } = select( blockEditorStore );
@@ -55,7 +60,9 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: ! layoutSupportEnabled ? layoutClassNames : null,
+	} );
 
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
@@ -67,6 +74,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,
 			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
+			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
 	);
 

package/src/image/edit.native.js

@@ -878,7 +878,7 @@ export class ImageEdit extends Component {
 				<BlockCaption
 					clientId={ this.props.clientId }
 					isSelected={ this.state.isCaptionSelected }
-					accessible
+					accessible={ ! this.state.isCaptionSelected }
 					accessibilityLabelCreator={ this.accessibilityLabelCreator }
 					onFocus={ this.onFocusCaption }
 					onBlur={ this.props.onBlur } // Always assign onBlur as props.

package/src/image/image.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, filter, isEmpty, map, pick, includes } from 'lodash';
+import { get, filter, isEmpty, map, pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,13 @@ import {
 	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
-import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
+import {
+	useEffect,
+	useMemo,
+	useState,
+	useRef,
+	useCallback,
+} from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 import {
@@ -93,7 +99,6 @@ export default function Image( {
 		sizeSlug,
 	} = attributes;
 	const imageRef = useRef();
-	const captionRef = useRef();
 	const prevCaption = usePrevious( caption );
 	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const { allowResize = true } = context;
@@ -151,7 +156,7 @@ export default function Image( {
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const isWideAligned = includes( [ 'wide', 'full' ], align );
+	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const [
 		{ loadedNaturalWidth, loadedNaturalHeight },
 		setLoadedNaturalSize,
@@ -195,11 +200,14 @@ export default function Image( {
 	}, [ caption, prevCaption ] );
 
 	// Focus the caption when we click to add one.
-	useEffect( () => {
-		if ( showCaption && ! caption ) {
-			captionRef.current?.focus();
-		}
-	}, [ caption, showCaption ] );
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
 
 	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
@@ -343,7 +351,11 @@ export default function Image( {
 						} }
 						icon={ captionIcon }
 						isPressed={ showCaption }
-						label={ __( 'Caption' ) }
+						label={
+							showCaption
+								? __( 'Remove caption' )
+								: __( 'Add caption' )
+						}
 					/>
 				) }
 				{ ! multiImageSelection && ! isEditingImage && (

package/src/latest-posts/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, includes, pickBy } from 'lodash';
+import { get, pickBy } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -196,7 +196,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		} );
 		// We do nothing if the category is not selected
 		// from suggestions.
-		if ( includes( allCategories, null ) ) {
+		if ( allCategories.includes( null ) ) {
 			return false;
 		}
 		setAttributes( { categories: allCategories } );

package/src/list/utils.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, rawHandler } from '@wordpress/blocks';
 
 export function createListBlockFromDOMElement( listElement ) {
 	const listAttributes = {
@@ -70,15 +70,7 @@ export function migrateToListV2( attributes ) {
 		list.setAttribute( 'type', type );
 	}
 
-	const listBlock = createListBlockFromDOMElement( list );
+	const [ listBlock ] = rawHandler( { HTML: list.outerHTML } );
 
-	const { values: omittedValues, ...restAttributes } = attributes;
-
-	return [
-		{
-			...restAttributes,
-			...listBlock.attributes,
-		},
-		listBlock.innerBlocks,
-	];
+	return [ listBlock.attributes, listBlock.innerBlocks ];
 }

package/src/list-item/hooks/use-outdent-list-item.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -61,7 +56,9 @@ export default function useOutdentListItem( clientId ) {
 	return [
 		canOutdent,
 		useCallback( ( clientIds = getSelectedBlockClientIds() ) => {
-			clientIds = castArray( clientIds );
+			if ( ! Array.isArray( clientIds ) ) {
+				clientIds = [ clientIds ];
+			}
 
 			if ( ! clientIds.length ) return;
 

package/src/navigation/edit/index.js

@@ -272,7 +272,7 @@ function Navigation( {
 			fallbackNavigationMenus?.length > 0 ||
 			classicMenus?.length !== 1
 		) {
-			return false;
+			return;
 		}
 
 		// If there's non fallback navigation menus and
@@ -481,24 +481,22 @@ function Navigation( {
 
 	// Prompt the user to publish the menu they have set as a draft
 	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
-	useEffect( async () => {
+	useEffect( () => {
 		hideMenuAutoPublishDraftNotice();
-		if ( ! isDraftNavigationMenu ) return;
-		try {
-			await editEntityRecord(
-				'postType',
-				'wp_navigation',
-				navigationMenu?.id,
-				{
-					status: 'publish',
-				},
-				{ throwOnError: true }
-			);
-		} catch {
+		if ( ! isDraftNavigationMenu ) {
+			return;
+		}
+		editEntityRecord(
+			'postType',
+			'wp_navigation',
+			navigationMenu?.id,
+			{ status: 'publish' },
+			{ throwOnError: true }
+		).catch( () => {
 			showMenuAutoPublishDraftNotice(
 				__( 'Error occurred while publishing the navigation menu.' )
 			);
-		}
+		} );
 	}, [ isDraftNavigationMenu, navigationMenu ] );
 
 	const stylingInspectorControls = (

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

@@ -172,8 +172,15 @@ export default function UnsavedInnerBlocks( {
 
 	return (
 		<>
-			<Wrapper { ...innerBlocksProps } />
-			{ isSaving && <Spinner /> }
+			{ isSaving ? (
+				<Spinner
+					className={
+						'wp-block-navigation__uncontrolled-inner-blocks-loading-indicator'
+					}
+				/>
+			) : (
+				<Wrapper { ...innerBlocksProps } />
+			) }
 		</>
 	);
 }