Skip to content

Real-time collaboration: Fix style mounting in RTC overlay#75700

Merged
alecgeatches merged 1 commit intoWordPress:trunkfrom
Automattic:fix/rtc-overlay-styles
Feb 26, 2026
Merged

Real-time collaboration: Fix style mounting in RTC overlay#75700
alecgeatches merged 1 commit intoWordPress:trunkfrom
Automattic:fix/rtc-overlay-styles

Conversation

@alecgeatches
Copy link
Copy Markdown
Contributor

@alecgeatches alecgeatches commented Feb 18, 2026 •
edited
Loading

What?

Styling for the RTC overlay is inconsistent. Interacting with the page can cause useStyleOverride() to unmount styles causing user cursors to stack at the top of the page:

users-on-top

This appears to happen after the first interaction with the page. Below, 0-10s shows styles correctly loaded for a user cursor, then after a click, 11s-25s shows the styles missing:

Screen.Recording.2026-02-18.at.11.38.08.AM.mov

Why?

We very recently introduced style injection via useStyleOverride() in #75398, which changed how our styles were injected. This PR attempts to fix that style injection.

How?

useStyleOverride() has pretty complex logic and appears to be unmounting styles in our slotfill pattern. I'm not clear on why it doesn't work here, but it appears to have been intended for block style injections which might have a different lifecycle.

The fix replaces the hook-based approach with a plain <style> element rendered directly in the component's JSX. Since the Overlay already renders inside the iframe document (via BlockCanvasCover.Slot), the <style> tag ends up in the correct document automatically.

Testing Instructions

To reproduce on trunk:

  1. Go to WordPress Admin -> Settings -> Writing, and check the "Enable real-time collaboration" checkbox. Click the "Save Changes" button.
  2. Open the same post in two or more separate tabs.
  3. With each user, click onto the page. You should see after interacting with the page the other user's cursor boxes appear at the top of the page.

In this PR, step 3 should no longer show large cursors at the top of the page and show user cursors where they are actually present.

Screenshots

Before After
Screenshot 2026-02-18 at 12 47 04 PM Screenshot 2026-02-18 at 12 48 50 PM

@alecgeatches alecgeatches self-assigned this Feb 18, 2026
@alecgeatches alecgeatches marked this pull request as ready for review February 18, 2026 19:16
@github-actions github-actions bot added the [Package] Editor /packages/editor label Feb 18, 2026
@alecgeatches alecgeatches added the [Feature] Real-time Collaboration Phase 3 of the Gutenberg roadmap around real-time collaboration label Feb 18, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 18, 2026 •
edited
Loading

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: alecgeatches <alecgeatches@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>

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

@alecgeatches alecgeatches added the [Type] Bug An existing feature does not function as intended label Feb 18, 2026
@alecgeatches alecgeatches mentioned this pull request Feb 18, 2026
Merged
@alecgeatches
Copy link
Copy Markdown
Contributor Author

alecgeatches commented Feb 24, 2026 •
edited
Loading

@ellatrix Could I ask you have a look at this? I've seen some inconsistencies using the useStyleOverride() hook in an editor slotfill and not sure if this is a reasonable workaround. Thanks!

@ellatrix
Copy link
Copy Markdown
Member

ellatrix commented Feb 26, 2026

Sure, feel free to do it as a workaround for now. Would be good to figure out what it unmounts

@alecgeatches alecgeatches merged commit df10ec1 into WordPress:trunk Feb 26, 2026
50 of 52 checks passed
@alecgeatches alecgeatches deleted the fix/rtc-overlay-styles branch February 26, 2026 20:18
@github-actions github-actions bot added this to the Gutenberg 22.7 milestone Feb 26, 2026
@maxschmeling maxschmeling mentioned this pull request Mar 2, 2026
Open
@alecgeatches alecgeatches added the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 3, 2026
@github-actions github-actions bot removed the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 3, 2026
gutenbergplugin pushed a commit that referenced this pull request Mar 3, 2026
@alecgeatches @ellatrix @gutenbergplugin
Directly inject styles in overlay to make styles stay consistently mo…
743f4f6 
…unted (#75700)

Co-authored-by: alecgeatches <alecgeatches@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
@github-actions github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Mar 3, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 3, 2026

I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 743f4f6

pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Mar 5, 2026
@ellatrix
Gutenberg ref update.
e7d40e7 
CI run: #11167.

See #64595.

---

I've included a log of the Gutenberg changes with the following command:

git log --reverse --format="- %s" 022d8dd3d461f91b15c1f0410649d3ebb027207f..e499abfb843a43ac88455ca319220c5f181e1cf3 | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy

- Add documentation for contentRole and listView block supports (WordPress/gutenberg#75903)
- Interactivity Router: fix back and forward navigation after refresh (WordPress/gutenberg#75927)
- Real-time collaboration: Fix disconnect dialog on navigate (WordPress/gutenberg#75886)
- Real Time Collab: Throttle syncing for inactive tabs. (WordPress/gutenberg#75843)
- Components: Specify line-height to avoid inheriting default values (WordPress/gutenberg#75880)
- Pattern Editing: Fix sibling blocks to edited pattern not being disabled (WordPress/gutenberg#75994)
- Sync connector PHP behavior with Core backport changes (WordPress/gutenberg#75968)
- Connectors: Avoid manual string concatenation (WordPress/gutenberg#75997)
- DataForm: fix field label for panel (should not be uppercase) (WordPress/gutenberg#75944)
- Views: add support for more overrides (all developer-defined config) (WordPress/gutenberg#75971)
- Use homeUrl instead of siteUrl for link badge evaluations (WordPress/gutenberg#75978)
- DataViews: Right-align `integer` and `number` fields (WordPress/gutenberg#75917)
- Navigation Link: Compare internal links by host instead of origin (WordPress/gutenberg#76015)
- Fix: Skip scaled image sideload for images below big image threshold (WordPress/gutenberg#75990)
- Client side media cherry pick for 7.0 (WordPress/gutenberg#75998)
- Show transform dropdown previews on focus as well as hover (WordPress/gutenberg#75940) (WordPress/gutenberg#75992)
- RTC: Fix syncing of emoji / surrogate pairs (WordPress/gutenberg#76049)
- [Real-time Collaboration] Fix sync issue on refresh (WordPress/gutenberg#76017)
- Real-time collaboration: Improve disconnect dialog (WordPress/gutenberg#75970)
- DataViews: Fix filter toggle flickering when there are locked or primary filters (WordPress/gutenberg#75913) (WordPress/gutenberg#76068)
- Connectors: Dynamically register providers from WP AI Client registry (WordPress/gutenberg#76014)
- PHP-only Blocks: Reflect bound attribute values in inspector controls (WordPress/gutenberg#76040)
- Fix: Set quality and strip metadata in client-side image resize (WordPress/gutenberg#76029)
- RTC: Prevent duplicate poll cycles (WordPress/gutenberg#76059)
- RTC: Fix stale CRDT document persisted on save (WordPress/gutenberg#75975)
- RTC: Disable multiple collaborators if meta boxes are present (WordPress/gutenberg#75939)
- Directly inject styles in overlay to make styles stay consistently mounted (WordPress/gutenberg#75700)
- Real-time collaboration: Fix comment syncing on site editor (WordPress/gutenberg#75746)
- Real-time Collaboration: Bug fix for CRDT user selection and add tests (WordPress/gutenberg#75075)
- RTC: Updates from backport PR (WordPress/gutenberg#75711)
- RTC: Fix undefined array_first() call in sync storage (WordPress/gutenberg#75869)
- RTC: Fix fallthrough for sync update switch statement (WordPress/gutenberg#76060)
- Real-time collaboration: Remove block client IDs from Awareness, fix "Show Template" view (WordPress/gutenberg#75590)
- RTC: Add session activity notifications (WordPress/gutenberg#76065)
- Prevent non-reproducible Sass/CSS builds. (WordPress/gutenberg#76098)
- Block toolbar and context menu: hide pattern actions in Revisions UI (WordPress/gutenberg#76066)
- Try enabling style variation transforms for blocks in contentOnly mode (WordPress/gutenberg#75761)
- Block toolbar: hide styles dropdown in Revisions UI (WordPress/gutenberg#76119)
- Image block: fix lightbox srcset size (WordPress/gutenberg#76092)
- Fix writing flow navigation for annotation style, or any other block with border radius (WordPress/gutenberg#76072)
- Image: Hide 'Set as featured image' for in-editor revisions (WordPress/gutenberg#76123)
- Connectors: Gate unavailable install actions behind install capability (WordPress/gutenberg#75980)
- build: Exclude experimental pages from Core builds (WordPress/gutenberg#76038)
- HTML & Shortcode: Disable viewport visibility support (WordPress/gutenberg#76138)
- RTC: Verify client ID to avoid awareness mutation (WordPress/gutenberg#76056)
- wp-build: Do not remove Core's default script modules registration (WordPress/gutenberg#75705)
- wp-build: Deregister script modules before re-registering (WordPress/gutenberg#75909)
- Remove `! function_exists()` checks from PHP templates (WordPress/gutenberg#76062)
- Connectors: Update page identifier to options-connectors (WordPress/gutenberg#76156)
- Connectors: Align init hook priorities with Core overrides (WordPress/gutenberg#76161)
- Icon Block: Clean up selectors config (WordPress/gutenberg#75786)
- Icons: Fix incorrect icon slug (WordPress/gutenberg#76165)
- RTC: Enable RTC by default (WordPress/gutenberg#75739)
- Rename and visibility modals: gate shortcuts behind canEditBlock to prevent triggering in revisions UI (WordPress/gutenberg#76168)
- Fix: Block style variations not rendering in Site Editor Patterns page (WordPress/gutenberg#76122)
- Client-side media processing: only use media upload provider when not in preview mode (WordPress/gutenberg#76124)
- Notes: Disable for in-editor revisions (WordPress/gutenberg#76180)
- Core Data: Support reading revision data in useEntityProp (fixes footnotes in revisions UI) (WordPress/gutenberg#76106)
- Client-side media processing: Try plumbing invalidation to the block-editor's mediaUpload onSuccess callback (WordPress/gutenberg#76173)
- Connectors: Improve responsive layout on small screens (WordPress/gutenberg#76186)
- Interactivity API: Fix router initialization race condition on Safari/Firefox (WordPress/gutenberg#76053) (WordPress/gutenberg#76191)
- Interactivity: Fix crypto.randomUUID crash in non-secure contexts (WordPress/gutenberg#76151)


git-svn-id: https://develop.svn.wordpress.org/trunk@61843 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Mar 5, 2026
@ellatrix
Gutenberg ref update.
f51b21a 
CI run: WordPress/wordpress-develop#11167.

See #64595.

---

I've included a log of the Gutenberg changes with the following command:

git log --reverse --format="- %s" 022d8dd3d461f91b15c1f0410649d3ebb027207f..e499abfb843a43ac88455ca319220c5f181e1cf3 | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy

- Add documentation for contentRole and listView block supports (WordPress/gutenberg#75903)
- Interactivity Router: fix back and forward navigation after refresh (WordPress/gutenberg#75927)
- Real-time collaboration: Fix disconnect dialog on navigate (WordPress/gutenberg#75886)
- Real Time Collab: Throttle syncing for inactive tabs. (WordPress/gutenberg#75843)
- Components: Specify line-height to avoid inheriting default values (WordPress/gutenberg#75880)
- Pattern Editing: Fix sibling blocks to edited pattern not being disabled (WordPress/gutenberg#75994)
- Sync connector PHP behavior with Core backport changes (WordPress/gutenberg#75968)
- Connectors: Avoid manual string concatenation (WordPress/gutenberg#75997)
- DataForm: fix field label for panel (should not be uppercase) (WordPress/gutenberg#75944)
- Views: add support for more overrides (all developer-defined config) (WordPress/gutenberg#75971)
- Use homeUrl instead of siteUrl for link badge evaluations (WordPress/gutenberg#75978)
- DataViews: Right-align `integer` and `number` fields (WordPress/gutenberg#75917)
- Navigation Link: Compare internal links by host instead of origin (WordPress/gutenberg#76015)
- Fix: Skip scaled image sideload for images below big image threshold (WordPress/gutenberg#75990)
- Client side media cherry pick for 7.0 (WordPress/gutenberg#75998)
- Show transform dropdown previews on focus as well as hover (WordPress/gutenberg#75940) (WordPress/gutenberg#75992)
- RTC: Fix syncing of emoji / surrogate pairs (WordPress/gutenberg#76049)
- [Real-time Collaboration] Fix sync issue on refresh (WordPress/gutenberg#76017)
- Real-time collaboration: Improve disconnect dialog (WordPress/gutenberg#75970)
- DataViews: Fix filter toggle flickering when there are locked or primary filters (WordPress/gutenberg#75913) (WordPress/gutenberg#76068)
- Connectors: Dynamically register providers from WP AI Client registry (WordPress/gutenberg#76014)
- PHP-only Blocks: Reflect bound attribute values in inspector controls (WordPress/gutenberg#76040)
- Fix: Set quality and strip metadata in client-side image resize (WordPress/gutenberg#76029)
- RTC: Prevent duplicate poll cycles (WordPress/gutenberg#76059)
- RTC: Fix stale CRDT document persisted on save (WordPress/gutenberg#75975)
- RTC: Disable multiple collaborators if meta boxes are present (WordPress/gutenberg#75939)
- Directly inject styles in overlay to make styles stay consistently mounted (WordPress/gutenberg#75700)
- Real-time collaboration: Fix comment syncing on site editor (WordPress/gutenberg#75746)
- Real-time Collaboration: Bug fix for CRDT user selection and add tests (WordPress/gutenberg#75075)
- RTC: Updates from backport PR (WordPress/gutenberg#75711)
- RTC: Fix undefined array_first() call in sync storage (WordPress/gutenberg#75869)
- RTC: Fix fallthrough for sync update switch statement (WordPress/gutenberg#76060)
- Real-time collaboration: Remove block client IDs from Awareness, fix "Show Template" view (WordPress/gutenberg#75590)
- RTC: Add session activity notifications (WordPress/gutenberg#76065)
- Prevent non-reproducible Sass/CSS builds. (WordPress/gutenberg#76098)
- Block toolbar and context menu: hide pattern actions in Revisions UI (WordPress/gutenberg#76066)
- Try enabling style variation transforms for blocks in contentOnly mode (WordPress/gutenberg#75761)
- Block toolbar: hide styles dropdown in Revisions UI (WordPress/gutenberg#76119)
- Image block: fix lightbox srcset size (WordPress/gutenberg#76092)
- Fix writing flow navigation for annotation style, or any other block with border radius (WordPress/gutenberg#76072)
- Image: Hide 'Set as featured image' for in-editor revisions (WordPress/gutenberg#76123)
- Connectors: Gate unavailable install actions behind install capability (WordPress/gutenberg#75980)
- build: Exclude experimental pages from Core builds (WordPress/gutenberg#76038)
- HTML & Shortcode: Disable viewport visibility support (WordPress/gutenberg#76138)
- RTC: Verify client ID to avoid awareness mutation (WordPress/gutenberg#76056)
- wp-build: Do not remove Core's default script modules registration (WordPress/gutenberg#75705)
- wp-build: Deregister script modules before re-registering (WordPress/gutenberg#75909)
- Remove `! function_exists()` checks from PHP templates (WordPress/gutenberg#76062)
- Connectors: Update page identifier to options-connectors (WordPress/gutenberg#76156)
- Connectors: Align init hook priorities with Core overrides (WordPress/gutenberg#76161)
- Icon Block: Clean up selectors config (WordPress/gutenberg#75786)
- Icons: Fix incorrect icon slug (WordPress/gutenberg#76165)
- RTC: Enable RTC by default (WordPress/gutenberg#75739)
- Rename and visibility modals: gate shortcuts behind canEditBlock to prevent triggering in revisions UI (WordPress/gutenberg#76168)
- Fix: Block style variations not rendering in Site Editor Patterns page (WordPress/gutenberg#76122)
- Client-side media processing: only use media upload provider when not in preview mode (WordPress/gutenberg#76124)
- Notes: Disable for in-editor revisions (WordPress/gutenberg#76180)
- Core Data: Support reading revision data in useEntityProp (fixes footnotes in revisions UI) (WordPress/gutenberg#76106)
- Client-side media processing: Try plumbing invalidation to the block-editor's mediaUpload onSuccess callback (WordPress/gutenberg#76173)
- Connectors: Improve responsive layout on small screens (WordPress/gutenberg#76186)
- Interactivity API: Fix router initialization race condition on Safari/Firefox (WordPress/gutenberg#76053) (WordPress/gutenberg#76191)
- Interactivity: Fix crypto.randomUUID crash in non-secure contexts (WordPress/gutenberg#76151)

Built from https://develop.svn.wordpress.org/trunk@61843


git-svn-id: http://core.svn.wordpress.org/trunk@61130 1a063a9b-81f0-0310-95a4-ce76da25c4cd
alecgeatches added a commit that referenced this pull request Mar 11, 2026
@alecgeatches
Remerge collaborator styling fix from #75700
4eae830
@alecgeatches alecgeatches mentioned this pull request Mar 11, 2026
Merged
alecgeatches added a commit that referenced this pull request Mar 11, 2026
@alecgeatches
RTC: Add collaborator selection highlighting in rich text (#76107)
a246a38 
* Add full-selection highlighting

* Fix backwards selection cursor placement and selection across blocks

* Add selection range tests

* Export ResolvedSelection from core-data for use in overlay

* Refactor useRenderCursors() into three files, split on DOM and selection tasks.

* Fix type export

* Fix selection direction when using undo/redo

* Add e2e tests for full selection awareness

* Reduce opacity of selection rectangle in overlay

* Pre-compute overlayRect, pre-compute DOM elements where possible

* Rename "CursorContext" to "OverlayContext"

* Extract CursorCoords type, add rect collection types for readability

* Fix type error

* Remerge collaborator styling fix from #75700

* Deduplicate selection rects when text is formatted

* Fix merge of view.getComputedStyle() fix from #75652

Co-authored-by: alecgeatches <alecgeatches@git.wordpress.org>
Co-authored-by: maxschmeling <maxschmeling@git.wordpress.org>
Co-authored-by: chriszarate <czarate@git.wordpress.org>
gutenbergplugin pushed a commit that referenced this pull request Mar 11, 2026
@alecgeatches @gutenbergplugin
RTC: Add collaborator selection highlighting in rich text (#76107)
3a23862 
* Add full-selection highlighting

* Fix backwards selection cursor placement and selection across blocks

* Add selection range tests

* Export ResolvedSelection from core-data for use in overlay

* Refactor useRenderCursors() into three files, split on DOM and selection tasks.

* Fix type export

* Fix selection direction when using undo/redo

* Add e2e tests for full selection awareness

* Reduce opacity of selection rectangle in overlay

* Pre-compute overlayRect, pre-compute DOM elements where possible

* Rename "CursorContext" to "OverlayContext"

* Extract CursorCoords type, add rect collection types for readability

* Fix type error

* Remerge collaborator styling fix from #75700

* Deduplicate selection rects when text is formatted

* Fix merge of view.getComputedStyle() fix from #75652

Co-authored-by: alecgeatches <alecgeatches@git.wordpress.org>
Co-authored-by: maxschmeling <maxschmeling@git.wordpress.org>
Co-authored-by: chriszarate <czarate@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@maxschmeling maxschmeling maxschmeling approved these changes

@ellatrix ellatrix Awaiting requested review from ellatrix

Assignees

@alecgeatches alecgeatches

Labels

Backported to WP Core Pull request that has been successfully merged into WP Core [Feature] Real-time Collaboration Phase 3 of the Gutenberg roadmap around real-time collaboration [Package] Editor /packages/editor [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 22.7

Development

Successfully merging this pull request may close these issues.

3 participants

@alecgeatches @ellatrix @maxschmeling