@wordpress/block-library 7.4.0 → 7.7.0

package/src/gallery/index.php

@@ -48,7 +48,14 @@ function block_core_gallery_render( $attributes, $content ) {
 	// Skip if gap value contains unsupported characters.
 	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
 	// because we only want to match against the value, not the CSS attribute.
-	$gap     = preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+	if ( is_array( $gap ) ) {
+		foreach ( $gap as $key => $value ) {
+			$gap[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
+		}
+	} else {
+		$gap = $gap && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+	}
+
 	$class   = wp_unique_id( 'wp-block-gallery-' );
 	$content = preg_replace(
 		'/' . preg_quote( 'class="', '/' ) . '/',
@@ -56,19 +63,23 @@ function block_core_gallery_render( $attributes, $content ) {
 		$content,
 		1
 	);
+
 	// --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.
-	$gap_value = $gap ? $gap : 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
-	$style     = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '; gap: ' . $gap_value . '}';
-	// Ideally styles should be loaded in the head, but blocks may be parsed
-	// after that, so loading in the footer for now.
-	// See https://core.trac.wordpress.org/ticket/53494.
-	add_action(
-		'wp_footer',
-		function () use ( $style ) {
-			echo '<style> ' . $style . '</style>';
-		}
-	);
+	$fallback_gap = 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
+	$gap_value    = $gap ? $gap : $fallback_gap;
+	$gap_column   = $gap_value;
+
+	if ( is_array( $gap_value ) ) {
+		$gap_row    = isset( $gap_value['top'] ) ? $gap_value['top'] : $fallback_gap;
+		$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : $fallback_gap;
+		$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
+	}
+
+	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
+	$style = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
+
+	gutenberg_enqueue_block_support_styles( $style, 11 );
 	return $content;
 }
 /**

package/src/gallery/shared.js

@@ -8,11 +8,12 @@ export function defaultColumnsNumber( imageCount ) {
 }
 
 export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
-	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
+	const imageProps = pick( image, [ 'alt', 'id', 'link' ] );
 	imageProps.url =
 		get( image, [ 'sizes', sizeSlug, 'url' ] ) ||
 		get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
-		image.url;
+		image.url ||
+		image.source_url;
 	const fullUrl =
 		get( image, [ 'sizes', 'full', 'url' ] ) ||
 		get( image, [ 'media_details', 'sizes', 'full', 'source_url' ] );

package/src/gallery/use-get-media.js

@@ -32,7 +32,8 @@ export default function useGetMedia( innerBlockImages ) {
 
 			return select( coreStore ).getMediaItems( {
 				include: imageIds.join( ',' ),
-				per_page: -1,
+				per_page: imageIds.length,
+				orderby: 'include',
 			} );
 		},
 		[ innerBlockImages ]

package/src/gallery/use-short-code-transform.js

@@ -23,20 +23,13 @@ export default function useShortCodeTransform( shortCodeTransforms ) {
 			if ( ! shortCodeTransforms || shortCodeTransforms.length === 0 ) {
 				return;
 			}
-			const getMedia = select( coreStore ).getMedia;
-			return shortCodeTransforms.map( ( image ) => {
-				const imageData = getMedia( image.id );
-				if ( imageData ) {
-					return {
-						id: imageData.id,
-						type: 'image',
-						url: imageData.source_url,
-						mime: imageData.mime_type,
-						alt: imageData.alt_text,
-						link: imageData.link,
-					};
-				}
-				return undefined;
+
+			const imageIds = shortCodeTransforms.map( ( image ) => image.id );
+
+			return select( coreStore ).getMediaItems( {
+				include: imageIds.join( ',' ),
+				per_page: imageIds.length,
+				orderby: 'include',
 			} );
 		},
 		[ shortCodeTransforms ]
@@ -46,7 +39,17 @@ export default function useShortCodeTransform( shortCodeTransforms ) {
 		return;
 	}
 
-	if ( every( newImageData, ( img ) => img && img.url ) ) {
-		return newImageData;
+	if ( every( newImageData, ( img ) => img && img.source_url ) ) {
+		return newImageData.map( ( imageData ) => {
+			return {
+				id: imageData.id,
+				type: 'image',
+				url: imageData.source_url,
+				mime: imageData.mime_type,
+				alt: imageData.alt_text,
+				link: imageData.link,
+				caption: imageData?.caption?.raw,
+			};
+		} );
 	}
 }

package/src/gallery/v1/gallery.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { RichText } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -101,7 +101,7 @@ export const Gallery = ( props ) => {
 				onChange={ ( value ) => setAttributes( { caption: value } ) }
 				inlineToolbar
 				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( 'core/paragraph' ) )
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}
 			/>
 		</figure>

package/src/group/block.json

@@ -18,6 +18,7 @@
 		}
 	},
 	"supports": {
+		"__experimentalSettings": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
 		"html": false,

package/src/heading/block.json

@@ -43,6 +43,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,

package/src/heading/edit.js

@@ -42,10 +42,13 @@ function HeadingEdit( {
 	} );
 
 	const { canGenerateAnchors } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
+		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
+		const settings = getSettings();
 
 		return {
-			canGenerateAnchors: !! settings.generateAnchors,
+			canGenerateAnchors:
+				!! settings.generateAnchors ||
+				getGlobalBlockCount( 'core/table-of-contents' ) > 0,
 		};
 	}, [] );
 

package/src/heading/transforms.js

@@ -16,10 +16,11 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, anchor } ) =>
+				attributes.map( ( { content, anchor, align: textAlign } ) =>
 					createBlock( name, {
 						content,
 						anchor,
+						textAlign,
 					} )
 				),
 		},
@@ -84,8 +85,8 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content } ) =>
-					createBlock( 'core/paragraph', { content } )
+				attributes.map( ( { content, textAlign: align } ) =>
+					createBlock( 'core/paragraph', { content, align } )
 				),
 		},
 	],

package/src/image/edit.js

@@ -85,20 +85,6 @@ function hasDefaultSize( image, defaultSize ) {
 	);
 }
 
-/**
- * Checks if a media attachment object has been "destroyed",
- * that is, removed from the media library. The core Media Library
- * adds a `destroyed` property to a deleted attachment object in the media collection.
- *
- * @param {number} id The attachment id.
- *
- * @return {boolean} Whether the image has been destroyed.
- */
-export function isMediaDestroyed( id ) {
-	const attachment = window?.wp?.media?.attachment( id ) || {};
-	return attachment.destroyed;
-}
-
 export function ImageEdit( {
 	attributes,
 	setAttributes,
@@ -139,33 +125,6 @@ export function ImageEdit( {
 		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
 	}, [] );
 
-	// A callback passed to MediaUpload,
-	// fired when the media modal closes.
-	function onCloseModal() {
-		if ( isMediaDestroyed( attributes?.id ) ) {
-			setAttributes( {
-				url: undefined,
-				id: undefined,
-			} );
-		}
-	}
-
-	/*
-		 Runs an error callback if the image does not load.
-		 If the error callback is triggered, we infer that that image
-		 has been deleted.
-	*/
-	function onImageError( isReplaced = false ) {
-		// If the image block was not replaced with an embed,
-		// clear the attributes and trigger the placeholder.
-		if ( ! isReplaced ) {
-			setAttributes( {
-				url: undefined,
-				id: undefined,
-			} );
-		}
-	}
-
 	function onUploadError( message ) {
 		noticeOperations.removeAllNotices();
 		noticeOperations.createErrorNotice( message );
@@ -364,8 +323,6 @@ export function ImageEdit( {
 					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
-					onCloseModal={ onCloseModal }
-					onImageLoadError={ onImageError }
 				/>
 			) }
 			{ ! url && (
@@ -382,7 +339,6 @@ export function ImageEdit( {
 				onSelectURL={ onSelectURL }
 				notices={ noticeUI }
 				onError={ onUploadError }
-				onClose={ onCloseModal }
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				value={ { id, src } }

package/src/image/edit.native.js

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { View, TouchableWithoutFeedback } from 'react-native';
+import {
+	ActivityIndicator,
+	Image as RNImage,
+	TouchableWithoutFeedback,
+	View,
+} from 'react-native';
 import { useRoute } from '@react-navigation/native';
 
 /**
@@ -45,7 +50,7 @@ import {
 	blockSettingsScreens,
 } from '@wordpress/block-editor';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { getProtocol, hasQueryArg } from '@wordpress/url';
+import { getProtocol, hasQueryArg, isURL } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -57,6 +62,7 @@ import {
 } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '@wordpress/edit-post';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -207,6 +213,7 @@ export class ImageEdit extends Component {
 		this.onImagePressed = this.onImagePressed.bind( this );
 		this.onSetFeatured = this.onSetFeatured.bind( this );
 		this.onFocusCaption = this.onFocusCaption.bind( this );
+		this.onSelectURL = this.onSelectURL.bind( this );
 		this.updateAlignment = this.updateAlignment.bind( this );
 		this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind(
 			this
@@ -461,6 +468,45 @@ export class ImageEdit extends Component {
 		} );
 	}
 
+	onSelectURL( newURL ) {
+		const {
+			createErrorNotice,
+			imageDefaultSize,
+			setAttributes,
+		} = this.props;
+
+		if ( isURL( newURL ) ) {
+			this.setState( {
+				isFetchingImage: true,
+			} );
+
+			// Use RN's Image.getSize to determine if URL is a valid image
+			RNImage.getSize(
+				newURL,
+				() => {
+					setAttributes( {
+						url: newURL,
+						id: undefined,
+						width: undefined,
+						height: undefined,
+						sizeSlug: imageDefaultSize,
+					} );
+					this.setState( {
+						isFetchingImage: false,
+					} );
+				},
+				() => {
+					createErrorNotice( __( 'Image file not found.' ) );
+					this.setState( {
+						isFetchingImage: false,
+					} );
+				}
+			);
+		} else {
+			createErrorNotice( __( 'Invalid URL.' ) );
+		}
+	}
+
 	onFocusCaption() {
 		if ( this.props.onFocus ) {
 			this.props.onFocus();
@@ -484,6 +530,14 @@ export class ImageEdit extends Component {
 		);
 	}
 
+	showLoadingIndicator() {
+		return (
+			<View style={ styles.image__loading }>
+				<ActivityIndicator animating />
+			</View>
+		);
+	}
+
 	getWidth() {
 		const { attributes } = this.props;
 		const { align, width } = attributes;
@@ -611,7 +665,7 @@ export class ImageEdit extends Component {
 	}
 
 	render() {
-		const { isCaptionSelected } = this.state;
+		const { isCaptionSelected, isFetchingImage } = this.state;
 		const {
 			attributes,
 			isSelected,
@@ -713,9 +767,11 @@ export class ImageEdit extends Component {
 		if ( ! url ) {
 			return (
 				<View style={ styles.content }>
+					{ isFetchingImage && this.showLoadingIndicator() }
 					<MediaPlaceholder
 						allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
 						onSelect={ this.onSelectMediaUploadOption }
+						onSelectURL={ this.onSelectURL }
 						icon={ this.getPlaceholderIcon() }
 						onFocus={ this.props.onFocus }
 						autoOpenMediaUpload={
@@ -757,7 +813,6 @@ export class ImageEdit extends Component {
 				<TouchableWithoutFeedback
 					accessible={ ! isSelected }
 					onPress={ this.onImagePressed }
-					onLongPress={ openMediaOptions }
 					disabled={ ! isSelected }
 				>
 					<View style={ styles.content }>
@@ -785,6 +840,8 @@ export class ImageEdit extends Component {
 							} ) => {
 								return (
 									<View style={ imageContainerStyles }>
+										{ isFetchingImage &&
+											this.showLoadingIndicator() }
 										<Image
 											align={
 												align && alignToFlex[ align ]
@@ -837,6 +894,7 @@ export class ImageEdit extends Component {
 				allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
 				isReplacingMedia={ true }
 				onSelect={ this.onSelectMediaUploadOption }
+				onSelectURL={ this.onSelectURL }
 				render={ ( { open, getMediaOptions } ) => {
 					return getImageComponent( open, getMediaOptions );
 				} }
@@ -882,7 +940,10 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
+		const { createErrorNotice } = dispatch( noticesStore );
+
 		return {
+			createErrorNotice,
 			closeSettingsBottomSheet() {
 				dispatch( editPostStore ).closeGeneralSidebar();
 			},

package/src/image/editor.scss

@@ -110,8 +110,8 @@ figure.wp-block-image:not(.wp-block) {
 
 .wp-block-image__zoom {
 	.components-popover__content {
-		overflow: visible;
 		min-width: 260px;
+		overflow: visible !important;
 	}
 
 	.components-range-control {

package/src/image/image.js

@@ -33,7 +33,11 @@ import {
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import {
+	createBlock,
+	getDefaultBlockName,
+	switchToBlockType,
+} from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -43,7 +47,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
 import useClientWidth from './use-client-width';
-import { isExternalImage, isMediaDestroyed } from './edit';
+import { isExternalImage } from './edit';
 
 /**
  * Module constants
@@ -72,14 +76,12 @@ export default function Image( {
 	isSelected,
 	insertBlocksAfter,
 	onReplace,
-	onCloseModal,
 	onSelectImage,
 	onSelectURL,
 	onUploadError,
 	containerRef,
 	context,
 	clientId,
-	onImageLoadError,
 } ) {
 	const imageRef = useRef();
 	const captionRef = useRef();
@@ -221,13 +223,10 @@ export default function Image( {
 		// Check if there's an embed block that handles this URL, e.g., instagram URL.
 		// See: https://github.com/WordPress/gutenberg/pull/11472
 		const embedBlock = createUpgradedEmbedBlock( { attributes: { url } } );
-		const shouldReplace = undefined !== embedBlock;
 
-		if ( shouldReplace ) {
+		if ( undefined !== embedBlock ) {
 			onReplace( embedBlock );
 		}
-
-		onImageLoadError( shouldReplace );
 	}
 
 	function onSetHref( props ) {
@@ -299,9 +298,6 @@ export default function Image( {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
 		}
-		if ( isSelected && isMediaDestroyed( id ) ) {
-			onImageLoadError();
-		}
 	}, [ isSelected ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
@@ -365,7 +361,6 @@ export default function Image( {
 						onSelect={ onSelectImage }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
-						onCloseModal={ onCloseModal }
 					/>
 				</BlockControls>
 			) }
@@ -598,7 +593,9 @@ export default function Image( {
 					}
 					inlineToolbar
 					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter( createBlock( 'core/paragraph' ) )
+						insertBlocksAfter(
+							createBlock( getDefaultBlockName() )
+						)
 					}
 				/>
 			) }

package/src/image/styles.native.scss

@@ -57,3 +57,14 @@
 .removeFeaturedButton {
 	color: $alert-red;
 }
+
+.image__loading {
+	align-items: center;
+	background-color: rgba(10, 10, 10, 0.5);
+	flex: 1;
+	height: 100%;
+	justify-content: center;
+	position: absolute;
+	width: 100%;
+	z-index: 1;
+}

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

@@ -87,7 +87,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -113,7 +113,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -139,7 +139,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -172,7 +172,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -212,7 +212,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -239,7 +239,7 @@ describe( 'Image Block', () => {
 
 		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () => fireEvent.press( settingsButton ) );
 
 		const linkTargetButton = screen.getByText( 'Open in new tab' );
@@ -270,7 +270,7 @@ describe( 'Image Block', () => {
 
 		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () => fireEvent.press( settingsButton ) );
 
 		const linkTargetButton = screen.getByText( 'Open in new tab' );