@wordpress/block-library 7.7.0 → 7.8.0

package/src/buttons/deprecated.js

@@ -15,11 +15,8 @@ const migrateWithLayout = ( attributes ) => {
 		return attributes;
 	}
 
-	const {
-		contentJustification,
-		orientation,
-		...updatedAttributes
-	} = attributes;
+	const { contentJustification, orientation, ...updatedAttributes } =
+		attributes;
 
 	if ( contentJustification || orientation ) {
 		Object.assign( updatedAttributes, {
@@ -67,7 +64,8 @@ const deprecated = [
 				<div
 					{ ...useBlockProps.save( {
 						className: classnames( {
-							[ `is-content-justification-${ contentJustification }` ]: contentJustification,
+							[ `is-content-justification-${ contentJustification }` ]:
+								contentJustification,
 							'is-vertical': orientation === 'vertical',
 						} ),
 					} ) }

package/src/buttons/edit.js

@@ -33,9 +33,9 @@ const DEFAULT_BLOCK = {
 function ButtonsEdit( { attributes: { layout = {} } } ) {
 	const blockProps = useBlockProps();
 	const preferredStyle = useSelect( ( select ) => {
-		const preferredStyleVariations = select(
-			blockEditorStore
-		).getSettings().__experimentalPreferredStyleVariations;
+		const preferredStyleVariations =
+			select( blockEditorStore ).getSettings()
+				.__experimentalPreferredStyleVariations;
 		return preferredStyleVariations?.value?.[ buttonBlockName ];
 	}, [] );
 

package/src/buttons/edit.native.js

@@ -49,11 +49,8 @@ export default function ButtonsEdit( {
 
 	const { isInnerButtonSelected, shouldDelete } = useSelect(
 		( select ) => {
-			const {
-				getBlockCount,
-				getBlockParents,
-				getSelectedBlockClientId,
-			} = select( blockEditorStore );
+			const { getBlockCount, getBlockParents, getSelectedBlockClientId } =
+				select( blockEditorStore );
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const selectedBlockParents = getBlockParents(
 				selectedBlockClientId,
@@ -73,16 +70,15 @@ export default function ButtonsEdit( {
 	);
 
 	const preferredStyle = useSelect( ( select ) => {
-		const preferredStyleVariations = select(
-			blockEditorStore
-		).getSettings().__experimentalPreferredStyleVariations;
+		const preferredStyleVariations =
+			select( blockEditorStore ).getSettings()
+				.__experimentalPreferredStyleVariations;
 		return preferredStyleVariations?.value?.[ buttonBlockName ];
 	}, [] );
 
 	const { getBlockOrder } = useSelect( blockEditorStore );
-	const { insertBlock, removeBlock, selectBlock } = useDispatch(
-		blockEditorStore
-	);
+	const { insertBlock, removeBlock, selectBlock } =
+		useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		const { width } = sizes || {};

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

package/src/cover/edit/block-controls.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { ToolbarButton } from '@wordpress/components';
 
 import {
 	BlockControls,
@@ -11,7 +10,6 @@ import {
 	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { postFeaturedImage } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -35,9 +33,8 @@ export default function CoverBlockControls( {
 	const { hasInnerBlocks, url } = currentSettings;
 
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
-	const [ prevMinHeightUnit, setPrevMinHeightUnit ] = useState(
-		minHeightUnit
-	);
+	const [ prevMinHeightUnit, setPrevMinHeightUnit ] =
+		useState( minHeightUnit );
 	const isMinFullHeight = minHeightUnit === 'vh' && minHeight === 100;
 	const toggleMinFullHeight = () => {
 		if ( isMinFullHeight ) {
@@ -97,22 +94,16 @@ export default function CoverBlockControls( {
 				/>
 			</BlockControls>
 			<BlockControls group="other">
-				<ToolbarButton
-					icon={ postFeaturedImage }
-					label={ __( 'Use featured image' ) }
-					isPressed={ useFeaturedImage }
-					onClick={ toggleUseFeaturedImage }
+				<MediaReplaceFlow
+					mediaId={ id }
+					mediaURL={ url }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					accept="image/*,video/*"
+					onSelect={ onSelectMedia }
+					onToggleFeaturedImage={ toggleUseFeaturedImage }
+					useFeaturedImage={ useFeaturedImage }
+					name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
 				/>
-				{ ! useFeaturedImage && (
-					<MediaReplaceFlow
-						mediaId={ id }
-						mediaURL={ url }
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						accept="image/*,video/*"
-						onSelect={ onSelectMedia }
-						name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
-					/>
-				) }
 			</BlockControls>
 		</>
 	);

package/src/cover/edit/index.js

@@ -10,7 +10,7 @@ import namesPlugin from 'colord/plugins/names';
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useEffect, useRef } from '@wordpress/element';
-import { Spinner } from '@wordpress/components';
+import { Placeholder, Spinner } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import {
 	withColors,
@@ -120,9 +120,8 @@ function CoverEdit( {
 		? IMAGE_BACKGROUND_TYPE
 		: attributes.backgroundType;
 
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { gradientClass, gradientValue } = __experimentalUseGradient();
 	const onSelectMedia = attributesFromMedia( setAttributes, dimRatio );
@@ -212,23 +211,31 @@ function CoverEdit( {
 		overlayColor,
 	};
 
-	if ( ! hasInnerBlocks && ! hasBackground ) {
+	const blockControls = (
+		<CoverBlockControls
+			attributes={ attributes }
+			setAttributes={ setAttributes }
+			onSelectMedia={ onSelectMedia }
+			currentSettings={ currentSettings }
+		/>
+	);
+
+	const inspectorControls = (
+		<CoverInspectorControls
+			attributes={ attributes }
+			setAttributes={ setAttributes }
+			clientId={ clientId }
+			setOverlayColor={ setOverlayColor }
+			coverRef={ ref }
+			currentSettings={ currentSettings }
+		/>
+	);
+
+	if ( ! useFeaturedImage && ! hasInnerBlocks && ! hasBackground ) {
 		return (
 			<>
-				<CoverBlockControls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					onSelectMedia={ onSelectMedia }
-					currentSettings={ currentSettings }
-				/>
-				<CoverInspectorControls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					clientId={ clientId }
-					setOverlayColor={ setOverlayColor }
-					coverRef={ ref }
-					currentSettings={ currentSettings }
-				/>
+				{ blockControls }
+				{ inspectorControls }
 				<div
 					{ ...blockProps }
 					className={ classnames(
@@ -279,29 +286,16 @@ function CoverEdit( {
 			'is-transient': isUploadingMedia,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
-			'has-custom-content-position': ! isContentPositionCenter(
-				contentPosition
-			),
+			'has-custom-content-position':
+				! isContentPositionCenter( contentPosition ),
 		},
 		getPositionClassName( contentPosition )
 	);
 
 	return (
 		<>
-			<CoverBlockControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				onSelectMedia={ onSelectMedia }
-				currentSettings={ currentSettings }
-			/>
-			<CoverInspectorControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				clientId={ clientId }
-				setOverlayColor={ setOverlayColor }
-				coverRef={ ref }
-				currentSettings={ currentSettings }
-			/>
+			{ blockControls }
+			{ inspectorControls }
 			<div
 				{ ...blockProps }
 				className={ classnames( classes, blockProps.className ) }
@@ -324,25 +318,34 @@ function CoverEdit( {
 					showHandle={ isSelected }
 				/>
 
-				<span
-					aria-hidden="true"
-					className={ classnames(
-						'wp-block-cover__background',
-						dimRatioToClass( dimRatio ),
-						{
-							[ overlayColor.class ]: overlayColor.class,
-							'has-background-dim': dimRatio !== undefined,
-							// For backwards compatibility. Former versions of the Cover Block applied
-							// `.wp-block-cover__gradient-background` in the presence of
-							// media, a gradient and a dim.
-							'wp-block-cover__gradient-background':
-								url && gradientValue && dimRatio !== 0,
-							'has-background-gradient': gradientValue,
-							[ gradientClass ]: gradientClass,
-						}
-					) }
-					style={ { backgroundImage: gradientValue, ...bgStyle } }
-				/>
+				{ ( ! useFeaturedImage || url ) && (
+					<span
+						aria-hidden="true"
+						className={ classnames(
+							'wp-block-cover__background',
+							dimRatioToClass( dimRatio ),
+							{
+								[ overlayColor.class ]: overlayColor.class,
+								'has-background-dim': dimRatio !== undefined,
+								// For backwards compatibility. Former versions of the Cover Block applied
+								// `.wp-block-cover__gradient-background` in the presence of
+								// media, a gradient and a dim.
+								'wp-block-cover__gradient-background':
+									url && gradientValue && dimRatio !== 0,
+								'has-background-gradient': gradientValue,
+								[ gradientClass ]: gradientClass,
+							}
+						) }
+						style={ { backgroundImage: gradientValue, ...bgStyle } }
+					/>
+				) }
+
+				{ ! url && useFeaturedImage && (
+					<Placeholder
+						className="wp-block-cover__image--placeholder-image"
+						withIllustration={ true }
+					/>
+				) }
 
 				{ url &&
 					isImageBackground &&