Real-time Collaboration: Add edit mode

docs/reference-guides/data/data-core.md

@@ -213,6 +213,18 @@ _Returns_
 
 -   `Array< any >`: Block pattern list.
 
+### getCollaboratorMode
+
+Returns the current collaborator mode.
+
+_Parameters_
+
+-   _state_ `Object`: Data state.
+
+_Returns_
+
+-   `CollaboratorMode`: Collaborator mode.
+
 ### getCurrentTheme
 
 Return the current theme.
@@ -923,6 +935,18 @@ _Parameters_
 -   _options.\_\_unstableFetch_ `[Function]`: Internal use only. Function to call instead of `apiFetch()`. Must return a promise.
 -   _options.throwOnError_ `[boolean]`: If false, this action suppresses all the exceptions. Defaults to false.
 
+### setCollaboratorMode
+
+Returns an action object used in signalling that the collaborator mode has been set.
+
+_Parameters_
+
+-   _collaboratorMode_ `'view' | 'edit'`: The collaborator mode.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### undo
 
 Action triggered to undo the last edit to an entity record, if any.

lib/experimental/synchronization.php

@@ -22,3 +22,39 @@ function gutenberg_rest_api_init_collaborative_editing() {
 	wp_add_inline_script( 'wp-sync', 'window.__experimentalCollaborativeEditingSecret = "' . $collaborative_editing_secret . '";', 'before' );
 }
 add_action( 'admin_init', 'gutenberg_rest_api_init_collaborative_editing' );
+
+/**
+ * Registers post meta for persisting CRDT documents.
+ */
+function gutenberg_rest_api_crdt_post_meta() {
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( ! $gutenberg_experiments || ! array_key_exists( 'gutenberg-sync-collaboration', $gutenberg_experiments ) ) {
+		return;
+	}
+
+	// This string must match WORDPRESS_META_KEY_FOR_CRDT_DOC_PERSISTENCE in @wordpress/sync.
+	$persisted_crdt_post_meta_key = '_crdt_document';
+
+	register_meta(
+		'post',
+		$persisted_crdt_post_meta_key,
+		array(
+			'auth_callback'     => function ( bool $_allowed, string $_meta_key, int $object_id, int $user_id ): bool {
+				return user_can( $user_id, 'edit_post', $object_id );
+			},
+			// IMPORTANT: Revisions must be disabled because we always want to preserve
+			// the latest persisted CRDT document, even when a revision is restored.
+			// This ensures that we can continue to apply updates to a shared document
+			// and peers can simply merge the restored revision like any other incoming
+			// update.
+			//
+			// If we want to persist CRDT documents alongisde revisions in the
+			// future, we should do so in a separate meta key.
+			'revisions_enabled' => false,
+			'show_in_rest'      => true,
+			'single'            => true,
+			'type'              => 'string',
+		)
+	);
+}
+add_action( 'init', 'gutenberg_rest_api_crdt_post_meta' );

packages/block-editor/README.md

@@ -145,6 +145,10 @@ _Returns_
 
 -   `Element`: Block Breadcrumb.
 
+### BlockCanvasCover
+
+Undocumented declaration.
+
 ### BlockColorsStyleSelector
 
 Undocumented declaration.

packages/block-editor/src/components/block-canvas/index.js

@@ -4,6 +4,7 @@
 import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { createSlotFill } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -19,6 +20,8 @@ import { useBlockCommands } from '../use-block-commands';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+export const BlockCanvasCover = createSlotFill( 'BlockCanvasCover' );
+
 // EditorStyles is a memoized component, so avoid passing a new
 // object reference on each render.
 const EDITOR_STYLE_TRANSFORM_OPTIONS = {
@@ -74,6 +77,27 @@ export function ExperimentalBlockCanvas( {
 				>
 					{ children }
 				</WritingFlow>
+
+				<BlockCanvasCover.Slot fillProps={ { containerRef: localRef } }>
+					{ ( covers ) =>
+						covers.map( ( cover, index ) => (
+							<div
+								key={ index }
+								className="block-canvas-cover"
+								style={ {
+									position: 'absolute',
+									top: 0,
+									left: 0,
+									width: '100%',
+									height: '100%',
+									pointerEvents: 'none',
+								} }
+							>
+								{ cover }
+							</div>
+						) )
+					}
+				</BlockCanvasCover.Slot>
 			</BlockTools>
 		);
 	}
@@ -95,6 +119,26 @@ export function ExperimentalBlockCanvas( {
 			>
 				<EditorStyles styles={ styles } />
 				{ children }
+				<BlockCanvasCover.Slot fillProps={ { containerRef: localRef } }>
+					{ ( covers ) =>
+						covers.map( ( cover, index ) => (
+							<div
+								key={ index }
+								className="block-canvas-cover"
+								style={ {
+									position: 'absolute',
+									top: 0,
+									left: 0,
+									width: '100%',
+									height: '100%',
+									pointerEvents: 'none',
+								} }
+							>
+								{ cover }
+							</div>
+						) )
+					}
+				</BlockCanvasCover.Slot>
 			</Iframe>
 		</BlockTools>
 	);

packages/block-editor/src/components/provider/use-block-sync.js

@@ -104,15 +104,25 @@ export default function useBlockSync( {
 		// and so it would already be persisted.
 		__unstableMarkNextChangeAsNotPersistent();
 		if ( clientId ) {
+			const blockName = getBlockName( clientId );
+			const isPostContentBlock = blockName === 'core/post-content';
+
 			// It is important to batch here because otherwise,
 			// as soon as `setHasControlledInnerBlocks` is called
 			// the effect to restore might be triggered
 			// before the actual blocks get set properly in state.
 			registry.batch( () => {
 				setHasControlledInnerBlocks( clientId, true );
-				const storeBlocks = controlledBlocks.map( ( block ) =>
-					cloneBlock( block )
-				);
+
+				// For post-content block children, preserve the
+				// original blocks to maintain UUIDs used for
+				// multi-user collaboration
+				//
+				// Unsure: Why are these blocks being cloned? Do they need to be?
+				const storeBlocks = isPostContentBlock
+					? controlledBlocks
+					: controlledBlocks.map( ( block ) => cloneBlock( block ) );
+
 				if ( subscribedRef.current ) {
 					pendingChangesRef.current.incoming = storeBlocks;
 				}

packages/block-editor/src/index.js

@@ -21,3 +21,4 @@ export * from './utils';
 export { storeConfig, store } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';
 export { privateApis } from './private-apis';
+export { BlockCanvasCover } from './components/block-canvas';

packages/core-data/README.md

@@ -315,6 +315,18 @@ _Parameters_
 -   _options.\_\_unstableFetch_ `[Function]`: Internal use only. Function to call instead of `apiFetch()`. Must return a promise.
 -   _options.throwOnError_ `[boolean]`: If false, this action suppresses all the exceptions. Defaults to false.
 
+### setCollaboratorMode
+
+Returns an action object used in signalling that the collaborator mode has been set.
+
+_Parameters_
+
+-   _collaboratorMode_ `'view' | 'edit'`: The collaborator mode.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### undo
 
 Action triggered to undo the last edit to an entity record, if any.
@@ -435,6 +447,18 @@ _Returns_
 
 -   `Array< any >`: Block pattern list.
 
+### getCollaboratorMode
+
+Returns the current collaborator mode.
+
+_Parameters_
+
+-   _state_ `Object`: Data state.
+
+_Returns_
+
+-   `CollaboratorMode`: Collaborator mode.
+
 ### getCurrentTheme
 
 Return the current theme.

packages/core-data/src/actions.js

@@ -22,6 +22,20 @@ import { STORE_NAME } from './name';
 import { LOCAL_EDITOR_ORIGIN, getSyncManager } from './sync';
 import logEntityDeprecation from './utils/log-entity-deprecation';
 
+/**
+ * Returns an action object used in signalling that the collaborator mode has been set.
+ *
+ * @param {'view' | 'edit'} collaboratorMode The collaborator mode.
+ *
+ * @return {Object} Action object.
+ */
+export function setCollaboratorMode( collaboratorMode ) {
+	return {
+		type: 'SET_COLLABORATOR_MODE',
+		collaboratorMode,
+	};
+}
+
 /**
  * Returns an action object used in signalling that authors have been received.
  * Ignored from documentation as it's internal to the data store.
@@ -326,6 +340,18 @@ export const deleteEntityRecord =
 				} );
 
 				await dispatch( removeItems( kind, name, recordId, true ) );
+
+				if (
+					window.__experimentalEnableSync &&
+					entityConfig.syncConfig
+				) {
+					if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+						const objectType = `${ kind }/${ name }`;
+						const objectId = recordId;
+
+						getSyncManager()?.unload( objectType, objectId );
+					}
+				}
 			} catch ( _error ) {
 				hasError = true;
 				error = _error;
@@ -689,6 +715,20 @@ export const saveEntityRecord =
 						true,
 						edits
 					);
+					if (
+						window.__experimentalEnableSync &&
+						entityConfig.syncConfig
+					) {
+						if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+							getSyncManager()?.update(
+								`${ kind }/${ name }`,
+								recordId,
+								updatedRecord,
+								LOCAL_EDITOR_ORIGIN,
+								true // isSave
+							);
+						}
+					}
 				}
 			} catch ( _error ) {
 				hasError = true;