@wordpress/block-editor 12.1.0 → 12.3.0

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

@@ -78,45 +78,52 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
+  -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: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-10>* {
-  min-width: 0;
+  min-height: 0;
 }
 
-.emotion-13 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -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 * 0.5);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-12>* {
   min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
 }
 
-.emotion-15 {
+.emotion-14 {
   display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 <div>
@@ -157,30 +164,39 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 class="components-dropdown"
                 tabindex="-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"."
-                  class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
+                <div
+                  class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-10 emotion-5"
                   data-wp-c16t="true"
-                  data-wp-component="Flex"
-                  style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
+                  data-wp-component="VStack"
                 >
-                  <span
-                    class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
-                    data-wp-c16t="true"
-                    data-wp-component="FlexItem"
-                  >
-                    red
-                  </span>
-                  <span
-                    class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
+                    class="components-color-palette__custom-color-button"
+                    style="background: rgb(255, 0, 0);"
+                  />
+                  <div
+                    class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-12 emotion-5"
                     data-wp-c16t="true"
-                    data-wp-component="FlexItem"
+                    data-wp-component="VStack"
                   >
-                    f00
-                  </span>
-                </button>
+                    <span
+                      class="components-truncate components-color-palette__custom-color-name emotion-14 emotion-5"
+                      data-wp-c16t="true"
+                      data-wp-component="Truncate"
+                    >
+                      red
+                    </span>
+                    <span
+                      class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
+                      data-wp-c16t="true"
+                      data-wp-component="Truncate"
+                    >
+                      #f00
+                    </span>
+                  </div>
+                </div>
               </div>
               <div
                 class="components-circular-option-picker"

package/src/components/color-palette/with-color-context.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -23,7 +18,8 @@ export default createHigherOrderComponent( ( WrappedComponent ) => {
 			props.disableCustomColors === undefined
 				? disableCustomColorsFeature
 				: props.disableCustomColors;
-		const hasColorsToChoose = ! isEmpty( colors ) || ! disableCustomColors;
+		const hasColorsToChoose =
+			( colors && colors.length > 0 ) || ! disableCustomColors;
 		return (
 			<WrappedComponent
 				{ ...{

package/src/components/colors-gradients/control.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -58,10 +57,11 @@ function ColorGradientControlInner( {
 	headingLevel,
 } ) {
 	const canChooseAColor =
-		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
+		onColorChange &&
+		( ( colors && colors.length > 0 ) || ! disableCustomColors );
 	const canChooseAGradient =
 		onGradientChange &&
-		( ! isEmpty( gradients ) || ! disableCustomGradients );
+		( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );
 
 	if ( ! canChooseAColor && ! canChooseAGradient ) {
 		return null;

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -43,14 +42,14 @@ export const PanelColorGradientSettingsInner = ( {
 	const panelId = useInstanceId( PanelColorGradientSettingsInner );
 	const { batch } = useRegistry();
 	if (
-		isEmpty( colors ) &&
-		isEmpty( gradients ) &&
+		( ! colors || colors.length === 0 ) &&
+		( ! gradients || gradients.length === 0 ) &&
 		disableCustomColors &&
 		disableCustomGradients &&
 		settings?.every(
 			( setting ) =>
-				isEmpty( setting.colors ) &&
-				isEmpty( setting.gradients ) &&
+				( ! setting.colors || setting.colors.length === 0 ) &&
+				( ! setting.gradients || setting.gradients.length === 0 ) &&
 				( setting.disableCustomColors === undefined ||
 					setting.disableCustomColors ) &&
 				( setting.disableCustomGradients === undefined ||

package/src/components/convert-to-group-buttons/index.js

@@ -17,6 +17,7 @@ function ConvertToGroupButton( {
 	clientIds,
 	isGroupable,
 	isUngroupable,
+	onUngroup,
 	blocksSelection,
 	groupingBlockName,
 	onClose = () => {},
@@ -34,10 +35,16 @@ function ConvertToGroupButton( {
 	};
 
 	const onConvertFromGroup = () => {
-		const innerBlocks = blocksSelection[ 0 ].innerBlocks;
+		let innerBlocks = blocksSelection[ 0 ].innerBlocks;
 		if ( ! innerBlocks.length ) {
 			return;
 		}
+		if ( onUngroup ) {
+			innerBlocks = onUngroup(
+				blocksSelection[ 0 ].attributes,
+				blocksSelection[ 0 ].innerBlocks
+			);
+		}
 		replaceBlocks( clientIds, innerBlocks );
 	};
 
@@ -66,7 +73,7 @@ function ConvertToGroupButton( {
 				>
 					{ _x(
 						'Ungroup',
-						'Ungrouping blocks from within a Group block back into individual blocks within the Editor '
+						'Ungrouping blocks from within a grouping block back into individual blocks within the Editor '
 					) }
 				</MenuItem>
 			) }

package/src/components/convert-to-group-buttons/index.native.js

@@ -1 +1,79 @@
-export default () => null;
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { switchToBlockType } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import useConvertToGroupButtonProps from './use-convert-to-group-button-props';
+
+function useConvertToGroupButtons( {
+	clientIds,
+	onUngroup,
+	blocksSelection,
+	groupingBlockName,
+} ) {
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const onConvertToGroup = () => {
+		// Activate the `transform` on the Grouping Block which does the conversion.
+		const newBlocks = switchToBlockType(
+			blocksSelection,
+			groupingBlockName
+		);
+		if ( newBlocks ) {
+			replaceBlocks( clientIds, newBlocks );
+		}
+	};
+
+	const onConvertFromGroup = () => {
+		let innerBlocks = blocksSelection[ 0 ].innerBlocks;
+		if ( ! innerBlocks.length ) {
+			return;
+		}
+		if ( onUngroup ) {
+			innerBlocks = onUngroup(
+				blocksSelection[ 0 ].attributes,
+				blocksSelection[ 0 ].innerBlocks
+			);
+		}
+		replaceBlocks( clientIds, innerBlocks );
+	};
+
+	return {
+		group: {
+			id: 'groupButtonOption',
+			label: _x( 'Group', 'verb' ),
+			value: 'groupButtonOption',
+			onSelect: () => {
+				onConvertToGroup();
+				createSuccessNotice(
+					// translators: displayed right after the block is grouped
+					__( 'Block grouped' )
+				);
+			},
+		},
+		ungroup: {
+			id: 'ungroupButtonOption',
+			label: _x(
+				'Ungroup',
+				'Ungrouping blocks from within a grouping block back into individual blocks within the Editor'
+			),
+			value: 'ungroupButtonOption',
+			onSelect: () => {
+				onConvertFromGroup();
+				createSuccessNotice(
+					// translators: displayed right after the block is ungrouped.
+					__( 'Block ungrouped' )
+				);
+			},
+		},
+	};
+}
+
+export { useConvertToGroupButtons, useConvertToGroupButtonProps };

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

@@ -31,13 +31,7 @@ import { store as blockEditorStore } from '../../store';
  * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.
  */
 export default function useConvertToGroupButtonProps( selectedClientIds ) {
-	const {
-		clientIds,
-		isGroupable,
-		isUngroupable,
-		blocksSelection,
-		groupingBlockName,
-	} = useSelect(
+	return useSelect(
 		( select ) => {
 			const {
 				getBlockRootClientId,
@@ -45,54 +39,54 @@ export default function useConvertToGroupButtonProps( selectedClientIds ) {
 				canInsertBlockType,
 				getSelectedBlockClientIds,
 			} = select( blockEditorStore );
-			const { getGroupingBlockName } = select( blocksStore );
-
-			const _clientIds = selectedClientIds?.length
+			const { getGroupingBlockName, getBlockType } =
+				select( blocksStore );
+			const clientIds = selectedClientIds?.length
 				? selectedClientIds
 				: getSelectedBlockClientIds();
-			const _groupingBlockName = getGroupingBlockName();
+			const groupingBlockName = getGroupingBlockName();
 
-			const rootClientId = !! _clientIds?.length
-				? getBlockRootClientId( _clientIds[ 0 ] )
+			const rootClientId = clientIds?.length
+				? getBlockRootClientId( clientIds[ 0 ] )
 				: undefined;
 
 			const groupingBlockAvailable = canInsertBlockType(
-				_groupingBlockName,
+				groupingBlockName,
 				rootClientId
 			);
 
-			const _blocksSelection = getBlocksByClientId( _clientIds );
-
-			const isSingleGroupingBlock =
-				_blocksSelection.length === 1 &&
-				_blocksSelection[ 0 ]?.name === _groupingBlockName;
+			const blocksSelection = getBlocksByClientId( clientIds );
+			const isSingleBlockSelected = blocksSelection.length === 1;
+			const [ firstSelectedBlock ] = blocksSelection;
+			// A block is ungroupable if it is a single grouping block with inner blocks.
+			// If a block has an `ungroup` transform, it is also ungroupable, without the
+			// requirement of being the default grouping block.
+			// Do we have a single grouping Block selected and does that group have inner blocks?
+			const isUngroupable =
+				isSingleBlockSelected &&
+				( firstSelectedBlock.name === groupingBlockName ||
+					getBlockType( firstSelectedBlock.name )?.transforms
+						?.ungroup ) &&
+				!! firstSelectedBlock.innerBlocks.length;
 
 			// Do we have
 			// 1. Grouping block available to be inserted?
 			// 2. One or more blocks selected
-			const _isGroupable =
-				groupingBlockAvailable && _blocksSelection.length;
+			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,
+				clientIds,
+				isGroupable,
+				isUngroupable,
+				blocksSelection,
+				groupingBlockName,
+				onUngroup:
+					isUngroupable &&
+					getBlockType( firstSelectedBlock.name )?.transforms
+						?.ungroup,
 			};
 		},
 		[ selectedClientIds ]
 	);
-
-	return {
-		clientIds,
-		isGroupable,
-		isUngroupable,
-		blocksSelection,
-		groupingBlockName,
-	};
 }

package/src/components/global-styles/dimensions-panel.js

@@ -103,8 +103,9 @@ function useHasSpacingPresets( settings ) {
 }
 
 function filterValuesBySides( values, sides ) {
-	if ( ! sides ) {
-		// If no custom side configuration all sides are opted into by default.
+	// If no custom side configuration, all sides are opted into by default.
+	// Without any values, we have nothing to filter either.
+	if ( ! sides || ! values ) {
 		return values;
 	}
 
@@ -206,8 +207,19 @@ export default function DimensionsPanel( {
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
 } ) {
-	const decodeValue = ( rawValue ) =>
-		getValueFromVariable( { settings }, '', rawValue );
+	const decodeValue = ( rawValue ) => {
+		if ( rawValue && typeof rawValue === 'object' ) {
+			return Object.keys( rawValue ).reduce( ( acc, key ) => {
+				acc[ key ] = getValueFromVariable(
+					{ settings },
+					'',
+					rawValue[ key ]
+				);
+				return acc;
+			}, {} );
+		}
+		return getValueFromVariable( { settings }, '', rawValue );
+	};
 
 	const showSpacingPresetsControl = useHasSpacingPresets( settings );
 	const units = useCustomUnits( {
@@ -487,7 +499,6 @@ export default function DimensionsPanel( {
 							sides={ paddingSides }
 							units={ units }
 							allowReset={ false }
-							splitOnAxis={ isAxialPadding }
 							onMouseOver={ onMouseOverPadding }
 							onMouseOut={ onMouseLeaveControls }
 						/>
@@ -528,7 +539,6 @@ export default function DimensionsPanel( {
 							sides={ marginSides }
 							units={ units }
 							allowReset={ false }
-							splitOnAxis={ isAxialMargin }
 							onMouseOver={ onMouseOverMargin }
 							onMouseOut={ onMouseLeaveControls }
 						/>
@@ -575,10 +585,10 @@ export default function DimensionsPanel( {
 							label={ __( 'Block spacing' ) }
 							min={ 0 }
 							onChange={ setGapValues }
+							showSideInLabel={ false }
 							sides={ isAxialGap ? gapSides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
 							values={ gapValues }
 							allowReset={ false }
-							splitOnAxis={ isAxialGap }
 						/>
 					) }
 				</ToolsPanelItem>

package/src/components/global-styles/get-block-css-selector.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ export function getBlockCSSSelector(
 	const { fallback = false } = options;
 	const { name, selectors, supports } = blockType;
 
-	const hasSelectors = ! isEmpty( selectors );
+	const hasSelectors = selectors && Object.keys( selectors ).length > 0;
 	const path = Array.isArray( target ) ? target.join( '.' ) : target;
 
 	// Root selector.

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

@@ -44,6 +44,9 @@
 
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
 	font-family: $editor_html_font;
+	// CSS input is always LTR regardless of language.
+	/*rtl:ignore*/
+	direction: ltr;
 }
 
 .block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {

package/src/components/global-styles/test/typography-utils.js

@@ -1,7 +1,10 @@
 /**
  * Internal dependencies
  */
-import { getTypographyFontSizeValue } from '../typography-utils';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from '../typography-utils';
 
 describe( 'typography utils', () => {
 	describe( 'getTypographyFontSizeValue', () => {
@@ -170,6 +173,58 @@ describe( 'typography utils', () => {
 					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
 			},
 
+			{
+				message:
+					'returns clamp value where min and max fluid values defined',
+				preset: {
+					size: '80px',
+					fluid: {
+						min: '70px',
+						max: '125px',
+					},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)',
+			},
+
+			{
+				message:
+					'should apply maxViewPortWidth as maximum viewport width',
+				preset: {
+					size: '80px',
+					fluid: {
+						min: '70px',
+						max: '125px',
+					},
+				},
+				typographySettings: {
+					fluid: {
+						maxViewPortWidth: '1100px',
+					},
+				},
+				expected:
+					'clamp(70px, 4.375rem + ((1vw - 3.2px) * 7.051), 125px)',
+			},
+
+			{
+				message: 'returns clamp value where max is equal to size',
+				preset: {
+					size: '7.8125rem',
+					fluid: {
+						min: '4.375rem',
+						max: '7.8125rem',
+					},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)',
+			},
+
 			{
 				message:
 					'should return clamp value if min font size is greater than max',
@@ -431,4 +486,87 @@ describe( 'typography utils', () => {
 			} );
 		} );
 	} );
+
+	describe( 'typography utils', () => {
+		[
+			{
+				message:
+					'should return `undefined` when settings is `undefined`',
+				settings: undefined,
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `undefined` when typography is `undefined`',
+				settings: {},
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `undefined` when typography.fluid is `undefined`',
+				settings: { typography: {} },
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `false` when typography.fluid is disabled by `false`',
+				settings: { typography: { fluid: false } },
+				expected: { fluid: false },
+			},
+
+			{
+				message: 'should return `{}` when typography.fluid is empty',
+				settings: { typography: { fluid: {} } },
+				expected: { fluid: {} },
+			},
+
+			{
+				message:
+					'should return false when typography.fluid is disabled and layout.wideSize is defined',
+				settings: {
+					typography: { fluid: false },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: { fluid: false },
+			},
+
+			{
+				message:
+					'should return true when fluid is enabled by a boolean',
+				settings: { typography: { fluid: true } },
+				expected: { fluid: true },
+			},
+
+			{
+				message:
+					'should return fluid settings with merged `layout.wideSize`d',
+				settings: {
+					typography: { fluid: { minFontSize: '16px' } },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: {
+					fluid: { maxViewPortWidth: '1000rem', minFontSize: '16px' },
+				},
+			},
+
+			{
+				message:
+					'should prioritize fluid `maxViewPortWidth` over `layout.wideSize`',
+				settings: {
+					typography: { fluid: { maxViewPortWidth: '10px' } },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: { fluid: { maxViewPortWidth: '10px' } },
+			},
+		].forEach( ( { message, settings, expected } ) => {
+			it( `${ message }`, () => {
+				expect(
+					getFluidTypographyOptionsFromSettings( settings )
+				).toEqual( expected );
+			} );
+		} );
+	} );
 } );