@wordpress/block-library 7.3.10 → 7.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.3.10",
+	"version": "7.6.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,36 +29,37 @@
 		"src/**/*.scss",
 		"src/navigation-link/index.js",
 		"src/template-part/index.js",
-		"src/query/index.js"
+		"src/query/index.js",
+		"src/post-terms/index.js"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.6.1",
-		"@wordpress/api-fetch": "^6.3.1",
-		"@wordpress/autop": "^3.6.1",
-		"@wordpress/blob": "^3.6.1",
-		"@wordpress/block-editor": "^8.5.7",
-		"@wordpress/blocks": "^11.5.3",
-		"@wordpress/components": "^19.8.4",
-		"@wordpress/compose": "^5.4.1",
-		"@wordpress/core-data": "^4.4.5",
-		"@wordpress/data": "^6.6.1",
-		"@wordpress/date": "^4.6.1",
-		"@wordpress/deprecated": "^3.6.1",
-		"@wordpress/dom": "^3.6.1",
-		"@wordpress/element": "^4.4.1",
-		"@wordpress/hooks": "^3.6.1",
-		"@wordpress/html-entities": "^3.6.1",
-		"@wordpress/i18n": "^4.6.1",
-		"@wordpress/icons": "^8.2.2",
-		"@wordpress/keycodes": "^3.6.1",
-		"@wordpress/notices": "^3.6.1",
-		"@wordpress/primitives": "^3.4.1",
-		"@wordpress/reusable-blocks": "^3.4.7",
-		"@wordpress/rich-text": "^5.4.2",
-		"@wordpress/server-side-render": "^3.4.5",
-		"@wordpress/url": "^3.7.1",
-		"@wordpress/viewport": "^4.4.1",
+		"@wordpress/a11y": "^3.9.0",
+		"@wordpress/api-fetch": "^6.6.0",
+		"@wordpress/autop": "^3.9.0",
+		"@wordpress/blob": "^3.9.0",
+		"@wordpress/block-editor": "^9.1.0",
+		"@wordpress/blocks": "^11.8.0",
+		"@wordpress/components": "^19.11.0",
+		"@wordpress/compose": "^5.7.0",
+		"@wordpress/core-data": "^4.7.0",
+		"@wordpress/data": "^6.9.0",
+		"@wordpress/date": "^4.9.0",
+		"@wordpress/deprecated": "^3.9.0",
+		"@wordpress/dom": "^3.9.0",
+		"@wordpress/element": "^4.7.0",
+		"@wordpress/hooks": "^3.9.0",
+		"@wordpress/html-entities": "^3.9.0",
+		"@wordpress/i18n": "^4.9.0",
+		"@wordpress/icons": "^9.0.0",
+		"@wordpress/keycodes": "^3.9.0",
+		"@wordpress/notices": "^3.9.0",
+		"@wordpress/primitives": "^3.7.0",
+		"@wordpress/reusable-blocks": "^3.7.0",
+		"@wordpress/rich-text": "^5.7.0",
+		"@wordpress/server-side-render": "^3.7.0",
+		"@wordpress/url": "^3.10.0",
+		"@wordpress/viewport": "^4.7.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -74,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d9042594d77ee2d9e28326266de078a505fdf645"
+	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
 }

package/src/archives/edit.js

@@ -17,7 +17,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Archives settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }

package/src/audio/edit.js

@@ -29,7 +29,7 @@ import { useEffect } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { audio as icon } from '@wordpress/icons';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -62,13 +62,8 @@ function AudioEdit( {
 			if ( file ) {
 				mediaUpload( {
 					filesList: [ file ],
-					onFileChange: ( [ { id: mediaId, url } ] ) => {
-						setAttributes( { id: mediaId, src: url } );
-					},
-					onError: ( e ) => {
-						setAttributes( { src: undefined, id: undefined } );
-						noticeOperations.createErrorNotice( e );
-					},
+					onFileChange: ( [ media ] ) => onSelectAudio( media ),
+					onError: ( e ) => onUploadError( e ),
 					allowedTypes: ALLOWED_MEDIA_TYPES,
 				} );
 			}
@@ -159,7 +154,7 @@ function AudioEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Audio settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Autoplay' ) }
 						onChange={ toggleAttribute( 'autoplay' ) }
@@ -213,7 +208,9 @@ function AudioEdit( {
 						}
 						inlineToolbar
 						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
 						}
 					/>
 				) }

package/src/audio/edit.native.js

@@ -177,7 +177,7 @@ function AudioEdit( {
 		>
 			<View>
 				<InspectorControls>
-					<PanelBody title={ __( 'Audio settings' ) }>
+					<PanelBody title={ __( 'Settings' ) }>
 						<ToggleControl
 							label={ __( 'Autoplay' ) }
 							onChange={ toggleAttribute( 'autoplay' ) }

package/src/avatar/block.json

@@ -22,7 +22,6 @@
 			"type": "string",
 			"default": "_self"
 		}
-
 	},
 	"usesContext": [ "postType", "postId", "commentId" ],
 	"supports": {

package/src/avatar/index.php

@@ -105,11 +105,11 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
 	}
 	$comment = get_comment( $block->context['commentId'] );
-	/* translators: %s is the Comment Author name */
-	$alt = sprintf( __( '%s Avatar' ), $comment->comment_author );
 	if ( ! $comment ) {
 		return '';
 	}
+	/* translators: %s is the Comment Author name */
+	$alt          = sprintf( __( '%s Avatar' ), $comment->comment_author );
 	$avatar_block = get_avatar(
 		$comment,
 		$size,

package/src/block/edit.js

@@ -5,7 +5,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useEntityBlockEditor,
 	useEntityProp,
-	__experimentalUseEntityRecord as useEntityRecord,
+	useEntityRecord,
 } from '@wordpress/core-data';
 import {
 	Placeholder,
@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	useInnerBlocksProps,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
-	__experimentalBlockContentOverlay as BlockContentOverlay,
+	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	InnerBlocks,
 	BlockControls,
 	InspectorControls,
@@ -62,20 +62,25 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 		ref
 	);
 
-	const blockProps = useBlockProps();
-
-	const innerBlocksProps = useInnerBlocksProps(
-		{},
+	const hasBlockOverlay = useBlockOverlayActive( clientId );
+	const blockProps = useBlockProps(
 		{
-			value: blocks,
-			onInput,
-			onChange,
-			renderAppender: blocks?.length
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
-		}
+			className: hasBlockOverlay
+				? 'block-library-block__reusable-block-container block-editor-block-content-overlay'
+				: 'block-library-block__reusable-block-container',
+		},
+		{ __unstableIsDisabled: hasBlockOverlay }
 	);
 
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		onInput,
+		onChange,
+		renderAppender: blocks?.length
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
 	if ( hasAlreadyRendered ) {
 		return (
 			<div { ...blockProps }>
@@ -108,36 +113,28 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 
 	return (
 		<RecursionProvider>
-			<div { ...blockProps }>
-				{ canRemove && (
-					<BlockControls>
-						<ToolbarGroup>
-							<ToolbarButton
-								onClick={ () =>
-									convertBlockToStatic( clientId )
-								}
-								label={ __( 'Convert to regular blocks' ) }
-								icon={ ungroup }
-								showTooltip
-							/>
-						</ToolbarGroup>
-					</BlockControls>
-				) }
-				<InspectorControls>
-					<PanelBody>
-						<TextControl
-							label={ __( 'Name' ) }
-							value={ title }
-							onChange={ setTitle }
+			{ canRemove && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ () => convertBlockToStatic( clientId ) }
+							label={ __( 'Convert to regular blocks' ) }
+							icon={ ungroup }
+							showTooltip
 						/>
-					</PanelBody>
-				</InspectorControls>
-				<BlockContentOverlay
-					clientId={ clientId }
-					wrapperProps={ innerBlocksProps }
-					className="block-library-block__reusable-block-container"
-				/>
-			</div>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+			<InspectorControls>
+				<PanelBody>
+					<TextControl
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...innerBlocksProps } />
 		</RecursionProvider>
 	);
 }

package/src/block/test/edit.native.js

@@ -146,7 +146,7 @@ describe( 'Reusable block', () => {
 	} );
 
 	// Skipped until `pointerEvents: 'none'` no longer erroneously prevents
-	// triggering `onLayout*` on the element: https://git.io/JSHZt.
+	// triggering `onLayout*` on the element: https://github.com/callstack/react-native-testing-library/issues/897.
 	it.skip( 'renders block content', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const id = 4;

package/src/button/block.json

@@ -69,6 +69,7 @@
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true,
+			"__experimentalTextTransform": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/button/edit.native.js

@@ -134,10 +134,13 @@ function ButtonEdit( props ) {
 	useEffect( () => {
 		// Blur `RichText` on Android when link settings sheet or button settings sheet is opened,
 		// to avoid flashing caret after closing one of them
-		if ( editorSidebarOpened || isLinkSheetVisible ) {
-			if ( Platform.OS === 'android' && richTextRef?.current ) {
-				richTextRef.current.blur();
+		const richText = richTextRef?.current;
+		if ( Platform.OS === 'android' && richText ) {
+			if ( editorSidebarOpened || isLinkSheetVisible ) {
+				richText.blur();
 				onToggleButtonFocus( false );
+			} else {
+				onToggleButtonFocus( true );
 			}
 		}
 	}, [ editorSidebarOpened, isLinkSheetVisible ] );

package/src/categories/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/categories",
-	"title": "Categories",
+	"title": "Categories List",
 	"category": "widgets",
 	"description": "Display a list of all categories.",
 	"textdomain": "default",
@@ -22,6 +22,10 @@
 		"showOnlyTopLevel": {
 			"type": "boolean",
 			"default": false
+		},
+		"showEmpty": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {

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: {
@@ -25,11 +25,12 @@ export default function CategoriesEdit( {
 		showHierarchy,
 		showPostCounts,
 		showOnlyTopLevel,
+		showEmpty,
 	},
 	setAttributes,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
-	const query = { per_page: -1, hide_empty: true, context: 'view' };
+	const query = { per_page: -1, hide_empty: ! showEmpty, context: 'view' };
 	if ( showOnlyTopLevel ) {
 		query.parent = 0;
 	}
@@ -128,7 +129,7 @@ export default function CategoriesEdit( {
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
-				<PanelBody title={ __( 'Categories settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }
@@ -144,6 +145,11 @@ export default function CategoriesEdit( {
 						checked={ showOnlyTopLevel }
 						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
 					/>
+					<ToggleControl
+						label={ __( 'Show empty categories' ) }
+						checked={ showEmpty }
+						onChange={ toggleAttribute( 'showEmpty' ) }
+					/>
 					{ ! showOnlyTopLevel && (
 						<ToggleControl
 							label={ __( 'Show hierarchy' ) }

package/src/categories/index.php

@@ -22,6 +22,7 @@ function render_block_core_categories( $attributes ) {
 		'orderby'      => 'name',
 		'show_count'   => ! empty( $attributes['showPostCounts'] ),
 		'title_li'     => '',
+		'hide_empty'   => empty( $attributes['showEmpty'] ),
 	);
 	if ( ! empty( $attributes['showOnlyTopLevel'] ) && $attributes['showOnlyTopLevel'] ) {
 		$args['parent'] = 0;

package/src/column/block.json

@@ -41,6 +41,16 @@
 				"padding": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"__experimentalLayout": true
 	}
 }

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

@@ -288,11 +288,7 @@ export default function CommentTemplateEdit( {
 	}
 
 	if ( ! commentTree.length ) {
-		return (
-			<p { ...blockProps } data-testid="noresults">
-				{ __( 'No results found.' ) }
-			</p>
-		);
+		return <p { ...blockProps }>{ __( 'No results found.' ) }</p>;
 	}
 
 	return (

package/src/{comments-query-loop → comments}/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-query-loop",
-	"title": "Comments Query Loop",
+	"title": "Comments",
 	"category": "theme",
 	"description": "An advanced block that allows displaying post comments using different visual configurations.",
 	"textdomain": "default",

package/src/{comments-query-loop → comments}/edit.js

@@ -68,7 +68,7 @@ const TEMPLATE = [
 	[ 'core/post-comments-form' ],
 ];
 
-export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
+export default function CommentsEdit( { attributes, setAttributes } ) {
 	const { tagName: TagName } = attributes;
 
 	const blockProps = useBlockProps();

package/src/{comments-query-loop → comments}/save.js

@@ -3,9 +3,7 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function CommentsQueryLoopSave( {
-	attributes: { tagName: Tag },
-} ) {
+export default function CommentsSave( { attributes: { tagName: Tag } } ) {
 	return (
 		<Tag { ...useBlockProps.save() }>
 			<InnerBlocks.Content />

package/src/comments-title/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { commentTitle as icon } from '@wordpress/icons';
+import { title as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

package/src/common.scss

@@ -116,11 +116,34 @@
 html :where(.has-border-color) {
 	border-style: solid;
 }
+html :where([style*="border-top-color"]) {
+	border-top-style: solid;
+}
+html :where([style*="border-right-color"]) {
+	border-right-style: solid;
+}
+html :where([style*="border-bottom-color"]) {
+	border-bottom-style: solid;
+}
+html :where([style*="border-left-color"]) {
+	border-left-style: solid;
+}
 
 html :where([style*="border-width"]) {
 	border-style: solid;
 }
-
+html :where([style*="border-top-width"]) {
+	border-top-style: solid;
+}
+html :where([style*="border-right-width"]) {
+	border-right-style: solid;
+}
+html :where([style*="border-bottom-width"]) {
+	border-bottom-style: solid;
+}
+html :where([style*="border-left-width"]) {
+	border-left-style: solid;
+}
 
 /**
  * Provide baseline responsiveness for images.

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 && (
@@ -217,7 +216,7 @@ function Controls( {
 										} );
 										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 }

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

@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { ToolbarButton } from '@wordpress/components';
+
+import {
+	BlockControls,
+	MediaReplaceFlow,
+	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
+	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { postFeaturedImage } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_MEDIA_TYPES, IMAGE_BACKGROUND_TYPE } from '../shared';
+
+export default function CoverBlockControls( {
+	attributes,
+	setAttributes,
+	onSelectMedia,
+	currentSettings,
+} ) {
+	const {
+		contentPosition,
+		id,
+		useFeaturedImage,
+		dimRatio,
+		minHeight,
+		minHeightUnit,
+	} = attributes;
+	const { hasInnerBlocks, url } = currentSettings;
+
+	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
+	const [ prevMinHeightUnit, setPrevMinHeightUnit ] = useState(
+		minHeightUnit
+	);
+	const isMinFullHeight = minHeightUnit === 'vh' && minHeight === 100;
+	const toggleMinFullHeight = () => {
+		if ( isMinFullHeight ) {
+			// If there aren't previous values, take the default ones.
+			if ( prevMinHeightUnit === 'vh' && prevMinHeightValue === 100 ) {
+				return setAttributes( {
+					minHeight: undefined,
+					minHeightUnit: undefined,
+				} );
+			}
+
+			// Set the previous values of height.
+			return setAttributes( {
+				minHeight: prevMinHeightValue,
+				minHeightUnit: prevMinHeightUnit,
+			} );
+		}
+
+		setPrevMinHeightValue( minHeight );
+		setPrevMinHeightUnit( minHeightUnit );
+
+		// Set full height.
+		return setAttributes( {
+			minHeight: 100,
+			minHeightUnit: 'vh',
+		} );
+	};
+
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			id: undefined,
+			url: undefined,
+			useFeaturedImage: ! useFeaturedImage,
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+			backgroundType: useFeaturedImage
+				? IMAGE_BACKGROUND_TYPE
+				: undefined,
+		} );
+	};
+	return (
+		<>
+			<BlockControls group="block">
+				<BlockAlignmentMatrixControl
+					label={ __( 'Change content position' ) }
+					value={ contentPosition }
+					onChange={ ( nextPosition ) =>
+						setAttributes( {
+							contentPosition: nextPosition,
+						} )
+					}
+					isDisabled={ ! hasInnerBlocks }
+				/>
+				<FullHeightAlignmentControl
+					isActive={ isMinFullHeight }
+					onToggle={ toggleMinFullHeight }
+					isDisabled={ ! hasInnerBlocks }
+				/>
+			</BlockControls>
+			<BlockControls group="other">
+				<ToolbarButton
+					icon={ postFeaturedImage }
+					label={ __( 'Use featured image' ) }
+					isPressed={ useFeaturedImage }
+					onClick={ toggleUseFeaturedImage }
+				/>
+				{ ! useFeaturedImage && (
+					<MediaReplaceFlow
+						mediaId={ id }
+						mediaURL={ url }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						accept="image/*,video/*"
+						onSelect={ onSelectMedia }
+						name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+					/>
+				) }
+			</BlockControls>
+		</>
+	);
+}