@wordpress/block-library 7.4.0 → 7.7.0

package/src/audio/edit.js

@@ -29,7 +29,7 @@ import { useEffect } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { audio as icon } from '@wordpress/icons';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -62,13 +62,8 @@ function AudioEdit( {
 			if ( file ) {
 				mediaUpload( {
 					filesList: [ file ],
-					onFileChange: ( [ { id: mediaId, url } ] ) => {
-						setAttributes( { id: mediaId, src: url } );
-					},
-					onError: ( e ) => {
-						setAttributes( { src: undefined, id: undefined } );
-						noticeOperations.createErrorNotice( e );
-					},
+					onFileChange: ( [ media ] ) => onSelectAudio( media ),
+					onError: ( e ) => onUploadError( e ),
 					allowedTypes: ALLOWED_MEDIA_TYPES,
 				} );
 			}
@@ -213,7 +208,9 @@ function AudioEdit( {
 						}
 						inlineToolbar
 						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
 						}
 					/>
 				) }

package/src/avatar/block.json

@@ -22,7 +22,6 @@
 			"type": "string",
 			"default": "_self"
 		}
-
 	},
 	"usesContext": [ "postType", "postId", "commentId" ],
 	"supports": {

package/src/avatar/index.php

@@ -105,11 +105,11 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
 	}
 	$comment = get_comment( $block->context['commentId'] );
-	/* translators: %s is the Comment Author name */
-	$alt = sprintf( __( '%s Avatar' ), $comment->comment_author );
 	if ( ! $comment ) {
 		return '';
 	}
+	/* translators: %s is the Comment Author name */
+	$alt          = sprintf( __( '%s Avatar' ), $comment->comment_author );
 	$avatar_block = get_avatar(
 		$comment,
 		$size,

package/src/block/edit.js

@@ -5,7 +5,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useEntityBlockEditor,
 	useEntityProp,
-	__experimentalUseEntityRecord as useEntityRecord,
+	useEntityRecord,
 } from '@wordpress/core-data';
 import {
 	Placeholder,
@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	useInnerBlocksProps,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
-	__experimentalBlockContentOverlay as BlockContentOverlay,
+	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	InnerBlocks,
 	BlockControls,
 	InspectorControls,
@@ -62,20 +62,25 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 		ref
 	);
 
-	const blockProps = useBlockProps();
-
-	const innerBlocksProps = useInnerBlocksProps(
-		{},
+	const hasBlockOverlay = useBlockOverlayActive( clientId );
+	const blockProps = useBlockProps(
 		{
-			value: blocks,
-			onInput,
-			onChange,
-			renderAppender: blocks?.length
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
-		}
+			className: hasBlockOverlay
+				? 'block-library-block__reusable-block-container block-editor-block-content-overlay'
+				: 'block-library-block__reusable-block-container',
+		},
+		{ __unstableIsDisabled: hasBlockOverlay }
 	);
 
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		onInput,
+		onChange,
+		renderAppender: blocks?.length
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
 	if ( hasAlreadyRendered ) {
 		return (
 			<div { ...blockProps }>
@@ -108,36 +113,28 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 
 	return (
 		<RecursionProvider>
-			<div { ...blockProps }>
-				{ canRemove && (
-					<BlockControls>
-						<ToolbarGroup>
-							<ToolbarButton
-								onClick={ () =>
-									convertBlockToStatic( clientId )
-								}
-								label={ __( 'Convert to regular blocks' ) }
-								icon={ ungroup }
-								showTooltip
-							/>
-						</ToolbarGroup>
-					</BlockControls>
-				) }
-				<InspectorControls>
-					<PanelBody>
-						<TextControl
-							label={ __( 'Name' ) }
-							value={ title }
-							onChange={ setTitle }
+			{ canRemove && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ () => convertBlockToStatic( clientId ) }
+							label={ __( 'Convert to regular blocks' ) }
+							icon={ ungroup }
+							showTooltip
 						/>
-					</PanelBody>
-				</InspectorControls>
-				<BlockContentOverlay
-					clientId={ clientId }
-					wrapperProps={ innerBlocksProps }
-					className="block-library-block__reusable-block-container"
-				/>
-			</div>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+			<InspectorControls>
+				<PanelBody>
+					<TextControl
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...innerBlocksProps } />
 		</RecursionProvider>
 	);
 }

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

@@ -146,7 +146,7 @@ describe( 'Reusable block', () => {
 	} );
 
 	// Skipped until `pointerEvents: 'none'` no longer erroneously prevents
-	// triggering `onLayout*` on the element: https://git.io/JSHZt.
+	// triggering `onLayout*` on the element: https://github.com/callstack/react-native-testing-library/issues/897.
 	it.skip( 'renders block content', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const id = 4;

package/src/button/block.json

@@ -69,6 +69,7 @@
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true,
+			"__experimentalTextTransform": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/button/deprecated.js

@@ -119,6 +119,150 @@ const blockAttributes = {
 	},
 };
 
+const v11 = {
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'title',
+		},
+		text: {
+			type: 'string',
+			source: 'html',
+			selector: 'a',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'target',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'rel',
+		},
+		placeholder: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		alignWide: false,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		typography: {
+			fontSize: true,
+			__experimentalFontFamily: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		reusable: false,
+		spacing: {
+			__experimentalSkipSerialization: true,
+			padding: [ 'horizontal', 'vertical' ],
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-button__link',
+	},
+	save( { attributes, className } ) {
+		const {
+			fontSize,
+			linkTarget,
+			rel,
+			style,
+			text,
+			title,
+			url,
+			width,
+		} = attributes;
+
+		if ( ! text ) {
+			return null;
+		}
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const buttonClasses = classnames(
+			'wp-block-button__link',
+			colorProps.className,
+			borderProps.className,
+			{
+				// For backwards compatibility add style that isn't provided via
+				// block support.
+				'no-border-radius': style?.border?.radius === 0,
+			}
+		);
+		const buttonStyle = {
+			...borderProps.style,
+			...colorProps.style,
+			...spacingProps.style,
+		};
+
+		// The use of a `title` attribute here is soft-deprecated, but still applied
+		// if it had already been assigned, for the sake of backward-compatibility.
+		// A title will no longer be assigned for new or updated button block links.
+
+		const wrapperClasses = classnames( className, {
+			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+		} );
+
+		return (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<RichText.Content
+					tagName="a"
+					className={ buttonClasses }
+					href={ url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+					target={ linkTarget }
+					rel={ rel }
+				/>
+			</div>
+		);
+	},
+};
+
 const v10 = {
 	attributes: {
 		url: {
@@ -258,6 +402,7 @@ const v10 = {
 };
 
 const deprecated = [
+	v11,
 	v10,
 	{
 		supports: {

package/src/button/edit.js

@@ -25,6 +25,7 @@ import {
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalLinkControl as LinkControl,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -176,7 +177,8 @@ function ButtonEdit( props ) {
 							// For backwards compatibility add style that isn't
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
-						}
+						},
+						__experimentalElementButtonClassName
 					) }
 					style={ {
 						...borderProps.style,

package/src/button/edit.native.js

@@ -134,10 +134,13 @@ function ButtonEdit( props ) {
 	useEffect( () => {
 		// Blur `RichText` on Android when link settings sheet or button settings sheet is opened,
 		// to avoid flashing caret after closing one of them
-		if ( editorSidebarOpened || isLinkSheetVisible ) {
-			if ( Platform.OS === 'android' && richTextRef?.current ) {
-				richTextRef.current.blur();
+		const richText = richTextRef?.current;
+		if ( Platform.OS === 'android' && richText ) {
+			if ( editorSidebarOpened || isLinkSheetVisible ) {
+				richText.blur();
 				onToggleButtonFocus( false );
+			} else {
+				onToggleButtonFocus( true );
 			}
 		}
 	}, [ editorSidebarOpened, isLinkSheetVisible ] );

package/src/button/save.js

@@ -12,6 +12,7 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
@@ -41,7 +42,8 @@ export default function save( { attributes, className } ) {
 			// For backwards compatibility add style that isn't provided via
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,
-		}
+		},
+		__experimentalElementButtonClassName
 	);
 	const buttonStyle = {
 		...borderProps.style,

package/src/buttons/test/__snapshots__/edit.native.js.snap

@@ -21,7 +21,7 @@ exports[`Buttons block justify content sets Justify items right option 1`] = `
 exports[`Buttons block when a button is shown adjusts the border radius 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button {\\"style\\":{\\"border\\":{\\"radius\\":\\"6px\\"}}} -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;

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

@@ -32,7 +32,7 @@ describe( 'Buttons block', () => {
 		it( 'adjusts the border radius', async () => {
 			const initialHtml = `<!-- wp:buttons -->
 			<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
-			<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:5px" >Hello</a></div>
+			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px" >Hello</a></div>
 			<!-- /wp:button --></div>
 			<!-- /wp:buttons -->`;
 			const { getByA11yLabel } = await initializeEditor( {

package/src/categories/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/categories",
-	"title": "Categories",
+	"title": "Categories List",
 	"category": "widgets",
 	"description": "Display a list of all categories.",
 	"textdomain": "default",

package/src/categories/edit.js

@@ -17,7 +17,7 @@ import { useInstanceId } from '@wordpress/compose';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
-import { __experimentalUseEntityRecords as useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 
 export default function CategoriesEdit( {
 	attributes: {

package/src/columns/block.json

@@ -28,7 +28,9 @@
 			}
 		},
 		"spacing": {
-			"blockGap": true,
+			"blockGap": {
+				"__experimentalDefault": "2em"
+			},
 			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"__experimentalDefaultControls": {

package/src/comment-author-avatar/block.json

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": "fse",
 	"name": "core/comment-author-avatar",
 	"title": "Comment Author Avatar (deprecated)",
 	"category": "theme",

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

@@ -18,17 +18,16 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
 		return '';
 	}
 
-	$comment = get_comment( $block->context['commentId'] );
+	$comment            = get_comment( $block->context['commentId'] );
+	$commenter          = wp_get_current_commenter();
+	$show_pending_links = isset( $commenter['comment_author'] ) && $commenter['comment_author'];
 	if ( empty( $comment ) ) {
 		return '';
 	}
 
 	$classes = '';
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
-	}
-	if ( isset( $attributes['fontSize'] ) ) {
-		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+		$classes .= 'has-text-align-' . $attributes['textAlign'];
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
@@ -38,6 +37,9 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
 	if ( ! empty( $attributes['isLink'] ) && ! empty( $attributes['linkTarget'] ) ) {
 		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1s" target="%2s" >%3s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $comment_author );
 	}
+	if ( '0' === $comment->comment_approved && ! $show_pending_links ) {
+		$comment_author = wp_kses( $comment_author, array() );
+	}
 
 	return sprintf(
 		'<div %1$s>%2$s</div>',

package/src/comment-content/index.php

@@ -18,16 +18,37 @@ function render_block_core_comment_content( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$comment = get_comment( $block->context['commentId'] );
+	$comment            = get_comment( $block->context['commentId'] );
+	$commenter          = wp_get_current_commenter();
+	$show_pending_links = isset( $commenter['comment_author'] ) && $commenter['comment_author'];
 	if ( empty( $comment ) ) {
 		return '';
 	}
 
-	$comment_text = get_comment_text( $comment );
+	$args         = array();
+	$comment_text = get_comment_text( $comment, $args );
 	if ( ! $comment_text ) {
 		return '';
 	}
 
+	/** This filter is documented in wp-includes/comment-template.php */
+	$comment_text = apply_filters( 'comment_text', $comment_text, $comment, $args );
+
+	$moderation_note = '';
+	if ( '0' === $comment->comment_approved ) {
+		$commenter = wp_get_current_commenter();
+
+		if ( $commenter['comment_author_email'] ) {
+			$moderation_note = __( 'Your comment is awaiting moderation.' );
+		} else {
+			$moderation_note = __( 'Your comment is awaiting moderation. This is a preview; your comment will be visible after it has been approved.' );
+		}
+		$moderation_note = '<p><em class="comment-awaiting-moderation">' . $moderation_note . '</em></p>';
+		if ( ! $show_pending_links ) {
+			$comment_text = wp_kses( $comment_text, array() );
+		}
+	}
+
 	$classes = '';
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= 'has-text-align-' . $attributes['textAlign'];
@@ -36,8 +57,9 @@ function render_block_core_comment_content( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
 	return sprintf(
-		'<div %1$s>%2$s</div>',
+		'<div %1$s>%2$s%3$s</div>',
 		$wrapper_attributes,
+		$moderation_note,
 		$comment_text
 	);
 }

package/src/comment-content/style.scss

@@ -0,0 +1,5 @@
+.comment-awaiting-moderation {
+	display: block;
+	font-size: 0.875em;
+	line-height: 1.5;
+}

package/src/comment-edit-link/index.php

@@ -29,10 +29,7 @@ function render_block_core_comment_edit_link( $attributes, $content, $block ) {
 
 	$classes = '';
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
-	}
-	if ( isset( $attributes['fontSize'] ) ) {
-		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+		$classes .= 'has-text-align-' . $attributes['textAlign'];
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );

package/src/comment-reply-link/index.php

@@ -53,10 +53,7 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 
 	$classes = '';
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
-	}
-	if ( isset( $attributes['fontSize'] ) ) {
-		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+		$classes .= 'has-text-align-' . $attributes['textAlign'];
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );

package/src/comment-template/edit.js

@@ -288,11 +288,7 @@ export default function CommentTemplateEdit( {
 	}
 
 	if ( ! commentTree.length ) {
-		return (
-			<p { ...blockProps } data-testid="noresults">
-				{ __( 'No results found.' ) }
-			</p>
-		);
+		return <p { ...blockProps }>{ __( 'No results found.' ) }</p>;
 	}
 
 	return (

package/src/comment-template/index.php

@@ -79,6 +79,10 @@ function render_block_core_comment_template( $attributes, $content, $block ) {
 		return '';
 	}
 
+	if ( post_password_required( $block->context['postId'] ) ) {
+		return;
+	}
+
 	$comment_query = new WP_Comment_Query(
 		build_comment_query_vars_from_block( $block )
 	);

package/src/{comments-query-loop → comments}/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-query-loop",
-	"title": "Comments Query Loop",
+	"title": "Comments",
 	"category": "theme",
 	"description": "An advanced block that allows displaying post comments using different visual configurations.",
 	"textdomain": "default",

package/src/{comments-query-loop → comments}/edit.js

@@ -65,9 +65,10 @@ const TEMPLATE = [
 		],
 	],
 	[ 'core/comments-pagination' ],
+	[ 'core/post-comments-form' ],
 ];
 
-export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
+export default function CommentsEdit( { attributes, setAttributes } ) {
 	const { tagName: TagName } = attributes;
 
 	const blockProps = useBlockProps();

package/src/{comments-query-loop → comments}/save.js

@@ -3,9 +3,7 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function CommentsQueryLoopSave( {
-	attributes: { tagName: Tag },
-} ) {
+export default function CommentsSave( { attributes: { tagName: Tag } } ) {
 	return (
 		<Tag { ...useBlockProps.save() }>
 			<InnerBlocks.Content />

package/src/comments-pagination/index.php

@@ -18,6 +18,10 @@ function render_block_core_comments_pagination( $attributes, $content ) {
 		return '';
 	}
 
+	if ( post_password_required() ) {
+		return;
+	}
+
 	return sprintf(
 		'<div %1$s>%2$s</div>',
 		get_block_wrapper_attributes(),