Skip to content

Match front-page link style to admin styles #70600

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
Merged
t-hamano merged 11 commits into from
Jul 22, 2025
Merged

Match front-page link style to admin styles #70600

t-hamano merged 11 commits into from
Jul 22, 2025

Conversation

@n2erjo00
Copy link
Contributor

@n2erjo00 n2erjo00 commented Jul 3, 2025

What?

Closes #69577

External component link styling do not match the styles of other links. This PR remedies that by adding styling to link

Why?

Makes UI look more consistent

Component also had rel="external… which is not correct since link refers to page of site so this PR also removes the that attribute value

How?

External link component had very little styling. This PR adds enough styling to the component to make look and feel like component-button component.

Testing Instructions

  1. Open the you have set as Frontpage of your site
  2. Observer "Link" in the right side panel and compare it to the "Author" button for example
  3. Trigger :hover with the element and compare it to the hover of button
  4. Trigger :focus with the element and compare it to the focus of button
  5. Navigate to your profile /wp-admin/profile.php and change admin theme
  6. Repeat steps 2,3,4

Testing Instructions for Keyboard

Screenshots or screencast

Screenshot 2025-07-03 at 12 26 59

Screenshot 2025-07-03 at 12 27 35

Screenshot 2025-07-03 at 12 27 40

Before After

@n2erjo00 n2erjo00 requested a review from ajitbohra as a code owner July 3, 2025 09:30
@github-actions
Copy link

github-actions bot commented Jul 3, 2025 •
edited
Loading

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: n2erjo00 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: coder-rancho <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: joedolson <[email protected]>

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

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Package] Editor /packages/editor labels Jul 4, 2025
t-hamano
t-hamano reviewed Jul 4, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Thanks for the PR!

What I'm proposing in #70600 is not to change the style of the ExternalLink component itself. The component is used in various places, so changing the style of the component itself would cause problems in various places.

For the same reason, we cannot delete rel="external". If this attribute is inappropriate in the post sidebar, that needs to be discussed in a separate issue.

What I'm proposing is to override the style of this component only in the post sidebar.

If there's anything you don't understand, please feel free to ask.

@n2erjo00
Copy link
Contributor Author

n2erjo00 commented Jul 12, 2025

@t-hamano I moved the styles to only apply the front-page link also did refactors to React logic

t-hamano
t-hamano reviewed Jul 14, 2025
View reviewed changes
t-hamano
t-hamano approved these changes Jul 22, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Header After
image image

LGTM! Thank you for your efforts 👍

@t-hamano t-hamano changed the title Bugfix/match external link component styles to admin styles Match external link component styles to admin styles Jul 22, 2025
@t-hamano t-hamano changed the title Match external link component styles to admin styles Match front-end link style to admin styles Jul 22, 2025
@t-hamano t-hamano changed the title Match front-end link style to admin styles Match front-page link style to admin styles Jul 22, 2025
@t-hamano t-hamano merged commit 16302bd into WordPress:trunk Jul 22, 2025
62 of 63 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.3 milestone Jul 22, 2025
USERSATOSHI pushed a commit to USERSATOSHI/gutenberg that referenced this pull request Jul 23, 2025
@n2erjo00 @t-hamano
@Mamaduka @carolinan @joedolson @USERSATOSHI
Match front-page link style to admin styles (WordPress#70600)
53c7c6d 
* Add color styles to link. Add :hover and :focus styles by copying button component

* Match paddings of button component

* Remove external from rel attribute

* Conditionally add exteral rel if the href is pointing to external url

* Revert style changes to ExternalLink component

* Apply style changes only to front-page-link and include theme-variables

* Using css variables

* Remove import

* Reverting changes

Co-authored-by: n2erjo00 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: coder-rancho <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: joedolson <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@t-hamano t-hamano t-hamano approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

Assignees

No one assigned

Labels

[Package] Editor /packages/editor [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 21.3

Development

Successfully merging this pull request may close these issues.

Editor: Front-end link doesn't match the style of other panels

2 participants

@n2erjo00 @t-hamano