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

[afercia]

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

[afercia]

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

[desrosj]

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

[kingkero]

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.

[audrasjb]

Don’t hide content anchors with WP Admin Bar

[audrasjb]

Hi,

I refreshed the initial patch.
@kingkero there's no need to update RTL stylesheets since they are generated automatically.

[audrasjb]

Hi @SergeyBiryukov :) Do you think this one is ready be committed in 5.3?

[afercia]

the admin bar has different heights for different screens. For smaller screens the bar is not fixed.

@kingkero good point thanks. Between 782 pixels and 600 pixels, the admin bar is taller (46 pixels vs. 32) and still fixed at the top. We should add a rule also in the related media query.

[afercia]

Testing a bit the patch I'm not fully convinced it's there :) The main concern is that targeted elements will have an altered top margin and padding. This value will likely alter the one provided by the team in use, potentially introducing breakages.

To recap:

• the added spacing should be _additional_ to the one provided by the active theme: not sure how to implement it but I'd recommend to explore a new approach
• with a viewport width of max 600 pixels, the patch shouldn't do anything
• between 600 and 782 pixels the added spacing should be 46 pixels
• above 782, it should be 32 pixels
• maybe consider to use just .entry-content :target to set the rule to any anchor, also the ones manually added within the content

[audrasjb]

This ticket still needs some work and improvements. Moving it to future release.

[dufresnesteven]

The main concern is that targeted elements will have an altered top margin and padding.

What about using something like:

....:target:before {
   content: '';
   display block;  
   height: 32px; // Height of the header
}

It won't collide with element styles.

[kingkero]

Recently we used scroll-padding-top (​MDN, ​caniuse) for a similar scenario.

While it does not have as great support as :target does, it at least solves the problem with the extra space (as there is none). I could work up some examples with that if you're interested.

[thimalw]

Replying to dufresnesteven:

It won't collide with element styles.

Good way of thinking, but unfortunately this still collides with the element styles. Say a theme has a style applied to the :before pseudo element of the target element, then this would cause a problem.

scroll-padding-top as suggested above seems to do the trick. But I'm not sure whether it has enough support to be used in this case.

[sabernhardt]

Should the following two tickets be closed in favor of this one?

• #43452
• #51910 (has scroll-padding-top patch ​PR 782)

[sabernhardt]

adding scroll-padding-top in the stylesheet

[sabernhardt]

The scroll-padding-top value should be better within the stylesheet to give spacing on the admin side, too. Currently, clicking the "Skip to main content" link hides the Screen options and Help buttons behind the toolbar. (I realized that after @ryelle mentioned moving the height variable in #52623.)

So 46371.2.diff​ revises @Nyiriland's patch from #51910.

Firefox scrolls a little extra for the Continue reading (read more) link targets. I also checked in Chrome and Edge (Windows 10).

The scroll padding seems to work with most bundled themes. It does not have enough spacing for link targets in Twenty Sixteen because of the 21px pseudo-element "border" on larger screens, but it's closer. The CSS variable from #52623 might help with that and similar themes later.

[sabernhardt]

Before testing these links on the front end, make sure the admin toolbar shows. If not, view your profile to check the "Show Toolbar when viewing site" setting checkbox.

Link targets within the page/post

(adapted from #43452 description - props @kokkieh and @designsimply)

1. Create a new post (or page).
2. Add some text, at least a few paragraphs.
3. Add a Group or Heading block and assign an HTML anchor under "Additional" section in sidebar menu. (If using the Classic editor, you could add an id attribute to some text that appear below the fold. If you have a plugin for inserting footnotes, that would create both this target and the link in step 4.)
4. Add a link in one of the earlier paragraphs targeting the id.
5. Publish the post, view, and click the link.
6. The target (whether Group, Heading, footnote, etc.) should appear directly below the admin toolbar.

Continue Reading links (More block/tag)

1. If using Twenty Twenty or Twenty Twenty-One, check your Theme Options ("Excerpt Settings" in TT1) to make sure the archive pages show Full Text instead of Summary.
2. Create a new post.
3. Add some text, at least a few paragraphs.
4. Add a More block (or Read More tag in the Classic editor) between two elements of the content.
5. View either the blog page or a category archive.
6. Click the Continue Reading link (it may show different text).
7. On the post page, the element immediately after the More tag should appear directly below the admin toolbar.

Skip to Content link on the front end

1. On any front-end page, press the tab key until you see your theme's "Skip to content" link. If your theme does not have such a link, you could try any theme with the Accessibility Ready tag (or you could try creating one with the WP Accessibility plugin).
2. Click the Skip to content link.
3. The main content area should appear directly below the admin toolbar.

"Skip to main content" link in the admin

1. On any admin page, press the tab key until you see the "Skip to main content" link.
2. Click the Skip to main content link (or press the Enter key).
3. The main content area should (continue to) appear directly below the admin toolbar, as it had appeared before using the link. This includes any "Screen options" and/or "Help" buttons at the top.

[sabernhardt]

#43452 was marked as a duplicate.

[sabernhardt]

#51910 was marked as a duplicate.

[SergeyBiryukov]

#53788 was marked as a duplicate.

[sabernhardt]

using toolbar height variable and adjusting scroll padding for bundled themes

[sabernhardt]

The latest patch adjusts scroll padding for bundled themes:

• Twenty Fourteen has a fixed header of (at least) 48px. This adds scroll padding for most in-page anchors. However, the "more" tag already had padding from r46429, so this adds extra space to that when clicking "Continue reading" links. Reverting r46429 might be appropriate when including this.
• Twenty Sixteen has a 21px visual border on larger screens.
• Twenty Seventeen has a fixed header of 72px. The "more" tag seems to have a JS solution, so this also would add extra padding to those anchors and enough for others.

Another idea I had considered was creating an additional variable for themes to set their own fixed header heights, which might not be any better than the way the patch does it.

html {
	--wp-admin--admin-bar--height: 32px;
	scroll-padding-top: calc( var(--wp-admin--admin-bar--height) + var(--wp-theme--header--height, 0px) );
}

[audrasjb]

The patch looks good to me, but we need to remove the padding added in r46429

[sabernhardt]

removing extra padding from Twenty Fourteen

[costdev]

Test Report

TL;DR

Patch works as expected on all four testing scenarios provided.

Env

• WordPress 5.9-alpha-20211116.134713
• Chrome 95.0.4638.69
• Windows 10
• Theme: Twenty Twenty
• Gutenberg Editor
• Plugin: None activated

Steps to test

See this comment above.

Before patch

1. In-page anchor: The heading is partially hidden by the admin toolbar.
2. Continue Reading link: The content is partially hidden by the admin toolbar.
3. Skip to content on frontend: The content is partially hidden by the admin toolbar.
4. Skip to main content in admin: The content is partially hidden by the admin toolbar. (this was supposed to be fine before the patch, according to the testing instructions).

After patch

1. In-page anchor: The heading appears below the admin toolbar and is fully visible.
2. Continue Reading link: The content appears below the admin toolbar and is fully visible.
3. Skip to content on frontend: The content appears below the admin toolbar and is fully visible.
4. Skip to main content in admin: The content appears below the admin toolbar and is fully visible.

Comments

• Very nice work on resolving this issue.

[sabernhardt]

Replying to costdev:

4. Skip to main content in admin: The content is partially hidden by the admin toolbar. (this was supposed to be fine before the patch, according to the testing instructions).

Words are hard :) By "continue to" in that step, I meant before and after using the link, not before applying the patch. Hopefully that's clearer now.

Marking for commit consideration.

[joedolson]

In 52198:

Toolbar: Prevent adminbar from hiding in-page anchors.

Use scroll-padding-top to offset scroll position on in-page anchors when adminbar is active. Also adjusts existing scroll padding for core themes that implement it.

Props afercia, kingkero, audrasjb, dufresnesteven, thimalw, sabernhardt, costdev.
Fixes #46371.

[sabernhardt]

reminder: include this in the dev note for the CSS custom property #52623

[sabernhardt]

Dev notes published:

• ​New CSS custom property and scroll padding
• ​Bundled themes update