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?