@wordpress/block-editor 11.4.0 → 11.5.0

package/src/components/block-inspector/useBlockInspectorAnimationSettings.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function useBlockInspectorAnimationSettings(
+	blockType,
+	selectedBlockClientId
+) {
+	return useSelect(
+		( select ) => {
+			if ( blockType ) {
+				const globalBlockInspectorAnimationSettings =
+					select( blockEditorStore ).getSettings()
+						.blockInspectorAnimation;
+
+				// Get the name of the block that will allow it's children to be animated.
+				const animationParent =
+					globalBlockInspectorAnimationSettings?.animationParent;
+
+				// Determine whether the animationParent block is a parent of the selected block.
+				const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+					select( blockEditorStore );
+				const _selectedBlockClientId = getSelectedBlockClientId();
+				const animationParentBlockClientId = getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					animationParent,
+					true
+				)[ 0 ];
+
+				// If the selected block is not a child of the animationParent block,
+				// and not an animationParent block itself, don't animate.
+				if (
+					! animationParentBlockClientId &&
+					blockType.name !== animationParent
+				) {
+					return null;
+				}
+
+				return globalBlockInspectorAnimationSettings?.[
+					blockType.name
+				];
+			}
+			return null;
+		},
+		[ selectedBlockClientId, blockType ]
+	);
+}

package/src/components/block-lock/modal.js

@@ -187,6 +187,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					</ul>
 					{ hasTemplateLock && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							className="block-editor-block-lock-modal__template-lock"
 							label={ __( 'Apply to all blocks inside' ) }
 							checked={ applyTemplateLock }

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

@@ -18,11 +18,6 @@
 	.components-checkbox-control__label {
 		font-weight: 600;
 	}
-
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-	}
 }
 .block-editor-block-lock-modal__checklist-item {
 	display: flex;
@@ -48,10 +43,6 @@
 	border-top: $border-width solid $gray-300;
 	margin-top: $grid-unit-20;
 	padding: $grid-unit-15 0;
-
-	.components-base-control__field {
-		margin: 0;
-	}
 }
 
 .block-editor-block-lock-modal__actions {

package/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap

@@ -6,25 +6,25 @@ exports[`Block Actions Menu block options copies and pastes a block 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- 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 Actions Menu block options cuts and pastes a block 1`] = `
 "<!-- 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 -->
 
 <!-- wp:paragraph -->
@@ -38,15 +38,15 @@ exports[`Block Actions Menu block options does not replace a non empty Paragraph
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- 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 -->"
 `;
 
@@ -56,29 +56,29 @@ exports[`Block Actions Menu block options duplicates a block 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 -->
 
 <!-- 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 Actions Menu block options transforms a Paragraph block into a Pullquote block 1`] = `
 "<!-- wp:pullquote -->
-<figure class=\\"wp-block-pullquote\\"><blockquote><p>Hello!</p></blockquote></figure>
+<figure class="wp-block-pullquote"><blockquote><p>Hello!</p></blockquote></figure>
 <!-- /wp:pullquote -->
 
 <!-- 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 -->"
 `;
 
@@ -88,11 +88,11 @@ exports[`Block Actions Menu 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 -->"
 `;
 
@@ -102,17 +102,17 @@ exports[`Block Actions Menu 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 Actions Menu 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 -->
@@ -120,6 +120,6 @@ exports[`Block Actions Menu 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 -->"
 `;

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,7 +93,7 @@ Array [
       >
         <View
           style={
-            Object {
+            {
               "flexDirection": "row",
             }
           }
@@ -109,7 +109,7 @@ Array [
       accessibilityLabel="Move block right"
       accessibilityRole="button"
       accessibilityState={
-        Object {
+        {
           "disabled": true,
         }
       }
@@ -124,7 +124,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "alignItems": "center",
           "flex": 1,
           "justifyContent": "center",
@@ -140,7 +140,7 @@ Array [
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
         style={
-          Object {
+          {
             "alignItems": "center",
             "aspectRatio": 1,
             "flex": 1,
@@ -152,7 +152,7 @@ Array [
       >
         <View
           style={
-            Object {
+            {
               "flexDirection": "row",
             }
           }

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

@@ -158,7 +158,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/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;