Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add __next40pxDefaultSize for files in editor 4 #65140

Merged
merged 2 commits into from
Sep 12, 2024
Merged

Add __next40pxDefaultSize for files in editor 4 #65140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d17894a
Add __next40pxDefaultSize in button for editor 3 files
AKSHAT2802 Sep 8, 2024
0a38eb2
address feedback
AKSHAT2802 Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/editor/src/components/start-template-options/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,8 +156,7 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
>
<FlexItem>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
Screenshot 2024-09-09 at 6 39 40 PM Screenshot 2024-09-09 at 6 39 40 PM
Note: skip button variant set to `link`

variant="tertiary"
onClick={ onClose }
>
Expand Down
3 changes: 1 addition & 2 deletions packages/editor/src/components/table-of-contents/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Screenshot 2024-09-11 at 15 05 49 Screenshot 2024-09-11 at 15 06 55

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?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

{ ...props }
ref={ ref }
onClick={ hasBlocks ? onToggle : undefined }
Expand Down
3 changes: 1 addition & 2 deletions packages/editor/src/components/text-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
Exit code editor before exit code editor after

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Screenshot 2024-09-11 at 15 14 39 Screenshot 2024-09-11 at 15 14 55

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

variant="tertiary"
onClick={ () => switchEditorMode( 'visual' ) }
shortcut={ shortcut }
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/text-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 2 additions & 4 deletions packages/editor/src/dataviews/actions/reset-post.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,7 @@ const resetPost: Action< Post > = {
</Text>
<HStack justify="right">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
variant="tertiary"
onClick={ closeModal }
disabled={ isBusy }
Expand All @@ -124,8 +123,7 @@ const resetPost: Action< Post > = {
{ __( 'Cancel' ) }
</Button>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
Screenshot 2024-09-09 at 7 02 41 PM Screenshot 2024-09-09 at 7 02 12 PM

variant="primary"
onClick={ async () => {
setIsBusy( true );
Expand Down
6 changes: 2 additions & 4 deletions packages/editor/src/dataviews/actions/trash-post.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,7 @@ const trashPost: Action< PostWithPermissions > = {
</Text>
<HStack justify="right">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
variant="tertiary"
onClick={ closeModal }
disabled={ isBusy }
Expand All @@ -77,8 +76,7 @@ const trashPost: Action< PostWithPermissions > = {
{ __( 'Cancel' ) }
</Button>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
Screenshot 2024-09-09 at 7 06 05 PM Screenshot 2024-09-09 at 7 05 39 PM

variant="primary"
onClick={ async () => {
setIsBusy( true );
Expand Down
Loading