Add __next40pxDefaultSize for files in editor 4 #65140

AKSHAT2802 · 2024-09-08T20:26:20Z

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.

github-actions · 2024-09-08T20:26:31Z

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: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@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-08T20:26:45Z

👋 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-09T09:22:30Z

packages/editor/src/components/text-editor/index.js

@@ -40,8 +40,7 @@ export default function TextEditor( { autoFocus = false } ) {
 				<div className="editor-text-editor__toolbar">
 					<h2>{ __( 'Editing code' ) }</h2>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


Before After

The button is looking good 👍

However, the "Editing code" heading is still using the old height (reflected in the heading line height), so it needs to be updated to match the new button height. This should work:

diff --git a/packages/editor/src/components/text-editor/style.scss b/packages/editor/src/components/text-editor/style.scss index c8589fed6d..9b2748e08f 100644 --- a/packages/editor/src/components/text-editor/style.scss +++ b/packages/editor/src/components/text-editor/style.scss @@ -63,7 +63,7 @@ } h2 { - line-height: $button-size; + line-height: $button-size-next-default-40px; margin: 0 auto 0 0; font-size: $default-font-size; color: $gray-900;

Here's how it will look before and after this change:

Before After

Good one. I added a todo item in #46741 to clean up these variable usages.

AKSHAT2802 · 2024-09-09T13:13:05Z

packages/editor/src/components/start-template-options/index.js

@@ -156,8 +156,7 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 			>
 				<FlexItem>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


Before After

Note: skip button variant set to `link`

AKSHAT2802 · 2024-09-09T13:33:05Z

packages/editor/src/dataviews/actions/reset-post.tsx

@@ -124,8 +123,7 @@ const resetPost: Action< Post > = {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


Before After

AKSHAT2802 · 2024-09-09T13:36:24Z

packages/editor/src/dataviews/actions/trash-post.tsx

@@ -77,8 +76,7 @@ const trashPost: Action< PostWithPermissions > = {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


Before After

tyxla

Thanks for working on it @AKSHAT2802 🙌

This mostly looks good, the only thing we need to tweak is the TextEditor toolbar h2 line height - see my comment for more details.

Should be good to go once this is addressed 🚀

tyxla · 2024-09-11T12:08:14Z

packages/editor/src/components/table-of-contents/index.js

@@ -30,8 +30,7 @@ function TableOfContents(
 			contentClassName="table-of-contents__popover"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize


This looks good, thanks 👍

Here are some details in case that can be useful:

TableOfContents is not in use since #44788.

When used somewhere, the button is an icon button, and it looks good with the new size:

Before After

No style overrides. However, the popover has some overrides (not something we should address in this PR of course), cc @WordPress/gutenberg-components:

gutenberg/packages/editor/src/components/table-of-contents/style.scss

Lines 1 to 22 in 8b14921

.table-of-contents__popover.components-popover .components-popover__content {

min-width: 380px;

}

.components-popover.table-of-contents__popover {

z-index: z-index(".components-popover.table-of-contents__popover");

}

.table-of-contents__popover {

.components-popover__content {

padding: $grid-unit-20;

@include break-small {

max-height: calc(100vh - 120px);

overflow-y: auto;

}

}

hr {

margin: 10px -16px 0;

}

}

also cc @jorgefilipecosta should we deprecate TableOfContents?

Hi @tyxla, yes I think we should deprecate it I will prepare a PR with the deprecation 👍

Thanks @jorgefilipecosta, feel free to ping me for a review!

tyxla · 2024-09-11T12:17:05Z

packages/editor/src/components/text-editor/index.js

@@ -40,8 +40,7 @@ export default function TextEditor( { autoFocus = false } ) {
 				<div className="editor-text-editor__toolbar">
 					<h2>{ __( 'Editing code' ) }</h2>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


The button is looking good 👍

However, the "Editing code" heading is still using the old height (reflected in the heading line height), so it needs to be updated to match the new button height. This should work:

diff --git a/packages/editor/src/components/text-editor/style.scss b/packages/editor/src/components/text-editor/style.scss index c8589fed6d..9b2748e08f 100644 --- a/packages/editor/src/components/text-editor/style.scss +++ b/packages/editor/src/components/text-editor/style.scss @@ -63,7 +63,7 @@ } h2 { - line-height: $button-size; + line-height: $button-size-next-default-40px; margin: 0 auto 0 0; font-size: $default-font-size; color: $gray-900;

Here's how it will look before and after this change:

Before After

AKSHAT2802 · 2024-09-11T20:30:23Z

Thanks for working on it @AKSHAT2802 🙌

This mostly looks good, the only thing we need to tweak is the TextEditor toolbar h2 line height - see my comment for more details.

Should be good to go once this is addressed 🚀

Hii @tyxla @mirka

The suggested change to add line-height: $button-size-next-default-40px; for style.scss in text-editor is addressed.

tyxla

LGTM 👍 ✅

Thanks again @AKSHAT2802 🚀

Add __next40pxDefaultSize in button for editor 3 files

d17894a

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

AKSHAT2802 changed the title ~~Add __next40pxDefaultSize in button for editor 3 files~~ Add __next40pxDefaultSize in button for editor 4 files Sep 8, 2024

shail-mehta added the [Type] Code Quality Issues or PRs that relate to code quality label Sep 9, 2024

AKSHAT2802 changed the title ~~Add __next40pxDefaultSize in button for editor 4 files~~ Add __next40pxDefaultSize for files in editor 4 Sep 9, 2024

AKSHAT2802 commented Sep 9, 2024

View reviewed changes

tyxla requested a review from a team September 10, 2024 13:13

tyxla assigned AKSHAT2802 Sep 10, 2024

tyxla reviewed Sep 11, 2024

View reviewed changes

tyxla mentioned this pull request Sep 11, 2024

Button: Replace remaining 40px default size violations #65018

Closed

21 tasks

address feedback

0a38eb2

AKSHAT2802 requested review from tyxla and mirka September 11, 2024 20:27

tyxla approved these changes Sep 12, 2024

View reviewed changes

tyxla merged commit 394288f into WordPress:trunk Sep 12, 2024
62 checks passed

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

This was referenced Sep 29, 2024

[Snyk] Upgrade @wordpress/data from 6.6.2 to 10.7.0 WontonSam/chicommerce#726

Open

[Snyk] Upgrade @wordpress/icons from 6.3.0 to 10.7.0 WontonSam/woocommerce-admin#356

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add __next40pxDefaultSize for files in editor 4 #65140

Add __next40pxDefaultSize for files in editor 4 #65140

AKSHAT2802 commented Sep 8, 2024

github-actions bot commented Sep 8, 2024 •

edited

Loading

github-actions bot commented Sep 8, 2024

AKSHAT2802 Sep 9, 2024

tyxla Sep 11, 2024

mirka Sep 11, 2024

AKSHAT2802 Sep 9, 2024

AKSHAT2802 Sep 9, 2024

AKSHAT2802 Sep 9, 2024

tyxla left a comment

tyxla Sep 11, 2024

jorgefilipecosta Oct 7, 2024

tyxla Oct 7, 2024

tyxla Sep 11, 2024

AKSHAT2802 commented Sep 11, 2024

tyxla left a comment

	.table-of-contents__popover.components-popover .components-popover__content {
	min-width: 380px;
	}

	.components-popover.table-of-contents__popover {
	z-index: z-index(".components-popover.table-of-contents__popover");
	}

	.table-of-contents__popover {
	.components-popover__content {
	padding: $grid-unit-20;

	@include break-small {
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	}
	}

	hr {
	margin: 10px -16px 0;
	}
	}

Add __next40pxDefaultSize for files in editor 4 #65140

Add __next40pxDefaultSize for files in editor 4 #65140

Conversation

AKSHAT2802 commented Sep 8, 2024

What?

Why?

How?

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

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

tyxla left a 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

AKSHAT2802 commented Sep 11, 2024

tyxla left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 8, 2024 •

edited

Loading