Fix native BlockAlignmentControl (#35191)

* Fix native BlockAlignmentControl A recent web-centric change introduced usage of `MenuGroup` and `MenuItem`, both of which are unsupported in the native editor currently. This updates the conditional within `BlockAlignmentControl` to reinstate the previous UI for the native platform. * Fix nuanced test irregularities Rename mistakenly named assignments, which were misleading. Additionally, the reliance upon the default `value="left"` could lead to a false-positive test. Changing to a none-default of `value="right"` improves the validity of the test. * Fix inconsistent test description Co-authored-by: Carlos Garcia <[email protected]> Co-authored-by: Carlos Garcia <[email protected]>
WordPress · Sep 29, 2021 · d989ce3 · d989ce3
1 parent 3e38ddc
commit d989ce3
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 63 deletions.
diff --git a/packages/block-editor/src/components/block-alignment-control/test/index.native.js b/packages/block-editor/src/components/block-alignment-control/test/index.native.js
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import BlockAlignmentUI from '../ui';
+
+it( 'should call onChange with undefined when the control is already active', () => {
+	const onChangeMock = jest.fn();
+	const screen = render(
+		<BlockAlignmentUI value="right" onChange={ onChangeMock } />
+	);
+	const alignButton = screen.getByA11yLabel( 'Align' );
+	fireEvent.press( alignButton );
+	const rightAlignmentButton = screen.getByA11yLabel( 'Align right' );
+	fireEvent.press( rightAlignmentButton );
+
+	expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+	expect( onChangeMock ).toHaveBeenCalledWith( undefined );
+} );
+
+it( 'should call onChange with alignment value when the control is inactive', () => {
+	const onChangeMock = jest.fn();
+	const screen = render(
+		<BlockAlignmentUI value="left" onChange={ onChangeMock } />
+	);
+	const alignButton = screen.getByA11yLabel( 'Align' );
+	fireEvent.press( alignButton );
+	const centerAlignmentButton = screen.getByA11yLabel( 'Align center' );
+	fireEvent.press( centerAlignmentButton );
+
+	expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+	expect( onChangeMock ).toHaveBeenCalledWith( 'center' );
+} );
diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -21,6 +21,7 @@ import {
 	stretchFullWidth,
 	stretchWide,
 } from '@wordpress/icons';
+import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -91,69 +92,72 @@ function BlockAlignmentUI( {
 		label: __( 'Align' ),
 		toggleProps: { describedBy: __( 'Change alignment' ) },
 	};
-	const extraProps = isToolbar
-		? {
-				isCollapsed,
-				controls: enabledControls.map( ( { name: controlName } ) => {
-					return {
-						...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
-						isActive:
-							value === controlName ||
-							( ! value && controlName === 'none' ),
-						role: isCollapsed ? 'menuitemradio' : undefined,
-						onClick: () => onChangeAlignment( controlName ),
-					};
-				} ),
-		  }
-		: {
-				children: ( { onClose } ) => {
-					return (
-						<>
-							<MenuGroup className="block-editor-block-alignment-control__menu-group">
-								{ enabledControls.map(
-									( { name: controlName, info } ) => {
-										const {
-											icon,
-											title,
-										} = BLOCK_ALIGNMENTS_CONTROLS[
-											controlName
-										];
-										// If no value is provided, mark as selected the `none` option.
-										const isSelected =
-											controlName === value ||
-											( ! value &&
-												controlName === 'none' );
-										return (
-											<MenuItem
-												key={ controlName }
-												icon={ icon }
-												iconPosition="left"
-												className={ classNames(
-													'components-dropdown-menu__menu-item',
-													{
-														'is-active': isSelected,
-													}
-												) }
-												isSelected={ isSelected }
-												onClick={ () => {
-													onChangeAlignment(
-														controlName
-													);
-													onClose();
-												} }
-												role="menuitemradio"
-												info={ info }
-											>
-												{ title }
-											</MenuItem>
-										);
-									}
-								) }
-							</MenuGroup>
-						</>
-					);
-				},
-		  };
+	const extraProps =
+		isToolbar || Platform.isNative
+			? {
+					isCollapsed: isToolbar ? isCollapsed : undefined,
+					controls: enabledControls.map(
+						( { name: controlName } ) => {
+							return {
+								...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
+								isActive:
+									value === controlName ||
+									( ! value && controlName === 'none' ),
+								role: isCollapsed ? 'menuitemradio' : undefined,
+								onClick: () => onChangeAlignment( controlName ),
+							};
+						}
+					),
+			  }
+			: {
+					children: ( { onClose } ) => {
+						return (
+							<>
+								<MenuGroup className="block-editor-block-alignment-control__menu-group">
+									{ enabledControls.map(
+										( { name: controlName, info } ) => {
+											const {
+												icon,
+												title,
+											} = BLOCK_ALIGNMENTS_CONTROLS[
+												controlName
+											];
+											// If no value is provided, mark as selected the `none` option.
+											const isSelected =
+												controlName === value ||
+												( ! value &&
+													controlName === 'none' );
+											return (
+												<MenuItem
+													key={ controlName }
+													icon={ icon }
+													iconPosition="left"
+													className={ classNames(
+														'components-dropdown-menu__menu-item',
+														{
+															'is-active': isSelected,
+														}
+													) }
+													isSelected={ isSelected }
+													onClick={ () => {
+														onChangeAlignment(
+															controlName
+														);
+														onClose();
+													} }
+													role="menuitemradio"
+													info={ info }
+												>
+													{ title }
+												</MenuItem>
+											);
+										}
+									) }
+								</MenuGroup>
+							</>
+						);
+					},
+			  };
 
 	return <UIComponent { ...commonProps } { ...extraProps } />;
 }

diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
@@ -135,4 +135,7 @@ module.exports = {
 	buttonNoBg: {
 		color: 'orange',
 	},
+	isSelected: {
+		color: 'blue',
+	},
 };