Make skip link for Full Site Editing themes AMP compatible

[pierlon]

Bug Description

Gutenberg 10.5 adds a skip link that points to the main element when a FSE theme is active. This is accomplished with a bit of CSS and JS (see WordPress/gutenberg#30336) but that solution isn't AMP compatible. This now causes a validation error to be raised for the invalid script:

Expected Behaviour

A validation error should not be raised for the skip link functionality when using a FSE theme.

Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

Additional context

• WordPress version:
• Plugin version:
• Gutenberg plugin version (if applicable):
• AMP plugin template mode:
• PHP version:
• OS:
• Browser: [e.g. chrome, safari]
• Device: [e.g. iPhone6]

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

I've added a workaround to omit the script in #6115 as it was needed to make the tests pass. This issue remains needed to actually implement the functionality.

As for how to implement support, I think gutenberg_the_skip_link() is somewhat of a missed opportunity. If full-site editing is active, then this means all of the blocks can be manipulated as data. Therefore PHP should rather be used to insert the a.skip-link.screen-reader-text rather than using JS to inject it. This will also ensure the skip link works when JS is turned off. I suggest we contribute that upstream to Gutenberg.

[dhaval-parekh]

Therefore PHP should rather be used to insert the a.skip-link.screen-reader-text rather than using JS to inject it. This will also ensure the skip link works when JS is turned off. I suggest we contribute that upstream to Gutenberg.

We can use PHP but it needs to be with PHP DOM since while adding skip link we need to find the ID of the target element.

[fellyph]

Tested at 2.2.x and QA Passed