Fix: Button Replace remaining 40px default size violations [Block Edi…

…tor 1]. (WordPress#65034) * feat: Adds 40px height in multiple usage warning. * feat: Adds 4px size in invalid warining. * feat: Adds the 40px size in block compare component. * feat: Makes the __next40pxDefaultSize true in block mover and breadcrumbs. * fix: block compare default size. * fix: Invlid warning button size. * fix: Adds size prop to breadcrumb buttons. * fix: Updates the snapshot. * refactor: Removes extra button [custom styles. --- Co-authored-by: vipul0425 <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: jasmussen <[email protected]>
carstingaxion · Sep 6, 2024 · 0fc06de · 0fc06de
1 parent 7051a8f
commit 0fc06de
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 49 deletions.
diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js
@@ -66,10 +66,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			>
 				{ hasSelection && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						size="small"
 						className="block-editor-block-breadcrumb__button"
-						variant="tertiary"
 						onClick={ () => {
 							// Find the block editor wrapper for the selected block
 							const blockEditor = blockRef.current?.closest(
@@ -96,10 +94,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			{ parents.map( ( parentClientId ) => (
 				<li key={ parentClientId }>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						size="small"
 						className="block-editor-block-breadcrumb__button"
-						variant="tertiary"
 						onClick={ () => selectBlock( parentClientId ) }
 					>
 						<BlockTitle

diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -22,40 +22,11 @@
 	}
 }
 
-.block-editor-block-breadcrumb__button.components-button {
-	height: $button-size-small;
-	line-height: $button-size-small;
-	padding: 0;
-	position: relative;
-
-	&:hover:not(:disabled) {
-		text-decoration: underline;
-		box-shadow: none;
-	}
-
-	&:focus {
-		box-shadow: none;
-	}
-
-	&:focus::before {
-		content: "";
-		display: block;
-		position: absolute;
-		border-radius: $radius-small;
-		top: $border-width;
-		right: $border-width;
-		bottom: $border-width;
-		left: $border-width;
-
-		@include button-style__focus();
-	}
-}
-
 .block-editor-block-breadcrumb__current {
 	cursor: default;
 }
 
-.block-editor-block-breadcrumb__button.components-button,
+.block-editor-block-breadcrumb__button.block-editor-block-breadcrumb__button,
 .block-editor-block-breadcrumb__current {
 	color: $gray-900;
 	padding: 0 $grid-unit-10;

diff --git a/packages/block-editor/src/components/block-compare/block-view.js b/packages/block-editor/src/components/block-compare/block-view.js
@@ -31,8 +31,7 @@ export default function BlockView( {
 
 			<div className="block-editor-block-compare__action">
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="secondary"
 					tabIndex="0"
 					onClick={ action }

diff --git a/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap b/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
@@ -30,7 +30,7 @@ exports[`BlockView should match snapshot 1`] = `
       class="block-editor-block-compare__action"
     >
       <button
-        class="components-button is-secondary"
+        class="components-button is-next-40px-default-size is-secondary"
         tabindex="0"
         type="button"
       >

diff --git a/packages/block-editor/src/components/block-edit/multiple-usage-warning.js b/packages/block-editor/src/components/block-edit/multiple-usage-warning.js
@@ -24,17 +24,15 @@ export function MultipleUsageWarning( {
 		<Warning
 			actions={ [
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					key="find-original"
 					variant="secondary"
 					onClick={ () => selectBlock( originalBlockClientId ) }
 				>
 					{ __( 'Find original' ) }
 				</Button>,
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					key="remove"
 					variant="secondary"
 					onClick={ () => onReplace( [] ) }

diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.js b/packages/block-editor/src/components/block-list/block-invalid-warning.js
@@ -101,8 +101,7 @@ export default function BlockInvalidWarning( { clientId } ) {
 			<Warning
 				actions={ [
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						key="recover"
 						onClick={ convert.toRecoveredBlock }
 						variant="primary"

diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js
@@ -129,8 +129,7 @@ const BlockMoverButton = forwardRef(
 		return (
 			<>
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					ref={ ref }
 					className={ clsx(
 						'block-editor-block-mover-button',

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
@@ -87,8 +87,7 @@ function BlockMover( {
 				<BlockDraggable clientIds={ clientIds } fadeWhenDisabled>
 					{ ( draggableProps ) => (
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
 							label={ __( 'Drag' ) }