-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rich text: pad multiple spaces through en/em replacement #56341
Conversation
Size Change: +715 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
Flaky tests detected in 20c9c93. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6936439196
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks great. I tried it out in the Playground and the way it works feels better than before.
Would love to see a comment to convertSpaces
before merge though.
@@ -42,6 +42,26 @@ function findSelection( blocks ) { | |||
return []; | |||
} | |||
|
|||
function convertSpaces( value ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this function could use some explanation, and possible a clearer name like replacePrecedingSpaces
just a single sentence explaining its purpose could help quite a bit.
)" This reverts commit 53cae01.
)" This reverts commit 53cae01.
* trunk: (273 commits) Remove preffered style variations legacy support (#58930) Style theme variations: add property extraction and merge utils (#58803) Migrate `change-detection` to Playwright (#58767) Update Changelog for 17.6.6 Docs: Clarify the status of the wp-block-styles theme support, and its intent (#58915) Use `data_wp_context` helper in core blocks and remove `data-wp-interactive` object (#58943) Try double enter for details block. (#58903) Template revisions API: move from experimental to compat/6.4 (#58920) Editor: Remove inline toolbar preference (#58945) Clean up link control CSS. (#58934) Font Library: Show error message when no fonts found to install (#58914) Block Bindings: lock editing of blocks by default (#58787) Editor: Remove the 'all' rendering mode (#58935) Pagination Numbers: Add `data-wp-key` to pagination numbers if enhanced pagination is enabled (#58189) Close link preview if collapsed selection when creating link (#58896) Fix incorrect useAnchor positioning when switching from virtual to rich text elements (#58900) Upgrade Floating UI packages, fix nested iframe positioning bug (#58932) Site editor: fix start patterns store selector (#58813) Revert "Rich text: pad multiple spaces through en/em replacement (#56341)" (#58792) Documentation: Clarify the performance reference commit and how to pick it (#58927) ...
What?
Currently, multiple spaces are not preserved on the front-end because normally white space is collapsed in HTML. Browsers normally fix this in
contenteditable
by adding alternating non-breaking spaces. This is what I tried in #56280. The solution is not working great (need more special casing for the start and end of line), and we'd need to make sure that the alternating patterns stays (removing a space in between two non breaking spaces should reset the pattern for example). Additionally, we need to make sure we somehow don't end up with single non breaking spaces littered over the content, because that results in weird text non breaking flows. And we can't just remove all non breaking spaces because we don't know if it was intentional.@dmsnell came up with the idea to replace them with en/em spaces, which I thought was great!
When you insert a space after another space, replace it with an en space, which HTML doesn't collapse! When you insert a space again, replace with an em space.
This creates a dual function of both acting as a typographical shortcut and preventing the space from collapsing.
It's worth noting that adding multiple spaces should be uncommon. In all these years, there hasn't been a single report about the fact that the spaces disappear on the front-end. Nevertheless, we're looking into using the same white space CSS rules as the front-end, so it would be super odd if you were typing multiple spaces and the space wouldn't increase after 1.
Also, if people really insisted on inserting actual spaces (which browser wouldn't do anyway), they can use the CSS rule, or use the verse or pre block.
Why?
See above.
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast