Editor: Standardize header button size to 32px (#58532)

* Editor: Standardize header button size to 32px

* Standardize preview button size to 32px

* Update snapshot

Co-authored-by: t-hamano <[email protected]>
Co-authored-by: noisysocks <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: jasmussen <[email protected]>

packages/edit-post/src/components/header/index.js

@@ -150,6 +150,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 									? __( 'Show block tools' )
 									: __( 'Hide block tools' )
 							}
+							size="compact"
 						/>
 					</>
 				) }

packages/edit-widgets/src/components/header/document-tools/index.js

@@ -102,6 +102,7 @@ function DocumentTools() {
 					'Toggle block inserter',
 					'Generic label for block inserter button'
 				) }
+				size="compact"
 			/>
 			{ isMediumViewport && (
 				<>
@@ -116,6 +117,7 @@ function DocumentTools() {
 						label={ __( 'List View' ) }
 						onClick={ toggleListView }
 						ref={ listViewToggleRef }
+						size="compact"
 					/>
 				</>
 			) }

packages/edit-widgets/src/components/header/style.scss

@@ -103,15 +103,18 @@
 
 .edit-widgets-header-toolbar {
 	gap: $grid-unit-10;
+	// Some plugins add buttons here despite best practices.
+	// Push them a bit rightwards to fit the top toolbar.
+	margin-right: $grid-unit-10;
 
 	// The Toolbar component adds different styles to buttons, so we reset them
 	// here to the original button styles
 	// Specificity bump needed to offset https://github.com/WordPress/gutenberg/blob/8ea29cb04412c80c9adf7c1db0e816d6a0ac1232/packages/components/src/toolbar/style.scss#L76
 	> .components-button.has-icon.has-icon.has-icon,
 	> .components-dropdown > .components-button.has-icon.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
+		height: $button-size-compact;
+		min-width: $button-size-compact;
+		padding: 4px;
 
 		&.is-pressed {
 			background: $gray-900;

packages/edit-widgets/src/components/header/undo-redo/redo.js

@@ -31,6 +31,7 @@ function RedoButton( props, ref ) {
 			// See: https://github.com/WordPress/gutenberg/issues/3486
 			aria-disabled={ ! hasRedo }
 			onClick={ hasRedo ? redo : undefined }
+			size="compact"
 		/>
 	);
 }

packages/edit-widgets/src/components/header/undo-redo/undo.js

@@ -27,6 +27,7 @@ function UndoButton( props, ref ) {
 			// See: https://github.com/WordPress/gutenberg/issues/3486
 			aria-disabled={ ! hasUndo }
 			onClick={ hasUndo ? undo : undefined }
+			size="compact"
 		/>
 	);
 }

packages/edit-widgets/src/components/save-button/index.js

@@ -30,6 +30,7 @@ function SaveButton() {
 			isBusy={ isSaving }
 			aria-disabled={ isDisabled }
 			onClick={ isDisabled ? undefined : saveEditedWidgetAreas }
+			size="compact"
 		>
 			{ isSaving ? __( 'Saving…' ) : __( 'Update' ) }
 		</Button>

packages/editor/src/components/post-preview-button/index.js

@@ -171,6 +171,7 @@ export default function PostPreviewButton( {
 			disabled={ ! isSaveable }
 			onClick={ openPreviewWindow }
 			role={ role }
+			size="compact"
 		>
 			{ textContent || (
 				<>

packages/editor/src/components/post-publish-button/index.js

@@ -203,6 +203,7 @@ export class PostPublishButton extends Component {
 							'has-changes-dot': hasNonPostEntityChanges,
 						}
 					) }
+					size="compact"
 				>
 					{ componentChildren }
 				</Button>

packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -353,7 +353,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
       >
         <button
           aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
           Submit for Review
@@ -476,7 +476,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
       >
         <button
           aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
           Submit for Review
@@ -643,7 +643,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
       >
         <button
           aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
           Submit for Review

packages/editor/src/components/post-view-link/index.js

@@ -42,6 +42,7 @@ export default function PostViewLink() {
 			href={ permalink }
 			target="_blank"
 			showTooltip={ ! showIconLabels }
+			size="compact"
 		/>
 	);
 }