@wordpress/block-library 7.16.0 → 7.18.0

package/src/cover/editor.scss

@@ -107,3 +107,10 @@
 .color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
 	margin-top: $grid-unit-30;
 }
+
+
+// The frontend style.scss includes a min-height as an IE11 fix.
+// This fix causes extra spacing for the focus style in the editor, so we omit it here.
+.wp-block-cover::after {
+	min-height: auto;
+}

package/src/embed/deprecated.js

@@ -11,36 +11,63 @@ import metadata from './block.json';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 const { attributes: blockAttributes } = metadata;
 
-const deprecated = [
-	{
-		attributes: blockAttributes,
-		save( { attributes: { url, caption, type, providerNameSlug } } ) {
-			if ( ! url ) {
-				return null;
-			}
-
-			const embedClassName = classnames( 'wp-block-embed', {
-				[ `is-type-${ type }` ]: type,
-				[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
-			} );
-
-			return (
-				<figure className={ embedClassName }>
+// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
+// to the embed figcaption element.
+const v2 = {
+	attributes: blockAttributes,
+	save( { attributes } ) {
+		const { url, caption, type, providerNameSlug } = attributes;
+
+		if ( ! url ) {
+			return null;
+		}
+
+		const className = classnames( 'wp-block-embed', {
+			[ `is-type-${ type }` ]: type,
+			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+			[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
+		} );
+
+		return (
+			<figure { ...useBlockProps.save( { className } ) }>
+				<div className="wp-block-embed__wrapper">
 					{ `\n${ url }\n` /* URL needs to be on its own line. */ }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
-			);
-		},
+				</div>
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+};
+
+const v1 = {
+	attributes: blockAttributes,
+	save( { attributes: { url, caption, type, providerNameSlug } } ) {
+		if ( ! url ) {
+			return null;
+		}
+
+		const embedClassName = classnames( 'wp-block-embed', {
+			[ `is-type-${ type }` ]: type,
+			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+		} );
+
+		return (
+			<figure className={ embedClassName }>
+				{ `\n${ url }\n` /* URL needs to be on its own line. */ }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
 	},
-];
+};
+
+const deprecated = [ v2, v1 ];
 
 export default deprecated;

package/src/embed/variations.js

@@ -309,7 +309,7 @@ const variations = [
 		icon: embedTumblrIcon,
 		keywords: [ __( 'social' ) ],
 		description: __( 'Embed a Tumblr post.' ),
-		patterns: [ /^https?:\/\/(www\.)?tumblr\.com\/.+/i ],
+		patterns: [ /^https?:\/\/(.+)\.tumblr\.com\/.+/i ],
 		attributes: { providerNameSlug: 'tumblr', responsive: true },
 	},
 	{

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/transforms.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, every } from 'lodash';
+import { filter } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -133,10 +133,14 @@ const transforms = {
 				// Init the align and size from the first item which may be either the placeholder or an image.
 				let { align, sizeSlug } = attributes[ 0 ];
 				// Loop through all the images and check if they have the same align and size.
-				align = every( attributes, [ 'align', align ] )
+				align = attributes.every(
+					( attribute ) => attribute.align === align
+				)
 					? align
 					: undefined;
-				sizeSlug = every( attributes, [ 'sizeSlug', sizeSlug ] )
+				sizeSlug = attributes.every(
+					( attribute ) => attribute.sizeSlug === sizeSlug
+				)
 					? sizeSlug
 					: undefined;
 
@@ -268,8 +272,7 @@ const transforms = {
 			isMatch( files ) {
 				return (
 					files.length !== 1 &&
-					every(
-						files,
+					files.every(
 						( file ) => file.type.indexOf( 'image/' ) === 0
 					)
 				);

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 { every, 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 } )
 		);
@@ -333,7 +334,7 @@ function GalleryEdit( props ) {
 			Platform.OS === 'web' &&
 			images &&
 			images.length > 0 &&
-			every( images, ( { url } ) => isBlobURL( url ) )
+			images.every( ( { url } ) => isBlobURL( url ) )
 		) {
 			const filesList = map( images, ( { url } ) => getBlobByURL( url ) );
 			images.forEach( ( { url } ) => revokeBlobURL( url ) );

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/group/editor.scss

@@ -42,6 +42,7 @@
 		flex: 1 0 $grid-unit-60;
 		pointer-events: none;
 		min-height: $grid-unit-60 - $border-width - $border-width;
+		border: $border-width dashed currentColor;
 		@include placeholder-style();
 	}
 

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/editor.scss

@@ -66,7 +66,10 @@ figure.wp-block-image:not(.wp-block) {
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
 .wp-block-image .components-resizable-box__container {
-	display: inline-block;
+	// Using "display: table" because:
+	// - it visually hides empty white space in between elements
+	// - it allows the element to be as wide as its contents (instead of 100% width, as it would be with `display: block`)
+	display: table;
 	img {
 		display: block;
 		width: inherit;