@wordpress/block-library 7.9.0 → 7.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.9.0",
+	"version": "7.12.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,39 +34,38 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.12.0",
-		"@wordpress/api-fetch": "^6.9.0",
-		"@wordpress/autop": "^3.12.0",
-		"@wordpress/blob": "^3.12.0",
-		"@wordpress/block-editor": "^9.4.0",
-		"@wordpress/blocks": "^11.11.0",
-		"@wordpress/components": "^19.14.0",
-		"@wordpress/compose": "^5.10.0",
-		"@wordpress/core-data": "^4.10.0",
-		"@wordpress/data": "^6.12.0",
-		"@wordpress/date": "^4.12.0",
-		"@wordpress/deprecated": "^3.12.0",
-		"@wordpress/dom": "^3.12.0",
-		"@wordpress/element": "^4.10.0",
-		"@wordpress/hooks": "^3.12.0",
-		"@wordpress/html-entities": "^3.12.0",
-		"@wordpress/i18n": "^4.12.0",
-		"@wordpress/icons": "^9.3.0",
-		"@wordpress/keycodes": "^3.12.0",
-		"@wordpress/notices": "^3.12.0",
-		"@wordpress/primitives": "^3.10.0",
-		"@wordpress/reusable-blocks": "^3.10.0",
-		"@wordpress/rich-text": "^5.10.0",
-		"@wordpress/server-side-render": "^3.10.0",
-		"@wordpress/url": "^3.13.0",
-		"@wordpress/viewport": "^4.10.0",
+		"@wordpress/a11y": "^3.15.0",
+		"@wordpress/api-fetch": "^6.12.0",
+		"@wordpress/autop": "^3.15.0",
+		"@wordpress/blob": "^3.15.0",
+		"@wordpress/block-editor": "^9.7.0",
+		"@wordpress/blocks": "^11.14.0",
+		"@wordpress/components": "^19.17.0",
+		"@wordpress/compose": "^5.13.0",
+		"@wordpress/core-data": "^4.13.0",
+		"@wordpress/data": "^6.15.0",
+		"@wordpress/date": "^4.15.0",
+		"@wordpress/deprecated": "^3.15.0",
+		"@wordpress/dom": "^3.15.0",
+		"@wordpress/element": "^4.13.0",
+		"@wordpress/hooks": "^3.15.0",
+		"@wordpress/html-entities": "^3.15.0",
+		"@wordpress/i18n": "^4.15.0",
+		"@wordpress/icons": "^9.6.0",
+		"@wordpress/keycodes": "^3.15.0",
+		"@wordpress/notices": "^3.15.0",
+		"@wordpress/primitives": "^3.13.0",
+		"@wordpress/reusable-blocks": "^3.13.0",
+		"@wordpress/rich-text": "^5.13.0",
+		"@wordpress/server-side-render": "^3.13.0",
+		"@wordpress/url": "^3.16.0",
+		"@wordpress/viewport": "^4.13.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.10",
-		"moment": "^2.22.1",
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
@@ -76,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
+	"gitHead": "08358f53b627a15148c3a3e433cdf58cf8714aa4"
 }

package/src/archives/block.json

@@ -11,6 +11,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
+		},
 		"showPostCounts": {
 			"type": "boolean",
 			"default": false

package/src/archives/edit.js

@@ -12,7 +12,7 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 
 export default function ArchivesEdit( { attributes, setAttributes } ) {
-	const { showPostCounts, displayAsDropdown, type } = attributes;
+	const { showLabel, showPostCounts, displayAsDropdown, type } = attributes;
 
 	return (
 		<>
@@ -27,6 +27,17 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 							} )
 						}
 					/>
+					{ displayAsDropdown && (
+						<ToggleControl
+							label={ __( 'Show label' ) }
+							checked={ showLabel }
+							onChange={ () =>
+								setAttributes( {
+									showLabel: ! showLabel,
+								} )
+							}
+						/>
+					) }
 					<ToggleControl
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }

package/src/archives/index.php

@@ -62,9 +62,11 @@ function render_block_core_archives( $attributes ) {
 				break;
 		}
 
-		$block_content = '<label for="' . esc_attr( $dropdown_id ) . '">' . esc_html( $title ) . '</label>
-	<select id="' . esc_attr( $dropdown_id ) . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
-	<option value="">' . esc_html( $label ) . '</option>' . $archives . '</select>';
+		$show_label = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+
+		$block_content = '<label for="' . $dropdown_id . '" class="wp-block-archives__label' . $show_label . '">' . esc_html( $title ) . '</label>
+		<select id="' . $dropdown_id . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
+		<option value="">' . esc_html( $label ) . '</option>' . $archives . '</select>';
 
 		return sprintf(
 			'<div %1$s>%2$s</div>',

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

@@ -97,7 +97,14 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
@@ -277,7 +284,14 @@ exports[`Audio block renders audio file without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}

package/src/block/edit.js

@@ -18,7 +18,8 @@ import {
 import { __ } from '@wordpress/i18n';
 import {
 	useInnerBlocksProps,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	InnerBlocks,
 	BlockControls,
@@ -31,8 +32,7 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { ungroup } from '@wordpress/icons';
 
 export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( ref );
+	const hasAlreadyRendered = useHasRecursion( ref );
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
@@ -110,7 +110,7 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ ref }>
 			{ canRemove && (
 				<BlockControls>
 					<ToolbarGroup>

package/src/block/edit.native.js

@@ -27,7 +27,8 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	InnerBlocks,
 	Warning,
 	store as blockEditorStore,
@@ -48,8 +49,7 @@ export default function ReusableBlockEdit( {
 	clientId,
 	isSelected,
 } ) {
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( ref );
+	const hasAlreadyRendered = useHasRecursion( ref );
 
 	const [ showHelp, setShowHelp ] = useState( false );
 	const infoTextStyle = usePreferredColorSchemeStyle(
@@ -214,7 +214,7 @@ export default function ReusableBlockEdit( {
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ ref }>
 			<TouchableWithoutFeedback
 				disabled={ ! isSelected }
 				accessibilityLabel={ __( 'Help button' ) }

package/src/button/edit.js

@@ -221,6 +221,7 @@ function ButtonEdit( props ) {
 					anchorRef={ ref?.current }
 					focusOnMount={ isEditingURL ? 'firstElement' : false }
 					__unstableSlotName={ '__unstable-block-tools-after' }
+					__unstableShift
 				>
 					<LinkControl
 						className="wp-block-navigation-link__inline-link-input"

package/src/button/style.scss

@@ -8,7 +8,6 @@ $blocks-block__margin: 0.5em;
 	cursor: pointer;
 	display: inline-block;
 	text-align: center;
-	text-decoration: none;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
 	box-sizing: border-box;
 
@@ -32,6 +31,9 @@ $blocks-block__margin: 0.5em;
 // These rules are set to zero specificity to keep the default styles for buttons.
 // They are needed for backwards compatibility.
 :where(.wp-block-button__link) {
+	// This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+	text-decoration: none;
+
 	// 100% causes an oval, but any explicit but really high value retains the pill shape.
 	border-radius: 9999px;
 

package/src/buttons/edit.js

@@ -53,11 +53,7 @@ function ButtonsEdit( { attributes: { layout = {} } } ) {
 		templateInsertUpdatesSelection: true,
 	} );
 
-	return (
-		<>
-			<div { ...innerBlocksProps } />
-		</>
-	);
+	return <div { ...innerBlocksProps } />;
 }
 
 export default ButtonsEdit;

package/src/calendar/edit.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import moment from 'moment';
 import memoize from 'memize';
 
 /**
@@ -15,14 +14,22 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Returns the year and month of a specified date.
+ *
+ * @see `WP_REST_Posts_Controller::prepare_date_response()`.
+ *
+ * @param {string} date Date in `ISO8601/RFC3339` format.
+ * @return {Object} Year and date of the specified date.
+ */
 const getYearMonth = memoize( ( date ) => {
 	if ( ! date ) {
 		return {};
 	}
-	const momentDate = moment( date );
+	const dateObj = new Date( date );
 	return {
-		year: momentDate.year(),
-		month: momentDate.month() + 1,
+		year: dateObj.getFullYear(),
+		month: dateObj.getMonth() + 1,
 	};
 } );
 

package/src/columns/edit.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, Dimensions } from 'react-native';
-import { times, map, compact, delay } from 'lodash';
+import { times, map } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -474,7 +474,7 @@ const ColumnsEdit = ( props ) => {
 
 			return {
 				columnCount: getBlockCount( clientId ),
-				isDefaultColumns: ! compact( isContentEmpty ).length,
+				isDefaultColumns: ! isContentEmpty.filter( Boolean ).length,
 				innerWidths: innerColumnsWidths,
 				hasParents: !! parents.length,
 				parentBlockAlignment: getBlockAttributes( parents[ 0 ] )?.align,
@@ -496,7 +496,9 @@ const ColumnsEdit = ( props ) => {
 
 	useEffect( () => {
 		if ( isSelected && isDefaultColumns ) {
-			delay( () => setIsVisible( true ), 100 );
+			const revealTimeout = setTimeout( () => setIsVisible( true ), 100 );
+
+			return () => clearTimeout( revealTimeout );
 		}
 	}, [] );
 

package/src/comment-template/block.json

@@ -4,7 +4,7 @@
 	"name": "core/comment-template",
 	"title": "Comment Template",
 	"category": "design",
-	"parent": [ "core/comments-query-loop" ],
+	"parent": [ "core/comments" ],
 	"description": "Contains the block elements used to display a comment, like the title, date, author, avatar and more.",
 	"textdomain": "default",
 	"usesContext": [ "postId" ],

package/src/comment-template/style.scss

@@ -14,4 +14,18 @@
 		list-style: none;
 		padding-left: 2rem;
 	}
+
+	&.alignleft {
+		float: left;
+	}
+
+	&.aligncenter {
+		margin-left: auto;
+		margin-right: auto;
+		width: fit-content;
+	}
+
+	&.alignright {
+		float: right;
+	}
 }

package/src/comments/block.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "core/comments-query-loop",
+	"name": "core/comments",
 	"title": "Comments",
 	"category": "theme",
 	"description": "An advanced block that allows displaying post comments using different visual configurations.",
@@ -10,6 +10,10 @@
 		"tagName": {
 			"type": "string",
 			"default": "div"
+		},
+		"legacy": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {
@@ -25,5 +29,6 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-comments-editor"
+	"editorStyle": "wp-block-comments-editor",
+	"usesContext": [ "postId", "postType" ]
 }

package/src/comments/deprecated.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+// v1: Deprecate the initial version of the block which was called "Comments
+// Query Loop" instead of "Comments".
+const v1 = {
+	attributes: {
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+	},
+	apiVersion: 2,
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+	},
+	save( { attributes: { tagName: Tag } } ) {
+		const blockProps = useBlockProps.save();
+		const { className } = blockProps;
+		const classes = className?.split( ' ' ) || [];
+
+		// The ID of the previous version of the block
+		// didn't have the `wp-block-comments` class,
+		// so we need to remove it here in order to mimic it.
+		const newClasses = classes?.filter(
+			( cls ) => cls !== 'wp-block-comments'
+		);
+		const newBlockProps = {
+			...blockProps,
+			className: newClasses.join( ' ' ),
+		};
+
+		return (
+			<Tag { ...newBlockProps }>
+				<InnerBlocks.Content />
+			</Tag>
+		);
+	},
+};
+
+export default [ v1 ];

package/src/comments/edit/comments-legacy.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentControl,
+	BlockControls,
+	Warning,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Placeholder from './placeholder';
+
+export default function CommentsLegacy( {
+	attributes,
+	setAttributes,
+	context: { postType, postId },
+} ) {
+	const { textAlign } = attributes;
+
+	const actions = [
+		<Button
+			key="convert"
+			onClick={ () => void setAttributes( { legacy: false } ) }
+			variant="primary"
+		>
+			{ __( 'Switch to editable mode' ) }
+		</Button>,
+	];
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+
+			<div { ...blockProps }>
+				<Warning actions={ actions }>
+					{ __(
+						"Comments block: You're currently using this block in legacy mode. " +
+							'The following is just a placeholder, not a real comment. ' +
+							'The final styling may differ because it also depends on the current theme. ' +
+							'For better compatibility with the Block Editor, ' +
+							'please consider switching the block to its editable mode.'
+					) }
+				</Warning>
+				<Placeholder postId={ postId } postType={ postType } />
+			</div>
+		</>
+	);
+}

package/src/comments/edit/index.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import CommentsInspectorControls from './comments-inspector-controls';
+import CommentsLegacy from './comments-legacy';
+import TEMPLATE from './template';
+
+export default function CommentsEdit( props ) {
+	const { attributes, setAttributes } = props;
+	const { tagName: TagName, legacy } = attributes;
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
+
+	if ( legacy ) {
+		return <CommentsLegacy { ...props } />;
+	}
+
+	return (
+		<>
+			<CommentsInspectorControls
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+			/>
+			<TagName { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/comments/edit/placeholder.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
+import { useDisabled } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from '../../post-comments-form/form';
+
+export default function PostCommentsPlaceholder( { postType, postId } ) {
+	let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
+	postTitle = postTitle || __( 'Post Title' );
+
+	const { avatarURL } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const disabledRef = useDisabled();
+
+	return (
+		<div
+			className="wp-block-comments__legacy-placeholder"
+			ref={ disabledRef }
+		>
+			<h3>
+				{
+					/* translators: %s: Post title. */
+					sprintf( __( 'One response to %s' ), postTitle )
+				}
+			</h3>
+
+			<div className="navigation">
+				<div className="alignleft">
+					<a href="#top">« { __( 'Older Comments' ) }</a>
+				</div>
+				<div className="alignright">
+					<a href="#top">{ __( 'Newer Comments' ) } »</a>
+				</div>
+			</div>
+
+			<ol className="commentlist">
+				<li className="comment even thread-even depth-1">
+					<article className="comment-body">
+						<footer className="comment-meta">
+							<div className="comment-author vcard">
+								<img
+									alt="Commenter Avatar"
+									src={ avatarURL }
+									className="avatar avatar-32 photo"
+									height="32"
+									width="32"
+									loading="lazy"
+								/>
+								<b className="fn">
+									<a href="#top" className="url">
+										{ __( 'A WordPress Commenter' ) }
+									</a>
+								</b>{ ' ' }
+								<span className="says">{ __( 'says' ) }:</span>
+							</div>
+
+							<div className="comment-metadata">
+								<a href="#top">
+									<time dateTime="2000-01-01T00:00:00+00:00">
+										{ __( 'January 1, 2000 at 00:00 am' ) }
+									</time>
+								</a>{ ' ' }
+								<span className="edit-link">
+									<a
+										className="comment-edit-link"
+										href="#top"
+									>
+										{ __( 'Edit' ) }
+									</a>
+								</span>
+							</div>
+						</footer>
+
+						<div className="comment-content">
+							<p>
+								{ __( 'Hi, this is a comment.' ) }
+								<br />
+								{ __(
+									'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
+								) }
+								<br />
+								{ __( 'Commenter avatars come from' ) }{ ' ' }
+								<a href="https://gravatar.com/">Gravatar</a>.
+							</p>
+						</div>
+
+						<div className="reply">
+							<a
+								className="comment-reply-link"
+								href="#top"
+								aria-label="Reply to A WordPress Commenter"
+							>
+								{ __( 'Reply' ) }
+							</a>
+						</div>
+					</article>
+				</li>
+			</ol>
+
+			<div className="navigation">
+				<div className="alignleft">
+					<a href="#top">« { __( 'Older Comments' ) }</a>
+				</div>
+				<div className="alignright">
+					<a href="#top">{ __( 'Newer Comments' ) } »</a>
+				</div>
+			</div>
+
+			<CommentsForm postId={ postId } postType={ postType } />
+		</div>
+	);
+}