Skip to content

Edit Post: Fix misplaced icon on back button #71406

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

Merged
karmatosed merged 2 commits into from
Aug 31, 2025
Merged

Edit Post: Fix misplaced icon on back button #71406

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb97497
Edit Post: Fix misplaced icon on back button
t-hamano Aug 29, 2025
3524488
Use variables
t-hamano Aug 29, 2025
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: 2 additions & 1 deletion packages/edit-post/src/components/back-button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
display: flex;
align-items: center;
align-self: stretch;
justify-content: center;
Copy link
Contributor

@jameskoster jameskoster Aug 29, 2025

Choose a reason for hiding this comment

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

I wonder if this should be added to the Button component 🤔

Copy link
Contributor Author

@t-hamano t-hamano Aug 29, 2025

Choose a reason for hiding this comment

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

I know there are plenty of custom styles for centering button text, so changing the default alignment might certainly be worth looking into. I may have seen an issue somewhere suggesting that.

border: none;
background: $gray-900;
color: $white;
Expand All @@ -31,7 +32,7 @@
position: absolute;
top: 9px;
right: 9px;
bottom: 9px + $border-width; // Height of toolbar in edit-post (not edit-site) is 61px tall.
bottom: 9px;
Copy link
Contributor Author

@t-hamano t-hamano Aug 29, 2025

Choose a reason for hiding this comment

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

This is not directly related to the original issue, but just a minor tweak to make the focus outline square.

Before After
Image Image

Copy link
Contributor

@jasmussen jasmussen Aug 29, 2025

Choose a reason for hiding this comment

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

I wonder if replacing all instances of 9px with $grid-unit-10 + $border-width would make it more legible?

Copy link
Contributor Author

@t-hamano t-hamano Aug 29, 2025

Choose a reason for hiding this comment

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

Makes sense! Updated in 3524488

left: 9px;
border-radius: $radius-small + $border-width + $border-width;
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
Expand Down
Loading