@wordpress/block-library 7.5.0 → 7.8.0

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/column/deprecated.js

@@ -33,7 +33,8 @@ const deprecated = [
 			const { verticalAlignment, width } = attributes;
 
 			const wrapperClasses = classnames( {
-				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
 			} );
 
 			const style = { flexBasis: width + '%' };

package/src/column/edit.js

@@ -50,9 +50,8 @@ function ColumnEdit( {
 
 	const { columnsIds, hasChildBlocks, rootClientId } = useSelect(
 		( select ) => {
-			const { getBlockOrder, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const { getBlockOrder, getBlockRootClientId } =
+				select( blockEditorStore );
 
 			const rootId = getBlockRootClientId( clientId );
 

package/src/column/edit.native.js

@@ -261,8 +261,8 @@ export default compose( [
 		const selectedColumnIndex = blockOrder.indexOf( clientId );
 		const columns = getBlocks( parentId );
 
-		const parentAlignment = getBlockAttributes( parentId )
-			?.verticalAlignment;
+		const parentAlignment =
+			getBlockAttributes( parentId )?.verticalAlignment;
 
 		return {
 			hasChildren,

package/src/columns/block.json

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

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

@@ -97,7 +97,7 @@ export default function Edit( {
 				{ inspectorControls }
 				{ blockControls }
 				<div { ...blockProps }>
-					<p>{ _x( 'Comment Author', 'block title' ) }</p>
+					{ _x( 'Comment Author', 'block title' ) }
 				</div>
 			</>
 		);
@@ -111,7 +111,7 @@ export default function Edit( {
 			{ displayName }
 		</a>
 	) : (
-		<p>{ displayName }</p>
+		{ displayName }
 	);
 
 	return (

package/src/comment-date/edit.js

@@ -64,7 +64,7 @@ export default function Edit( {
 			<>
 				{ inspectorControls }
 				<div { ...blockProps }>
-					<p>{ _x( 'Comment Date', 'block title' ) }</p>
+					<time>{ _x( 'Comment Date', 'block title' ) }</time>
 				</div>
 			</>
 		);

package/src/comments-title/block.json

@@ -12,12 +12,6 @@
 		"textAlign": {
 			"type": "string"
 		},
-		"singleCommentLabel": {
-			"type": "string"
-		},
-		"multipleCommentsLabel": {
-			"type": "string"
-		},
 		"showPostTitle": {
 			"type": "boolean",
 			"default": true

package/src/comments-title/deprecated.js

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+
+const { attributes, supports } = metadata;
+
+export default [
+	{
+		attributes: {
+			...attributes,
+			singleCommentLabel: {
+				type: 'string',
+			},
+			multipleCommentsLabel: {
+				type: 'string',
+			},
+		},
+		supports,
+		migrate: ( oldAttributes ) => {
+			/* eslint-disable no-unused-vars */
+			const {
+				singleCommentLabel,
+				multipleCommentsLabel,
+				...newAttributes
+			} = oldAttributes;
+			/* eslint-enable no-unused-vars */
+			return newAttributes;
+		},
+		isEligible: ( { multipleCommentsLabel, singleCommentLabel } ) =>
+			multipleCommentsLabel || singleCommentLabel,
+		save: () => null,
+	},
+];

package/src/comments-title/edit.js

@@ -10,17 +10,11 @@ import {
 	AlignmentControl,
 	BlockControls,
 	useBlockProps,
-	PlainText,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
-import {
-	PanelBody,
-	ToggleControl,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
@@ -31,20 +25,12 @@ import { addQueryArgs } from '@wordpress/url';
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 
 export default function Edit( {
-	attributes: {
-		textAlign,
-		singleCommentLabel,
-		multipleCommentsLabel,
-		showPostTitle,
-		showCommentsCount,
-		level,
-	},
+	attributes: { textAlign, showPostTitle, showCommentsCount, level },
 	setAttributes,
 	context: { postType, postId },
 } ) {
 	const TagName = 'h' + level;
 	const [ commentsCount, setCommentsCount ] = useState();
-	const [ editingMode, setEditingMode ] = useState( 'plural' );
 	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 	const isSiteEditor = typeof postId === 'undefined';
 	const blockProps = useBlockProps( {
@@ -100,22 +86,6 @@ export default function Edit( {
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
-				{ isSiteEditor && (
-					<ToggleGroupControl
-						label={ __( 'Editing mode' ) }
-						onChange={ setEditingMode }
-						value={ editingMode }
-					>
-						<ToggleGroupControlOption
-							label={ __( 'Singular' ) }
-							value="singular"
-						/>
-						<ToggleGroupControlOption
-							label={ __( 'Plural' ) }
-							value="plural"
-						/>
-					</ToggleGroupControl>
-				) }
 				<ToggleControl
 					label={ __( 'Show post title' ) }
 					checked={ showPostTitle }
@@ -136,78 +106,52 @@ export default function Edit( {
 
 	const postTitle = isSiteEditor ? __( '"Post Title"' ) : `"${ rawTitle }"`;
 
-	const singlePlaceholder = showPostTitle
-		? __( 'One response to ' )
-		: __( 'One response' );
-
-	const singlePlaceholderNoCount = showPostTitle
-		? __( 'Response to ' )
-		: __( 'Response' );
-
-	const multiplePlaceholder = showPostTitle
-		? __( 'responses to ' )
-		: __( 'responses' );
-
-	const multiplePlaceholderNoCount = showPostTitle
-		? __( 'Responses to ' )
-		: __( 'Responses' );
+	let placeholder;
+	if ( showCommentsCount && commentsCount !== undefined ) {
+		if ( showPostTitle ) {
+			if ( commentsCount === 1 ) {
+				/* translators: %s: Post title. */
+				placeholder = sprintf( __( 'One response to %s' ), postTitle );
+			} else {
+				placeholder = sprintf(
+					/* translators: 1: Number of comments, 2: Post title. */
+					_n(
+						'%1$s response to %2$s',
+						'%1$s responses to %2$s',
+						commentsCount
+					),
+					commentsCount,
+					postTitle
+				);
+			}
+		} else if ( commentsCount === 1 ) {
+			placeholder = __( 'One response' );
+		} else {
+			placeholder = sprintf(
+				/* translators: %s: Number of comments. */
+				_n( '%s response', '%s responses', commentsCount ),
+				commentsCount
+			);
+		}
+	} else if ( showPostTitle ) {
+		if ( commentsCount === 1 ) {
+			/* translators: %s: Post title. */
+			placeholder = sprintf( __( 'Response to %s' ), postTitle );
+		} else {
+			/* translators: %s: Post title. */
+			placeholder = sprintf( __( 'Responses to %s' ), postTitle );
+		}
+	} else if ( commentsCount === 1 ) {
+		placeholder = __( 'Response' );
+	} else {
+		placeholder = __( 'Responses' );
+	}
 
 	return (
 		<>
 			{ blockControls }
 			{ inspectorControls }
-			<TagName { ...blockProps }>
-				{ editingMode === 'singular' || commentsCount === 1 ? (
-					<>
-						<PlainText
-							__experimentalVersion={ 2 }
-							tagName="span"
-							aria-label={
-								showCommentsCount
-									? singlePlaceholder
-									: singlePlaceholderNoCount
-							}
-							placeholder={
-								showCommentsCount
-									? singlePlaceholder
-									: singlePlaceholderNoCount
-							}
-							value={ singleCommentLabel }
-							onChange={ ( newLabel ) =>
-								setAttributes( {
-									singleCommentLabel: newLabel,
-								} )
-							}
-						/>
-						{ showPostTitle ? postTitle : null }
-					</>
-				) : (
-					<>
-						{ showCommentsCount ? commentsCount : null }
-						<PlainText
-							__experimentalVersion={ 2 }
-							tagName="span"
-							aria-label={
-								showCommentsCount
-									? ` ${ multiplePlaceholder }`
-									: multiplePlaceholderNoCount
-							}
-							placeholder={
-								showCommentsCount
-									? ` ${ multiplePlaceholder }`
-									: multiplePlaceholderNoCount
-							}
-							value={ multipleCommentsLabel }
-							onChange={ ( newLabel ) =>
-								setAttributes( {
-									multipleCommentsLabel: newLabel,
-								} )
-							}
-						/>
-						{ showPostTitle ? postTitle : null }
-					</>
-				) }
-			</TagName>
+			<TagName { ...blockProps }>{ placeholder }</TagName>
 		</>
 	);
 }

package/src/comments-title/index.js

@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { commentTitle as icon } from '@wordpress/icons';
+import { title as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -15,4 +16,5 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	deprecated,
 };

package/src/comments-title/index.php

@@ -22,9 +22,10 @@ function render_block_core_comments_title( $attributes ) {
 	$show_post_title     = ! empty( $attributes['showPostTitle'] ) && $attributes['showPostTitle'];
 	$show_comments_count = ! empty( $attributes['showCommentsCount'] ) && $attributes['showCommentsCount'];
 	$wrapper_attributes  = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
-	$post_title          = $show_post_title ? sprintf( '"%1$s"', get_the_title() ) : null;
-	$comments_count      = number_format_i18n( get_comments_number() );
-	$tag_name            = 'h2';
+	$comments_count      = get_comments_number();
+	/* translators: %s: Post title. */
+	$post_title = sprintf( __( '“%s”' ), get_the_title() );
+	$tag_name   = 'h2';
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 'h' . $attributes['level'];
 	}
@@ -33,28 +34,45 @@ function render_block_core_comments_title( $attributes ) {
 		return;
 	}
 
-	$single_default_comment_label = $show_post_title ? __( 'Response to' ) : __( 'Response' );
 	if ( $show_comments_count ) {
-		$single_default_comment_label = $show_post_title ? __( 'One response to' ) : __( 'One response' );
+		if ( $show_post_title ) {
+			if ( '1' === $comments_count ) {
+				/* translators: %s: Post title. */
+				$comments_title = sprintf( __( 'One response to %s' ), $post_title );
+			} else {
+				$comments_title = sprintf(
+					/* translators: 1: Number of comments, 2: Post title. */
+					_n(
+						'%1$s response to %2$s',
+						'%1$s responses to %2$s',
+						$comments_count
+					),
+					number_format_i18n( $comments_count ),
+					$post_title
+				);
+			}
+		} elseif ( '1' === $comments_count ) {
+			$comments_title = __( 'One response' );
+		} else {
+			$comments_title = sprintf(
+				/* translators: %s: Number of comments. */
+				_n( '%s response', '%s responses', $comments_count ),
+				number_format_i18n( $comments_count )
+			);
+		}
+	} elseif ( $show_post_title ) {
+		if ( '1' === $comments_count ) {
+			/* translators: %s: Post title. */
+			$comments_title = sprintf( __( 'Response to %s' ), $post_title );
+		} else {
+			/* translators: %s: Post title. */
+			$comments_title = sprintf( __( 'Responses to %s' ), $post_title );
+		}
+	} elseif ( '1' === $comments_count ) {
+		$comments_title = __( 'Response' );
+	} else {
+		$comments_title = __( 'Responses' );
 	}
-	$single_comment_label = ! empty( $attributes['singleCommentLabel'] ) ? $attributes['singleCommentLabel'] : $single_default_comment_label;
-
-	$multiple_default_comment_label = $show_post_title ? __( 'Responses to' ) : __( 'Responses' );
-	if ( $show_comments_count ) {
-		$multiple_default_comment_label = $show_post_title ? __( 'responses to' ) : __( 'responses' );
-	}
-
-	$multiple_comment_label = ! empty( $attributes['multipleCommentsLabel'] ) ? $attributes['multipleCommentsLabel'] : $multiple_default_comment_label;
-
-	$comments_title = '%1$s %2$s %3$s';
-
-	$comments_title = sprintf(
-		$comments_title,
-		// If there is only one comment, only display the label.
-		'1' !== $comments_count && $show_comments_count ? $comments_count : null,
-		'1' === $comments_count ? $single_comment_label : $multiple_comment_label,
-		$post_title
-	);
 
 	return sprintf(
 		'<%1$s id="comments" %2$s>%3$s</%1$s>',

package/src/cover/controls.native.js

@@ -167,7 +167,6 @@ function Controls( {
 							styles.mediaPreview,
 							mediaBackground,
 						] }
-						onLongPress={ openMediaOptions }
 					>
 						<View style={ styles.mediaInner }>
 							{ IMAGE_BACKGROUND_TYPE === backgroundType && (
@@ -207,17 +206,15 @@ function Controls( {
 										setDisplayPlaceholder( true );
 									} }
 									onLoad={ ( event ) => {
-										const {
-											height,
-											width,
-										} = event.naturalSize;
+										const { height, width } =
+											event.naturalSize;
 										setVideoNaturalSize( {
 											height,
 											width,
 										} );
 										setDisplayPlaceholder( false );
 										// Avoid invisible, paused video on Android, presumably
-										// related to https://git.io/Jt6Dr
+										// related to https://github.com/react-native-video/react-native-video/issues/1979
 										videoRef?.current.seek( 0 );
 									} }
 									ref={ videoRef }