Real-time collaboration: Remove block client IDs from Awareness, fix "Show Template" view#75590
Conversation
…en sharing and drawing awareness information
…lutePositionIndex()" to "convertSelectionStateToAbsolute()", have it return "localClientId" instead of "blockClientId"
|
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 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. |
|
Note for testing: If you're seeing collaborators show up like this:
there's an open PR to address this particular issue in #75700. To apply it, run this locally: |
| return ( | ||
| selection1.blockId === | ||
| ( selection2 as SelectionWholeBlock ).blockId | ||
| JSON.stringify( selection1.blockPosition ) === |
There was a problem hiding this comment.
I don't love JSON.stringify in the critical path. I know these objects are small and it existed before, but maybe we could write a fast comparison function since we know the type (or should)
There was a problem hiding this comment.
Cool, looks like Yjs has a Y.compareRelativePositions export, added in 2098a20.
There was a problem hiding this comment.
Whoops, also added in 1b4ad08 to address this bit of code. We're no longer JSON.stringifying anything in this file.
| grandparent.get( 'clientId' ) !== undefined | ||
| ) { | ||
| current = grandparent; // It's a block, keep going. |
There was a problem hiding this comment.
Is there a better signal that this is a block?
There was a problem hiding this comment.
We're iterating over the raw Y.Doc necessarily here to find the block index, so it's somewhat difficult to find "blocks" other than datatype checks. Here, we're looking for a Y.Map that has a set clientId parameter as the basis of a block check, which should be fairly exclusive in our tree. Is there something better you can think of?
There was a problem hiding this comment.
Probably ok for now. Maybe block should have it's own Yjs abstract type extending Y.Map. A future improvement
| * @param yType - The Yjs block Y.Map to start from. | ||
| * @return The index path from root, or null if traversal fails. | ||
| */ | ||
| export function getBlockPathInYdoc( |
There was a problem hiding this comment.
it would be good to have unit tests of functions in this new file
There was a problem hiding this comment.
This is tested indirectly by test/post-editor-awareness.ts, but it should definitely have some unit tests itself. Will add.
There was a problem hiding this comment.
Added in 152e50a! The getPath/resolveClientId functions now have explicit tests, and I un-exported the inner functions related to "Show Template" mode but added specific tests for those cases too.
|
Just to sure, is this PR a bug fix intended for backporting to 7.0? If so, let's add the |
|
I just cherry-picked this PR to the release/22.6 branch to get it included in the next release: 6ec9a53 |
…"Show Template" view (#75590) * Use relative position .parent traversal instead of block client ID when sharing and drawing awareness information * Fix "Show Template" mode by mapping remote positions into absolute block paths * Add tests for block resolution for post-editor-awareness * Remove inner blockPathResolver, use getBlockPathForLocalClientId utility funciton * Make utility function naming a bit easier to follow - change "getAbsolutePositionIndex()" to "convertSelectionStateToAbsolute()", have it return "localClientId" instead of "blockClientId" * Move block lookup functions into block-lookup utils file, improve types * Remove EditorStoreBlock from exported types * Compare relative positions with Yjs built-in function * Replace areSelectionsStatesEqual() relative position comparison with compareRelativePositions() as well * Fix types and tests from crdt-user-selections * Add a guard to avoid getting blocks when path is empty * Rename "useConvertSelectionStateToAbsolute" to "useResolvedSelection" * Add unit tests for getBlockPathInYdoc, resolveBlockClientIdByPath, avoid exporting inner helper functions
|
There was a conflict while trying to cherry-pick the commit to the wp/7.0 branch. Please resolve the conflict manually and create a PR to the wp/7.0 branch. PRs to wp/7.0 are similar to PRs to trunk, but you should base your PR on the wp/7.0 branch instead of trunk. |
|
Sorry for noise, didn't realize a bot actioned the label. |
|
As this comment indicates, the automatic cherry-pick is failing, so we will need to submit a change equivalent to this PR to the |
…"Show Template" view (WordPress#75590) * Use relative position .parent traversal instead of block client ID when sharing and drawing awareness information * Fix "Show Template" mode by mapping remote positions into absolute block paths * Add tests for block resolution for post-editor-awareness * Remove inner blockPathResolver, use getBlockPathForLocalClientId utility funciton * Make utility function naming a bit easier to follow - change "getAbsolutePositionIndex()" to "convertSelectionStateToAbsolute()", have it return "localClientId" instead of "blockClientId" * Move block lookup functions into block-lookup utils file, improve types * Remove EditorStoreBlock from exported types * Compare relative positions with Yjs built-in function * Replace areSelectionsStatesEqual() relative position comparison with compareRelativePositions() as well * Fix types and tests from crdt-user-selections * Add a guard to avoid getting blocks when path is empty * Rename "useConvertSelectionStateToAbsolute" to "useResolvedSelection" * Add unit tests for getBlockPathInYdoc, resolveBlockClientIdByPath, avoid exporting inner helper functions
|
@t-hamano Did you remove the label by accident? Even if it needs to be back ported manually, the label should stay present so it's tracked. I'm wondering if there's other PRs where the label was removed |
…"Show Template" view (#75590) * Use relative position .parent traversal instead of block client ID when sharing and drawing awareness information * Fix "Show Template" mode by mapping remote positions into absolute block paths * Add tests for block resolution for post-editor-awareness * Remove inner blockPathResolver, use getBlockPathForLocalClientId utility funciton * Make utility function naming a bit easier to follow - change "getAbsolutePositionIndex()" to "convertSelectionStateToAbsolute()", have it return "localClientId" instead of "blockClientId" * Move block lookup functions into block-lookup utils file, improve types * Remove EditorStoreBlock from exported types * Compare relative positions with Yjs built-in function * Replace areSelectionsStatesEqual() relative position comparison with compareRelativePositions() as well * Fix types and tests from crdt-user-selections * Add a guard to avoid getting blocks when path is empty * Rename "useConvertSelectionStateToAbsolute" to "useResolvedSelection" * Add unit tests for getBlockPathInYdoc, resolveBlockClientIdByPath, avoid exporting inner helper functions
|
Opened up a manual PR to backport in #76090. |
…"Show Template" view (#75590) * Use relative position .parent traversal instead of block client ID when sharing and drawing awareness information * Fix "Show Template" mode by mapping remote positions into absolute block paths * Add tests for block resolution for post-editor-awareness * Remove inner blockPathResolver, use getBlockPathForLocalClientId utility funciton * Make utility function naming a bit easier to follow - change "getAbsolutePositionIndex()" to "convertSelectionStateToAbsolute()", have it return "localClientId" instead of "blockClientId" * Move block lookup functions into block-lookup utils file, improve types * Remove EditorStoreBlock from exported types * Compare relative positions with Yjs built-in function * Replace areSelectionsStatesEqual() relative position comparison with compareRelativePositions() as well * Fix types and tests from crdt-user-selections * Add a guard to avoid getting blocks when path is empty * Rename "useConvertSelectionStateToAbsolute" to "useResolvedSelection" * Add unit tests for getBlockPathInYdoc, resolveBlockClientIdByPath, avoid exporting inner helper functions
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 3ae6336 |
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
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

What?
Screen.Recording.2026-02-18.at.12.55.33.PM.mov
Shared Awareness in "Show Template" mode
We've tried some other¹ attempts² to address block ID inconsistencies during block cloning so that awareness will continue to work when blocks are cloned, but real-time collaboration code still relies on block client IDs sent between collaborating users.
The key insight of this PR is that Yjs
RelativePositions, which we currently use to show a user's cursor withinY.Text, also can be used to share exactly where the selection is within the block hierarchy.The RelativePosition API returns absolute positions like
{ type: aSpecificYTextInstance, index: 2 }when converting from relative positions. We can then iterate throughaSpecificYTextInstance.parentto find the associated block data, and.parentagain to walk up the Yjs block tree. Using just relative positions without block client IDs, we can find where in the block tree a relative selection occurs, and then transform that location into a path (e.g.[2, 0]for the second block, first inner block), and then to a local block client ID. More concretely:User A clicks into a core/paragraph in block content. Below, this is within the "Inner paragraph" content:
Changing selection sends a
RelativePositionto other peers. This uses internal Yjs markers for tracking location and looks something like this:This represents a specific index within a specific
Y.Textin the block tree. For example, theRelativePositionabove may representrootBlocks[2].innerBlocks[0].contentat index6.User B receives the
RelativePositionand callsY.createAbsolutePositionFromRelativePosition()to convert it to aAbsolutePosition. This is converted back into the specificY.Textinstance within the Yjs block tree, which looks something like:Now we need to figure out which block this refers to. User B can iterate through
.parenton theY.Textinstance to find the parent block tree. Using this information and a shared Yjs tree structure, user B can convert theAbsolutePostitionto aAbsoluteBlockIndexPath, e.g.[2, 0].User B uses the path
[2, 0]to findrootBlocks[2].innerBlocks[0]and uses that to identify the local client ID of the block.We can now easily draw the remote position using local block client IDs.
This ensures awareness cursors render correctly even when the local block-editor store uses different
clientIdvalues than the Yjs document, such as when "Show Template" mode is enabled.Why?
Block
clientIdvalues are locally generated UUIDs that can differ between collaborators. In normal editing mode this is not usually a problem because each peer's Yjs document and block-editor store share the same IDs. However, when "Show Template" mode is enabled,useBlockSync()clones blocks which creates new internalclientIdvalues in the block-editor store while the Yjs document retains the original external IDs. If user A broadcasts their cursor position includingblockId: "abc123", user B may have a completely different localclientIdfor the same block, causing awareness cursors to fail to render or appear on the wrong block.Since the existing
cursorPosition.relativePositionalready lives inside the block'sY.Textin the Yjs document hierarchy, we can navigate up viaAbstractType.parenton the receiver side to find the containing block. For the block identity itself, we use tree index paths (e.g.[2, 0, 0]forblocks[2].innerBlocks[0].innerBlocks[0]) to bridge between the Yjs tree and the block-editor store tree. Because both trees share identical structure for post content blocks (same order, same nesting), the same index path can locate the corresponding block in either tree regardless of whether theclientIdvalues match.To add a bit of complexity, in "Show Template" mode, the block-editor store's
getBlocks()returns the full template tree (header, footer, group wrappers,core/post-content, footer template parts, etc.), while the Yjs document only contains the post content blocks. To keep paths aligned so that we can translate between the two hierarchies, the sending side stops its upward walk at thecore/post-contentboundary, and the receiving side finds thecore/post-contentblock in the template tree and navigates from its inner blocks if present. This ensures paths are always relative to the post content root in both directions.How?
Block identity is now derived from the cursor position on the receiver side. For
SelectionWholeBlock(e.g. a selected image block with no text cursor), there's not aY.Text, soblockId: stringhas been replaced withblockPosition: Y.RelativePositionpointing to the block in its parentY.Array.Two new shared types were added:
AbsoluteBlockIndexPath(anumber[]alias representing a tree index path from the post content root to a block) andEditorStoreBlock(a minimal interface for blocks returned bygetBlocks()).EditorStoreBlockis largely to avoid anany[]for blocks, but I'm not sure if it should be here.Testing Instructions