wrap buttons (#52249)

WordPress · Jul 7, 2023 · eb94b26 · eb94b26
1 parent b9b4bfa
commit eb94b26
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 10 deletions.
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -58,6 +58,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 								marginTop: '16px',
 							} }
 							spacing={ 4 }
+							wrap
 						>
 							<PostSwitchToDraftButton />
 							<PostTrash />

diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/sidebar/post-trash/index.js
@@ -2,14 +2,11 @@
  * WordPress dependencies
  */
 import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor';
-import { FlexItem } from '@wordpress/components';
 
 export default function PostTrash() {
 	return (
 		<PostTrashCheck>
-			<FlexItem isBlock>
-				<PostTrashLink />
-			</FlexItem>
+			<PostTrashLink />
 		</PostTrashCheck>
 	);
 }
diff --git a/packages/editor/src/components/post-switch-to-draft-button/index.js b/packages/editor/src/components/post-switch-to-draft-button/index.js
@@ -3,7 +3,6 @@
  */
 import {
 	Button,
-	FlexItem,
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -41,15 +40,15 @@ function PostSwitchToDraftButton( {
 	};
 
 	return (
-		<FlexItem isBlock>
+		<>
 			<Button
 				className="editor-post-switch-to-draft"
 				onClick={ () => {
 					setShowConfirmDialog( true );
 				} }
 				disabled={ isSaving }
 				variant="secondary"
-				style={ { width: '100%', display: 'block' } }
+				style={ { flexGrow: '1', justifyContent: 'center' } }
 			>
 				{ __( 'Switch to draft' ) }
 			</Button>
@@ -60,7 +59,7 @@ function PostSwitchToDraftButton( {
 			>
 				{ alertMessage }
 			</ConfirmDialog>
-		</FlexItem>
+		</>
 	);
 }
 

diff --git a/packages/editor/src/components/post-trash/style.scss b/packages/editor/src/components/post-trash/style.scss
@@ -1,4 +1,4 @@
 .editor-post-trash.components-button {
-	width: 100%;
-	display: block;
+	flex-grow: 1;
+	justify-content: center;
 }