Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Hidden-until-focus skip link becomes visible: core/button projection drops the source rule's opacity and position

Open
  • Is something wrong?
#2,843 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, html, php, wordpress
Domain
frontend

Research direction

Start by reproducing the neutral fixture in the issue: a button with class skip whose source rule sets opacity 0 and absolute position, plus a :focus override. Compare the source computed style with the imported core/button output to see which declarations are dropped. The issue asks for a projected rule that targets the focusable link, and a regression test that fails on trunk. Done when the button is hidden at rest, visible on :focus, and still an editable core/button.

Written by the indexing model from the issue text.

Description

Problem

A skip link that is hidden until focus renders as visible text after import. The source hides it with author CSS on the element itself and reveals it with :focus:

.skip{pointer-events:none;opacity:0;position:absolute;top:60px;left:50%;width:0;height:0;padding:0 24px;color:#116dff;background:#fff;border-radius:24px;font-size:14px}
.skip:focus{opacity:1;pointer-events:auto;width:auto;height:40px}

<button class="skip">Skip to Main Content</button>

The <button> becomes core/button. The source class moves to the .wp-block-button wrapper, and the representable declarations (color, background, padding, radius, font) move to the inner link's inline style. The hiding declarations (opacity:0, position:absolute, pointer-events:none) don't reach the rendered button. Computed style is opacity:1; position:static, and the text overflows a 0-height box as a vertical column. On a captured Wix mobile document it overlays the header and pushes the menu toggle down. Desktop is affected the same way but masked by layout.

Evidence: a 49-route import of a Wix site, compared with the frozen capture on the mobile profile. Source computed style is opacity:0; position:absolute; the import is opacity:1; position:static. The :focus reveal must keep working on the element that receives focus.

Expected

The element that receives focus keeps the source's resting and focus states. When a source rule is split between a block wrapper and its inner link, declarations the block can't express (opacity, position, pointer-events, offsets) are kept by a projected rule that targets the same element as the source. The :focus variant targets the focusable link.

Acceptance

  • A neutral fixture (above) renders the button hidden at rest (opacity 0, out of flow) and visible on :focus. The button stays an editable core/button.
  • A regression test fails on trunk.

AI assistance: investigation and drafting by Claude (Anthropic) via Pi in Franklin's workspace, from a live Studio import plus a Playwright computed-style comparison against the frozen capture.

Dominant language
PHP
Stars
22
Forks
2
Avg merge
8h 22m
Merged PRs (30d)
659

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/blocks-engine

All issues in Automattic/blocks-engine

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.