@wordpress/block-library 7.1.1 → 7.2.0

package/src/comment-template/edit.js

@@ -20,7 +20,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useCommentQueryArgs, useCommentTree } from './hooks';
 
 const TEMPLATE = [
-	[ 'core/comment-author-avatar' ],
+	[ 'core/avatar' ],
 	[ 'core/comment-author-name' ],
 	[ 'core/comment-date' ],
 	[ 'core/comment-content' ],
@@ -31,6 +31,10 @@ const TEMPLATE = [
 /**
  * Function that returns a comment structure that will be rendered with default placehoders.
  *
+ * Each comment has a `commentId` property that is always a negative number in
+ * case of the placeholders. This is to ensure that the comment does not
+ * conflict with the actual (real) comments.
+ *
  * @param {Object}  settings                       Discussion Settings.
  * @param {number}  [settings.perPage]             - Comments per page setting or block attribute.
  * @param {boolean} [settings.threadComments]      - Enable threaded (nested) comments setting.
@@ -54,12 +58,13 @@ const getCommentsPlaceholder = ( {
 		perPage <= commentsDepth ? perPage : commentsDepth;
 	if ( ! threadComments || defaultCommentsToShow === 1 ) {
 		// If displaying threaded comments is disabled, we only show one comment
-		return [ { commentId: null, children: [] } ];
+		// A commentId is negative in order to avoid conflicts with the actual comments.
+		return [ { commentId: -1, children: [] } ];
 	} else if ( defaultCommentsToShow === 2 ) {
 		return [
 			{
-				commentId: null,
-				children: [ { commentId: null, children: [] } ],
+				commentId: -1,
+				children: [ { commentId: -2, children: [] } ],
 			},
 		];
 	}
@@ -67,11 +72,11 @@ const getCommentsPlaceholder = ( {
 	// In case that the value is set but larger than 3 we truncate it to 3.
 	return [
 		{
-			commentId: null,
+			commentId: -1,
 			children: [
 				{
-					commentId: null,
-					children: [ { commentId: null, children: [] } ],
+					commentId: -2,
+					children: [ { commentId: -3, children: [] } ],
 				},
 			],
 		},
@@ -81,29 +86,32 @@ const getCommentsPlaceholder = ( {
 /**
  * Component which renders the inner blocks of the Comment Template.
  *
- * @param {Object} props                    Component props.
- * @param {Array}  [props.comment]          - A comment object.
- * @param {Array}  [props.activeComment]    - The block that is currently active.
- * @param {Array}  [props.setActiveComment] - The setter for activeComment.
- * @param {Array}  [props.firstComment]     - First comment in the array.
- * @param {Array}  [props.blocks]           - Array of blocks returned from
- *                                          getBlocks() in parent .
+ * @param {Object} props                      Component props.
+ * @param {Array}  [props.comment]            - A comment object.
+ * @param {Array}  [props.activeCommentId]    - The ID of the comment that is currently active.
+ * @param {Array}  [props.setActiveCommentId] - The setter for activeCommentId.
+ * @param {Array}  [props.firstCommentId]     - ID of the first comment in the array.
+ * @param {Array}  [props.blocks]             - Array of blocks returned from
+ *                                            getBlocks() in parent .
  * @return {WPElement}                 		Inner blocks of the Comment Template
  */
 function CommentTemplateInnerBlocks( {
 	comment,
-	activeComment,
-	setActiveComment,
-	firstComment,
+	activeCommentId,
+	setActiveCommentId,
+	firstCommentId,
 	blocks,
 } ) {
 	const { children, ...innerBlocksProps } = useInnerBlocksProps(
 		{},
 		{ template: TEMPLATE }
 	);
+
 	return (
 		<li { ...innerBlocksProps }>
-			{ comment === ( activeComment || firstComment ) ? children : null }
+			{ comment.commentId === ( activeCommentId || firstCommentId )
+				? children
+				: null }
 
 			{ /* To avoid flicker when switching active block contexts, a preview
 			is ALWAYS rendered and the preview for the active block is hidden.
@@ -114,17 +122,20 @@ function CommentTemplateInnerBlocks( {
 			block. */ }
 			<MemoizedCommentTemplatePreview
 				blocks={ blocks }
-				comment={ comment }
-				setActiveComment={ setActiveComment }
-				isHidden={ comment === ( activeComment || firstComment ) }
+				commentId={ comment.commentId }
+				setActiveCommentId={ setActiveCommentId }
+				isHidden={
+					comment.commentId === ( activeCommentId || firstCommentId )
+				}
 			/>
 
 			{ comment?.children?.length > 0 ? (
 				<CommentsList
 					comments={ comment.children }
-					activeComment={ activeComment }
-					setActiveComment={ setActiveComment }
+					activeCommentId={ activeCommentId }
+					setActiveCommentId={ setActiveCommentId }
 					blocks={ blocks }
+					firstCommentId={ firstCommentId }
 				/>
 			) : null }
 		</li>
@@ -133,8 +144,8 @@ function CommentTemplateInnerBlocks( {
 
 const CommentTemplatePreview = ( {
 	blocks,
-	comment,
-	setActiveComment,
+	commentId,
+	setActiveCommentId,
 	isHidden,
 } ) => {
 	const blockPreviewProps = useBlockPreview( {
@@ -142,7 +153,7 @@ const CommentTemplatePreview = ( {
 	} );
 
 	const handleOnClick = () => {
-		setActiveComment( comment );
+		setActiveCommentId( commentId );
 	};
 
 	// We have to hide the preview block if the `comment` props points to
@@ -172,35 +183,44 @@ const MemoizedCommentTemplatePreview = memo( CommentTemplatePreview );
 /**
  * Component that renders a list of (nested) comments. It is called recursively.
  *
- * @param {Object} props                    Component props.
- * @param {Array}  [props.comments]         - Array of comment objects.
- * @param {Array}  [props.blockProps]       - Props from parent's `useBlockProps()`.
- * @param {Array}  [props.activeComment]    - The block that is currently active.
- * @param {Array}  [props.setActiveComment] - The setter for activeComment.
- * @param {Array}  [props.blocks]           - Array of blocks returned from
- *                                          getBlocks() in parent .
+ * @param {Object} props                      Component props.
+ * @param {Array}  [props.comments]           - Array of comment objects.
+ * @param {Array}  [props.blockProps]         - Props from parent's `useBlockProps()`.
+ * @param {Array}  [props.activeCommentId]    - The ID of the comment that is currently active.
+ * @param {Array}  [props.setActiveCommentId] - The setter for activeCommentId.
+ * @param {Array}  [props.blocks]             - Array of blocks returned from getBlocks() in parent.
+ * @param {Object} [props.firstCommentId]     - The ID of the first comment in the array of
+ *                                            comment objects.
  * @return {WPElement}                 		List of comments.
  */
 const CommentsList = ( {
 	comments,
 	blockProps,
-	activeComment,
-	setActiveComment,
+	activeCommentId,
+	setActiveCommentId,
 	blocks,
+	firstCommentId,
 } ) => (
 	<ol { ...blockProps }>
 		{ comments &&
-			comments.map( ( comment, index ) => (
+			comments.map( ( { commentId, ...comment }, index ) => (
 				<BlockContextProvider
 					key={ comment.commentId || index }
-					value={ comment }
+					value={ {
+						// If the commentId is negative it means that this comment is a
+						// "placeholder" and that the block is most likely being used in the
+						// site editor. In this case, we have to set the commentId to `null`
+						// because otherwise the (non-existent) comment with a negative ID
+						// would be reqested from the REST API.
+						commentId: commentId < 0 ? null : commentId,
+					} }
 				>
 					<CommentTemplateInnerBlocks
-						comment={ comment }
-						activeComment={ activeComment }
-						setActiveComment={ setActiveComment }
+						comment={ { commentId, ...comment } }
+						activeCommentId={ activeCommentId }
+						setActiveCommentId={ setActiveCommentId }
 						blocks={ blocks }
-						firstComment={ comments[ 0 ] }
+						firstCommentId={ firstCommentId }
 					/>
 				</BlockContextProvider>
 			) ) }
@@ -219,7 +239,7 @@ export default function CommentTemplateEdit( {
 } ) {
 	const blockProps = useBlockProps();
 
-	const [ activeComment, setActiveComment ] = useState();
+	const [ activeCommentId, setActiveCommentId ] = useState();
 	const { commentOrder, threadCommentsDepth, threadComments } = useSelect(
 		( select ) => {
 			const { getSettings } = select( blockEditorStore );
@@ -285,8 +305,9 @@ export default function CommentTemplateEdit( {
 			comments={ commentTree }
 			blockProps={ blockProps }
 			blocks={ blocks }
-			activeComment={ activeComment }
-			setActiveComment={ setActiveComment }
+			activeCommentId={ activeCommentId }
+			setActiveCommentId={ setActiveCommentId }
+			firstCommentId={ commentTree[ 0 ]?.commentId }
 		/>
 	);
 }

package/src/cover/edit.js

@@ -9,7 +9,13 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
-import { Fragment, useEffect, useRef, useState } from '@wordpress/element';
+import {
+	Fragment,
+	useEffect,
+	useRef,
+	useState,
+	useMemo,
+} from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
@@ -22,10 +28,11 @@ import {
 	Spinner,
 	TextareaControl,
 	ToggleControl,
-	withNotices,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalBoxControl as BoxControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { compose, useInstanceId } from '@wordpress/compose';
 import {
@@ -41,7 +48,6 @@ import {
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
-	__experimentalUnitControl as UnitControl,
 	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
 	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
 	store as blockEditorStore,
@@ -50,6 +56,7 @@ import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { cover as icon } from '@wordpress/icons';
 import { isBlobURL } from '@wordpress/blob';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -96,8 +103,6 @@ function CoverHeightInput( {
 	unit = 'px',
 	value = '',
 } ) {
-	const [ temporaryInput, setTemporaryInput ] = useState( null );
-
 	const instanceId = useInstanceId( UnitControl );
 	const inputId = `block-cover-height-input-${ instanceId }`;
 	const isPx = unit === 'px';
@@ -120,20 +125,16 @@ function CoverHeightInput( {
 				: undefined;
 
 		if ( isNaN( inputValue ) && inputValue !== undefined ) {
-			setTemporaryInput( unprocessedValue );
 			return;
 		}
-		setTemporaryInput( null );
 		onChange( inputValue );
 	};
 
-	const handleOnBlur = () => {
-		if ( temporaryInput !== null ) {
-			setTemporaryInput( null );
-		}
-	};
+	const computedValue = useMemo( () => {
+		const [ parsedQuantity ] = parseQuantityAndUnitFromRawValue( value );
+		return [ parsedQuantity, unit ].join( '' );
+	}, [ unit, value ] );
 
-	const inputValue = temporaryInput !== null ? temporaryInput : value;
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
 	return (
@@ -142,13 +143,11 @@ function CoverHeightInput( {
 				id={ inputId }
 				isResetValueOnUnitChange
 				min={ min }
-				onBlur={ handleOnBlur }
 				onChange={ handleOnChange }
 				onUnitChange={ onUnitChange }
 				style={ { maxWidth: 80 } }
-				unit={ unit }
 				units={ units }
-				value={ inputValue }
+				value={ computedValue }
 			/>
 		</BaseControl>
 	);
@@ -266,12 +265,10 @@ const isTemporaryMedia = ( id, url ) => ! id && isBlobURL( url );
 function CoverPlaceholder( {
 	disableMediaButtons = false,
 	children,
-	noticeUI,
-	noticeOperations,
 	onSelectMedia,
+	onError,
 	style,
 } ) {
-	const { removeAllNotices, createErrorNotice } = noticeOperations;
 	return (
 		<MediaPlaceholder
 			icon={ <BlockIcon icon={ icon } /> }
@@ -284,12 +281,8 @@ function CoverPlaceholder( {
 			onSelect={ onSelectMedia }
 			accept="image/*,video/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
-			notices={ noticeUI }
 			disableMediaButtons={ disableMediaButtons }
-			onError={ ( message ) => {
-				removeAllNotices();
-				createErrorNotice( message );
-			} }
+			onError={ onError }
 			style={ style }
 		>
 			{ children }
@@ -301,8 +294,6 @@ function CoverEdit( {
 	attributes,
 	clientId,
 	isSelected,
-	noticeUI,
-	noticeOperations,
 	overlayColor,
 	setAttributes,
 	setOverlayColor,
@@ -328,6 +319,7 @@ function CoverEdit( {
 	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
 		blockEditorStore
 	);
+	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		gradientClass,
 		gradientValue,
@@ -382,6 +374,12 @@ function CoverEdit( {
 		} );
 	};
 
+	const onUploadError = ( message ) => {
+		createErrorNotice( Array.isArray( message ) ? message[ 2 ] : message, {
+			type: 'snackbar',
+		} );
+	};
+
 	const isDarkElement = useRef();
 	const isCoverDark = useCoverIsDark(
 		url,
@@ -640,9 +638,8 @@ function CoverEdit( {
 					) }
 				>
 					<CoverPlaceholder
-						noticeUI={ noticeUI }
 						onSelectMedia={ onSelectMedia }
-						noticeOperations={ noticeOperations }
+						onError={ onUploadError }
 						style={ {
 							minHeight: minHeightWithUnit || undefined,
 						} }
@@ -763,9 +760,8 @@ function CoverEdit( {
 				{ isUploadingMedia && <Spinner /> }
 				<CoverPlaceholder
 					disableMediaButtons
-					noticeUI={ noticeUI }
 					onSelectMedia={ onSelectMedia }
-					noticeOperations={ noticeOperations }
+					onError={ onUploadError }
 				/>
 				<div { ...innerBlocksProps } />
 			</div>
@@ -775,5 +771,4 @@ function CoverEdit( {
 
 export default compose( [
 	withColors( { overlayColor: 'background-color' } ),
-	withNotices,
 ] )( CoverEdit );

package/src/editor.scss

@@ -1,5 +1,6 @@
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
+@import "./avatar/editor.scss";
 @import "./block/editor.scss";
 @import "./button/editor.scss";
 @import "./buttons/editor.scss";

package/src/embed/variations.js

@@ -344,9 +344,9 @@ const variations = [
 	},
 	{
 		name: 'wolfram-cloud',
-		title: 'Wolfram Cloud',
+		title: 'Wolfram',
 		icon: embedWolframIcon,
-		description: __( 'Embed Wolfram Cloud notebook content.' ),
+		description: __( 'Embed Wolfram notebook content.' ),
 		patterns: [ /^https?:\/\/(www\.)?wolframcloud\.com\/obj\/.+/i ],
 		attributes: { providerNameSlug: 'wolfram-cloud', responsive: true },
 	},

package/src/gallery/block.json

@@ -106,7 +106,23 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"html": false,
+		"units": [ "px", "em", "rem", "vh", "vw" ],
+		"spacing": {
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"allowEditing": false,
+			"default": {
+				"type": "flex"
+			}
+		}
 	},
 	"editorStyle": "wp-block-gallery-editor",
 	"style": "wp-block-gallery"

package/src/gallery/deprecated.scss

@@ -1,7 +1,7 @@
 // Deprecated gallery styles pre refactoring to use nested image blocks.
 // https://github.com/WordPress/gutenberg/pull/25940.
-.wp-block-gallery,
-.blocks-gallery-grid {
+.wp-block-gallery:not(.has-nested-images),
+.blocks-gallery-grid:not(.has-nested-images) {
 	display: flex;
 	flex-wrap: wrap;
 	list-style-type: none;

package/src/gallery/edit.js

@@ -54,6 +54,7 @@ import useImageSizes from './use-image-sizes';
 import useShortCodeTransform from './use-short-code-transform';
 import useGetNewImages from './use-get-new-images';
 import useGetMedia from './use-get-media';
+import GapStyles from './gap-styles';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
@@ -99,7 +100,8 @@ function GalleryEdit( props ) {
 		__unstableMarkNextChangeAsNotPersistent,
 		replaceInnerBlocks,
 		updateBlockAttributes,
-		multiSelect,
+		selectBlock,
+		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
@@ -155,13 +157,8 @@ function GalleryEdit( props ) {
 				align: undefined,
 			} );
 		} );
-
-		// If new blocks added select the first of these so they scroll into view.
-		if ( newImages?.length ) {
-			multiSelect(
-				newImages[ 0 ].clientId,
-				newImages[ newImages?.length - 1 ].clientId
-			);
+		if ( newImages?.length > 0 ) {
+			clearSelectedBlock();
 		}
 	}, [ newImages ] );
 
@@ -296,6 +293,10 @@ function GalleryEdit( props ) {
 			} );
 		} );
 
+		if ( newBlocks?.length > 0 ) {
+			selectBlock( newBlocks[ 0 ].clientId );
+		}
+
 		replaceInnerBlocks(
 			clientId,
 			concat( existingImageBlocks, newBlocks ).sort(
@@ -548,6 +549,12 @@ function GalleryEdit( props ) {
 				/>
 			</BlockControls>
 			{ noticeUI }
+			{ Platform.isWeb && (
+				<GapStyles
+					blockGap={ attributes.style?.spacing?.blockGap }
+					clientId={ clientId }
+				/>
+			) }
 			<Gallery
 				{ ...props }
 				images={ images }

package/src/gallery/editor.scss

@@ -4,7 +4,6 @@ figure.wp-block-gallery {
 	// See https://github.com/WordPress/gutenberg/pull/10358
 
 	display: block;
-	margin: 0;
 	&.has-nested-images {
 		.components-drop-zone {
 			display: none;

package/src/gallery/gallery.js

@@ -69,13 +69,14 @@ export const Gallery = ( props ) => {
 			) }
 		>
 			{ children }
-
-			<View
-				className="blocks-gallery-media-placeholder-wrapper"
-				onClick={ removeCaptionFocus }
-			>
-				{ mediaPlaceholder }
-			</View>
+			{ isSelected && ! children && (
+				<View
+					className="blocks-gallery-media-placeholder-wrapper"
+					onClick={ removeCaptionFocus }
+				>
+					{ mediaPlaceholder }
+				</View>
+			) }
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				captionFocused={ captionFocused }

package/src/gallery/gap-styles.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockList } from '@wordpress/block-editor';
+import { useContext, createPortal } from '@wordpress/element';
+
+export default function GapStyles( { blockGap, clientId } ) {
+	const styleElement = useContext( BlockList.__unstableElementContext );
+
+	const gap = blockGap
+		? `#block-${ clientId } { --wp--style--unstable-gallery-gap: ${ blockGap } }`
+		: `#block-${ clientId } { --wp--style--unstable-gallery-gap: var( --wp--style--block-gap, 0.5em ) }`;
+
+	const GapStyle = () => {
+		return <style>{ gap }</style>;
+	};
+
+	return gap && styleElement
+		? createPortal( <GapStyle />, styleElement )
+		: null;
+}

package/src/gallery/index.php

@@ -32,12 +32,53 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
 
 add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
 
+/**
+ * Adds a style tag for the --wp--style--unstable-gallery-gap var.
+ *
+ * The Gallery block needs to recalculate Image block width based on
+ * the current gap setting in order to maintain the number of flex columns
+ * so a css var is added to allow this.
+ *
+ * @param array  $attributes Attributes of the block being rendered.
+ * @param string $content Content of the block being rendered.
+ * @return string The content of the block being rendered.
+ */
+function block_core_gallery_render( $attributes, $content ) {
+	$gap = _wp_array_get( $attributes, array( 'style', 'spacing', 'blockGap' ) );
+	// 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;
+	$id        = uniqid();
+	$class     = 'wp-block-gallery-' . $id;
+	$content   = preg_replace(
+		'/' . preg_quote( 'class="', '/' ) . '/',
+		'class="' . $class . ' ',
+		$content,
+		1
+	);
+	$gap_value = $gap ? $gap : 'var( --wp--style--block-gap, 0.5em )';
+	$style     = '.' . $class . '{ --wp--style--unstable-gallery-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>';
+		}
+	);
+	return $content;
+}
 /**
  * Registers the `core/gallery` block on server.
  */
 function register_block_core_gallery() {
 	register_block_type_from_metadata(
-		__DIR__ . '/gallery'
+		__DIR__ . '/gallery',
+		array(
+			'render_callback' => 'block_core_gallery_render',
+		)
 	);
 }