Reduce the added halo for selected block.#76619
Merged
Conversation
jasmussen
added
Needs Design Feedback
github-actions
bot
added
[Package] Base styles
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @jasmussen! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
jasmussen
removed
the
First-time Contributor
|
Size Change: -114 B (0%) Total Size: 8.75 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 27bba85. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23246503529
|
t-hamano
reviewed
Mar 18, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for working on this.
The default outline looks very natural. However, the collaborator's outlines are more prominent. The top image has the collaborator's outline, and the middle image has the current user's outline:
If you'd like to tone down the collaborator's outline style a bit, we can make the following changes:
diff --git a/packages/editor/src/components/collaborators-overlay/overlay-iframe-styles.ts b/packages/editor/src/components/collaborators-overlay/overlay-iframe-styles.ts
index 59980d09846..f037348fcd2 100644
--- a/packages/editor/src/components/collaborators-overlay/overlay-iframe-styles.ts
+++ b/packages/editor/src/components/collaborators-overlay/overlay-iframe-styles.ts
@@ -119,7 +119,7 @@ export const OVERLAY_IFRAME_STYLES = `
outline-style: solid;
outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
outline-offset: calc(-1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
- box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, ${ BORDER_WIDTH_FOCUS_FALLBACK }) + ${ BORDER_WIDTH }) ${ WHITE }, 0 0 0 ${ BORDER_WIDTH } ${ WHITE }, ${ ELEVATION_X_SMALL };
+ box-shadow: inset 0 0 0 calc((var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 0.5px) rgba(${ WHITE }, 0.7), 0 0 0 ${ BORDER_WIDTH } ${ WHITE }, ${ ELEVATION_X_SMALL };
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
What do you think?
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @[email protected]. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Contributor
Author
|
I think that suggestion is important, yes, the tech should be the same across both of those. Feel free to push the change if you have it handy. |
Contributor
Author
|
I gave it a shot. |
t-hamano
approved these changes
Mar 19, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
I think the new outline style looks very natural and is good to land👍
Contributor
Author
|
Thank you for the review, and suggestions 🙏 |
github-actions
bot
removed
the
Backport to WP 7.0 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Mar 19, 2026
Co-authored-by: jasmussen <[email protected]> Co-authored-by: t-hamano <[email protected]>
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: af8ea22 |
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Mar 19, 2026
This updates the pinned hash from the `gutenberg` from `8c78d87453509661a9f28f978ba2c242d515563b` to `487a096a9782ba6110a7686d7b4b2d0c55ed1b06`. The following changes are included: - Disables anchor support for the Page Break block. (WordPress/gutenberg#76434) - WP Admin: Update Connectors screen footer text for consistency. (WordPress/gutenberg#76382) - E2E Tests: Add coverage for AI plugin callout banner on Connectors page (WordPress/gutenberg#76432) - Update sync docs (WordPress/gutenberg#75972) - RTC: Add preference for collaborator notifications (WordPress/gutenberg#76460) - Fix "should undo bold" flaky test (WordPress/gutenberg#76464) - TimePicker: Clamp month day to valid day for month (WordPress/gutenberg#76400) - RTC: Fix error when entity record doesn't have 'meta' property (WordPress/gutenberg#76311) - Navigation: Update close button size. (WordPress/gutenberg#76482) - TemplateContentPanel: fix useSelect warning (WordPress/gutenberg#76421) - DataViews: Add spinner in `DataViewsLayout` in initial load of data (WordPress/gutenberg#76486) (WordPress/gutenberg#76490) - RTC: Fix TypeError in areEditorStatesEqual when selection is undefined (WordPress/gutenberg#76163) - Page/Post Content Focus Mode: Fix insertion into Post Content block (WordPress/gutenberg#76477) - Revisions: use useSubRegistry={false} to fix global store selectors (WordPress/gutenberg#76152) (WordPress/gutenberg#76522) - Fix RTL styling on Connectors, Font Library, and boot-based admin pages (WordPress/gutenberg#76496) - RTC: Auto-register custom taxonomy rest_base values for CRDT sync (WordPress/gutenberg#75983) - RTC: Add a limit for the default provider (WordPress/gutenberg#76437) - Fix RTL styling on AI plugin callout banner (WordPress/gutenberg#76497) - Add command palette trigger button to admin bar (WordPress/gutenberg#75757) - Block Bindings: Remove source items constrained by enums (WordPress/gutenberg#76200) - HTML Block: Remove "unsaved changes" check (WordPress/gutenberg#76086) - CI: Don't build release notes during plugin build workflow for WP Core sync (WordPress/gutenberg#76398) (WordPress/gutenberg#76578) - CI: Simplify strategy matrix in Build Gutenberg Plugin Zip workflow (WordPress/gutenberg#76435) (WordPress/gutenberg#76538) - Media: Add hooks and extension points for client-side media processing (WordPress/gutenberg#74913) - RTC: Fix list sidebar reset during real-time collaboration (WordPress/gutenberg#76025) - RTC: Fix CRDT serialization of nested RichText attributes (WordPress/gutenberg#76597) - RTC: Remove post list lock icon and replace user-specific lock text (WordPress/gutenberg#76322) - Fix HEIC upload error handling and sub-size format (WordPress/gutenberg#76514) - RTC: Fix cursor index sync with rich text formatting (WordPress/gutenberg#76418) - RTC: Allow filtering of `SyncConnectionModal` (WordPress/gutenberg#76554) - RTC: Implement front-end peer limits (WordPress/gutenberg#76565) - Navigation overlay close button may be displayed twice (WordPress/gutenberg#76585) - Site Editor > Templates: fix author filter (WordPress/gutenberg#76625) - Revisions: Show changed block attributes in inspector sidebar (WordPress/gutenberg#76550) - Fix IS_GUTENBERG_PLUGIN env var override in build config (WordPress/gutenberg#76605) - Real Time Collaboration: Introduce filters for the polling intervals. (WordPress/gutenberg#76518) - RTC: Fix RichTextData deserialization (WordPress/gutenberg#76607) - Cross Origin Isolation: Remove `img` from the list of elements that get mutated (WordPress/gutenberg#76618) - RTC: Scroll to collaborator on click (WordPress/gutenberg#76561) - Update changelog link for pull request 11276 (WordPress/gutenberg#76638) - Fix backport changelog filename (WordPress/gutenberg#76651) - Build: Skip non-minified build for WASM-inlined workers (WordPress/gutenberg#76615) - RTC: Change RTC option name (WordPress/gutenberg#76643) - BlockListBlock: fix crash when selectedProps are null (WordPress/gutenberg#75826) - Build: Fix vips worker 404 when SCRIPT_DEBUG is true (WordPress/gutenberg#76657) - useMediaQuery: support in-iframe queries via new `WindowContext` (WordPress/gutenberg#76446) (WordPress/gutenberg#76660) - Refactor admin-ui Page component to use @wordpress/theme tokens and @wordpress/ui layout primitive (WordPress/gutenberg#75963) - Connectors: Improve accessibility (WordPress/gutenberg#76456) - Build: Remove unused JXL WASM module from vips worker (WordPress/gutenberg#76639) - Connectors: fix button size (WordPress/gutenberg#76582) - Compose: Implement useCopyToClipboard and useCopyOnClick with native clipboard API (WordPress/gutenberg#75723) (WordPress/gutenberg#76663) - Connectors: Fetch specific plugin instead of all plugins (WordPress/gutenberg#76594) - Revisions: Add Meta fields diff panel to document sidebar (WordPress/gutenberg#76341) - Loosen client-side media processing requirements (WordPress/gutenberg#76616) - Reduce the added halo for selected block. (WordPress/gutenberg#76619) - Connectors: Add unregisterConnector and upsert support (WordPress/gutenberg#76541) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/8c78d87453509661a9f28f978ba2c242d515563b…487a096a9782ba6110a7686d7b4b2d0c55ed1b06. Log created with: git log --reverse --format="- %s" 8c78d87453509661a9f28f978ba2c242d515563b..487a096a9782ba6110a7686d7b4b2d0c55ed1b06 | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@62063 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Mar 19, 2026
This updates the pinned hash from the `gutenberg` from `8c78d87453509661a9f28f978ba2c242d515563b` to `487a096a9782ba6110a7686d7b4b2d0c55ed1b06`. The following changes are included: - Disables anchor support for the Page Break block. (WordPress/gutenberg#76434) - WP Admin: Update Connectors screen footer text for consistency. (WordPress/gutenberg#76382) - E2E Tests: Add coverage for AI plugin callout banner on Connectors page (WordPress/gutenberg#76432) - Update sync docs (WordPress/gutenberg#75972) - RTC: Add preference for collaborator notifications (WordPress/gutenberg#76460) - Fix "should undo bold" flaky test (WordPress/gutenberg#76464) - TimePicker: Clamp month day to valid day for month (WordPress/gutenberg#76400) - RTC: Fix error when entity record doesn't have 'meta' property (WordPress/gutenberg#76311) - Navigation: Update close button size. (WordPress/gutenberg#76482) - TemplateContentPanel: fix useSelect warning (WordPress/gutenberg#76421) - DataViews: Add spinner in `DataViewsLayout` in initial load of data (WordPress/gutenberg#76486) (WordPress/gutenberg#76490) - RTC: Fix TypeError in areEditorStatesEqual when selection is undefined (WordPress/gutenberg#76163) - Page/Post Content Focus Mode: Fix insertion into Post Content block (WordPress/gutenberg#76477) - Revisions: use useSubRegistry={false} to fix global store selectors (WordPress/gutenberg#76152) (WordPress/gutenberg#76522) - Fix RTL styling on Connectors, Font Library, and boot-based admin pages (WordPress/gutenberg#76496) - RTC: Auto-register custom taxonomy rest_base values for CRDT sync (WordPress/gutenberg#75983) - RTC: Add a limit for the default provider (WordPress/gutenberg#76437) - Fix RTL styling on AI plugin callout banner (WordPress/gutenberg#76497) - Add command palette trigger button to admin bar (WordPress/gutenberg#75757) - Block Bindings: Remove source items constrained by enums (WordPress/gutenberg#76200) - HTML Block: Remove "unsaved changes" check (WordPress/gutenberg#76086) - CI: Don't build release notes during plugin build workflow for WP Core sync (WordPress/gutenberg#76398) (WordPress/gutenberg#76578) - CI: Simplify strategy matrix in Build Gutenberg Plugin Zip workflow (WordPress/gutenberg#76435) (WordPress/gutenberg#76538) - Media: Add hooks and extension points for client-side media processing (WordPress/gutenberg#74913) - RTC: Fix list sidebar reset during real-time collaboration (WordPress/gutenberg#76025) - RTC: Fix CRDT serialization of nested RichText attributes (WordPress/gutenberg#76597) - RTC: Remove post list lock icon and replace user-specific lock text (WordPress/gutenberg#76322) - Fix HEIC upload error handling and sub-size format (WordPress/gutenberg#76514) - RTC: Fix cursor index sync with rich text formatting (WordPress/gutenberg#76418) - RTC: Allow filtering of `SyncConnectionModal` (WordPress/gutenberg#76554) - RTC: Implement front-end peer limits (WordPress/gutenberg#76565) - Navigation overlay close button may be displayed twice (WordPress/gutenberg#76585) - Site Editor > Templates: fix author filter (WordPress/gutenberg#76625) - Revisions: Show changed block attributes in inspector sidebar (WordPress/gutenberg#76550) - Fix IS_GUTENBERG_PLUGIN env var override in build config (WordPress/gutenberg#76605) - Real Time Collaboration: Introduce filters for the polling intervals. (WordPress/gutenberg#76518) - RTC: Fix RichTextData deserialization (WordPress/gutenberg#76607) - Cross Origin Isolation: Remove `img` from the list of elements that get mutated (WordPress/gutenberg#76618) - RTC: Scroll to collaborator on click (WordPress/gutenberg#76561) - Update changelog link for pull request 11276 (WordPress/gutenberg#76638) - Fix backport changelog filename (WordPress/gutenberg#76651) - Build: Skip non-minified build for WASM-inlined workers (WordPress/gutenberg#76615) - RTC: Change RTC option name (WordPress/gutenberg#76643) - BlockListBlock: fix crash when selectedProps are null (WordPress/gutenberg#75826) - Build: Fix vips worker 404 when SCRIPT_DEBUG is true (WordPress/gutenberg#76657) - useMediaQuery: support in-iframe queries via new `WindowContext` (WordPress/gutenberg#76446) (WordPress/gutenberg#76660) - Refactor admin-ui Page component to use @wordpress/theme tokens and @wordpress/ui layout primitive (WordPress/gutenberg#75963) - Connectors: Improve accessibility (WordPress/gutenberg#76456) - Build: Remove unused JXL WASM module from vips worker (WordPress/gutenberg#76639) - Connectors: fix button size (WordPress/gutenberg#76582) - Compose: Implement useCopyToClipboard and useCopyOnClick with native clipboard API (WordPress/gutenberg#75723) (WordPress/gutenberg#76663) - Connectors: Fetch specific plugin instead of all plugins (WordPress/gutenberg#76594) - Revisions: Add Meta fields diff panel to document sidebar (WordPress/gutenberg#76341) - Loosen client-side media processing requirements (WordPress/gutenberg#76616) - Reduce the added halo for selected block. (WordPress/gutenberg#76619) - Connectors: Add unregisterConnector and upsert support (WordPress/gutenberg#76541) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/8c78d87453509661a9f28f978ba2c242d515563b…487a096a9782ba6110a7686d7b4b2d0c55ed1b06. Log created with: git log --reverse --format="- %s" 8c78d87453509661a9f28f978ba2c242d515563b..487a096a9782ba6110a7686d7b4b2d0c55ed1b06 | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/trunk@62063 git-svn-id: http://core.svn.wordpress.org/trunk@61345 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Followup to #76413 (comment).
An extra set of borders were added to the selected-block-outline in that PR. As I understand the motivation, this was to make the selected style clearer when multiple users were editing at the same time, each user with their own color. But these added outlines were quite heavy in dark contexts:
This PR reduces it to a single .5px semi-transparent inner halo:
Why?
The existing style makes the selected outline substantially thicker, 3.5px instead of 1.5px, actively obscuring additional context and through its high contrast in dark themes making it harder to see the contents.
In fact the .5px inner halo this PR adds may still be slightly too much, but it's a compromise.
It needs design feedback, but whatever we land on should be backported to 7.0.