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

Site Editor: Add page details when viewing a specific page. #48650

Merged
merged 5 commits into from
Mar 2, 2023
Merged

Site Editor: Add page details when viewing a specific page. #48650

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ded978a
Show the post link
scruffian Mar 1, 2023
7e5d717
Open in new window
scruffian Mar 1, 2023
d8e83b4
Use ExternalLink component for link
jeryj Mar 1, 2023
6159945
Style link to use gray color
jeryj Mar 1, 2023
bb56064
fix the grid unit variable name
scruffian Mar 1, 2023
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
9 changes: 8 additions & 1 deletion packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,14 @@ export default function SidebarNavigationScreenNavigationItem() {
/>
}
content={
post ? decodeEntities( post?.description?.rendered ) : null
<>
<a href={ post?.link } target="_blank" rel="noreferrer">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Is there a component we can use instead of a normal link?

We need to change the style of this.

Copy link
Contributor

Choose a reason for hiding this comment

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

It may be overkill, but we could use the <Button /> component. It looks like if you pass it a href it will output it as an <a> element. The Preview link in the page editor uses the <PostPreviewButton /> which wraps the wp components <Button /> which outputs an <a> element if it has an href.

So, I think directly using an <a> is fine. If we want to style it (and the <Button /> has a default that works for us, add tooltips, aria elements, and state, etc, then the <Button /> component could be a good option.

Copy link
Contributor

Choose a reason for hiding this comment

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

a11y-wise it's best not to open links in a new tab without warning:

It is recommended that when links are opened to a new window, there is advance warning.
https://www.w3.org/TR/WCAG20-TECHS/G200.html

Using the <Button /> element doesn't look like it automatically handles adding a visually-hidden warning if you pass an href and a target="_blank", but there may be another component that does. I'm looking.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ah, right. The the component @richtabor mentioned in the issue: ExternalLink lol. I'll update the PR.

{ post?.link }
</a>
{ post
? decodeEntities( post?.description?.rendered )
: null }
</>
}
/>
);
Expand Down