Fix: Button: Replace remaining 40px default size violation [Block library 4] #65143

hbhalodia · 2024-09-09T06:07:06Z

Part of - #65018

What?

Issue - Button: Replace remaining 40px default size violations #65018, To use default to 40px for the button.
This would fix in the blocks, core/template-part, core/query, core/video.

Why?

To make the consistent button across Gutenberg, and we would have a lint rule added once fixed, all the button usage.

How?

Change from __next40pxDefaultSize={ false } to __next40pxDefaultSize on component.

Testing Instructions

Add the blocks on the page/post and check for the buttons defined.
Screenshot is added for individual changed files.

hbhalodia · 2024-09-09T06:10:39Z

packages/block-library/src/video/tracks-editor.js

@@ -177,8 +175,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 							{ __( 'Close' ) }
 						</Button>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize


This can be seen while you add the core/video and add some track in track list.

Note: This would have no impact, as it have link style for the button. Still as a part of to make button consistent, we have added this change.

Before After

hbhalodia · 2024-09-10T05:05:56Z

packages/block-library/src/video/tracks-editor.js

@@ -147,8 +146,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					/>
 					<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize


This can be seen, when you add core/video and add some track list and open in edit mode.

Before After

hbhalodia · 2024-09-10T05:08:22Z

packages/block-library/src/video/tracks-editor.js

@@ -58,8 +58,7 @@ function TrackList( { tracks, onEditPress } ) {
 				>
 					<span>{ track.label } </span>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


This can be seen when you add core/video block and add a track list and check for the edit button.

Before After

hbhalodia · 2024-09-10T05:10:52Z

packages/block-library/src/video/edit.js

@@ -262,8 +261,7 @@ function VideoEdit( {
 							</p>
 							{ !! poster && (
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize


This can be seen while you add core/video, and check on inspector control while you add video poster image and after adding check for the remove button.

Before After

hbhalodia · 2024-09-10T05:12:29Z

packages/block-library/src/video/edit.js

@@ -232,8 +232,7 @@ function VideoEdit( {
 								}
 								render={ ( { open } ) => (
 									<Button
-										// TODO: Switch to `true` (40px size) if possible
-										__next40pxDefaultSize={ false }
+										__next40pxDefaultSize


This can be seen while you add core/video, and check on inspector control while you need to add a poster image.

Before After

hbhalodia · 2024-09-10T05:14:05Z

packages/block-library/src/template-part/edit/placeholder.js

@@ -86,8 +85,7 @@ export default function TemplatePartPlaceholder( {

 			{ ! isResolving && isBlockBasedTheme && canCreateTemplatePart && (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize


This can be seen, while you add core/template-part and check for the placeholder button.

Before After

hbhalodia · 2024-09-10T05:14:11Z

packages/block-library/src/template-part/edit/placeholder.js

@@ -75,8 +75,7 @@ export default function TemplatePartPlaceholder( {
 			{ ! isResolving &&
 				!! ( templateParts.length || blockPatterns.length ) && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


This can be seen, while you add core/template-part and check for the placeholder button.

Before After

hbhalodia · 2024-09-10T05:17:09Z

packages/block-library/src/query/edit/query-placeholder.js

@@ -89,8 +88,7 @@ export default function QueryPlaceholder( {
 				) }

 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize


This can be seen while you add the core/query block and check for the button Start blank.

Before After

hbhalodia · 2024-09-10T05:17:26Z

packages/block-library/src/query/edit/query-placeholder.js

@@ -79,8 +79,7 @@ export default function QueryPlaceholder( {
 			>
 				{ !! hasPatterns && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


This can be seen while you add the core/query block and check for the button Choose.

Before After

hbhalodia · 2024-09-10T05:19:00Z

packages/block-library/src/query/edit/enhanced-pagination-modal.js

@@ -76,8 +76,7 @@ export default function EnhancedPaginationModal( {
 				<VStack alignment="right" spacing={ 5 }>
 					<span id={ modalDescriptionId }>{ notice }</span>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


Hi @mirka @ciampo, I was not able to get this visually on the editor, tried some hacks as well, like to directly call this when adding the block, but did not get any success.

Can you help with this? All others screenshot has been attached.

Thank You,

I was able to force it to show by temporarily changing this isOpen condition to true:

gutenberg/packages/block-library/src/query/edit/enhanced-pagination-modal.js

Line 64 in e4b4ebb

isOpen && (

Looks ok 👍

github-actions · 2024-09-10T05:19:26Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

mirka

Everything looks good, thanks!

mirka · 2024-09-10T12:31:27Z

packages/block-library/src/query/edit/enhanced-pagination-modal.js

@@ -76,8 +76,7 @@ export default function EnhancedPaginationModal( {
 				<VStack alignment="right" spacing={ 5 }>
 					<span id={ modalDescriptionId }>{ notice }</span>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


I was able to force it to show by temporarily changing this isOpen condition to true:

gutenberg/packages/block-library/src/query/edit/enhanced-pagination-modal.js

Line 64 in e4b4ebb

isOpen && (

Looks ok 👍

hbhalodia · 2024-09-10T12:34:57Z

Ah! great, thanks. Not sure why that does not work for me. I tried same by forcing it to true, nvm thanks for review 🚀.

hbhalodia added 6 commits September 9, 2024 11:00

Fix query placeholder button size to use 40px default size

7d401a2

Fix template part placeholder to use default 40px button size

ba74338

Fix video block poster image to use 40px default button size

bfb3a4e

Fix video poster image remove button to use 40px default size

a5c8fd7

Fix video track list buttons to use 40px default size

8691c24

Fix enhanced pagination modal to use 40px default button size

86bae15

hbhalodia commented Sep 9, 2024

View reviewed changes

hbhalodia commented Sep 10, 2024

View reviewed changes

hbhalodia marked this pull request as ready for review September 10, 2024 05:19

hbhalodia requested a review from ajitbohra as a code owner September 10, 2024 05:19

hbhalodia mentioned this pull request Sep 10, 2024

Button: Replace remaining 40px default size violations #65018

Closed

21 tasks

mirka assigned hbhalodia Sep 10, 2024

mirka added the [Type] Code Quality Issues or PRs that relate to code quality label Sep 10, 2024

mirka requested a review from a team September 10, 2024 10:33

mirka approved these changes Sep 10, 2024

View reviewed changes

mirka merged commit ff0c475 into WordPress:trunk Sep 10, 2024
79 of 83 checks passed

github-actions bot added this to the Gutenberg 19.3 milestone Sep 10, 2024

This was referenced Sep 26, 2024

[Snyk] Upgrade @wordpress/data from 6.6.2 to 10.7.0 WontonSam/woocommerce#653

Open

[Snyk] Upgrade @wordpress/data from 6.6.2 to 10.7.0 WontonSam/woocommerce#667

Open

[Snyk] Upgrade @wordpress/data from 6.15.0 to 10.7.0 WontonSam/woocommerce-admin#336

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Button: Replace remaining 40px default size violation [Block library 4] #65143

Fix: Button: Replace remaining 40px default size violation [Block library 4] #65143

hbhalodia commented Sep 9, 2024

hbhalodia Sep 9, 2024

hbhalodia Sep 10, 2024

hbhalodia Sep 10, 2024

hbhalodia Sep 10, 2024

hbhalodia Sep 10, 2024

hbhalodia Sep 10, 2024

hbhalodia Sep 10, 2024

hbhalodia Sep 10, 2024

hbhalodia Sep 10, 2024

hbhalodia Sep 10, 2024

mirka Sep 10, 2024

github-actions bot commented Sep 10, 2024

mirka left a comment

mirka Sep 10, 2024

hbhalodia commented Sep 10, 2024

Fix: Button: Replace remaining 40px default size violation [Block library 4] #65143

Fix: Button: Replace remaining 40px default size violation [Block library 4] #65143

Conversation

hbhalodia commented Sep 9, 2024

What?

Why?

How?

Testing Instructions

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 10, 2024

mirka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hbhalodia commented Sep 10, 2024