@wordpress/block-library 7.6.0 → 7.7.0

package/src/file/save.js

@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalElementButtonClassName,
+} from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
@@ -63,7 +72,10 @@ export default function save( { attributes } ) {
 				{ showDownloadButton && (
 					<a
 						href={ href }
-						className="wp-block-file__button"
+						className={ classnames(
+							'wp-block-file__button',
+							__experimentalElementButtonClassName
+						) }
 						download={ true }
 						aria-describedby={ describedById }
 					>

package/src/gallery/block.json

@@ -110,7 +110,7 @@
 		"html": false,
 		"units": [ "px", "em", "rem", "vh", "vw" ],
 		"spacing": {
-			"blockGap": true,
+			"blockGap": [ "horizontal", "vertical" ],
 			"__experimentalSkipSerialization": [ "blockGap" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true

package/src/gallery/gap-styles.js

@@ -8,12 +8,27 @@ export default function GapStyles( { blockGap, clientId } ) {
 	const styleElement = useContext( BlockList.__unstableElementContext );
 	// --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.
-	const gapValue = blockGap
-		? blockGap
-		: `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
-	const gap = `#block-${ clientId } { 
-		--wp--style--unstable-gallery-gap: ${ gapValue };
-		gap: ${ gapValue } 
+	const fallbackValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
+	let gapValue = fallbackValue;
+	let column = fallbackValue;
+	let row;
+
+	// Check for the possibility of split block gap values. See: https://github.com/WordPress/gutenberg/pull/37736
+	if ( !! blockGap ) {
+		row =
+			typeof blockGap === 'string'
+				? blockGap
+				: blockGap?.top || fallbackValue;
+		column =
+			typeof blockGap === 'string'
+				? blockGap
+				: blockGap?.left || fallbackValue;
+		gapValue = row === column ? row : `${ row } ${ column }`;
+	}
+
+	const gap = `#block-${ clientId } {
+		--wp--style--unstable-gallery-gap: ${ column };
+		gap: ${ gapValue }
 	}`;
 
 	const GapStyle = () => {

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/image/edit.js

@@ -19,7 +19,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
 
 /**
@@ -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,41 +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 ) {
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice(
-			sprintf(
-				/* translators: %s url or missing image */
-				__( 'Error loading image: %s' ),
-				url
-			)
-		);
-		// 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 );
@@ -372,8 +323,6 @@ export function ImageEdit( {
 					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
-					onCloseModal={ onCloseModal }
-					onImageLoadError={ onImageError }
 				/>
 			) }
 			{ ! url && (
@@ -390,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={
@@ -784,6 +840,8 @@ export class ImageEdit extends Component {
 							} ) => {
 								return (
 									<View style={ imageContainerStyles }>
+										{ isFetchingImage &&
+											this.showLoadingIndicator() }
 										<Image
 											align={
 												align && alignToFlex[ align ]
@@ -836,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 );
 				} }
@@ -881,7 +940,10 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
+		const { createErrorNotice } = dispatch( noticesStore );
+
 		return {
+			createErrorNotice,
 			closeSettingsBottomSheet() {
 				dispatch( editPostStore ).closeGeneralSidebar();
 			},

package/src/image/image.js

@@ -47,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
@@ -76,14 +76,12 @@ export default function Image( {
 	isSelected,
 	insertBlocksAfter,
 	onReplace,
-	onCloseModal,
 	onSelectImage,
 	onSelectURL,
 	onUploadError,
 	containerRef,
 	context,
 	clientId,
-	onImageLoadError,
 } ) {
 	const imageRef = useRef();
 	const captionRef = useRef();
@@ -225,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 ) {
@@ -303,9 +298,6 @@ export default function Image( {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
 		}
-		if ( isSelected && isMediaDestroyed( id ) ) {
-			onImageLoadError();
-		}
 	}, [ isSelected ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
@@ -369,7 +361,6 @@ export default function Image( {
 						onSelect={ onSelectImage }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
-						onCloseModal={ onCloseModal }
 					/>
 				</BlockControls>
 			) }

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/list-item/hooks/use-split.js

@@ -1,23 +1,32 @@
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { cloneBlock } from '@wordpress/blocks';
+import { cloneBlock, createBlock } from '@wordpress/blocks';
 
 export default function useSplit( clientId ) {
+	// We can not rely on the isAfterOriginal parameter of the callback,
+	// because if the value after the split is empty isAfterOriginal is false
+	// while the value is in fact after the original. So to avoid that issue we use
+	// a flag where the first execution of the callback is false (it is the before value)
+	// and the second execution is true, it is the after value.
+	const isAfter = useRef( false );
 	const { getBlock } = useSelect( blockEditorStore );
 	return useCallback(
-		( value, isAfterOriginal ) => {
+		( value ) => {
 			const block = getBlock( clientId );
-			return cloneBlock(
-				block,
-				{
+			if ( isAfter.current ) {
+				return cloneBlock( block, {
 					content: value,
-				},
-				isAfterOriginal ? [] : block.innerBlocks
-			);
+				} );
+			}
+			isAfter.current = true;
+			return createBlock( block.name, {
+				...block.attributes,
+				content: value,
+			} );
 		},
 		[ clientId, getBlock ]
 	);

package/src/navigation-link/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape } from 'lodash';
+import { escape, unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -43,6 +43,7 @@ import {
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -239,6 +240,15 @@ export const updateNavigationLinkBlockAttributes = (
 		normalizedTitle !== normalizedURL &&
 		originalLabel !== title;
 
+	// Unfortunately this causes the escaping model to be inverted.
+	// The escaped content is stored in the block attributes (and ultimately in the database),
+	// and then the raw data is "recovered" when outputting into the DOM.
+	// It would be preferable to store the **raw** data in the block attributes and escape it in JS.
+	// Why? Because there isn't one way to escape data. Depending on the context, you need to do
+	// different transforms. It doesn't make sense to me to choose one of them for the purposes of storage.
+	// See also:
+	// - https://github.com/WordPress/gutenberg/pull/41063
+	// - https://github.com/WordPress/gutenberg/pull/18617.
 	const label = escapeTitle
 		? escape( title )
 		: originalLabel || escape( normalizedURL );
@@ -606,7 +616,17 @@ export default function NavigationLinkEdit( {
 		return {
 			id: page.id,
 			type: postType,
-			title: page.title.rendered,
+			// Make `title` property consistent with that in `fetchLinkSuggestions` where the `rendered` title (containing HTML entities)
+			// is also being decoded. By being consistent in both locations we avoid having to branch in the rendering output code.
+			// Ideally in the future we will update both APIs to utilise the "raw" form of the title which is better suited to edit contexts.
+			// e.g.
+			// - title.raw = "Yes & No"
+			// - title.rendered = "Yes & No"
+			// - decodeEntities( title.rendered ) = "Yes & No"
+			// See:
+			// - https://github.com/WordPress/gutenberg/pull/41063
+			// - https://github.com/WordPress/gutenberg/blob/a1e1fdc0e6278457e9f4fc0b31ac6d2095f5450b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js#L212-L218
+			title: decodeEntities( page.title.rendered ),
 			url: page.link,
 			kind: 'post-type',
 		};
@@ -795,10 +815,20 @@ export default function NavigationLinkEdit( {
 										text={ tooltipText }
 									>
 										<>
-											<span>
+											<span
+												aria-label={ __(
+													'Navigation link text'
+												) }
+											>
 												{
-													/* Trim to avoid trailing white space when the placeholder text is not present */
-													`${ label } ${ placeholderText }`.trim()
+													// Some attributes are stored in an escaped form. It's a legacy issue.
+													// Ideally they would be stored in a raw, unescaped form.
+													// Unescape is used here to "recover" the escaped characters
+													// so they display without encoding.
+													// See `updateNavigationLinkBlockAttributes` for more details.
+													`${ unescape(
+														label
+													) } ${ placeholderText }`.trim()
 												}
 											</span>
 											<span className="wp-block-navigation-link__missing_text-tooltip">

package/src/navigation-link/test/edit.js

@@ -372,26 +372,6 @@ describe( 'edit', () => {
 					url: 'https://wordpress.org',
 				} );
 			} );
-			// https://github.com/WordPress/gutenberg/pull/18617
-			it( 'label is javascript escaped', () => {
-				const setAttributes = jest.fn();
-				const linkSuggestion = {
-					opensInNewTab: false,
-					title: '<Navigation />',
-					type: 'URL',
-					url: 'https://wordpress.local?p=1',
-				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
-				expect( setAttributes ).toHaveBeenCalledWith( {
-					opensInNewTab: false,
-					label: '&lt;Navigation /&gt;',
-					kind: 'custom',
-					url: 'https://wordpress.local?p=1',
-				} );
-			} );
 			// https://github.com/WordPress/gutenberg/pull/19679
 			it( 'url when escaped is still an actual link', () => {
 				const setAttributes = jest.fn();

package/src/post-author/index.php

@@ -15,10 +15,11 @@
  */
 function render_block_core_post_author( $attributes, $content, $block ) {
 	if ( ! isset( $block->context['postId'] ) ) {
-		return '';
+		$author_id = get_query_var( 'author' );
+	} else {
+		$author_id = get_post_field( 'post_author', $block->context['postId'] );
 	}
 
-	$author_id = get_post_field( 'post_author', $block->context['postId'] );
 	if ( empty( $author_id ) ) {
 		return '';
 	}

package/src/post-author-name/index.js

@@ -3,6 +3,7 @@
  */
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 /**
  * WordPress dependencies
@@ -14,5 +15,6 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	transforms,
 	edit,
 };

package/src/post-author-name/index.php

@@ -32,7 +32,7 @@ function render_block_core_post_author_name( $attributes, $content, $block ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
-	return sprintf( '<div %1$s>', $wrapper_attributes ) . $author_name . '</div>';
+	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $author_name );
 }
 
 /**

package/src/post-author-name/transforms.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/post-author' ],
+			transform: ( { textAlign } ) =>
+				createBlock( 'core/post-author-name', { textAlign } ),
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/post-author' ],
+			transform: ( { textAlign } ) =>
+				createBlock( 'core/post-author', { textAlign } ),
+		},
+	],
+};
+
+export default transforms;

package/src/post-comments/index.php

@@ -78,7 +78,7 @@ add_action( 'init', 'register_block_core_post_comments' );
  */
 function post_comments_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}