Fix: Button: Replace remaining 40px default size violations [Block library 1] #65033

hbhalodia · 2024-09-04T06:34:44Z

Part of - #65018

What?

Issue - Button: Replace remaining 40px default size violations #65018, To use default to 40px for the button.
This would fix blocks like, core/missing, core/freeform, core/comments, core/embed.

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.

github-actions · 2024-09-04T06:34:57Z

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 <[email protected]>
Co-authored-by: mirka <[email protected]>

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

hbhalodia · 2024-09-04T06:38:30Z

packages/block-library/src/comments/edit/comments-legacy.js

@@ -29,8 +29,7 @@ export default function CommentsLegacy( {

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


This can be seen in comments block, when used in legacy mode.

Before After

hbhalodia · 2024-09-04T06:39:58Z

packages/block-library/src/embed/embed-placeholder.js

+							__next40pxDefaultSize
 							variant="secondary"
 							onClick={ tryAgain }
 						>
 							{ _x( 'Try again', 'button label' ) }
 						</Button>{ ' ' }
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize


This can be seen on embed block, when you insert a URL that is non-embedded.

Before After

hbhalodia · 2024-09-04T06:42:24Z

packages/block-library/src/freeform/modal.js

@@ -25,8 +25,7 @@ function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {

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


This can be seen while you insert the core/freeform block.

Before After

I noticed that the Modal close button hasn't had its size updated yet, so we'll need to resolve that first with the design team (#65102).

Could we perhaps revert just this instance (the fullscreen button) to the TODO state, so we can resolve those all together? The other instances in this file are ok.

I noticed that the Modal close button hasn't had its size updated yet, so we'll need to resolve that first with the design team (#65102).

Could we perhaps revert just this instance (the fullscreen button) to the TODO state, so we can resolve those all together? The other instances in this file are ok.

Sure @mirka, I would revert this change.

Followed up in #65131

hbhalodia · 2024-09-04T06:42:35Z

packages/block-library/src/freeform/modal.js

@@ -123,8 +122,7 @@ export default function ModalEdit( props ) {
 					>
 						<FlexItem>
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize


This can be seen while you insert the core/freeform block.

Before After

hbhalodia · 2024-09-04T06:42:46Z

packages/block-library/src/freeform/modal.js

@@ -133,8 +131,7 @@ export default function ModalEdit( props ) {
 						</FlexItem>
 						<FlexItem>
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize


This can be seen while you insert the core/freeform block.

Before After

hbhalodia · 2024-09-04T06:43:53Z

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

@@ -50,8 +50,7 @@ export default function MissingEdit( { attributes, clientId } ) {

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


This can be seen, when you have a block inserted and that block is no longer registered or available.

Before After

mirka

Thank you for helping out with this clean up! I just noticed one issue with the Modal fullscreen button, but everything else looks good 👍

mirka · 2024-09-05T19:23:52Z

packages/block-library/src/freeform/modal.js

@@ -25,8 +25,7 @@ function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {

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


I noticed that the Modal close button hasn't had its size updated yet, so we'll need to resolve that first with the design team (#65102).

Could we perhaps revert just this instance (the fullscreen button) to the TODO state, so we can resolve those all together? The other instances in this file are ok.

This is being reverted because we need to resolve this first - WordPress#65033 (comment)

hbhalodia · 2024-09-06T05:32:12Z

Hi @mirka, I have updated PR the with the requested change. Requesting the re-review for the same.

mirka

Great, thanks 🚀

…brary 1] (#65033) * Fix legacy comments to use 40px default button size * Fix the embed placeholder button to use 40px default button size * Fix freeform block to use 40px default button size * Fix missing block to use 40px default button size * Revert the instance for modal fullscreen button size This is being reverted because we need to resolve this first - WordPress/gutenberg#65033 (comment) Co-authored-by: hbhalodia <[email protected]> Co-authored-by: mirka <[email protected]> Source: WordPress/gutenberg@c90f1c5

hbhalodia added 4 commits September 4, 2024 11:11

Fix legacy comments to use 40px default button size

eaab066

Fix the embed placeholder button to use 40px default button size

d048fb4

Fix freeform block to use 40px default button size

42c03aa

Fix missing block to use 40px default button size

8e15bdb

hbhalodia requested review from michalczaplinski and ajitbohra as code owners September 4, 2024 06:34

hbhalodia commented Sep 4, 2024

View reviewed changes

hbhalodia mentioned this pull request Sep 4, 2024

Button: Replace remaining 40px default size violations #65018

Open

21 tasks

tyxla requested a review from a team September 4, 2024 11:59

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

mirka changed the title ~~Fix: Button: Replace remaining 40px default size violations~~ Fix: Button: Replace remaining 40px default size violations [Block library 1] Sep 5, 2024

mirka reviewed Sep 5, 2024

View reviewed changes

mirka assigned hbhalodia Sep 5, 2024

Revert the instance for modal fullscreen button size

1277f95

This is being reverted because we need to resolve this first - WordPress#65033 (comment)

hbhalodia requested a review from mirka September 6, 2024 05:32

mirka approved these changes Sep 6, 2024

View reviewed changes

mirka merged commit c90f1c5 into WordPress:trunk Sep 6, 2024
61 checks passed

github-actions bot added this to the Gutenberg 19.3 milestone Sep 6, 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Button: Replace remaining 40px default size violations [Block library 1] #65033

Fix: Button: Replace remaining 40px default size violations [Block library 1] #65033

hbhalodia commented Sep 4, 2024

github-actions bot commented Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading

mirka Sep 5, 2024

hbhalodia Sep 6, 2024

mirka Sep 6, 2024

hbhalodia Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading

mirka left a comment

mirka Sep 5, 2024

hbhalodia commented Sep 6, 2024

mirka left a comment

Fix: Button: Replace remaining 40px default size violations [Block library 1] #65033

Fix: Button: Replace remaining 40px default size violations [Block library 1] #65033

Conversation

hbhalodia commented Sep 4, 2024

What?

Why?

How?

Testing Instructions

github-actions bot commented Sep 4, 2024 • edited Loading

hbhalodia Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

hbhalodia Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

hbhalodia Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

mirka Sep 5, 2024

Choose a reason for hiding this comment

hbhalodia Sep 6, 2024

Choose a reason for hiding this comment

mirka Sep 6, 2024

Choose a reason for hiding this comment

hbhalodia Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

hbhalodia Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

hbhalodia Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

mirka left a comment

Choose a reason for hiding this comment

mirka Sep 5, 2024

Choose a reason for hiding this comment

hbhalodia commented Sep 6, 2024

mirka left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading

hbhalodia Sep 4, 2024 •

edited

Loading