diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js
index 1124f44f033e1..981e8d6f9914d 100644
--- a/packages/block-editor/src/components/alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/alignment-toolbar/index.js
@@ -8,34 +8,26 @@ import { find } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { Toolbar } from '@wordpress/components';
-import { withViewportMatch } from '@wordpress/viewport';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { withBlockEditContext } from '../block-edit/context';
 
 const DEFAULT_ALIGNMENT_CONTROLS = [
 	{
 		icon: 'editor-alignleft',
-		title: __( 'Align text left' ),
+		title: __( 'Align Text Left' ),
 		align: 'left',
 	},
 	{
 		icon: 'editor-aligncenter',
-		title: __( 'Align text center' ),
+		title: __( 'Align Text Center' ),
 		align: 'center',
 	},
 	{
 		icon: 'editor-alignright',
-		title: __( 'Align text right' ),
+		title: __( 'Align Text Right' ),
 		align: 'right',
 	},
 ];
 
-export function AlignmentToolbar( { isCollapsed, value, onChange, alignmentControls = DEFAULT_ALIGNMENT_CONTROLS } ) {
+export function AlignmentToolbar( { value, onChange, alignmentControls = DEFAULT_ALIGNMENT_CONTROLS, isCollapsed = true } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
 	}
@@ -46,7 +38,7 @@ export function AlignmentToolbar( { isCollapsed, value, onChange, alignmentContr
 		<Toolbar
 			isCollapsed={ isCollapsed }
 			icon={ activeAlignment ? activeAlignment.icon : 'editor-alignleft' }
-			label={ __( 'Change Text Alignment' ) }
+			label={ __( 'Change text alignment' ) }
 			controls={ alignmentControls.map( ( control ) => {
 				const { align } = control;
 				const isActive = ( value === align );
@@ -61,20 +53,4 @@ export function AlignmentToolbar( { isCollapsed, value, onChange, alignmentContr
 	);
 }
 
-export default compose(
-	withBlockEditContext( ( { clientId } ) => {
-		return {
-			clientId,
-		};
-	} ),
-	withViewportMatch( { isLargeViewport: 'medium' } ),
-	withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => {
-		const { getBlockRootClientId, getSettings } = select( 'core/block-editor' );
-		return {
-			isCollapsed: isCollapsed || ! isLargeViewport || (
-				! getSettings().hasFixedToolbar &&
-				getBlockRootClientId( clientId )
-			),
-		};
-	} ),
-)( AlignmentToolbar );
+export default AlignmentToolbar;
diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
index 34e440f5d76fe..5ea348074add6 100644
--- a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
@@ -21,7 +21,8 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified
     ]
   }
   icon="editor-aligncenter"
-  label="Change Text Alignment"
+  isCollapsed={true}
+  label="Change text alignment"
 />
 `;
 
@@ -34,25 +35,26 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
         "icon": "editor-alignleft",
         "isActive": true,
         "onClick": [Function],
-        "title": "Align text left",
+        "title": "Align Text Left",
       },
       Object {
         "align": "center",
         "icon": "editor-aligncenter",
         "isActive": false,
         "onClick": [Function],
-        "title": "Align text center",
+        "title": "Align Text Center",
       },
       Object {
         "align": "right",
         "icon": "editor-alignright",
         "isActive": false,
         "onClick": [Function],
-        "title": "Align text right",
+        "title": "Align Text Right",
       },
     ]
   }
   icon="editor-alignleft"
-  label="Change Text Alignment"
+  isCollapsed={true}
+  label="Change text alignment"
 />
 `;
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
index adf02cd90b08b..e766504f0d9f4 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Toolbar } from '@wordpress/components';
-import { withViewportMatch } from '@wordpress/viewport';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -15,30 +14,31 @@ import { withBlockEditContext } from '../block-edit/context';
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	left: {
 		icon: 'align-left',
-		title: __( 'Align left' ),
+		title: __( 'Align Left' ),
 	},
 	center: {
 		icon: 'align-center',
-		title: __( 'Align center' ),
+		title: __( 'Align Center' ),
 	},
 	right: {
 		icon: 'align-right',
-		title: __( 'Align right' ),
+		title: __( 'Align Right' ),
 	},
 	wide: {
 		icon: 'align-wide',
-		title: __( 'Wide width' ),
+		title: __( 'Wide Width' ),
 	},
 	full: {
 		icon: 'align-full-width',
-		title: __( 'Full width' ),
+		title: __( 'Full Width' ),
 	},
 };
 
 const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
+const DEFAULT_CONTROL = 'center';
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
-export function BlockAlignmentToolbar( { isCollapsed, value, onChange, controls = DEFAULT_CONTROLS, wideControlsEnabled = false } ) {
+export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, isCollapsed = true, wideControlsEnabled = false } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
 	}
@@ -47,13 +47,14 @@ export function BlockAlignmentToolbar( { isCollapsed, value, onChange, controls
 		controls :
 		controls.filter( ( control ) => WIDE_CONTROLS.indexOf( control ) === -1 );
 
-	const activeAlignment = BLOCK_ALIGNMENTS_CONTROLS[ value ];
+	const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];
+	const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	return (
 		<Toolbar
 			isCollapsed={ isCollapsed }
-			icon={ activeAlignment ? activeAlignment.icon : 'align-left' }
-			label={ __( 'Change Alignment' ) }
+			icon={ activeAlignmentControl ? activeAlignmentControl.icon : defaultAlignmentControl.icon }
+			label={ __( 'Change alignment' ) }
 			controls={
 				enabledControls.map( ( control ) => {
 					return {
@@ -73,16 +74,11 @@ export default compose(
 			clientId,
 		};
 	} ),
-	withViewportMatch( { isLargeViewport: 'medium' } ),
-	withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => {
-		const { getBlockRootClientId, getSettings } = select( 'core/block-editor' );
+	withSelect( ( select ) => {
+		const { getSettings } = select( 'core/block-editor' );
 		const settings = getSettings();
 		return {
 			wideControlsEnabled: settings.alignWide,
-			isCollapsed: isCollapsed || ! isLargeViewport || (
-				! settings.hasFixedToolbar &&
-				getBlockRootClientId( clientId )
-			),
 		};
 	} ),
 )( BlockAlignmentToolbar );
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
index 27fbae699c3bd..e35af5e597210 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
@@ -8,23 +8,24 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
         "icon": "align-left",
         "isActive": true,
         "onClick": [Function],
-        "title": "Align left",
+        "title": "Align Left",
       },
       Object {
         "icon": "align-center",
         "isActive": false,
         "onClick": [Function],
-        "title": "Align center",
+        "title": "Align Center",
       },
       Object {
         "icon": "align-right",
         "isActive": false,
         "onClick": [Function],
-        "title": "Align right",
+        "title": "Align Right",
       },
     ]
   }
   icon="align-left"
-  label="Change Alignment"
+  isCollapsed={true}
+  label="Change alignment"
 />
 `;
diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md b/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md
index 8eca9ffe0861a..3e11032e85fa5 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md
+++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md
@@ -66,6 +66,11 @@ _Note:_ the user can repeatedly click on the toolbar buttons to toggle the align
 
 The current value of the alignment setting. You may only choose from the `Options` listed above.
 
+### `isCollapsed`
+* **Type:** `Boolean`
+* **Default:** `true`
+
+Whether to display toolbar options in the dropdown menu. This toolbar is collapsed by default.
 
 ### `onChange`
 * **Type:** `Function`
diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
index 86414d5ddf07f..22206984dc270 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
@@ -3,14 +3,10 @@
  */
 import { _x } from '@wordpress/i18n';
 import { Toolbar } from '@wordpress/components';
-import { withViewportMatch } from '@wordpress/viewport';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { withBlockEditContext } from '../block-edit/context';
 import { alignTop, alignCenter, alignBottom } from './icons';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
@@ -31,7 +27,7 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
 const DEFAULT_CONTROL = 'top';
 
-export function BlockVerticalAlignmentToolbar( { isCollapsed, value, onChange, controls = DEFAULT_CONTROLS } ) {
+export function BlockVerticalAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, isCollapsed = true } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
 	}
@@ -43,7 +39,7 @@ export function BlockVerticalAlignmentToolbar( { isCollapsed, value, onChange, c
 		<Toolbar
 			isCollapsed={ isCollapsed }
 			icon={ activeAlignment ? activeAlignment.icon : defaultAlignmentControl.icon }
-			label={ _x( 'Change Alignment', 'Block vertical alignment setting label' ) }
+			label={ _x( 'Change vertical alignment', 'Block vertical alignment setting label' ) }
 			controls={
 				controls.map( ( control ) => {
 					return {
@@ -60,20 +56,4 @@ export function BlockVerticalAlignmentToolbar( { isCollapsed, value, onChange, c
 /**
  * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md
  */
-export default compose(
-	withBlockEditContext( ( { clientId } ) => {
-		return {
-			clientId,
-		};
-	} ),
-	withViewportMatch( { isLargeViewport: 'medium' } ),
-	withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => {
-		const { getBlockRootClientId, getSettings } = select( 'core/block-editor' );
-		return {
-			isCollapsed: isCollapsed || ! isLargeViewport || (
-				! getSettings().hasFixedToolbar &&
-				!! getBlockRootClientId( clientId )
-			),
-		};
-	} ),
-)( BlockVerticalAlignmentToolbar );
+export default BlockVerticalAlignmentToolbar;
diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap
index 5af12d1e1a1c7..605e697786030 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap
@@ -79,6 +79,7 @@ exports[`BlockVerticalAlignmentToolbar should match snapshot 1`] = `
       />
     </SVG>
   }
-  label="Change Alignment"
+  isCollapsed={true}
+  label="Change vertical alignment"
 />
 `;
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index 7fc4721c9169a..fd280fd2714fe 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -69,6 +69,7 @@ function HeadingEdit( {
 					<HeadingToolbar minLevel={ 1 } maxLevel={ 7 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
 					<p>{ __( 'Text Alignment' ) }</p>
 					<AlignmentToolbar
+						isCollapsed={ false }
 						value={ align }
 						onChange={ ( nextAlign ) => {
 							setAttributes( { align: nextAlign } );
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 90a4682e2223a..3c5f6c11fe277 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -461,6 +461,7 @@ export class TableEdit extends Component {
 				<BlockControls>
 					<Toolbar>
 						<DropdownMenu
+							hasArrowIndicator
 							icon="editor-table"
 							label={ __( 'Edit table' ) }
 							controls={ this.getTableControls() }
diff --git a/packages/components/src/dropdown-menu/README.md b/packages/components/src/dropdown-menu/README.md
index 4e2243c653b2f..f118a1bc4c241 100644
--- a/packages/components/src/dropdown-menu/README.md
+++ b/packages/components/src/dropdown-menu/README.md
@@ -140,12 +140,22 @@ The component accepts the following props:
 
 The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug to be shown in the collapsed menu button.
 
-- Type: `String`
+- Type: `String|null`
 - Required: No
 - Default: `"menu"`
 
 See also: [https://developer.wordpress.org/resource/dashicons/](https://developer.wordpress.org/resource/dashicons/)
 
+#### hasArrowIndicator
+
+Whether to display an arrow indicator next to the icon.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
+For backward compatibility, when `icon` is explicitly set to `null` then the arrow indicator will be displayed even when this flag is set to `false`.
+
 #### label
 
 A human-readable label to present as accessibility text on the focused collapsed menu button.
diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
index 8195a309ec024..8212deaeda595 100644
--- a/packages/components/src/dropdown-menu/index.js
+++ b/packages/components/src/dropdown-menu/index.js
@@ -20,6 +20,7 @@ function DropdownMenu( {
 	children,
 	className,
 	controls,
+	hasArrowIndicator = false,
 	icon = 'menu',
 	label,
 	menuLabel,
@@ -70,7 +71,7 @@ function DropdownMenu( {
 						labelPosition={ __unstableLabelPosition }
 						tooltip={ label }
 					>
-						{ ! icon && <span className="components-dropdown-menu__indicator" /> }
+						{ ( ! icon || hasArrowIndicator ) && <span className="components-dropdown-menu__indicator" /> }
 					</IconButton>
 				);
 			} }
diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js
index 64e4f8359919d..3dc1f3c1d4451 100644
--- a/packages/components/src/toolbar/index.js
+++ b/packages/components/src/toolbar/index.js
@@ -58,6 +58,7 @@ function Toolbar( { controls = [], children, className, isCollapsed, icon, label
 	if ( isCollapsed ) {
 		return (
 			<DropdownMenu
+				hasArrowIndicator
 				icon={ icon }
 				label={ label }
 				controls={ controlSets }
diff --git a/packages/e2e-tests/specs/block-deletion.test.js b/packages/e2e-tests/specs/block-deletion.test.js
index f5cfe7aec0da4..4466c03783f29 100644
--- a/packages/e2e-tests/specs/block-deletion.test.js
+++ b/packages/e2e-tests/specs/block-deletion.test.js
@@ -35,7 +35,7 @@ const clickOnBlockSettingsMenuRemoveBlockButton = async () => {
 
 	let isRemoveButton = false;
 
-	let numButtons = await page.$$eval( '.block-editor-block-toolbar button', ( btns ) => btns.length );
+	let numButtons = await page.$$eval( '.block-editor-block-settings-menu__content button', ( btns ) => btns.length );
 
 	// Limit by the number of buttons available
 	while ( --numButtons ) {
diff --git a/packages/e2e-tests/specs/block-grouping.test.js b/packages/e2e-tests/specs/block-grouping.test.js
index 3a42f3f6e43f6..64bba812f4f27 100644
--- a/packages/e2e-tests/specs/block-grouping.test.js
+++ b/packages/e2e-tests/specs/block-grouping.test.js
@@ -157,13 +157,15 @@ describe( 'Block Grouping', () => {
 			await insertBlock( 'Heading' );
 			await page.keyboard.type( 'Group Heading' );
 
-			// Full width image
+			// Full width image.
 			await insertBlock( 'Image' );
-			await clickBlockToolbarButton( 'Full width' );
+			await clickBlockToolbarButton( 'Change alignment' );
+			await page.click( '.components-dropdown-menu__menu button svg.dashicons-align-full-width' );
 
-			// Wide width image)
+			// Wide width image.
 			await insertBlock( 'Image' );
-			await clickBlockToolbarButton( 'Wide width' );
+			await clickBlockToolbarButton( 'Change alignment' );
+			await page.click( '.components-dropdown-menu__menu button svg.dashicons-align-wide' );
 
 			await insertBlock( 'Paragraph' );
 			await page.keyboard.type( 'Some paragraph' );
diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap
index f2c4ee232d078..1065dc2615e2e 100644
--- a/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap
+++ b/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`Table allows adding and deleting columns across the table header, body and footer 1`] = `
 "<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table class=\\"\\"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td></tr></tfoot></table></figure>
+<figure class=\\"wp-block-table\\"><table class=\\"\\"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td><td></td></tr></tfoot></table></figure>
 <!-- /wp:table -->"
 `;
 
 exports[`Table allows adding and deleting columns across the table header, body and footer 2`] = `
 "<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table class=\\"\\"><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr><tr><td></td></tr></tbody><tfoot><tr><td></td></tr></tfoot></table></figure>
+<figure class=\\"wp-block-table\\"><table class=\\"\\"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td></tr></tfoot></table></figure>
 <!-- /wp:table -->"
 `;
 
diff --git a/packages/e2e-tests/specs/blocks/table.test.js b/packages/e2e-tests/specs/blocks/table.test.js
index dd24f06b24ada..8da1506c1c51e 100644
--- a/packages/e2e-tests/specs/blocks/table.test.js
+++ b/packages/e2e-tests/specs/blocks/table.test.js
@@ -134,6 +134,8 @@ describe( 'Table', () => {
 		await headerSwitch[ 0 ].click();
 		await footerSwitch[ 0 ].click();
 
+		await page.click( '.wp-block-table__cell-content' );
+
 		// Add a column.
 		await clickBlockToolbarButton( 'Edit table' );
 		const addColumnAfterButton = await page.$x( "//button[text()='Add Column After']" );
diff --git a/packages/e2e-tests/specs/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/keyboard-navigable-blocks.test.js
index 64d1afcda1a61..a8ebe96c34fcd 100644
--- a/packages/e2e-tests/specs/keyboard-navigable-blocks.test.js
+++ b/packages/e2e-tests/specs/keyboard-navigable-blocks.test.js
@@ -76,26 +76,12 @@ const tabThroughBlockToolbar = async () => {
 	);
 	await expect( isFocusedBlockSwitcherControl ).toBe( true );
 
-	// Tab to focus on the 'left paragraph alignment' dropdown control
+	// Tab to focus on the 'Change text alignment' dropdown control
 	await page.keyboard.press( 'Tab' );
-	const isFocusedLeftAlignmentControl = await page.evaluate( () =>
-		document.activeElement.classList.contains( 'components-toolbar__control' )
-	);
-	await expect( isFocusedLeftAlignmentControl ).toBe( true );
-
-	// Tab to focus on the 'center paragraph alignment' dropdown control
-	await page.keyboard.press( 'Tab' );
-	const isFocusedCenterAlignmentControl = await page.evaluate( () =>
-		document.activeElement.classList.contains( 'components-toolbar__control' )
-	);
-	await expect( isFocusedCenterAlignmentControl ).toBe( true );
-
-	// Tab to focus on the 'right paragraph alignment' dropdown control
-	await page.keyboard.press( 'Tab' );
-	const isFocusedRightAlignmentControl = await page.evaluate( () =>
-		document.activeElement.classList.contains( 'components-toolbar__control' )
+	const isFocusedChangeTextAlignmentControl = await page.evaluate( () =>
+		document.activeElement.classList.contains( 'components-dropdown-menu__toggle' )
 	);
-	await expect( isFocusedRightAlignmentControl ).toBe( true );
+	await expect( isFocusedChangeTextAlignmentControl ).toBe( true );
 
 	// Tab to focus on the 'More formatting' dropdown toggle
 	await page.keyboard.press( 'Tab' );
diff --git a/packages/e2e-tests/specs/plugins/align-hook.test.js b/packages/e2e-tests/specs/plugins/align-hook.test.js
index aacacbe657e46..4735560b8fb81 100644
--- a/packages/e2e-tests/specs/plugins/align-hook.test.js
+++ b/packages/e2e-tests/specs/plugins/align-hook.test.js
@@ -13,6 +13,8 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Align Hook Works As Expected', () => {
+	const CHANGE_ALIGNMENT_BUTTON_SELECTOR = '.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Change alignment"]';
+
 	beforeAll( async () => {
 		await activatePlugin( 'gutenberg-test-align-hook' );
 	} );
@@ -26,14 +28,16 @@ describe( 'Align Hook Works As Expected', () => {
 	} );
 
 	const getAlignmentToolbarLabels = async () => {
+		await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
+
 		const buttonLabels = await page.evaluate( () => {
 			return Array.from(
 				document.querySelectorAll(
-					'.block-editor-block-toolbar button[aria-label^="Align"]'
+					'.components-dropdown-menu__menu button'
 				)
 			).map(
 				( button ) => {
-					return button.getAttribute( 'aria-label' );
+					return button.innerText;
 				}
 			);
 		} );
@@ -44,6 +48,7 @@ describe( 'Align Hook Works As Expected', () => {
 		it( 'Shows the expected buttons on the alignment toolbar',
 			async () => {
 				await insertBlock( blockName );
+
 				expect(
 					await getAlignmentToolbarLabels()
 				).toEqual( buttonLabels );
@@ -53,8 +58,10 @@ describe( 'Align Hook Works As Expected', () => {
 	const createDoesNotApplyAlignmentByDefaultTest = ( blockName ) => {
 		it( 'Does not apply any alignment by default', async () => {
 			await insertBlock( blockName );
+
 			// verify no alignment button is in pressed state
-			const pressedButtons = await page.$$( '.block-editor-block-toolbar button[aria-label^="Align"][aria-pressed="true"]' );
+			await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
+			const pressedButtons = await page.$$( '.components-dropdown-menu__menu button.is-active' );
 			expect( pressedButtons ).toHaveLength( 0 );
 		} );
 	};
@@ -69,13 +76,15 @@ describe( 'Align Hook Works As Expected', () => {
 	const createCorrectlyAppliesAndRemovesAlignmentTest = ( blockName, alignment ) => {
 		it( 'Correctly applies the selected alignment and correctly removes the alignment',
 			async () => {
-				const BUTTON_SELECTOR = `.block-editor-block-toolbar button[aria-label="Align ${ alignment }"]`;
-				const BUTTON_PRESSED_SELECTOR = `${ BUTTON_SELECTOR }[aria-pressed="true"]`;
+				const BUTTON_SELECTOR = `.components-dropdown-menu__menu button svg.dashicons-align-${ alignment }`;
+				const BUTTON_PRESSED_SELECTOR = '.components-dropdown-menu__menu button.is-active';
 				// set the specified alignment.
 				await insertBlock( blockName );
+				await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
 				await page.click( BUTTON_SELECTOR );
 
 				// verify the button of the specified alignment is pressed.
+				await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
 				let pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
 				expect( pressedButtons ).toHaveLength( 1 );
 
@@ -92,9 +101,11 @@ describe( 'Align Hook Works As Expected', () => {
 				);
 
 				// remove the alignment.
+				await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
 				await page.click( BUTTON_SELECTOR );
 
 				// verify no alignment button is in pressed state.
+				await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
 				pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
 				expect( pressedButtons ).toHaveLength( 0 );
 
@@ -110,6 +121,7 @@ describe( 'Align Hook Works As Expected', () => {
 				);
 
 				// verify no alignment button is in pressed state after parsing the block.
+				await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
 				pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
 				expect( pressedButtons ).toHaveLength( 0 );
 			}
@@ -120,7 +132,9 @@ describe( 'Align Hook Works As Expected', () => {
 		const BLOCK_NAME = 'Test No Alignment Set';
 		it( 'Shows no alignment buttons on the alignment toolbar',
 			async () => {
-				expect( await getAlignmentToolbarLabels() ).toHaveLength( 0 );
+				await insertBlock( BLOCK_NAME );
+				const changeAlignmentButton = await page.$( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
+				expect( changeAlignmentButton ).toBe( null );
 			}
 		);
 
@@ -136,9 +150,11 @@ describe( 'Align Hook Works As Expected', () => {
 		const BLOCK_NAME = 'Test Align True';
 
 		createShowsTheExpectedButtonsTest( BLOCK_NAME, [
-			'Align left',
-			'Align center',
-			'Align right',
+			'Align Left',
+			'Align Center',
+			'Align Right',
+			'Wide Width',
+			'Full Width',
 		] );
 
 		createDoesNotApplyAlignmentByDefaultTest( BLOCK_NAME );
@@ -150,8 +166,8 @@ describe( 'Align Hook Works As Expected', () => {
 		const BLOCK_NAME = 'Test Align Array';
 
 		createShowsTheExpectedButtonsTest( BLOCK_NAME, [
-			'Align left',
-			'Align center',
+			'Align Left',
+			'Align Center',
 		] );
 
 		createDoesNotApplyAlignmentByDefaultTest( BLOCK_NAME );
@@ -161,18 +177,21 @@ describe( 'Align Hook Works As Expected', () => {
 
 	describe( 'Block with default align', () => {
 		const BLOCK_NAME = 'Test Default Align';
-		const PRESSED_BUTTON_SELECTOR = '.block-editor-block-toolbar button[aria-label="Align right"][aria-pressed="true"]';
+		const SELECTED_ALIGNMENT_CONTROL_SELECTOR = '//div[contains(@class, "components-dropdown-menu__menu")]//button[contains(@class, "is-active")][text()="Align Right"]';
 		createShowsTheExpectedButtonsTest( BLOCK_NAME, [
-			'Align left',
-			'Align center',
-			'Align right',
+			'Align Left',
+			'Align Center',
+			'Align Right',
+			'Wide Width',
+			'Full Width',
 		] );
 
 		it( 'Applies the selected alignment by default', async () => {
 			await insertBlock( BLOCK_NAME );
 			// verify the correct alignment button is pressed
-			const pressedButtons = await page.$$( PRESSED_BUTTON_SELECTOR );
-			expect( pressedButtons ).toHaveLength( 1 );
+			await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
+			const selectedAlignmentControls = await page.$x( SELECTED_ALIGNMENT_CONTROL_SELECTOR );
+			expect( selectedAlignmentControls ).toHaveLength( 1 );
 		} );
 
 		it( 'The default markup does not contain the alignment attribute but contains the alignment class',
@@ -187,7 +206,9 @@ describe( 'Align Hook Works As Expected', () => {
 		it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => {
 			await insertBlock( BLOCK_NAME );
 			// remove the alignment.
-			await page.click( PRESSED_BUTTON_SELECTOR );
+			await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
+			const [ selectedAlignmentControl ] = await page.$x( SELECTED_ALIGNMENT_CONTROL_SELECTOR );
+			await selectedAlignmentControl.click();
 			const markup = await getEditedPostContent();
 			expect( markup ).toContain( '"align":""' );
 		} );