Add props for buttons in editor 1 #65068

AKSHAT2802 · 2024-09-04T17:12:22Z

Part of - #65018

What?

Issue - #65018, To use default to 40px for the button.
This would fix blocks like Block Manager, Undo, Redo, error boundary, Post excerpt, Featured Image

Why?

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

How?

Add __next40pxDefaultSize in button on the component.

Testing Instructions

Screenshots added as comment in file changes

github-actions · 2024-09-04T17:12:36Z

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: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@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-04T17:12:44Z

👋 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-04T17:55:44Z

packages/editor/src/components/block-manager/index.js

@@ -67,8 +67,7 @@ function BlockManager( {
 						numberOfHiddenBlocks
 					) }
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


Before After

Style didn't change because there are explicit styles for Reset in code. But adding __next40pxDefaultSize will ensure that it will not be listed in lint next time

Note for posterity: There are no explicit height styles for this, just that "link" variant Buttons have height: auto applied.

AKSHAT2802 · 2024-09-04T17:59:08Z

packages/editor/src/components/editor-history/redo.js

@@ -25,8 +25,7 @@ function EditorHistoryRedo( props, ref ) {
 	const { redo } = useDispatch( editorStore );
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize


Before After

Style didn't change because there are explicit styles for Undo and Redo buttons in code. But adding __next40pxDefaultSize will ensure that it will not be listed in lint next time

Note for posterity: In our app code, sizes are added by the consumers.

gutenberg/packages/editor/src/components/document-tools/index.js

Lines 151 to 156 in 9523fb4

<ToolbarItem

as={ EditorHistoryUndo }

showTooltip={ ! showIconLabels }

variant={ showIconLabels ? 'tertiary' : undefined }

size="compact"

/>

AKSHAT2802 · 2024-09-04T18:01:03Z

packages/editor/src/components/error-boundary/index.js

@@ -30,8 +30,7 @@ function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize


Before After

AKSHAT2802 · 2024-09-04T18:02:55Z

packages/editor/src/components/post-excerpt/panel.js

@@ -198,8 +198,7 @@ function PrivateExcerpt() {
 				ref={ setPopoverAnchor }
 				renderToggle={ ( { onToggle } ) => (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


Before After

The style didn't change because there are explicit styles for Add and excerpt in code. But adding __next40pxDefaultSize will ensure that it will not be listed in lint next time

AKSHAT2802 · 2024-09-04T18:04:55Z

packages/editor/src/components/post-featured-image/index.js

@@ -160,8 +160,7 @@ function PostFeaturedImage( {
 						render={ ( { open } ) => (
 							<div className="editor-post-featured-image__container">
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize


Before After

Looks like we can remove most of these style overrides?

gutenberg/packages/editor/src/components/post-featured-image/style.scss

Lines 67 to 73 in 9523fb4

.editor-post-featured-image__toggle {

height: 100%;

line-height: 20px;

padding: $grid-unit-10 0;

text-align: center;

box-shadow: inset 0 0 0 $border-width $gray-400;

}

Before After

Hii @mirka removed extra styles
PFA Before and After screenshots

AKSHAT2802 · 2024-09-04T18:06:32Z

packages/editor/src/components/post-featured-image/index.js

@@ -202,17 +201,15 @@ function PostFeaturedImage( {
 								{ !! featuredImageId && (
 									<HStack className="editor-post-featured-image__actions">
 										<Button
-											// TODO: Switch to `true` (40px size) if possible
-											__next40pxDefaultSize={ false }
+											__next40pxDefaultSize


Before After

Looks like the before/after images are reversed in this one.

We probably need an !important here:

gutenberg/packages/editor/src/components/post-featured-image/style.scss

Line 56 in 9523fb4

height: auto;

Before After

Hii @mirka , height: auto !important; added for featured image.
PFA new screenshots.

I noticed a weird flash on focus, but this happens on trunk too so I'll post a separate issue.

CleanShot.2024-09-13.at.05.11.47.mp4

Issue submitted at #65299

packages/editor/src/components/post-excerpt/panel.js

packages/editor/src/components/error-boundary/index.js

mirka

Looks good, thank you for the follow-ups!

mirka · 2024-09-12T20:13:39Z

packages/editor/src/components/post-featured-image/index.js

@@ -202,17 +201,15 @@ function PostFeaturedImage( {
 								{ !! featuredImageId && (
 									<HStack className="editor-post-featured-image__actions">
 										<Button
-											// TODO: Switch to `true` (40px size) if possible
-											__next40pxDefaultSize={ false }
+											__next40pxDefaultSize


I noticed a weird flash on focus, but this happens on trunk too so I'll post a separate issue.

CleanShot.2024-09-13.at.05.11.47.mp4

Add props for buttons in editor 1

42d5cca

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

Merge branch 'trunk' into fix/button-size-violation-editor-1

014f941

AKSHAT2802 commented Sep 4, 2024

View reviewed changes

AKSHAT2802 mentioned this pull request Sep 4, 2024

Button: Replace remaining 40px default size violations #65018

Open

21 tasks

mirka requested a review from a team September 4, 2024 18:24

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

mirka assigned AKSHAT2802 Sep 5, 2024

tyxla reviewed Sep 11, 2024

View reviewed changes

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

tyxla reviewed Sep 11, 2024

View reviewed changes

packages/editor/src/components/error-boundary/index.js Outdated Show resolved Hide resolved

AKSHAT2802 added 2 commits September 12, 2024 01:01

Address feedback

4bef78a

remove extra class name and extra styles

55ac540

AKSHAT2802 requested review from tyxla, mirka and ciampo September 12, 2024 05:27

mirka approved these changes Sep 12, 2024

View reviewed changes

mirka merged commit a895274 into WordPress:trunk Sep 12, 2024
63 checks passed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add props for buttons in editor 1 #65068

Add props for buttons in editor 1 #65068

AKSHAT2802 commented Sep 4, 2024

github-actions bot commented Sep 4, 2024 •

edited

Loading

github-actions bot commented Sep 4, 2024

AKSHAT2802 Sep 4, 2024

mirka Sep 5, 2024

ciampo Sep 6, 2024

AKSHAT2802 Sep 4, 2024

mirka Sep 5, 2024

AKSHAT2802 Sep 4, 2024

AKSHAT2802 Sep 4, 2024

AKSHAT2802 Sep 4, 2024

mirka Sep 5, 2024

AKSHAT2802 Sep 11, 2024

AKSHAT2802 Sep 4, 2024

mirka Sep 5, 2024

AKSHAT2802 Sep 11, 2024

mirka Sep 12, 2024

mirka Sep 12, 2024

mirka left a comment

mirka Sep 12, 2024

	<ToolbarItem
	as={ EditorHistoryUndo }
	showTooltip={ ! showIconLabels }
	variant={ showIconLabels ? 'tertiary' : undefined }
	size="compact"
	/>

	.editor-post-featured-image__toggle {
	height: 100%;
	line-height: 20px;
	padding: $grid-unit-10 0;
	text-align: center;
	box-shadow: inset 0 0 0 $border-width $gray-400;
	}

Add props for buttons in editor 1 #65068

Add props for buttons in editor 1 #65068

Conversation

AKSHAT2802 commented Sep 4, 2024

What?

Why?

How?

Testing Instructions

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

github-actions bot commented Sep 4, 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

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

mirka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 4, 2024 •

edited

Loading