Try: Always collapse block alignments.

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;

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"
 />
 `;

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 );

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"
 />
 `;

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`

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;

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"
 />
 `;

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 } );

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() }

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.

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>
 				);
 			} }

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 }

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 ) {

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' );