Try: Always collapse block alignments.

This PR makes the block alignments always be collapsed. This group would already collapse at mobile responsive breakpoints. In addition, this PR also adds a dropdown arrow.

This comes with a couple of benefit:

- It ensures that the block toolbar always fits even when the item is deeply nested inside columns.
- It affords a scalable method to show additional alignment options, such as those suggested in #16385.
- It scales to future ideas of allowing a theme to create CSS grid-based layouts, which could allow theme authors to create their own custom alignments such as "pull right" or others.
- It has labels, to be descriptive of such new alignments.

Noting that 3 is just an idea at this point, but the other items on the list can potentially benefit us today.

packages/block-editor/src/components/block-alignment-toolbar/index.js

@@ -74,15 +74,12 @@ export default compose(
 		};
 	} ),
 	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 )
-			),
+			isCollapsed: true,
 		};
 	} ),
 )( BlockAlignmentToolbar );

packages/components/src/dropdown-menu/style.scss

@@ -35,6 +35,12 @@
 			@include dropdown-arrow();
 		}
 	}
+
+	// Add a dropdown arrow indicator.
+	&.components-toolbar .components-dropdown-menu__toggle::after {
+		@include dropdown-arrow();
+	}
+
 }
 
 .components-dropdown-menu__popover .components-popover__content {