@wordpress/block-library 7.7.0 → 7.10.0

package/src/columns/deprecated.js

@@ -97,7 +97,8 @@ export default [
 				'has-text-color': textColor || customTextColor,
 				[ backgroundClass ]: backgroundClass,
 				[ textClass ]: textClass,
-				[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				[ `are-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
 			} );
 
 			const style = {
@@ -204,7 +205,8 @@ export default [
 			const { verticalAlignment, columns } = attributes;
 
 			const wrapperClasses = classnames( `has-${ columns }-columns`, {
-				[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				[ `are-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
 			} );
 
 			return (

package/src/columns/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { dropRight, get, times } from 'lodash';
+import { get, times } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -163,9 +163,8 @@ const ColumnsEditContainerWrapper = withDispatch(
 			const { getBlocks } = registry.select( blockEditorStore );
 
 			let innerBlocks = getBlocks( clientId );
-			const hasExplicitWidths = hasExplicitPercentColumnWidths(
-				innerBlocks
-			);
+			const hasExplicitWidths =
+				hasExplicitPercentColumnWidths( innerBlocks );
 
 			// Redistribute available width for existing inner blocks.
 			const isAddingColumn = newColumns > previousColumns;
@@ -199,9 +198,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 				];
 			} else {
 				// The removed column will be the last of the inner blocks.
-				innerBlocks = dropRight(
-					innerBlocks,
-					previousColumns - newColumns
+				innerBlocks = innerBlocks.slice(
+					0,
+					-( previousColumns - newColumns )
 				);
 
 				if ( hasExplicitWidths ) {

package/src/columns/edit.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, Dimensions } from 'react-native';
-import { dropRight, times, map, compact, delay } from 'lodash';
+import { times, map, compact, delay } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -347,14 +347,12 @@ const ColumnsEditContainerWrapper = withDispatch(
 		updateColumns( previousColumns, newColumns ) {
 			const { clientId } = ownProps;
 			const { replaceInnerBlocks } = dispatch( blockEditorStore );
-			const { getBlocks, getBlockAttributes } = registry.select(
-				blockEditorStore
-			);
+			const { getBlocks, getBlockAttributes } =
+				registry.select( blockEditorStore );
 
 			let innerBlocks = getBlocks( clientId );
-			const hasExplicitWidths = hasExplicitPercentColumnWidths(
-				innerBlocks
-			);
+			const hasExplicitWidths =
+				hasExplicitPercentColumnWidths( innerBlocks );
 
 			// Redistribute available width for existing inner blocks.
 			const isAddingColumn = newColumns > previousColumns;
@@ -394,9 +392,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 				];
 			} else {
 				// The removed column will be the last of the inner blocks.
-				innerBlocks = dropRight(
-					innerBlocks,
-					previousColumns - newColumns
+				innerBlocks = innerBlocks.slice(
+					0,
+					-( previousColumns - newColumns )
 				);
 
 				if ( hasExplicitWidths ) {
@@ -414,12 +412,10 @@ const ColumnsEditContainerWrapper = withDispatch(
 		},
 		onAddNextColumn: () => {
 			const { clientId } = ownProps;
-			const { replaceInnerBlocks, selectBlock } = dispatch(
-				blockEditorStore
-			);
-			const { getBlocks, getBlockAttributes } = registry.select(
-				blockEditorStore
-			);
+			const { replaceInnerBlocks, selectBlock } =
+				dispatch( blockEditorStore );
+			const { getBlocks, getBlockAttributes } =
+				registry.select( blockEditorStore );
 
 			// Get verticalAlignment from Columns block to set the same to new Column.
 			const { verticalAlignment } = getBlockAttributes( clientId );

package/src/columns/index.js

@@ -39,8 +39,7 @@ export const settings = {
 					{
 						name: 'core/image',
 						attributes: {
-							url:
-								'https://s.w.org/images/core/5.3/Windbuchencom.jpg',
+							url: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg',
 						},
 					},
 					{

package/src/columns/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { sumBy, merge, mapValues } from 'lodash';
+import { merge, mapValues } from 'lodash';
 
 /**
  * Returns a column width attribute value rounded to standard precision.
@@ -44,8 +44,10 @@ export function getTotalColumnsWidth(
 	blocks,
 	totalBlockCount = blocks.length
 ) {
-	return sumBy( blocks, ( block ) =>
-		getEffectiveColumnWidth( block, totalBlockCount )
+	return blocks.reduce(
+		( sum, block ) =>
+			sum + getEffectiveColumnWidth( block, totalBlockCount ),
+		0
 	);
 }
 

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 }>
-					<p>{ _x( 'Comment Author', 'block title' ) }</p>
-				</div>
-			</>
-		);
+		displayName = _x( 'Comment Author', 'block title' );
 	}
 
 	const displayAuthor = isLink ? (
@@ -111,9 +103,8 @@ export default function Edit( {
 			{ displayName }
 		</a>
 	) : (
-		<p>{ displayName }</p>
+		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 }>
-					<p>{ _x( 'Comment Date', 'block title' ) }</p>
-				</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.",

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.js

@@ -37,7 +37,12 @@ const TEMPLATE = [
 						'core/column',
 						{},
 						[
-							[ 'core/comment-author-name' ],
+							[
+								'core/comment-author-name',
+								{
+									fontSize: 'small',
+								},
+							],
 							[
 								'core/group',
 								{
@@ -52,12 +57,27 @@ const TEMPLATE = [
 									},
 								},
 								[
-									[ 'core/comment-date' ],
-									[ 'core/comment-edit-link' ],
+									[
+										'core/comment-date',
+										{
+											fontSize: 'small',
+										},
+									],
+									[
+										'core/comment-edit-link',
+										{
+											fontSize: 'small',
+										},
+									],
 								],
 							],
 							[ 'core/comment-content' ],
-							[ 'core/comment-reply-link' ],
+							[
+								'core/comment-reply-link',
+								{
+									fontSize: 'small',
+								},
+							],
 						],
 					],
 				],

package/src/comments/index.js

@@ -7,6 +7,7 @@ import { postComments as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import metadata from './block.json';
+import deprecated from './deprecated';
 import edit from './edit';
 import save from './save';
 
@@ -17,4 +18,5 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	deprecated,
 };

package/src/comments-pagination/block.json

@@ -4,7 +4,7 @@
 	"name": "core/comments-pagination",
 	"title": "Comments Pagination",
 	"category": "theme",
-	"parent": [ "core/comments-query-loop" ],
+	"parent": [ "core/comments" ],
 	"description": "Displays a paginated navigation to next/previous set of comments, when applicable.",
 	"textdomain": "default",
 	"attributes": {

package/src/comments-title/block.json

@@ -4,7 +4,7 @@
 	"name": "core/comments-title",
 	"title": "Comments Title",
 	"category": "theme",
-	"ancestor": [ "core/comments-query-loop" ],
+	"ancestor": [ "core/comments" ],
 	"description": "Displays a title with the number of comments",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],

package/src/comments-title/deprecated.js

@@ -18,13 +18,11 @@ export default [
 		},
 		supports,
 		migrate: ( oldAttributes ) => {
-			/* eslint-disable no-unused-vars */
 			const {
 				singleCommentLabel,
 				multipleCommentsLabel,
 				...newAttributes
 			} = oldAttributes;
-			/* eslint-enable no-unused-vars */
 			return newAttributes;
 		},
 		isEligible: ( { multipleCommentsLabel, singleCommentLabel } ) =>

package/src/comments-title/edit.js

@@ -129,7 +129,7 @@ export default function Edit( {
 		} else {
 			placeholder = sprintf(
 				/* translators: %s: Number of comments. */
-				_n( '%s responses', '%s responses', commentsCount ),
+				_n( '%s response', '%s responses', commentsCount ),
 				commentsCount
 			);
 		}

package/src/comments-title/index.php

@@ -56,7 +56,7 @@ function render_block_core_comments_title( $attributes ) {
 		} else {
 			$comments_title = sprintf(
 				/* translators: %s: Number of comments. */
-				_n( '%s responses', '%s responses', $comments_count ),
+				_n( '%s response', '%s responses', $comments_count ),
 				number_format_i18n( $comments_count )
 			);
 		}

package/src/cover/block.json

@@ -83,6 +83,7 @@
 		"html": false,
 		"spacing": {
 			"padding": true,
+			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
 				"padding": true
 			}

package/src/cover/controls.native.js

@@ -206,10 +206,8 @@ function Controls( {
 										setDisplayPlaceholder( true );
 									} }
 									onLoad={ ( event ) => {
-										const {
-											height,
-											width,
-										} = event.naturalSize;
+										const { height, width } =
+											event.naturalSize;
 										setVideoNaturalSize( {
 											height,
 											width,

package/src/cover/deprecated.js

@@ -233,9 +233,8 @@ const v10 = {
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
 				'is-repeated': isRepeated,
-				'has-custom-content-position': ! isContentPositionCenter(
-					contentPosition
-				),
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
 			},
 			getPositionClassName( contentPosition )
 		);
@@ -368,9 +367,8 @@ const v9 = {
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
 				'is-repeated': isRepeated,
-				'has-custom-content-position': ! isContentPositionCenter(
-					contentPosition
-				),
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
 			},
 			getPositionClassName( contentPosition )
 		);
@@ -500,9 +498,8 @@ const v8 = {
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
 				'is-repeated': isRepeated,
-				'has-custom-content-position': ! isContentPositionCenter(
-					contentPosition
-				),
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
 			},
 			getPositionClassName( contentPosition )
 		);
@@ -654,9 +651,8 @@ const v7 = {
 				'is-repeated': isRepeated,
 				'has-background-gradient': gradient || customGradient,
 				[ gradientClass ]: ! url && gradientClass,
-				'has-custom-content-position': ! isContentPositionCenter(
-					contentPosition
-				),
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
 			},
 			getPositionClassName( contentPosition )
 		);
@@ -806,9 +802,8 @@ const v6 = {
 				'is-repeated': isRepeated,
 				'has-background-gradient': gradient || customGradient,
 				[ gradientClass ]: ! url && gradientClass,
-				'has-custom-content-position': ! isContentPositionCenter(
-					contentPosition
-				),
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
 			},
 			getPositionClassName( contentPosition )
 		);