Skip to content

Editor: Use --wpds-cursor-control design token#77376

Merged
mirka merged 7 commits into
WordPress:trunkfrom
himanshupathak95:fix/76221-editor-cursor-control-token
Apr 17, 2026
Merged

Editor: Use --wpds-cursor-control design token#77376
mirka merged 7 commits into
WordPress:trunkfrom
himanshupathak95:fix/76221-editor-cursor-control-token

Conversation

@himanshupathak95
Copy link
Copy Markdown
Contributor

@himanshupathak95 himanshupathak95 commented Apr 15, 2026

What?

Part of #76221

Why?

Update instances of cursor: pointer to use the --wpds-cursor-control design token so interactive control cursor behavior can be centrally configured.

How?

Replaced hardcoded cursor: pointer with cursor: var(--wpds-cursor-control) in:

  • Document outline button (document-outline/style.scss)
  • Collaborators presence button (collaborators-presence/styles/collaborators-presence.scss)
  • Collaborators list item (collaborators-presence/styles/collaborators-list.scss)
  • Template actions panel role="button" (template-actions-panel/style.scss)
  • Post revisions preview diff marker (post-revisions-preview/style.scss)
  • Style book example card (style-book/constants.ts)

Testing Instructions

Document Outline

  1. Open a post with multiple outline elements (like Headings)
  2. Open the sidebar → Document tab → Document Outline
  3. Inspect a heading button and verify cursor: var(--wpds-cursor-control, pointer)

Collaborators Presence and list items

  1. Open a post being edited by multiple users (or inspect the collaborators button in the top bar)
  2. Inspect .editor-collaborators-presence__button and collaborators-presence__list-item and verify the token

Template Actions Panel

  1. Make sure to enable the experiment - Editor Inspector: Use DataForm
  2. Edit a page and inspect the sidebar element in Template: Pages
  3. Inspect the template preview area with role="button" and verify the token

Post Revisions Preview

  1. Open a post with revisions, open the revisions panel
  2. Inspect the diff markers and verify the token

Style Book

  1. Go to Appearance → Editor → Styles → Style Book
  2. Inspect any example card and verify cursor: var(--wpds-cursor-control, pointer) on .editor-style-book__example

Screenshots or screencast

Document Outline

Before After
Before After

Collaborators Presence and List Items

Before After
Before After
Before After

Template Actions Panel

Before After
Before After

Post Revisions Preview

Before After
Before After

Style Book

Before After
Before After

Maybe Upload Media

Before After
Screenshot 2026-04-17 at 11 45 24 Screenshot 2026-04-17 at 11 39 50

@github-actions github-actions Bot added the [Package] Editor /packages/editor label Apr 15, 2026
@himanshupathak95 himanshupathak95 changed the title Editor: Use --wpds-cursor-control design token Editor: Use --wpds-cursor-control design token [WIP] Apr 15, 2026
@himanshupathak95 himanshupathak95 force-pushed the fix/76221-editor-cursor-control-token branch from 43d2489 to 197f4f0 Compare April 16, 2026 06:13
@himanshupathak95 himanshupathak95 changed the title Editor: Use --wpds-cursor-control design token [WIP] Editor: Use --wpds-cursor-control design token Apr 16, 2026
@himanshupathak95 himanshupathak95 force-pushed the fix/76221-editor-cursor-control-token branch from 197f4f0 to 46f4691 Compare April 16, 2026 06:41
@himanshupathak95 himanshupathak95 marked this pull request as ready for review April 16, 2026 06:46
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 16, 2026

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: mirka <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@mirka mirka added the [Type] Enhancement A suggestion for improvement. label Apr 16, 2026
@mirka mirka self-requested a review April 16, 2026 11:05
Copy link
Copy Markdown
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There also seems to be a hardcoded style remaining here:

@himanshupathak95
Copy link
Copy Markdown
Contributor Author

There also seems to be a hardcoded style remaining here:

Good catch, Thanks!

Incorporated in 92579f4 and tested.

@himanshupathak95 himanshupathak95 requested a review from mirka April 17, 2026 07:02
Copy link
Copy Markdown
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks!

@mirka mirka merged commit 6e2cfad into WordPress:trunk Apr 17, 2026
41 checks passed
@github-actions github-actions Bot added this to the Gutenberg 23.1 milestone Apr 17, 2026
ciampo pushed a commit that referenced this pull request Apr 21, 2026
* StyleBook: Use --wpds-cursor-control design token

* Document Outline: Use --wpds-cursor-control design token

* Collaborators Presence: Use --wpds-cursor-control design token

* Collaborators List: Use --wpds-cursor-control design token

* Template Actions Panel: Use --wpds-cursor-control design token

* Post Revisions Diff Marker: Use --wpds-cursor-control design token

* MaybeUploadMedia: Use --wpds-cursor-control design token

Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: mirka <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Editor /packages/editor [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants