@wordpress/block-editor 11.4.0 → 11.6.0

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -6,11 +6,11 @@ exports[`Block Mover Picker moving blocks disables the Move Down button for the
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
@@ -20,17 +20,17 @@ exports[`Block Mover Picker moving blocks disables the Move Up button for the fi
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
 "<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -38,19 +38,19 @@ exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
 
 exports[`Block Mover Picker should match snapshot 1`] = `
-Array [
+[
   <View>
     <View
       accessibilityHint="Double tap to move the block to the left"
       accessibilityLabel="Move block left from position 2 to position 1"
       accessibilityRole="button"
       accessibilityState={
-        Object {
+        {
           "disabled": false,
         }
       }
@@ -65,7 +65,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "alignItems": "center",
           "flex": 1,
           "justifyContent": "center",
@@ -81,7 +81,7 @@ Array [
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
         style={
-          Object {
+          {
             "alignItems": "center",
             "aspectRatio": 1,
             "flex": 1,
@@ -93,12 +93,21 @@ Array [
       >
         <View
           style={
-            Object {
+            {
               "flexDirection": "row",
             }
           }
         >
-          Svg
+          <Svg
+            colorScheme="light"
+            height={24}
+            style={{}}
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
         </View>
       </View>
     </View>
@@ -109,7 +118,7 @@ Array [
       accessibilityLabel="Move block right"
       accessibilityRole="button"
       accessibilityState={
-        Object {
+        {
           "disabled": true,
         }
       }
@@ -124,7 +133,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "alignItems": "center",
           "flex": 1,
           "justifyContent": "center",
@@ -140,7 +149,7 @@ Array [
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
         style={
-          Object {
+          {
             "alignItems": "center",
             "aspectRatio": 1,
             "flex": 1,
@@ -152,12 +161,21 @@ Array [
       >
         <View
           style={
-            Object {
+            {
               "flexDirection": "row",
             }
           }
         >
-          Svg
+          <Svg
+            colorScheme="light"
+            height={24}
+            style={{}}
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
         </View>
       </View>
     </View>

package/src/components/block-preview/test/index.js

@@ -17,8 +17,6 @@ import {
  */
 import { useBlockPreview } from '../';
 
-jest.useRealTimers();
-
 describe( 'useBlockPreview', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block', {

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -147,7 +147,9 @@ export function BlockSettingsDropdown( {
 		__experimentalSelectBlock
 			? () => {
 					const blockToSelect =
-						previousBlockClientId || nextBlockClientId;
+						previousBlockClientId ||
+						nextBlockClientId ||
+						firstParentClientId;
 
 					if (
 						blockToSelect &&
@@ -166,6 +168,7 @@ export function BlockSettingsDropdown( {
 			__experimentalSelectBlock,
 			previousBlockClientId,
 			nextBlockClientId,
+			firstParentClientId,
 			selectedBlockClientIds,
 		]
 	);

package/src/components/block-settings-menu-controls/index.js

@@ -48,7 +48,8 @@ const BlockSettingsMenuControlsSlot = ( {
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
-	const convertToGroupButtonProps = useConvertToGroupButtonProps();
+	const convertToGroupButtonProps =
+		useConvertToGroupButtonProps( selectedClientIds );
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton =
 		( isGroupable || isUngroupable ) && canRemove;

package/src/components/block-styles/index.js

@@ -99,7 +99,11 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 				} ) }
 			</div>
 			{ hoveredStyle && ! isMobileViewport && (
-				<Popover placement="left-start" offset={ 20 }>
+				<Popover
+					placement="left-start"
+					offset={ 20 }
+					focusOnMount={ false }
+				>
 					<div
 						className="block-editor-block-styles__preview-panel"
 						onMouseLeave={ () => styleItemHandler( null ) }

package/src/components/block-styles/style.scss

@@ -38,7 +38,7 @@
 	gap: $grid-unit-10;
 
 	.block-editor-block-styles__item {
-		color: $gray-800;
+		color: $gray-900;
 		box-shadow: inset 0 0 0 1px $gray-400;
 		display: inline-block;
 		width: calc(50% - #{$grid-unit-05});
@@ -51,7 +51,7 @@
 
 		&.is-active,
 		&.is-active:hover {
-			background-color: $gray-800;
+			background-color: $gray-900;
 			box-shadow: none;
 		}
 

package/src/components/block-switcher/block-transformations-menu.native.js

@@ -75,6 +75,7 @@ const BlockTransformationsMenu = ( {
 
 	return (
 		<Picker
+			testID="block-transformations-menu"
 			ref={ pickerRef }
 			options={ pickerOptions() }
 			onChange={ onPickerSelect }

package/src/components/child-layout-control/index.js

@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+
+function helpText( selfStretch, parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	if ( selfStretch === 'fill' ) {
+		return __( 'Stretch to fill available space.' );
+	}
+	if ( selfStretch === 'fixed' && orientation === 'horizontal' ) {
+		return __( 'Specify a fixed width.' );
+	} else if ( selfStretch === 'fixed' ) {
+		return __( 'Specify a fixed height.' );
+	}
+	return __( 'Fit contents.' );
+}
+
+/**
+ * Form to edit the child layout value.
+ *
+ * @param {Object}   props              Props.
+ * @param {Object}   props.value        The child layout value.
+ * @param {Function} props.onChange     Function to update the child layout value.
+ * @param {Object}   props.parentLayout The parent layout value.
+ *
+ * @return {WPElement} child layout edit element.
+ */
+export default function ChildLayoutControl( {
+	value: childLayout = {},
+	onChange,
+	parentLayout,
+} ) {
+	const { selfStretch, flexSize } = childLayout;
+
+	useEffect( () => {
+		if ( selfStretch === 'fixed' && ! flexSize ) {
+			onChange( {
+				...childLayout,
+				selfStretch: 'fit',
+			} );
+		}
+	}, [] );
+
+	return (
+		<>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				size={ '__unstable-large' }
+				label={ childLayoutOrientation( parentLayout ) }
+				value={ selfStretch || 'fit' }
+				help={ helpText( selfStretch, parentLayout ) }
+				onChange={ ( value ) => {
+					const newFlexSize = value !== 'fixed' ? null : flexSize;
+					onChange( {
+						...childLayout,
+						selfStretch: value,
+						flexSize: newFlexSize,
+					} );
+				} }
+				isBlock={ true }
+			>
+				<ToggleGroupControlOption
+					key={ 'fit' }
+					value={ 'fit' }
+					label={ __( 'Fit' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fill' }
+					value={ 'fill' }
+					label={ __( 'Fill' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fixed' }
+					value={ 'fixed' }
+					label={ __( 'Fixed' ) }
+				/>
+			</ToggleGroupControl>
+			{ selfStretch === 'fixed' && (
+				<UnitControl
+					size={ '__unstable-large' }
+					onChange={ ( value ) => {
+						onChange( {
+							...childLayout,
+							flexSize: value,
+						} );
+					} }
+					value={ flexSize }
+				/>
+			) }
+		</>
+	);
+}
+
+export function childLayoutOrientation( parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+}

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -22,17 +22,18 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: calc(4px * 1);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-4>* {
@@ -54,17 +55,18 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: calc(4px * 3);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-8>* {
@@ -158,7 +160,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="true"
-                  aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
+                  aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
                   class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
                   data-wp-c16t="true"
                   data-wp-component="Flex"

package/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js

@@ -25,59 +25,69 @@ import { store as blockEditorStore } from '../../store';
  * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`
  * should be rendered, to avoid ending up with an empty MenuGroup.
  *
+ * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks
+ *                                      from the block editor store are used if this is not provided.
+ *
  * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.
  */
-export default function useConvertToGroupButtonProps() {
+export default function useConvertToGroupButtonProps( selectedClientIds ) {
 	const {
 		clientIds,
 		isGroupable,
 		isUngroupable,
 		blocksSelection,
 		groupingBlockName,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockRootClientId,
-			getBlocksByClientId,
-			canInsertBlockType,
-			getSelectedBlockClientIds,
-		} = select( blockEditorStore );
-		const { getGroupingBlockName } = select( blocksStore );
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlocksByClientId,
+				canInsertBlockType,
+				getSelectedBlockClientIds,
+			} = select( blockEditorStore );
+			const { getGroupingBlockName } = select( blocksStore );
+
+			const _clientIds = selectedClientIds?.length
+				? selectedClientIds
+				: getSelectedBlockClientIds();
+			const _groupingBlockName = getGroupingBlockName();
 
-		const _clientIds = getSelectedBlockClientIds();
-		const _groupingBlockName = getGroupingBlockName();
+			const rootClientId = !! _clientIds?.length
+				? getBlockRootClientId( _clientIds[ 0 ] )
+				: undefined;
 
-		const rootClientId = !! _clientIds?.length
-			? getBlockRootClientId( _clientIds[ 0 ] )
-			: undefined;
+			const groupingBlockAvailable = canInsertBlockType(
+				_groupingBlockName,
+				rootClientId
+			);
 
-		const groupingBlockAvailable = canInsertBlockType(
-			_groupingBlockName,
-			rootClientId
-		);
+			const _blocksSelection = getBlocksByClientId( _clientIds );
 
-		const _blocksSelection = getBlocksByClientId( _clientIds );
+			const isSingleGroupingBlock =
+				_blocksSelection.length === 1 &&
+				_blocksSelection[ 0 ]?.name === _groupingBlockName;
 
-		const isSingleGroupingBlock =
-			_blocksSelection.length === 1 &&
-			_blocksSelection[ 0 ]?.name === _groupingBlockName;
+			// Do we have
+			// 1. Grouping block available to be inserted?
+			// 2. One or more blocks selected
+			const _isGroupable =
+				groupingBlockAvailable && _blocksSelection.length;
 
-		// Do we have
-		// 1. Grouping block available to be inserted?
-		// 2. One or more blocks selected
-		const _isGroupable = groupingBlockAvailable && _blocksSelection.length;
+			// Do we have a single Group Block selected and does that group have inner blocks?
+			const _isUngroupable =
+				isSingleGroupingBlock &&
+				!! _blocksSelection[ 0 ].innerBlocks.length;
+			return {
+				clientIds: _clientIds,
+				isGroupable: _isGroupable,
+				isUngroupable: _isUngroupable,
+				blocksSelection: _blocksSelection,
+				groupingBlockName: _groupingBlockName,
+			};
+		},
+		[ selectedClientIds ]
+	);
 
-		// Do we have a single Group Block selected and does that group have inner blocks?
-		const _isUngroupable =
-			isSingleGroupingBlock &&
-			!! _blocksSelection[ 0 ].innerBlocks.length;
-		return {
-			clientIds: _clientIds,
-			isGroupable: _isGroupable,
-			isUngroupable: _isUngroupable,
-			blocksSelection: _blocksSelection,
-			groupingBlockName: _groupingBlockName,
-		};
-	}, [] );
 	return {
 		clientIds,
 		isGroupable,

package/src/components/date-format-picker/index.js

@@ -50,14 +50,12 @@ export default function DateFormatPicker( {
 		<fieldset className="block-editor-date-format-picker">
 			<VisuallyHidden as="legend">{ __( 'Date format' ) }</VisuallyHidden>
 			<ToggleControl
-				label={
-					<>
-						{ __( 'Default format' ) }
-						<span className="block-editor-date-format-picker__default-format-toggle-control__hint">
-							{ dateI18n( defaultFormat, EXAMPLE_DATE ) }
-						</span>
-					</>
-				}
+				__nextHasNoMarginBottom
+				label={ __( 'Default format' ) }
+				help={ `${ __( 'Example:' ) }  ${ dateI18n(
+					defaultFormat,
+					EXAMPLE_DATE
+				) }` }
 				checked={ ! format }
 				onChange={ ( checked ) =>
 					onChange( checked ? null : defaultFormat )

package/src/components/date-format-picker/style.scss

@@ -2,11 +2,6 @@
 	margin-bottom: $grid-unit-20;
 }
 
-.block-editor-date-format-picker__default-format-toggle-control__hint {
-	color: $gray-700;
-	display: block;
-}
-
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
 	border-top: 1px solid $gray-300;