Skip to content

Format Library: Add a preference to hide non-breaking space markers - #84592

Closed
taipeicoder wants to merge 1 commit into
WordPress:trunkfrom
taipeicoder:add/non-breaking-space-markers-preference
Closed

taipeicoder wants to merge 1 commit into
WordPress:trunkfrom
taipeicoder:add/non-breaking-space-markers-preference

Conversation

@taipeicoder

@taipeicoder taipeicoder commented Oct 13, 2026 •

Copy link
Copy Markdown
Contributor

What?

Adds a "Show non-breaking spaces" toggle under Preferences → Appearance. Turning it off hides the outlines the editor draws around non-breaking spaces. It's on by default, so nothing changes for anyone who leaves it alone.

preferences-toggle
Toggle ON Toggle OFF
site-on site-off

Why?

When a rich-text block is selected, the editor outlines every non-breaking space (U+00A0) in it, and there's no way to turn that off. In content that uses non-breaking spaces on purpose, such as writing the number 10 000 which a non-breaking space to avoid a newline, the outlines might seem confusing or make text hard to read.

Removing the characters isn't an option, because they control where lines wrap. Writers need to keep them but stop seeing them.

How?

The non-breaking space format now reads a new core preference, showNonBreakingSpaces. When the preference is off, the format leaves the text unmarked. The preference defaults to on in the post editor, the site editor and the extensible site editor.

Testing Instructions

Post editor

  1. Create a new post and add a Paragraph block.
  2. Type 10, press Cmd+Shift+Space (Ctrl+Shift+Space on Windows/Linux), then type 000. Repeat a few times elsewhere in the paragraph.
  3. With the paragraph selected, each non-breaking space has a thin outline, the same as on trunk.
  4. Open Options (⋮) → Preferences → Appearance. "Show non-breaking spaces" is on.
  5. Turn it off and close the modal. The outlines are gone, and the text doesn't shift.
  6. Switch to the Code editor (Cmd+Shift+Alt+M). The paragraph's content is the same as before you turned the toggle off.
  7. Back in the visual editor, press Cmd+Shift+Space. A non-breaking space is inserted, with no outline.
  8. Press Shift+Left to select it. The "Non-breaking space" popover appears.
  9. Turn the preference back on. The outlines return.

Site editor

  1. Activate a block theme, such as Twenty Twenty-Four.
  2. Open Appearance → Editor and edit any template.
  3. Repeat steps 1–9 above in a Paragraph block. The results are the same. The preference is shared with the post editor, so check its current state first.

Testing Instructions for Keyboard

  1. Tab to the Options (⋮) button in the editor top bar, press Enter, then use the arrow keys and Enter to open Preferences.
  2. Use the arrow keys to select the Appearance tab, then Tab to "Show non-breaking spaces".
  3. Press Space. The toggle changes state, and after you close the modal with Escape, the outlines match the new setting.

Use of AI Tools

Implemented with Claude Code (Claude Opus 5.5), including the unit test and the browser checks of both editors. I reviewed the changes and am responsible for them.

@github-actions github-actions Bot added [Package] Editor /packages/editor [Package] Format library /packages/format-library [Package] Edit Post /packages/edit-post [Package] Edit Site /packages/edit-site labels Oct 13, 2026
Selected rich text outlines every non-breaking space while editing, and
there was no way to turn the outlines off. Content with many intentional
non-breaking spaces became hard to read in the editor.

Add a "Show non-breaking spaces" toggle under Preferences > Appearance,
backed by the core showNonBreakingSpaces preference. It defaults to on in
the post editor and both site editors, and editors that never seed it keep
the outlines. Turning it off only removes the editor outlines: the
characters, saved content, insert shortcut, and popover are unchanged.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@taipeicoder
taipeicoder force-pushed the add/non-breaking-space-markers-preference branch from 1fd46aa to b0de8de Compare October 13, 2026 02:38
@taipeicoder taipeicoder added the [Type] Enhancement A suggestion for improvement. label Oct 13, 2026
@taipeicoder taipeicoder self-assigned this Oct 13, 2026
@taipeicoder
taipeicoder marked this pull request as ready for review October 13, 2026 03:55
@taipeicoder
taipeicoder requested a review from ellatrix as a code owner October 13, 2026 03:55
@github-actions

github-actions Bot commented Oct 13, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

🎉 Props

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: taipeicoder <griffithchen@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

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

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🟢 Approval recommended

The preference is consistently integrated, persisted through the existing store, and covered by focused tests.

0 open findings

What changed in this PR

Adds a shared preference for controlling non-breaking-space markers across editor experiences.

Changes:

  • Adds the Appearance preference and enables it by default.
  • Makes marker rendering respond reactively to the preference.
  • Adds unit coverage and package metadata updates.
File Description
packages/​format-library/​tsconfig.json References the preferences package types.
packages/​format-library/​src/​non-breaking-space/​test/​index.jsdom.test.js Tests marker visibility and default behavior.
packages/​format-library/​src/​non-breaking-space/​index.tsx Reads the preference and conditionally adds markers.
packages/​format-library/​package.json Declares the preferences dependency.
packages/​format-library/​CHANGELOG.md Documents the format enhancement.
packages/​editor/​src/​components/​preferences-modal/​index.jsx Adds the Appearance toggle.
packages/​editor/​CHANGELOG.md Documents the new toggle.
packages/​edit-site/​src/​index.jsx Enables the preference by default in the site editor.
packages/​edit-site/​CHANGELOG.md Documents the site-editor default.
packages/​edit-site-init/​src/​index.ts Enables the default in extensible editor routes.
packages/​edit-post/​src/​index.jsx Enables the preference by default in the post editor.
packages/​edit-post/​CHANGELOG.md Documents the post-editor default.
package-lock.json Records the new package dependency.

🧠 Review effort: Balanced


💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

@Mamaduka

Copy link
Copy Markdown
Member

This seems related to #72232, which also has a PR open.

@taipeicoder

Copy link
Copy Markdown
Contributor Author

Closing in favor of #84737

@taipeicoder
taipeicoder deleted the add/non-breaking-space-markers-preference branch October 21, 2026 00:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Edit Post /packages/edit-post [Package] Edit Site /packages/edit-site [Package] Editor /packages/editor [Package] Format library /packages/format-library [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants