@wordpress/block-library 8.14.0 → 8.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.14.0",
+	"version": "8.16.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.37.0",
-		"@wordpress/api-fetch": "^6.34.0",
-		"@wordpress/autop": "^3.37.0",
-		"@wordpress/blob": "^3.37.0",
-		"@wordpress/block-editor": "^12.5.0",
-		"@wordpress/blocks": "^12.14.0",
-		"@wordpress/components": "^25.3.0",
-		"@wordpress/compose": "^6.14.0",
-		"@wordpress/core-data": "^6.14.0",
-		"@wordpress/data": "^9.7.0",
-		"@wordpress/date": "^4.37.0",
-		"@wordpress/deprecated": "^3.37.0",
-		"@wordpress/dom": "^3.37.0",
-		"@wordpress/element": "^5.14.0",
-		"@wordpress/escape-html": "^2.37.0",
-		"@wordpress/hooks": "^3.37.0",
-		"@wordpress/html-entities": "^3.37.0",
-		"@wordpress/i18n": "^4.37.0",
-		"@wordpress/icons": "^9.28.0",
-		"@wordpress/interactivity": "^1.1.0",
-		"@wordpress/keycodes": "^3.37.0",
-		"@wordpress/notices": "^4.5.0",
-		"@wordpress/primitives": "^3.35.0",
-		"@wordpress/private-apis": "^0.19.0",
-		"@wordpress/reusable-blocks": "^4.14.0",
-		"@wordpress/rich-text": "^6.14.0",
-		"@wordpress/server-side-render": "^4.14.0",
-		"@wordpress/url": "^3.38.0",
-		"@wordpress/viewport": "^5.14.0",
-		"@wordpress/wordcount": "^3.37.0",
+		"@wordpress/a11y": "^3.39.0",
+		"@wordpress/api-fetch": "^6.36.0",
+		"@wordpress/autop": "^3.39.0",
+		"@wordpress/blob": "^3.39.0",
+		"@wordpress/block-editor": "^12.7.0",
+		"@wordpress/blocks": "^12.16.0",
+		"@wordpress/components": "^25.5.0",
+		"@wordpress/compose": "^6.16.0",
+		"@wordpress/core-data": "^6.16.0",
+		"@wordpress/data": "^9.9.0",
+		"@wordpress/date": "^4.39.0",
+		"@wordpress/deprecated": "^3.39.0",
+		"@wordpress/dom": "^3.39.0",
+		"@wordpress/element": "^5.16.0",
+		"@wordpress/escape-html": "^2.39.0",
+		"@wordpress/hooks": "^3.39.0",
+		"@wordpress/html-entities": "^3.39.0",
+		"@wordpress/i18n": "^4.39.0",
+		"@wordpress/icons": "^9.30.0",
+		"@wordpress/interactivity": "^2.0.0",
+		"@wordpress/keycodes": "^3.39.0",
+		"@wordpress/notices": "^4.7.0",
+		"@wordpress/primitives": "^3.37.0",
+		"@wordpress/private-apis": "^0.21.0",
+		"@wordpress/reusable-blocks": "^4.16.0",
+		"@wordpress/rich-text": "^6.16.0",
+		"@wordpress/server-side-render": "^4.16.0",
+		"@wordpress/url": "^3.40.0",
+		"@wordpress/viewport": "^5.16.0",
+		"@wordpress/wordcount": "^3.39.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -68,6 +68,7 @@
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
+		"micromodal": "^0.4.10",
 		"remove-accents": "^0.4.2",
 		"uuid": "^8.3.0"
 	},
@@ -78,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bcd13d59b22553b3c9dc5869077bff1e864cf9f5"
+	"gitHead": "b898cf1dc8e70841d1647ea0994ac6278acc18a7"
 }

package/src/audio/test/__snapshots__/edit.native.js.snap

@@ -4,7 +4,11 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
     }
   }
   accessible={true}
@@ -38,7 +42,11 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
     <View
       accessibilityState={
         {
+          "busy": undefined,
+          "checked": undefined,
           "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
         }
       }
       accessible={true}
@@ -126,6 +134,15 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
           activeFormats={[]}
           blockType={
@@ -159,6 +176,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="Add caption"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -188,7 +206,11 @@ exports[`Audio block renders audio file without crashing 1`] = `
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
     }
   }
   accessible={true}
@@ -222,7 +244,11 @@ exports[`Audio block renders audio file without crashing 1`] = `
     <View
       accessibilityState={
         {
+          "busy": undefined,
+          "checked": undefined,
           "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
         }
       }
       accessible={true}
@@ -273,6 +299,15 @@ exports[`Audio block renders audio file without crashing 1`] = `
         accessibilityHint="Double tap to listen the audio file"
         accessibilityLabel="Audio Player"
         accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessible={true}
         focusable={true}
         onClick={[Function]}
@@ -325,6 +360,15 @@ exports[`Audio block renders audio file without crashing 1`] = `
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
           activeFormats={[]}
           blockType={
@@ -358,6 +402,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="Add caption"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -393,22 +438,13 @@ exports[`Audio block renders placeholder without crashing 1`] = `
     }
   >
     <View
-      accessibilityHint="Double tap to select an audio file"
-      accessibilityLabel="Audio block. Empty"
-      accessibilityRole="button"
-      accessible={true}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
       style={
         [
           [
-            undefined,
+            [
+              undefined,
+              undefined,
+            ],
             undefined,
             undefined,
           ],
@@ -416,33 +452,82 @@ exports[`Audio block renders placeholder without crashing 1`] = `
         ]
       }
     >
+      <View>
+        <View
+          style={
+            {
+              "fill": "black",
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <Svg
+              fill="black"
+              height={24}
+              style={{}}
+              viewBox="0 0 24 24"
+              width={24}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              Path
+            </Svg>
+          </View>
+        </View>
+        <Text>
+          Audio
+        </Text>
+      </View>
       <View
+        accessibilityHint="Double tap to select an audio file"
+        accessibilityLabel="Audio block. Empty"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 22,
+            "left": 22,
+            "right": 22,
+            "top": 22,
+          }
+        }
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           {
-            "fill": "gray",
+            "opacity": 1,
           }
         }
       >
-        <View
-          style={{}}
-        >
-          <Svg
-            height={24}
-            style={{}}
-            viewBox="0 0 24 24"
-            width={24}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            Path
-          </Svg>
-        </View>
+        <Text>
+          Add audio
+        </Text>
       </View>
-      <Text>
-        Audio
-      </Text>
-      <Text>
-        ADD AUDIO
-      </Text>
     </View>
   </View>
 </View>

package/src/avatar/block.json

@@ -48,6 +48,9 @@
 			"__experimentalDuotone": "img"
 		}
 	},
+	"selectors": {
+		"border": ".wp-block-avatar img"
+	},
 	"editorStyle": "wp-block-avatar-editor",
 	"style": "wp-block-avatar"
 }

package/src/avatar/edit.js

@@ -36,6 +36,7 @@ const AvatarInspectorControls = ( {
 		<PanelBody title={ __( 'Settings' ) }>
 			<RangeControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ __( 'Image size' ) }
 				onChange={ ( newSize ) =>
 					setAttributes( {

package/src/block/block.json

@@ -4,7 +4,8 @@
 	"name": "core/block",
 	"title": "Pattern",
 	"category": "reusable",
-	"description": "Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used.",
+	"description": "Create and save content to reuse across your site. Update the pattern, and the changes apply everywhere it’s used.",
+	"keywords": [ "reusable" ],
 	"textdomain": "default",
 	"attributes": {
 		"ref": {

package/src/block/edit.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useEntityBlockEditor,
 	useEntityProp,
@@ -10,8 +9,6 @@ import {
 import {
 	Placeholder,
 	Spinner,
-	ToolbarGroup,
-	ToolbarButton,
 	TextControl,
 	PanelBody,
 } from '@wordpress/components';
@@ -21,16 +18,12 @@ import {
 	__experimentalRecursionProvider as RecursionProvider,
 	__experimentalUseHasRecursion as useHasRecursion,
 	InnerBlocks,
-	BlockControls,
 	InspectorControls,
 	useBlockProps,
 	Warning,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-import { ungroup } from '@wordpress/icons';
 
-export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
+export default function ReusableBlockEdit( { attributes: { ref } } ) {
 	const hasAlreadyRendered = useHasRecursion( ref );
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
@@ -39,21 +32,6 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	);
 	const isMissing = hasResolved && ! record;
 
-	const { canRemove, innerBlockCount } = useSelect(
-		( select ) => {
-			const { canRemoveBlock, getBlockCount } =
-				select( blockEditorStore );
-			return {
-				canRemove: canRemoveBlock( clientId ),
-				innerBlockCount: getBlockCount( clientId ),
-			};
-		},
-		[ clientId ]
-	);
-
-	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
-		useDispatch( reusableBlocksStore );
-
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'wp_block',
@@ -112,22 +90,6 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 
 	return (
 		<RecursionProvider uniqueId={ ref }>
-			{ canRemove && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton
-							onClick={ () => convertBlockToStatic( clientId ) }
-							label={
-								innerBlockCount > 1
-									? __( 'Detach patterns' )
-									: __( 'Detach pattern' )
-							}
-							icon={ ungroup }
-							showTooltip
-						/>
-					</ToolbarGroup>
-				</BlockControls>
-			) }
 			<InspectorControls>
 				<PanelBody>
 					<TextControl

package/src/block/editor.native.scss

@@ -19,8 +19,8 @@
 	background-color: $light-gray-400;
 	height: 1px;
 	position: absolute;
-	left: -$block-selected-to-content + $block-selected-border-width;
-	right: -$block-selected-to-content + $block-selected-border-width;
+	left: -$grid-unit-05;
+	right: -$grid-unit-05;
 	bottom: 16;
 }
 

package/src/buttons/edit.js

@@ -51,8 +51,8 @@ function ButtonsEdit( { attributes, className } ) {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: true,
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		template: [
 			[
 				buttonBlockName,

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

@@ -324,6 +324,10 @@ describe( 'Buttons block', () => {
 
 			// Tap one color
 			fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
+			// TODO(jest-console): Fix the warning and remove the expect below.
+			expect( console ).toHaveWarnedWith(
+				`Non-serializable values were found in the navigation state. Check:\n\nColor > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+			);
 
 			// Dismiss the Block Settings modal.
 			fireEvent( blockSettingsModal, 'backdropPress' );

package/src/column/edit.native.js

@@ -42,7 +42,6 @@ function ColumnEdit( {
 	hasChildren,
 	isSelected,
 	getStylesFromColorScheme,
-	isParentSelected,
 	contentStyle,
 	columns,
 	selectedColumnIndex,
@@ -140,12 +139,10 @@ function ColumnEdit( {
 		return (
 			<View
 				style={ [
-					! isParentSelected &&
-						getStylesFromColorScheme(
-							styles.columnPlaceholder,
-							styles.columnPlaceholderDark
-						),
-					styles.columnPlaceholderNotSelected,
+					getStylesFromColorScheme(
+						styles.columnPlaceholder,
+						styles.columnPlaceholderDark
+					),
 					contentStyle[ clientId ],
 				] }
 			/>
@@ -258,8 +255,6 @@ export default compose( [
 
 		const parentId = getBlockRootClientId( clientId );
 		const hasChildren = !! getBlockCount( clientId );
-		const isParentSelected =
-			selectedBlockClientId && selectedBlockClientId === parentId;
 
 		const blockOrder = getBlockOrder( parentId );
 
@@ -271,7 +266,6 @@ export default compose( [
 
 		return {
 			hasChildren,
-			isParentSelected,
 			isSelected,
 			selectedColumnIndex,
 			columns,

package/src/column/editor.native.scss

@@ -1,7 +1,3 @@
-.columnPlaceholderNotSelected {
-	padding-top: $block-selected-to-content;
-}
-
 .columnPlaceholder {
 	flex: 1;
 	padding: $block-selected-to-content;

package/src/columns/edit.js

@@ -123,6 +123,7 @@ function ColumnsEditContainer( {
 						<>
 							<RangeControl
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Columns' ) }
 								value={ count }
 								onChange={ ( value ) =>

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import {
+	act,
 	addBlock,
 	fireEvent,
 	getEditorHtml,
@@ -290,6 +291,10 @@ describe( 'Columns block', () => {
 		// Get the first column
 		const firstColumnBlock = await getBlock( screen, 'Column' );
 		fireEvent.press( firstColumnBlock );
+		// Inner blocks batch store updates with microtasks.
+		// To avoid `act` warnings, we let queued microtasks to be executed.
+		// Reference: https://t.ly/b95nA
+		await act( async () => {} );
 
 		// Open vertical alignment menu
 		fireEvent.press( verticalAlignmentButton );

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

@@ -51,6 +51,7 @@ export default function Edit( {
 			<PanelBody title={ __( 'Avatar Settings' ) }>
 				<RangeControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'Image size' ) }
 					onChange={ ( newWidth ) =>
 						setAttributes( {

package/src/comment-template/index.php

@@ -8,6 +8,8 @@
 /**
  * Function that recursively renders a list of nested comments.
  *
+ * @since 6.3.0 Changed render_block_context priority to `1`.
+ *
  * @global int $comment_depth
  *
  * @param WP_Comment[] $comments        The array of comments.
@@ -35,8 +37,11 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 		 * We set commentId context through the `render_block_context` filter so
 		 * that dynamically inserted blocks (at `render_block` filter stage)
 		 * will also receive that context.
+		 *
+		 * Use an early priority to so that other 'render_block_context' filters
+		 * have access to the values.
 		 */
-		add_filter( 'render_block_context', $filter_block_context );
+		add_filter( 'render_block_context', $filter_block_context, 1 );
 
 		/*
 		 * We construct a new WP_Block instance from the parsed block so that
@@ -44,7 +49,7 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 		 */
 		$block_content = ( new WP_Block( $block->parsed_block ) )->render( array( 'dynamic' => false ) );
 
-		remove_filter( 'render_block_context', $filter_block_context );
+		remove_filter( 'render_block_context', $filter_block_context, 1 );
 
 		$children = $comment->get_children();
 

package/src/cover/block.json

@@ -111,7 +111,8 @@
 			"heading": true,
 			"text": true,
 			"background": false,
-			"__experimentalSkipSerialization": [ "gradients" ]
+			"__experimentalSkipSerialization": [ "gradients" ],
+			"enableContrastChecker": false
 		},
 		"typography": {
 			"fontSize": true,

package/src/cover/deprecated.js

@@ -329,6 +329,7 @@ const v11 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // Deprecation for blocks that renders fixed background as backgroud from the main block container.
@@ -465,6 +466,7 @@ const v10 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // Deprecation for blocks with `minHeightUnit` set but no `minHeight`.

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

@@ -220,6 +220,10 @@ describe( 'when an image is attached', () => {
 			'52'
 		);
 		fireEvent.press( screen.getByLabelText( 'Apply' ) );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\nFocalPoint > params.onFocalPointChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
 
 		expect( setAttributes ).toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -377,6 +381,10 @@ describe( 'color settings', () => {
 		// Find the selected color.
 		const colorPaletteButton = await screen.findByTestId( COLOR_PINK );
 		expect( colorPaletteButton ).toBeDefined();
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\nColor > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
 
 		// Select another color.
 		const newColorButton = await screen.findByTestId( COLOR_RED );