Skip to content

feat(theme): consolidate interactive cursors into one base layer - #15

Open
anilsoylu wants to merge 1 commit into
Automattic:mainfrom
anilsoylu:feat/base-cursor-layer
Open

feat(theme): consolidate interactive cursors into one base layer#15
anilsoylu wants to merge 1 commit into
Automattic:mainfrom
anilsoylu:feat/base-cursor-layer

Conversation

@anilsoylu

Copy link
Copy Markdown

What

The theme has no base cursor layer. cursor: pointer is written by hand in eight places in theme/style.css, once per control, and anything the author forgets keeps the arrow. Text is worse: without a body default, every paragraph, heading and code block hands the reader an I-beam, so a docs page reads like one long text field.

This adds the base layer next to the existing element defaults and drops the per-component declarations it now covers.

a,
button,
summary,
[role="button"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="submit"] {
	cursor: pointer;
}

input,
textarea,
[contenteditable="true"] {
	cursor: text;
}

cursor: default goes into the existing body rule, and touch-action: manipulation sits next to the -webkit-tap-highlight-color rule that is already there. That one kills the 300ms double-tap-zoom delay before a control activates on touch.

summary is in the pointer list because raw HTML passes through the Markdown renderer (src/markdown.js), so a page author writing <details><summary> gets a real disclosure widget in .entry-content.

Removed as redundant

.header-button, .menu-toggle, .command-search-close, .sidebar-collapse-toggle, .sidebar-search-clear, .docs-nav-toggle, .copy-code, and the cursor line on .comment-form .submit, .post-password-form input[type="submit"]. Each one is a <button> in theme/inc/blocks.php or theme/assets/js/docs.js, so the base rule reaches all of them.

Kept: .drawer-scrim, which is a <div> the base layer cannot reach, and every cursor: default / not-allowed state override, including .docs-nav.is-filtering .docs-nav-toggle.

Scope

theme/style.css only. I left the eleven cursor: pointer declarations in plugins/docspress-blocks/ alone. DocsPress Blocks ships as its own installable plugin and its stylesheets carry literal fallbacks for every --dp-* token, so they are written to survive under another theme. No UA stylesheet gives <button> a pointer, so deleting those would regress every copy button and tab the moment the plugin runs without this theme.

add_editor_style( 'style.css' ) in theme/functions.php already loads the theme stylesheet into the editor canvas, so the base layer applies there too.

A note on checkbox and radio

They are in the pointer list on purpose. Without them, the later input, textarea rule would put an I-beam on WordPress core's comment cookie-consent checkbox, which this theme already styles at .comment-form-cookies-consent label. The attribute selectors outrank the bare input, so the cascade resolves without extra ordering rules.

Verification

New test in test/block-theme.test.js pins the four base rules, asserts the five deduplicated components no longer declare their own pointer, and guards the two intentional exceptions so a later refactor cannot quietly flatten them.

  • npx vitest run test/block-theme.test.js -t "base layer" fails against unpatched style.css, passes with the change.
  • npm test: 132 passed.
  • npx eslint .: clean.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant