Block Library: Normalize theme block toolbars (#31952)

Co-authored-by: ntsekouras <[email protected]>
WordPress · May 19, 2021 · 3b551c4 · 3b551c4
1 parent d64f586
commit 3b551c4
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 143 deletions.
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	AlignmentToolbar,
+	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	RichText,
@@ -117,8 +117,8 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 				</PanelBody>
 			</InspectorControls>
 
-			<BlockControls>
-				<AlignmentToolbar
+			<BlockControls group="block">
+				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
 						setAttributes( { textAlign: nextAlign } );

diff --git a/packages/block-library/src/post-comments-count/edit.js b/packages/block-library/src/post-comments-count/edit.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	AlignmentToolbar,
+	AlignmentControl,
 	BlockControls,
 	Warning,
 	useBlockProps,
@@ -51,8 +51,8 @@ export default function PostCommentsCountEdit( {
 
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
+			<BlockControls group="block">
+				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
 						setAttributes( { textAlign: nextAlign } );

diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	AlignmentToolbar,
+	AlignmentControl,
 	BlockControls,
 	Warning,
 	useBlockProps,
@@ -36,8 +36,8 @@ export default function PostCommentsFormEdit( {
 
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
+			<BlockControls group="block">
+				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
 						setAttributes( { textAlign: nextAlign } );

diff --git a/packages/block-library/src/post-comments-link/edit.js b/packages/block-library/src/post-comments-link/edit.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	AlignmentToolbar,
+	AlignmentControl,
 	BlockControls,
 	Warning,
 	useBlockProps,
@@ -82,8 +82,8 @@ function PostCommentsLinkEdit( { context, attributes, setAttributes } ) {
 
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
+			<BlockControls group="block">
+				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
 						setAttributes( { textAlign: nextAlign } );

diff --git a/packages/block-library/src/post-comments/edit.js b/packages/block-library/src/post-comments/edit.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { useSelect } from '@wordpress/data';
 import {
-	AlignmentToolbar,
+	AlignmentControl,
 	BlockControls,
 	Warning,
 	useBlockProps,
@@ -68,8 +68,8 @@ export default function PostCommentsEdit( {
 
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
+			<BlockControls group="block">
+				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
 						setAttributes( { textAlign: nextAlign } );

diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
@@ -10,13 +10,12 @@ import { useEntityProp } from '@wordpress/core-data';
 import { useState } from '@wordpress/element';
 import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
 import {
-	AlignmentToolbar,
+	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import {
-	ToolbarGroup,
 	ToolbarButton,
 	ToggleControl,
 	Popover,
@@ -91,26 +90,24 @@ export default function PostDateEdit( { attributes, context, setAttributes } ) {
 	}
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
+			<BlockControls group="block">
+				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
 
 				{ date && (
-					<ToolbarGroup>
-						<ToolbarButton
-							icon={ edit }
-							title={ __( 'Change Date' ) }
-							onClick={ () =>
-								setIsPickerOpen(
-									( _isPickerOpen ) => ! _isPickerOpen
-								)
-							}
-						/>
-					</ToolbarGroup>
+					<ToolbarButton
+						icon={ edit }
+						title={ __( 'Change Date' ) }
+						onClick={ () =>
+							setIsPickerOpen(
+								( _isPickerOpen ) => ! _isPickerOpen
+							)
+						}
+					/>
 				) }
 			</BlockControls>
 

diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
@@ -8,18 +8,13 @@ import classnames from 'classnames';
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	AlignmentToolbar,
+	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
 	PlainText,
 } from '@wordpress/block-editor';
-import {
-	ToolbarGroup,
-	ToggleControl,
-	TextControl,
-	PanelBody,
-} from '@wordpress/components';
+import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -104,16 +99,14 @@ export default function PostTitleEdit( {
 
 	return (
 		<>
-			<BlockControls>
-				<ToolbarGroup>
-					<HeadingLevelDropdown
-						selectedLevel={ level }
-						onChange={ ( newLevel ) =>
-							setAttributes( { level: newLevel } )
-						}
-					/>
-				</ToolbarGroup>
-				<AlignmentToolbar
+			<BlockControls group="block">
+				<HeadingLevelDropdown
+					selectedLevel={ level }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
+				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
 						setAttributes( { textAlign: nextAlign } );

diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js
@@ -8,12 +8,11 @@ import classnames from 'classnames';
  */
 // import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	AlignmentToolbar,
+	AlignmentControl,
 	BlockControls,
 	useBlockProps,
 	Warning,
 } from '@wordpress/block-editor';
-import { ToolbarGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -52,16 +51,14 @@ export default function QueryTitleEdit( {
 	}
 	return (
 		<>
-			<BlockControls>
-				<ToolbarGroup>
-					<HeadingLevelDropdown
-						selectedLevel={ level }
-						onChange={ ( newLevel ) =>
-							setAttributes( { level: newLevel } )
-						}
-					/>
-				</ToolbarGroup>
-				<AlignmentToolbar
+			<BlockControls group="block">
+				<HeadingLevelDropdown
+					selectedLevel={ level }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
+				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
 						setAttributes( { textAlign: nextAlign } );

diff --git a/packages/block-library/src/site-tagline/edit.js b/packages/block-library/src/site-tagline/edit.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { useEntityProp } from '@wordpress/core-data';
 import {
-	AlignmentToolbar,
+	AlignmentControl,
 	useBlockProps,
 	BlockControls,
 	RichText,
@@ -29,8 +29,8 @@ export default function SiteTaglineEdit( { attributes, setAttributes } ) {
 	} );
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
+			<BlockControls group="block">
+				<AlignmentControl
 					onChange={ ( newAlign ) =>
 						setAttributes( { textAlign: newAlign } )
 					}

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -14,19 +14,17 @@ import {
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
-	JustifyToolbar,
+	JustifyContentControl,
 	ContrastChecker,
 	PanelColorSettings,
 	withColors,
 } from '@wordpress/block-editor';
 import {
-	DropdownMenu,
 	MenuGroup,
 	MenuItem,
 	PanelBody,
 	ToggleControl,
-	ToolbarItem,
-	ToolbarGroup,
+	ToolbarDropdownMenu,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
@@ -114,8 +112,8 @@ export function SocialLinksEdit( props ) {
 
 	return (
 		<Fragment>
-			<BlockControls>
-				<JustifyToolbar
+			<BlockControls group="block">
+				<JustifyContentControl
 					allowedControls={ [
 						'left',
 						'center',
@@ -131,51 +129,43 @@ export function SocialLinksEdit( props ) {
 						isAlternate: true,
 					} }
 				/>
-				<ToolbarGroup>
-					<ToolbarItem>
-						{ ( toggleProps ) => (
-							<DropdownMenu
-								label={ __( 'Size' ) }
-								text={ __( 'Size' ) }
-								icon={ null }
-								popoverProps={ POPOVER_PROPS }
-								toggleProps={ toggleProps }
-							>
-								{ ( { onClose } ) => (
-									<MenuGroup>
-										{ sizeOptions.map( ( entry ) => {
-											return (
-												<MenuItem
-													icon={
-														( size ===
-															entry.value ||
-															( ! size &&
-																entry.value ===
-																	'has-normal-icon-size' ) ) &&
-														check
-													}
-													isSelected={
-														size === entry.value
-													}
-													key={ entry.value }
-													onClick={ () => {
-														setAttributes( {
-															size: entry.value,
-														} );
-													} }
-													onClose={ onClose }
-													role="menuitemradio"
-												>
-													{ entry.name }
-												</MenuItem>
-											);
-										} ) }
-									</MenuGroup>
-								) }
-							</DropdownMenu>
-						) }
-					</ToolbarItem>
-				</ToolbarGroup>
+			</BlockControls>
+			<BlockControls group="other">
+				<ToolbarDropdownMenu
+					label={ __( 'Size' ) }
+					text={ __( 'Size' ) }
+					icon={ null }
+					popoverProps={ POPOVER_PROPS }
+				>
+					{ ( { onClose } ) => (
+						<MenuGroup>
+							{ sizeOptions.map( ( entry ) => {
+								return (
+									<MenuItem
+										icon={
+											( size === entry.value ||
+												( ! size &&
+													entry.value ===
+														'has-normal-icon-size' ) ) &&
+											check
+										}
+										isSelected={ size === entry.value }
+										key={ entry.value }
+										onClick={ () => {
+											setAttributes( {
+												size: entry.value,
+											} );
+										} }
+										onClose={ onClose }
+										role="menuitemradio"
+									>
+										{ entry.name }
+									</MenuItem>
+								);
+							} ) }
+						</MenuGroup>
+					) }
+				</ToolbarDropdownMenu>
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>