From 0dde58939dfc5c997d88e42b2655ea2513884c72 Mon Sep 17 00:00:00 2001
From: Dhruvang2001 <dhruvang@krishaweb.com>
Date: Fri, 13 Sep 2024 12:03:23 +0530
Subject: [PATCH 1/3] Add __next40pxDefaultSize for block-editor 2 files

---
 .../src/components/block-navigation/dropdown.js   |  3 +--
 .../block-pattern-setup/setup-toolbar.js          | 15 +++++----------
 .../src/components/block-patterns-paging/index.js | 10 ++++------
 .../components/block-quick-navigation/index.js    |  3 +--
 4 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index 035a38604b0293..0bf8fd05320188 100644
--- a/packages/block-editor/src/components/block-navigation/dropdown.js
+++ b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -27,8 +27,7 @@ function BlockNavigationDropdownToggle( {
 } ) {
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			{ ...props }
 			ref={ innerRef }
 			icon={ listView }
diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
index c551c2e1632bcf..1856dbef81886d 100644
--- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
+++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -18,8 +18,7 @@ import { VIEWMODES } from './constants';
 const Actions = ( { onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			variant="primary"
 			onClick={ onBlockPatternSelect }
 		>
@@ -36,8 +35,7 @@ const CarouselNavigation = ( {
 } ) => (
 	<div className="block-editor-block-pattern-setup__navigation">
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			icon={ isRTL() ? chevronRight : chevronLeft }
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
@@ -45,8 +43,7 @@ const CarouselNavigation = ( {
 			accessibleWhenDisabled
 		/>
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			icon={ isRTL() ? chevronLeft : chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
@@ -69,16 +66,14 @@ const SetupToolbar = ( {
 	const displayControls = (
 		<div className="block-editor-block-pattern-setup__display-controls">
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				icon={ stretchFullWidth }
 				label={ __( 'Carousel view' ) }
 				onClick={ () => setViewMode( VIEWMODES.carousel ) }
 				isPressed={ isCarouselView }
 			/>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				icon={ grid }
 				label={ __( 'Grid view' ) }
 				onClick={ () => setViewMode( VIEWMODES.grid ) }
diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js
index ce1fa8b93df735..8af49f6f0064e1 100644
--- a/packages/block-editor/src/components/block-patterns-paging/index.js
+++ b/packages/block-editor/src/components/block-patterns-paging/index.js
@@ -38,8 +38,7 @@ export default function Pagination( {
 						className="block-editor-patterns__grid-pagination-previous"
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="tertiary"
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
@@ -49,8 +48,7 @@ export default function Pagination( {
 							<span>«</span>
 						</Button>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="tertiary"
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
@@ -74,8 +72,7 @@ export default function Pagination( {
 						className="block-editor-patterns__grid-pagination-next"
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="tertiary"
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }
@@ -85,6 +82,7 @@ export default function Pagination( {
 							<span>›</span>
 						</Button>
 						<Button
+							__next40pxDefaultSize
 							variant="tertiary"
 							onClick={ () => changePage( numPages ) }
 							disabled={ currentPage === numPages }
diff --git a/packages/block-editor/src/components/block-quick-navigation/index.js b/packages/block-editor/src/components/block-quick-navigation/index.js
index 4f22c2a266722d..fdb3475b3e180f 100644
--- a/packages/block-editor/src/components/block-quick-navigation/index.js
+++ b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -59,8 +59,7 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {
 
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			isPressed={ isSelected }
 			onClick={ async () => {
 				await selectBlock( clientId );

From 3cd42d6b47409ab1cf2c65fce5bcfc394eb00ca2 Mon Sep 17 00:00:00 2001
From: dhruvang21 <s.dhruvang2001@gmail.com>
Date: Wed, 25 Sep 2024 12:15:21 +0530
Subject: [PATCH 2/3] Add size compact to buttons

---
 .../block-pattern-setup/setup-toolbar.js      |  8 +++----
 .../components/block-patterns-paging/index.js | 13 ++++++-----
 .../block-patterns-paging/style.scss          | 22 +++++++++----------
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
index 1856dbef81886d..d571e0fef5dcc3 100644
--- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
+++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -35,7 +35,7 @@ const CarouselNavigation = ( {
 } ) => (
 	<div className="block-editor-block-pattern-setup__navigation">
 		<Button
-			__next40pxDefaultSize
+			size="compact"
 			icon={ isRTL() ? chevronRight : chevronLeft }
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
@@ -43,7 +43,7 @@ const CarouselNavigation = ( {
 			accessibleWhenDisabled
 		/>
 		<Button
-			__next40pxDefaultSize
+			size="compact"
 			icon={ isRTL() ? chevronLeft : chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
@@ -66,14 +66,14 @@ const SetupToolbar = ( {
 	const displayControls = (
 		<div className="block-editor-block-pattern-setup__display-controls">
 			<Button
-				__next40pxDefaultSize
+				size="compact"
 				icon={ stretchFullWidth }
 				label={ __( 'Carousel view' ) }
 				onClick={ () => setViewMode( VIEWMODES.carousel ) }
 				isPressed={ isCarouselView }
 			/>
 			<Button
-				__next40pxDefaultSize
+				size="compact"
 				icon={ grid }
 				label={ __( 'Grid view' ) }
 				onClick={ () => setViewMode( VIEWMODES.grid ) }
diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js
index 8af49f6f0064e1..e4d7ce49b90f3e 100644
--- a/packages/block-editor/src/components/block-patterns-paging/index.js
+++ b/packages/block-editor/src/components/block-patterns-paging/index.js
@@ -38,22 +38,24 @@ export default function Pagination( {
 						className="block-editor-patterns__grid-pagination-previous"
 					>
 						<Button
-							__next40pxDefaultSize
 							variant="tertiary"
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'First page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>«</span>
 						</Button>
 						<Button
-							__next40pxDefaultSize
 							variant="tertiary"
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'Previous page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>‹</span>
 						</Button>
@@ -72,23 +74,24 @@ export default function Pagination( {
 						className="block-editor-patterns__grid-pagination-next"
 					>
 						<Button
-							__next40pxDefaultSize
 							variant="tertiary"
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Next page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>›</span>
 						</Button>
 						<Button
-							__next40pxDefaultSize
 							variant="tertiary"
 							onClick={ () => changePage( numPages ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Last page' ) }
-							size="default"
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>»</span>
 						</Button>
diff --git a/packages/block-editor/src/components/block-patterns-paging/style.scss b/packages/block-editor/src/components/block-patterns-paging/style.scss
index f5f34d821233aa..62be4d8a17d0ff 100644
--- a/packages/block-editor/src/components/block-patterns-paging/style.scss
+++ b/packages/block-editor/src/components/block-patterns-paging/style.scss
@@ -23,18 +23,16 @@
 }
 
 .show-icon-labels {
-	.block-editor-patterns__grid-pagination {
-		.components-button {
-			width: auto;
-			// Hide the button icons when labels are set to display...
-			span {
-				display: none;
-			}
-			// ... and display labels.
-			// Uses ::before as ::after is already used for active tab styling.
-			&::before {
-				content: attr(aria-label);
-			}
+	.block-editor-patterns__grid-pagination-button {
+		width: auto;
+		// Hide the button icons when labels are set to display...
+		span {
+			display: none;
+		}
+		// ... and display labels.
+		// Uses ::before as ::after is already used for active tab styling.
+		&::before {
+			content: attr(aria-label);
 		}
 	}
 }

From 6a0be678ec5bd94c79225b67ae02c1850a31736f Mon Sep 17 00:00:00 2001
From: dhruvang21 <s.dhruvang2001@gmail.com>
Date: Thu, 26 Sep 2024 10:44:40 +0530
Subject: [PATCH 3/3] Remove style overrides

---
 .../components/block-patterns-paging/style.scss   | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-paging/style.scss b/packages/block-editor/src/components/block-patterns-paging/style.scss
index 62be4d8a17d0ff..85d39f9a36577c 100644
--- a/packages/block-editor/src/components/block-patterns-paging/style.scss
+++ b/packages/block-editor/src/components/block-patterns-paging/style.scss
@@ -4,21 +4,6 @@
 		border-top: 1px solid $gray-800;
 		padding: $grid-unit-05;
 		justify-content: center;
-		.components-button.is-tertiary {
-			width: auto;
-			height: $button-size-compact;
-			justify-content: center;
-
-			&:disabled {
-				color: $gray-600;
-				background: none;
-			}
-
-			&:hover:not(:disabled) {
-				color: $white;
-				background-color: $gray-700;
-			}
-		}
 	}
 }