Refactor to make use of 'BlockAlignmentControl'

With this commit, the 'BottomSheetSelectControl' component is replaced to make use of 'BlockAlignmentControl'. Any code that relies on 'BottomSheetSelectControl' is also removed.

packages/block-library/src/latest-posts/constants.js

@@ -1,25 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	alignNone,
-	positionCenter,
-	positionLeft,
-	positionRight,
-} from '@wordpress/icons';
-
 export const MIN_EXCERPT_LENGTH = 10;
 export const MAX_EXCERPT_LENGTH = 100;
 export const MAX_POSTS_COLUMNS = 6;
-
-export const BLOCK_ALIGNMENTS_CONTROLS = [
-	{ value: undefined, label: __( 'None' ), icon: alignNone },
-	{ value: 'left', label: __( 'Align left' ), icon: positionLeft },
-	{
-		value: 'center',
-		label: __( 'Align center' ),
-		icon: positionCenter,
-	},
-	{ value: 'right', label: __( 'Align right' ), icon: positionRight },
-];

packages/block-library/src/latest-posts/edit.native.js

@@ -12,27 +12,25 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { postList as icon } from '@wordpress/icons';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	BlockAlignmentControl,
+} from '@wordpress/block-editor';
 import apiFetch from '@wordpress/api-fetch';
 import {
 	Icon,
 	PanelBody,
 	ToggleControl,
 	RangeControl,
 	QueryControls,
-	BottomSheetSelectControl,
 } from '@wordpress/components';
 import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-import {
-	MIN_EXCERPT_LENGTH,
-	MAX_EXCERPT_LENGTH,
-	BLOCK_ALIGNMENTS_CONTROLS,
-} from './constants';
+import { MIN_EXCERPT_LENGTH, MAX_EXCERPT_LENGTH } from './constants';
 
 class LatestPostsEdit extends Component {
 	constructor() {
@@ -207,11 +205,10 @@ class LatestPostsEdit extends Component {
 					/>
 					{ displayFeaturedImage && (
 						<>
-							<BottomSheetSelectControl
-								label={ __( 'Image alignment' ) }
-								options={ BLOCK_ALIGNMENTS_CONTROLS }
-								onChange={ this.onSetFeaturedImageAlign }
+							<BlockAlignmentControl
 								value={ featuredImageAlign }
+								onChange={ this.onSetFeaturedImageAlign }
+								controls={ [ 'left', 'center', 'right' ] }
 							/>
 							<ToggleControl
 								label={ __( 'Add link to featured image' ) }