@wordpress/block-library 7.8.0 → 7.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.8.0",
+	"version": "7.11.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,32 +34,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.11.0",
-		"@wordpress/api-fetch": "^6.8.0",
-		"@wordpress/autop": "^3.11.0",
-		"@wordpress/blob": "^3.11.0",
-		"@wordpress/block-editor": "^9.3.0",
-		"@wordpress/blocks": "^11.10.0",
-		"@wordpress/components": "^19.13.0",
-		"@wordpress/compose": "^5.9.0",
-		"@wordpress/core-data": "^4.9.0",
-		"@wordpress/data": "^6.11.0",
-		"@wordpress/date": "^4.11.0",
-		"@wordpress/deprecated": "^3.11.0",
-		"@wordpress/dom": "^3.11.0",
-		"@wordpress/element": "^4.9.0",
-		"@wordpress/hooks": "^3.11.0",
-		"@wordpress/html-entities": "^3.11.0",
-		"@wordpress/i18n": "^4.11.0",
-		"@wordpress/icons": "^9.2.0",
-		"@wordpress/keycodes": "^3.11.0",
-		"@wordpress/notices": "^3.11.0",
-		"@wordpress/primitives": "^3.9.0",
-		"@wordpress/reusable-blocks": "^3.9.0",
-		"@wordpress/rich-text": "^5.9.0",
-		"@wordpress/server-side-render": "^3.9.0",
-		"@wordpress/url": "^3.12.0",
-		"@wordpress/viewport": "^4.9.0",
+		"@wordpress/a11y": "^3.14.0",
+		"@wordpress/api-fetch": "^6.11.0",
+		"@wordpress/autop": "^3.14.0",
+		"@wordpress/blob": "^3.14.0",
+		"@wordpress/block-editor": "^9.6.0",
+		"@wordpress/blocks": "^11.13.0",
+		"@wordpress/components": "^19.16.0",
+		"@wordpress/compose": "^5.12.0",
+		"@wordpress/core-data": "^4.12.0",
+		"@wordpress/data": "^6.14.0",
+		"@wordpress/date": "^4.14.0",
+		"@wordpress/deprecated": "^3.14.0",
+		"@wordpress/dom": "^3.14.0",
+		"@wordpress/element": "^4.12.0",
+		"@wordpress/hooks": "^3.14.0",
+		"@wordpress/html-entities": "^3.14.0",
+		"@wordpress/i18n": "^4.14.0",
+		"@wordpress/icons": "^9.5.0",
+		"@wordpress/keycodes": "^3.14.0",
+		"@wordpress/notices": "^3.14.0",
+		"@wordpress/primitives": "^3.12.0",
+		"@wordpress/reusable-blocks": "^3.12.0",
+		"@wordpress/rich-text": "^5.12.0",
+		"@wordpress/server-side-render": "^3.12.0",
+		"@wordpress/url": "^3.15.0",
+		"@wordpress/viewport": "^4.12.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -76,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "0315dbc240cb2aa146d7c1bafd251f004b88300e"
 }

package/src/audio/edit.js

@@ -24,6 +24,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
@@ -200,6 +201,9 @@ function AudioEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Audio caption text' ) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }

package/src/audio/save.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { autoplay, caption, loop, preload, src } = attributes;
@@ -17,7 +21,13 @@ export default function save( { attributes } ) {
 					preload={ preload }
 				/>
 				{ ! RichText.isEmpty( caption ) && (
-					<RichText.Content tagName="figcaption" value={ caption } />
+					<RichText.Content
+						tagName="figcaption"
+						value={ caption }
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+					/>
 				) }
 			</figure>
 		)

package/src/avatar/hooks.js

@@ -76,15 +76,12 @@ export function useUserAvatar( { userId, postId, postType } ) {
 		},
 		[ postType, postId, userId ]
 	);
-
-	const avatarUrls =
-		authorDetails && authorDetails?.avatar_urls
-			? Object.values( authorDetails.avatar_urls )
-			: null;
-	const sizes =
-		authorDetails && authorDetails?.avatar_urls
-			? Object.keys( authorDetails.avatar_urls )
-			: null;
+	const avatarUrls = authorDetails?.avatar_urls
+		? Object.values( authorDetails.avatar_urls )
+		: null;
+	const sizes = authorDetails?.avatar_urls
+		? Object.keys( authorDetails.avatar_urls )
+		: null;
 	const { minSize, maxSize } = getAvatarSizes( sizes );
 	const defaultAvatar = useDefaultAvatar();
 	return {

package/src/button/block.json

@@ -89,30 +89,7 @@
 				"radius": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button__link",
-		"__experimentalStyle": {
-			"border": {
-				"//": "100% causes an oval, but any explicit but really high value retains the pill shape.",
-				"radius": "9999px"
-			},
-			"color": {
-				"text": "#fff",
-				"background": "#32373c"
-			},
-			"typography": {
-				"fontSize": "1.125em",
-				"textDecoration": "none"
-			},
-			"spacing": {
-				"padding": {
-					"//": "The extra 2px are added to size solids the same as the outline versions.",
-					"top": "calc(0.667em + 2px)",
-					"right": "calc(1.333em + 2px)",
-					"bottom": "calc(0.667em + 2px)",
-					"left": "calc(1.333em + 2px)"
-				}
-			}
-		}
+		"__experimentalSelector": ".wp-block-button__link"
 	},
 	"styles": [
 		{ "name": "fill", "label": "Fill", "isDefault": true },

package/src/button/edit.js

@@ -25,7 +25,7 @@ import {
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalLinkControl as LinkControl,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -172,7 +172,7 @@ function ButtonEdit( props ) {
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
 						},
-						__experimentalElementButtonClassName
+						__experimentalGetElementClassName( 'button' )
 					) }
 					style={ {
 						...borderProps.style,
@@ -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/save.js

@@ -12,7 +12,7 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
@@ -35,7 +35,7 @@ export default function save( { attributes, className } ) {
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,
 		},
-		__experimentalElementButtonClassName
+		__experimentalGetElementClassName( 'button' )
 	);
 	const buttonStyle = {
 		...borderProps.style,

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;
 
@@ -29,6 +28,19 @@ $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;
+
+	// The extra 2px are added to size solids the same as the outline versions.
+	padding: calc(0.667em + 2px) calc(1.333em + 2px);
+}
+
 // Increased specificity needed to override margins.
 .wp-block-buttons > .wp-block-button {
 	&.has-custom-width {

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/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, delay } 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,

package/src/columns/variations.js

@@ -57,7 +57,7 @@ const variations = [
 	},
 	{
 		name: 'two-columns-one-third-two-thirds',
-		title: __( '30 / 70' ),
+		title: __( '33 / 66' ),
 		description: __( 'Two columns; one-third, two-thirds split' ),
 		icon: (
 			<SVG
@@ -81,7 +81,7 @@ const variations = [
 	},
 	{
 		name: 'two-columns-two-thirds-one-third',
-		title: __( '70 / 30' ),
+		title: __( '66 / 33' ),
 		description: __( 'Two columns; two-thirds, one-third split' ),
 		icon: (
 			<SVG

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

@@ -18,10 +18,6 @@
 		},
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"usesContext": [ "commentId" ],

package/src/comment-author-name/edit.js

@@ -41,7 +41,7 @@ export default function Edit( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
-	const displayName = useSelect(
+	let displayName = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( coreStore );
 
@@ -92,15 +92,7 @@ export default function Edit( {
 	);
 
 	if ( ! commentId || ! displayName ) {
-		return (
-			<>
-				{ inspectorControls }
-				{ blockControls }
-				<div { ...blockProps }>
-					{ _x( 'Comment Author', 'block title' ) }
-				</div>
-			</>
-		);
+		displayName = _x( 'Comment Author', 'block title' );
 	}
 
 	const displayAuthor = isLink ? (
@@ -111,9 +103,8 @@ export default function Edit( {
 			{ displayName }
 		</a>
 	) : (
-		{ displayName }
+		displayName
 	);
-
 	return (
 		<>
 			{ inspectorControls }

package/src/comment-date/block.json

@@ -14,10 +14,6 @@
 		"isLink": {
 			"type": "boolean",
 			"default": true
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"usesContext": [ "commentId" ],

package/src/comment-date/edit.js

@@ -33,7 +33,7 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps();
-	const [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
+	let [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
 	const [ siteFormat = getDateSettings().formats.date ] = useEntityProp(
 		'root',
 		'site',
@@ -60,21 +60,17 @@ export default function Edit( {
 	);
 
 	if ( ! commentId || ! date ) {
-		return (
-			<>
-				{ inspectorControls }
-				<div { ...blockProps }>
-					<time>{ _x( 'Comment Date', 'block title' ) }</time>
-				</div>
-			</>
-		);
+		date = _x( 'Comment Date', 'block title' );
 	}
 
-	let commentDate = (
-		<time dateTime={ dateI18n( 'c', date ) }>
-			{ dateI18n( format || siteFormat, date ) }
-		</time>
-	);
+	let commentDate =
+		date instanceof Date ? (
+			<time dateTime={ dateI18n( 'c', date ) }>
+				{ dateI18n( format || siteFormat, date ) }
+			</time>
+		) : (
+			<time>{ date }</time>
+		);
 
 	if ( isLink ) {
 		commentDate = (

package/src/comment-date/index.php

@@ -24,9 +24,6 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 	}
 
 	$classes = '';
-	if ( isset( $attributes['fontSize'] ) ) {
-		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
-	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$formatted_date     = get_comment_date(

package/src/comment-edit-link/block.json

@@ -15,10 +15,6 @@
 		},
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"supports": {

package/src/comment-reply-link/block.json

@@ -11,10 +11,6 @@
 	"attributes": {
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"supports": {

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 } />
+		</>
+	);
+}