WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 4 weeks ago

#46371 reviewing defect (bug)

Make sure in-page anchors are not hidden behind top bars

Reported by: afercia Owned by: SergeyBiryukov
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-screenshots good-first-bug has-patch needs-testing
Focuses: ui, accessibility Cc:

Description

Moved from https://github.com/WordPress/gutenberg/issues/10101

This issue always existed but it's more evident now that the new Block Editor (Gutenberg) supports in-page anchors for headings.

When the admin bar is visible, following a link to an in-page anchor works but the targeted element is hidden behind the WordPress admin bar (see attached screenshot).

Similarly, bundled themes that have a sticky top bar should take care of this.

As mentioned in the Gutenberg GitHub issue, there's a simple CSS technique to address this problem (using the :target selector) and turns out it's already used on wp.org. For example, follow this link: https://make.wordpress.org/core/handbook/best-practices/commit-messages/#guidelines

Attachments (2)

anchor link behind toolbar.png (272.1 KB) - added by afercia 5 months ago.
Example of a heading with anchor hidden behind the WP admin bar
46371.diff (2.6 KB) - added by kingkero 4 weeks ago.

Download all attachments as: .zip

Change History (6)

@afercia
5 months ago

Example of a heading with anchor hidden behind the WP admin bar

#1 @desrosj
4 weeks ago

  • Keywords good-first-bug added

I'm marking this as good-first-bug.

This ticket was mentioned in Slack in #core-committers by kingkero. View the logs.


4 weeks ago

@kingkero
4 weeks ago

#3 @kingkero
4 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed

In the latest Gutenberg master version, Headings and Groups can have anchors. So I added rules for those two via the CSS directive :target. Needs to be in 2 places for each files as the admin bar has different heights for different screens. For smaller screens the bar is not fixed.

#4 @SergeyBiryukov
4 weeks ago

  • Milestone changed from Future Release to 5.3
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing
Note: See TracTickets for help on using tickets.