Add props for buttons in editor 2 #65083

AKSHAT2802 · 2024-09-05T09:23:37Z

Part of - #65018

What?

Issue - #65018, To use default to 40px for the button.

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

Screenshot is added for individual changed files.

github-actions · 2024-09-05T09:23:51Z

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: AKSHAT2802 <akshat2802@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

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

github-actions · 2024-09-05T09:23:58Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @AKSHAT2802! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

AKSHAT2802 · 2024-09-05T19:38:28Z

packages/editor/src/components/post-format/index.js

@@ -100,8 +100,7 @@ export default function PostFormat() {
 				{ suggestion && suggestion.id !== postFormat && (
 					<p className="editor-post-format__suggestion">
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize


Before After

As @mirka mentioned in another PR, variant="link" Button components have their height set to auto, and therefore the __next40pxDefaultSize doesn't make any difference

AKSHAT2802 · 2024-09-05T19:39:42Z

packages/editor/src/components/post-locked-modal/index.js

 								variant="tertiary"
 								href={ unlockUrl }
 							>
 								{ __( 'Take over' ) }
 							</Button>
 						) }
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize


Before After

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

AKSHAT2802 · 2024-09-05T19:41:33Z

packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js

@@ -25,8 +25,7 @@ const PostFormatSuggestion = ( {
 	onUpdatePostFormat,
 } ) => (
 	<Button
-		// TODO: Switch to `true` (40px size) if possible
-		__next40pxDefaultSize={ false }
+		__next40pxDefaultSize


Before After

Same as https://github.com/WordPress/gutenberg/pull/65083/files#r1746909466

AKSHAT2802 · 2024-09-05T19:42:19Z

packages/editor/src/components/post-publish-panel/maybe-upload-media.js

@@ -155,8 +155,7 @@ export default function PostFormatPanel() {
 					<Spinner />
 				) : (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


Before After

ciampo · 2024-09-06T11:12:13Z

packages/editor/src/components/post-last-revision/index.js

@@ -36,8 +36,7 @@ function PostLastRevision() {
 	return (
 		<PostLastRevisionCheck>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize


I wasn't able to find how to test this instance in the editor — it looks like the PostLastRevision component is not used anymore since #62323 (cc @ntsekouras ) but we're still exporting it.

In any case, I can see that there are some style overrides in place that tweak the height, and so passing the __next40pxDefaultSize prop shouldn't affect the look of this button.

For the scope of this PR, I think that we can leave things as they are.

As a future improvement, we should avoid overriding button (and panel) styles. If we feel like we're tweaking Button beyond its purpose, we should consider not using Button at all (cc @mirka )

Yeah, this component is not used any more in favor of PrivatePostLastRevision component. There was some discussions whether to remove it here and we ended up keeping it for existing consumers.

I think it still makes sense to remove the overrides if possible.

Agreed — it would be good to do that as a follow up to this PR.

A follow-up PR sounds good 👍

ciampo

Thank you for working on this!

Apart from #65083 (comment), we will also need to update test snapshots

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

ciampo · 2024-09-11T22:01:03Z

Code changes are looking good, but we'll need to update snapshots in order to have passing unit tests

AKSHAT2802 · 2024-09-12T10:16:51Z

Code changes are looking good, but we'll need to update snapshots in order to have passing unit tests

Hii @ciampo, I have updated test snapshots for the PR.

tyxla

Looks good to me 👍 ✅

Thanks for working on it @AKSHAT2802 🙌

Add __next40pxDefaultSize for editor 2 files

bc8c7c1

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Sep 5, 2024

AKSHAT2802 changed the title ~~Add __next40pxDefaultSize for editor 2 files~~ Add props for buttons in editor 2 #65068 Sep 5, 2024

AKSHAT2802 changed the title ~~Add props for buttons in editor 2 #65068~~ Add props for buttons in editor 2 Sep 5, 2024

AKSHAT2802 commented Sep 5, 2024

View reviewed changes

packages/editor/src/components/post-publish-panel/index.js Outdated Show resolved Hide resolved

AKSHAT2802 commented Sep 5, 2024

View reviewed changes

AKSHAT2802 mentioned this pull request Sep 5, 2024

Button: Replace remaining 40px default size violations #65018

Closed

21 tasks

mirka requested a review from a team September 5, 2024 21:04

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

mirka assigned AKSHAT2802 Sep 5, 2024

ciampo reviewed Sep 6, 2024

View reviewed changes

ciampo requested a review from a team September 6, 2024 11:35

Update packages/editor/src/components/post-publish-panel/index.js

3187318

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

AKSHAT2802 force-pushed the fix/button-size-violation-editor-2 branch from 561c6ff to 3187318 Compare September 11, 2024 20:10

update test snapshots

7221a79

AKSHAT2802 requested review from ciampo and tyxla September 12, 2024 10:16

tyxla approved these changes Sep 12, 2024

View reviewed changes

tyxla merged commit a18d831 into WordPress:trunk Sep 12, 2024
63 checks passed

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

ciampo mentioned this pull request Sep 26, 2024

"Upload media" post publish panel: update button and thumbnail sizes #65669

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add props for buttons in editor 2 #65083

Add props for buttons in editor 2 #65083

AKSHAT2802 commented Sep 5, 2024

github-actions bot commented Sep 5, 2024 •

edited

Loading

github-actions bot commented Sep 5, 2024

AKSHAT2802 Sep 5, 2024

ciampo Sep 6, 2024

AKSHAT2802 Sep 5, 2024

AKSHAT2802 Sep 5, 2024

ciampo Sep 6, 2024

AKSHAT2802 Sep 5, 2024

ciampo Sep 6, 2024

ntsekouras Sep 11, 2024

tyxla Sep 11, 2024

ciampo Sep 11, 2024

tyxla Sep 12, 2024

ciampo left a comment

ciampo commented Sep 11, 2024

AKSHAT2802 commented Sep 12, 2024

tyxla left a comment

Add props for buttons in editor 2 #65083

Add props for buttons in editor 2 #65083

Conversation

AKSHAT2802 commented Sep 5, 2024

What?

Why?

How?

Testing Instructions

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

github-actions bot commented Sep 5, 2024

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

ciampo left a comment

Choose a reason for hiding this comment

ciampo commented Sep 11, 2024

AKSHAT2802 commented Sep 12, 2024

tyxla left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 5, 2024 •

edited

Loading