@wordpress/core-data 6.15.0 → 6.17.0

package/src/resolvers.js

@@ -15,6 +15,7 @@ import apiFetch from '@wordpress/api-fetch';
 import { STORE_NAME } from './name';
 import { getOrLoadEntitiesConfig, DEFAULT_ENTITY_KEY } from './entities';
 import { forwardResolver, getNormalizedCommaSeparable } from './utils';
+import { getSyncProvider } from './sync';
 
 /**
  * Requests authors from the REST API.
@@ -71,51 +72,98 @@ export const getEntityRecord =
 		);
 
 		try {
-			if ( query !== undefined && query._fields ) {
-				// If requesting specific fields, items and query association to said
-				// records are stored by ID reference. Thus, fields must always include
-				// the ID.
-				query = {
-					...query,
-					_fields: [
-						...new Set( [
-							...( getNormalizedCommaSeparable( query._fields ) ||
-								[] ),
-							entityConfig.key || DEFAULT_ENTITY_KEY,
-						] ),
-					].join(),
-				};
-			}
-
-			// Disable reason: While true that an early return could leave `path`
-			// unused, it's important that path is derived using the query prior to
-			// additional query modifications in the condition below, since those
-			// modifications are relevant to how the data is tracked in state, and not
-			// for how the request is made to the REST API.
-
-			// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-			const path = addQueryArgs(
-				entityConfig.baseURL + ( key ? '/' + key : '' ),
-				{
-					...entityConfig.baseURLParams,
-					...query,
+			// Entity supports configs,
+			// use the sync algorithm instead of the old fetch behavior.
+			if (
+				window.__experimentalEnableSync &&
+				entityConfig.syncConfig &&
+				! query
+			) {
+				const objectId = entityConfig.getSyncObjectId( key );
+
+				// Loads the persisted document.
+				await getSyncProvider().bootstrap(
+					entityConfig.syncObjectType,
+					objectId,
+					( record ) => {
+						dispatch.receiveEntityRecords(
+							kind,
+							name,
+							record,
+							query
+						);
+					}
+				);
+
+				// Boostraps the edited document as well (and load from peers).
+				await getSyncProvider().bootstrap(
+					entityConfig.syncObjectType + '--edit',
+					objectId,
+					( record ) => {
+						dispatch( {
+							type: 'EDIT_ENTITY_RECORD',
+							kind,
+							name,
+							recordId: key,
+							edits: record,
+							meta: {
+								undo: undefined,
+							},
+						} );
+					}
+				);
+			} else {
+				if ( query !== undefined && query._fields ) {
+					// If requesting specific fields, items and query association to said
+					// records are stored by ID reference. Thus, fields must always include
+					// the ID.
+					query = {
+						...query,
+						_fields: [
+							...new Set( [
+								...( getNormalizedCommaSeparable(
+									query._fields
+								) || [] ),
+								entityConfig.key || DEFAULT_ENTITY_KEY,
+							] ),
+						].join(),
+					};
 				}
-			);
-
-			if ( query !== undefined ) {
-				query = { ...query, include: [ key ] };
 
-				// The resolution cache won't consider query as reusable based on the
-				// fields, so it's tested here, prior to initiating the REST request,
-				// and without causing `getEntityRecords` resolution to occur.
-				const hasRecords = select.hasEntityRecords( kind, name, query );
-				if ( hasRecords ) {
-					return;
+				// Disable reason: While true that an early return could leave `path`
+				// unused, it's important that path is derived using the query prior to
+				// additional query modifications in the condition below, since those
+				// modifications are relevant to how the data is tracked in state, and not
+				// for how the request is made to the REST API.
+
+				// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+				const path = addQueryArgs(
+					entityConfig.baseURL + ( key ? '/' + key : '' ),
+					{
+						...entityConfig.baseURLParams,
+						...query,
+					}
+				);
+
+				if ( query !== undefined ) {
+					query = { ...query, include: [ key ] };
+
+					// The resolution cache won't consider query as reusable based on the
+					// fields, so it's tested here, prior to initiating the REST request,
+					// and without causing `getEntityRecords` resolution to occur.
+					const hasRecords = select.hasEntityRecords(
+						kind,
+						name,
+						query
+					);
+					if ( hasRecords ) {
+						return;
+					}
 				}
-			}
 
-			const record = await apiFetch( { path } );
-			dispatch.receiveEntityRecords( kind, name, record, query );
+				const record = await apiFetch( { path } );
+				dispatch.receiveEntityRecords( kind, name, record, query );
+			}
 		} finally {
 			dispatch.__unstableReleaseStoreLock( lock );
 		}

package/src/selectors.ts

@@ -1266,7 +1266,7 @@ export function getBlockPatternCategories( state: State ): Array< any > {
  */
 export function getCurrentThemeGlobalStylesRevisions(
 	state: State
-): Object | null {
+): Array< object > | null {
 	const currentGlobalStylesId =
 		__experimentalGetCurrentGlobalStylesId( state );
 

package/src/sync.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createSyncProvider,
+	connectIndexDb,
+	connectWebRTC,
+} from '@wordpress/sync';
+
+let syncProvider;
+
+export function getSyncProvider() {
+	if ( ! syncProvider ) {
+		syncProvider = createSyncProvider( connectIndexDb, connectWebRTC );
+	}
+
+	return syncProvider;
+}

package/src/test/entity-provider.js

@@ -0,0 +1,272 @@
+/**
+ * External dependencies
+ */
+import { act, render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	registerBlockType,
+	unregisterBlockType,
+	getBlockTypes,
+} from '@wordpress/blocks';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { createRegistry, RegistryProvider } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as coreDataStore } from '../index';
+import { useEntityBlockEditor } from '../entity-provider';
+
+const postTypeConfig = {
+	kind: 'postType',
+	name: 'post',
+	baseURL: '/wp/v2/posts',
+	transientEdits: { blocks: true, selection: true },
+	mergedEdits: { meta: true },
+	rawAttributes: [ 'title', 'excerpt', 'content' ],
+};
+
+const postTypeEntity = {
+	slug: 'post',
+	rest_base: 'posts',
+	labels: {
+		item_updated: 'Updated Post',
+		item_published: 'Post published',
+		item_reverted_to_draft: 'Post reverted to draft.',
+	},
+};
+
+const aSinglePost = {
+	id: 1,
+	type: 'post',
+	content: {
+		raw: '<!-- wp:test-block-with-array-of-strings --><div><p>apples</p><p></p><p>oranges</p></div><!-- /wp:test-block-with-array-of-strings --><!-- wp:test-block --><p>A paragraph</p><!-- /wp:test-block -->',
+		rendered: '<p>A paragraph</p>',
+	},
+	meta: {
+		footnotes: '[]',
+	},
+};
+
+function createRegistryWithStores() {
+	// Create a registry.
+	const registry = createRegistry();
+
+	// Register store.
+	registry.register( coreDataStore );
+
+	// Register post type entity.
+	registry.dispatch( coreDataStore ).addEntities( [ postTypeConfig ] );
+
+	// Store post type entity.
+	registry
+		.dispatch( coreDataStore )
+		.receiveEntityRecords( 'root', 'postType', [ postTypeEntity ] );
+
+	// Store a single post for use by the tests.
+	registry
+		.dispatch( coreDataStore )
+		.receiveEntityRecords( 'postType', 'post', [ aSinglePost ] );
+
+	return registry;
+}
+
+describe( 'useEntityBlockEditor', () => {
+	let registry;
+
+	beforeEach( () => {
+		registry = createRegistryWithStores();
+
+		const edit = ( { children } ) => <>{ children }</>;
+
+		registerBlockType( 'core/test-block', {
+			supports: {
+				className: false,
+			},
+			save: ( { attributes } ) => {
+				const { content } = attributes;
+				return (
+					<p { ...useBlockProps.save() }>
+						<RichText.Content value={ content } />
+					</p>
+				);
+			},
+			category: 'text',
+			attributes: {
+				content: {
+					type: 'string',
+					source: 'html',
+					selector: 'p',
+					default: '',
+					__experimentalRole: 'content',
+				},
+			},
+			title: 'block title',
+			edit,
+		} );
+
+		registerBlockType( 'core/test-block-with-array-of-strings', {
+			supports: {
+				className: false,
+			},
+			save: ( { attributes } ) => {
+				const { items } = attributes;
+				return (
+					<div>
+						{ items.map( ( item, index ) => (
+							<p key={ index }>{ item }</p>
+						) ) }
+					</div>
+				);
+			},
+			category: 'text',
+			attributes: {
+				items: {
+					type: 'array',
+					items: {
+						type: 'string',
+					},
+					default: [ 'apples', null, 'oranges' ],
+				},
+			},
+			title: 'block title',
+			edit,
+		} );
+	} );
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'does not mutate block attributes that include an array of strings or null values', async () => {
+		let blocks, onChange;
+		const TestComponent = () => {
+			[ blocks, , onChange ] = useEntityBlockEditor( 'postType', 'post', {
+				id: 1,
+			} );
+
+			return <div />;
+		};
+
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+
+		expect( blocks[ 0 ].name ).toEqual(
+			'core/test-block-with-array-of-strings'
+		);
+		expect( blocks[ 0 ].attributes.items ).toEqual( [
+			'apples',
+			null,
+			'oranges',
+		] );
+
+		// Add a block with content that will match against footnotes logic, causing
+		// `updateFootnotes` to iterate over blocks and their attributes.
+		act( () => {
+			onChange(
+				[
+					...blocks,
+					createBlock( 'core/test-block', {
+						content:
+							'<p><sup data-fn="1234" class="fn"><a href="#1234" id="1234-link">1</a></sup></p>',
+					} ),
+				],
+				{
+					selection: {
+						selectionStart: {},
+						selectionEnd: {},
+						initialPosition: {},
+					},
+				}
+			);
+		} );
+
+		// Ensure the first block remains the same, with unaltered attributes.
+		expect( blocks[ 0 ].name ).toEqual(
+			'core/test-block-with-array-of-strings'
+		);
+		expect( blocks[ 0 ].attributes.items ).toEqual( [
+			'apples',
+			null,
+			'oranges',
+		] );
+	} );
+
+	it( 'updates the order of footnotes when a new footnote is inserted', async () => {
+		// Start with a post containing a block with a single footnote (set to 1).
+		registry
+			.dispatch( coreDataStore )
+			.receiveEntityRecords( 'postType', 'post', [
+				{
+					id: 1,
+					type: 'post',
+					content: {
+						raw: '<!-- wp:test-block --><p>A paragraph<sup data-fn="abcd" class="fn"><a href="#abcd" id="abcd-link">1</a></sup></p><!-- /wp:test-block -->',
+						rendered: '<p>A paragraph</p>',
+					},
+					meta: {
+						footnotes: '[]',
+					},
+				},
+			] );
+
+		let blocks, onChange;
+
+		const TestComponent = () => {
+			[ blocks, , onChange ] = useEntityBlockEditor( 'postType', 'post', {
+				id: 1,
+			} );
+
+			return <div />;
+		};
+
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+
+		// The first block should have the footnote number 1.
+		expect( blocks[ 0 ].attributes.content ).toEqual(
+			'A paragraph<sup data-fn="abcd" class="fn"><a href="#abcd" id="abcd-link">1</a></sup>'
+		);
+
+		// Add a block with a new footnote with an arbitrary footnote number that will be overwritten after insertion.
+		act( () => {
+			onChange(
+				[
+					createBlock( 'core/test-block', {
+						content:
+							'A new paragraph<sup data-fn="xyz" class="xyz"><a href="#xyz" id="xyz-link">999</a></sup>',
+					} ),
+					...blocks,
+				],
+				{
+					selection: {
+						selectionStart: {},
+						selectionEnd: {},
+						initialPosition: {},
+					},
+				}
+			);
+		} );
+
+		// The newly inserted block should have the footnote number 1, and the
+		// existing footnote number 1 should be updated to 2.
+		expect( blocks[ 0 ].attributes.content ).toEqual(
+			'A new paragraph<sup data-fn="xyz" class="xyz"><a href="#xyz" id="xyz-link">1</a></sup>'
+		);
+		expect( blocks[ 1 ].attributes.content ).toEqual(
+			'A paragraph<sup data-fn="abcd" class="fn"><a href="#abcd" id="abcd-link">2</a></sup>'
+		);
+	} );
+} );

package/tsconfig.json

@@ -18,6 +18,7 @@
 		{ "path": "../i18n" },
 		{ "path": "../is-shallow-equal" },
 		{ "path": "../private-apis" },
+		{ "path": "../sync" },
 		{ "path": "../url" }
 	],
 	"include": [ "src/**/*" ]