Fix Site Title toolbar normalization (#31032)

packages/block-library/src/site-title/edit/index.js

@@ -10,7 +10,7 @@ import { useEntityProp } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import {
 	RichText,
-	AlignmentToolbar,
+	AlignmentControl,
 	BlockControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
@@ -19,7 +19,7 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import LevelToolbar from './level-toolbar';
+import LevelControl from './level-toolbar';
 
 export default function SiteTitleEdit( {
 	attributes,
@@ -37,13 +37,13 @@ export default function SiteTitleEdit( {
 	return (
 		<>
 			<BlockControls group="block">
-				<LevelToolbar
+				<LevelControl
 					level={ level }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}
 				/>
-				<AlignmentToolbar
+				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
 						setAttributes( { textAlign: nextAlign } );

packages/block-library/src/site-title/edit/level-toolbar.js

@@ -1,38 +1,34 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarGroup } from '@wordpress/components';
+import { DropdownMenu } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import LevelIcon from './level-icon';
 
-export default function LevelToolbar( { level, onChange } ) {
+export default function LevelControl( { level, onChange } ) {
+	const allControls = [ 1, 2, 3, 4, 5, 6, 0 ].map( ( currentLevel ) => {
+		const isActive = currentLevel === level;
+		return {
+			icon: <LevelIcon level={ currentLevel } isPressed={ isActive } />,
+			title:
+				currentLevel === 0
+					? __( 'Paragraph' )
+					: // translators: %s: heading level e.g: "1", "2", "3"
+					  sprintf( __( 'Heading %d' ), currentLevel ),
+			isActive,
+			onClick: () => onChange( currentLevel ),
+		};
+	} );
 	return (
-		<ToolbarGroup
-			isCollapsed
-			icon={ <LevelIcon level={ level } /> }
-			controls={ [ 1, 2, 3, 4, 5, 6, 0 ].map( ( currentLevel ) => {
-				const isActive = currentLevel === level;
-				return {
-					icon: (
-						<LevelIcon
-							level={ currentLevel }
-							isPressed={ isActive }
-						/>
-					),
-					title:
-						currentLevel === 0
-							? __( 'Paragraph' )
-							: // translators: %s: heading level e.g: "1", "2", "3"
-							  sprintf( __( 'Heading %d' ), currentLevel ),
-					isActive,
-					onClick: () => onChange( currentLevel ),
-				};
-			} ) }
+		<DropdownMenu
 			label={ __( 'Change heading level' ) }
+			icon={ <LevelIcon level={ level } /> }
+			controls={ allControls }
+			isToolbarButton
 		/>
 	);
 }