Core Data: Move EntitiesSavedState component out of editor

docs/private-apis.md

@@ -201,6 +201,10 @@ Private selectors:
 ## core-data
 
 Private exports:
+- `EntitiesSavedStates`
+- `EntitiesSavedStatesExtensible`
+- `getTemplateInfo`
+- `getTemplatePartIcon`
 - `useEntityRecordsWithPermissions`
 
 ### `core` store
@@ -274,7 +278,6 @@ Private exports:
 Private exports:
 - `CreateTemplatePartModal`
 - `BackButton`
-- `EntitiesSavedStatesExtensible`
 - `Editor`
 - `EditorContentSlotFill`
 - `GlobalStylesProvider`
@@ -318,7 +321,6 @@ Private selectors:
 - `getListViewToggleRef`
 - `getPostBlocksByName`
 - `getPostIcon`
-- `hasPostMetaChanges`
 - `isEntityReady`
 
 ## edit-post

lib/client-assets.php

@@ -286,7 +286,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-post',
 		gutenberg_url( 'build/edit-post/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-commands', 'wp-preferences' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-commands', 'wp-preferences', 'wp-core-data' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-post', 'rtl', 'replace' );
@@ -419,7 +419,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-site',
 		gutenberg_url( 'build/edit-site/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-block-library-editor', 'common', 'forms', 'wp-commands', 'wp-preferences' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-block-library-editor', 'common', 'forms', 'wp-commands', 'wp-preferences', 'wp-core-data' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-site', 'rtl', 'replace' );
@@ -428,7 +428,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-widgets',
 		gutenberg_url( 'build/edit-widgets/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-patterns', 'wp-widgets', 'wp-preferences' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-patterns', 'wp-widgets', 'wp-preferences', 'wp-core-data' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-widgets', 'rtl', 'replace' );
@@ -446,7 +446,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-customize-widgets',
 		gutenberg_url( 'build/customize-widgets/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-widgets', 'wp-preferences' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-widgets', 'wp-preferences', 'wp-core-data' ),
 		$version
 	);
 	$styles->add_data( 'wp-customize-widgets', 'rtl', 'replace' );
@@ -473,7 +473,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-widgets',
 		gutenberg_url( 'build/widgets/style.css' ),
-		array( 'wp-components' )
+		array( 'wp-components', 'wp-core-data' )
 	);
 	$styles->add_data( 'wp-widgets', 'rtl', 'replace' );
 
@@ -485,6 +485,15 @@ function gutenberg_register_packages_styles( $styles ) {
 		$version
 	);
 	$styles->add_data( 'wp-preferences', 'rtl', 'replace' );
+
+	gutenberg_override_style(
+		$styles,
+		'wp-core-data',
+		gutenberg_url( 'build/core-data/style.css' ),
+		array( 'wp-components' ),
+		$version
+	);
+	$styles->add_data( 'wp-core-data', 'rtl', 'replace' );
 }
 add_action( 'wp_default_styles', 'gutenberg_register_packages_styles' );
 

packages/core-data/package.json

@@ -36,20 +36,24 @@
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/blocks": "file:../blocks",
+		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/element": "file:../element",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
+		"@wordpress/notices": "file:../notices",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/sync": "file:../sync",
 		"@wordpress/undo-manager": "file:../undo-manager",
 		"@wordpress/url": "file:../url",
 		"@wordpress/warning": "file:../warning",
 		"change-case": "^4.1.2",
+		"clsx": "^2.1.1",
 		"equivalent-key-map": "^0.2.2",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",

packages/editor/src/components/entities-saved-states/entity-record-item.js → packages/core-data/src/components/entities-saved-states/entity-record-item.js

@@ -4,48 +4,40 @@
 import { CheckboxControl, PanelRow } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
+import { STORE_NAME } from '../../name';
 import { getTemplateInfo } from '../../utils/get-template-info';
 
 export default function EntityRecordItem( { record, checked, onChange } ) {
 	const { name, kind, title, key } = record;
 
 	// Handle templates that might use default descriptive titles.
-	const { entityRecordTitle, hasPostMetaChanges } = useSelect(
+	const { entityRecordTitle } = useSelect(
 		( select ) => {
 			if ( 'postType' !== kind || 'wp_template' !== name ) {
 				return {
 					entityRecordTitle: title,
-					hasPostMetaChanges: unlock(
-						select( editorStore )
-					).hasPostMetaChanges( name, key ),
 				};
 			}
 
-			const template = select( coreStore ).getEditedEntityRecord(
+			const template = select( STORE_NAME ).getEditedEntityRecord(
 				kind,
 				name,
 				key
 			);
 
 			const { default_template_types: templateTypes = [] } =
-				select( coreStore ).getCurrentTheme() ?? {};
+				select( STORE_NAME ).getCurrentTheme() ?? {};
 
 			return {
 				entityRecordTitle: getTemplateInfo( {
 					template,
 					templateTypes,
 				} ).title,
-				hasPostMetaChanges: unlock(
-					select( editorStore )
-				).hasPostMetaChanges( name, key ),
 			};
 		},
 		[ name, kind, title, key ]
@@ -64,11 +56,6 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 					className="entities-saved-states__change-control"
 				/>
 			</PanelRow>
-			{ hasPostMetaChanges && (
-				<ul className="entities-saved-states__changes">
-					<li>{ __( 'Post Meta.' ) }</li>
-				</ul>
-			) }
 		</>
 	);
 }

packages/editor/src/components/entities-saved-states/entity-type-list.js → packages/core-data/src/components/entities-saved-states/entity-type-list.js

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { PanelBody, PanelRow } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useContext } from '@wordpress/element';
 
@@ -13,6 +12,7 @@ import { useContext } from '@wordpress/element';
  */
 import EntityRecordItem from './entity-record-item';
 import { unlock } from '../../lock-unlock';
+import { STORE_NAME } from '../../name';
 
 const { getGlobalStylesChanges, GlobalStylesContext } = unlock(
 	blockEditorPrivateApis
@@ -39,7 +39,7 @@ function GlobalStylesDescription( { record } ) {
 		useContext( GlobalStylesContext );
 	const savedRecord = useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecord(
+			select( STORE_NAME ).getEntityRecord(
 				record.kind,
 				record.name,
 				record.key
@@ -80,7 +80,7 @@ export default function EntityTypeList( {
 	const firstRecord = list[ 0 ];
 	const entityConfig = useSelect(
 		( select ) =>
-			select( coreStore ).getEntityConfig(
+			select( STORE_NAME ).getEntityConfig(
 				firstRecord.kind,
 				firstRecord.name
 			),

packages/editor/src/components/entities-saved-states/hooks/use-is-dirty.js → packages/core-data/src/components/entities-saved-states/hooks/use-is-dirty.js

@@ -2,9 +2,13 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../../../name';
+
 /**
  * Custom hook that determines if any entities are dirty (edited) and provides a way to manage selected/unselected entities.
  *
@@ -21,7 +25,7 @@ export const useIsDirty = () => {
 				__experimentalGetDirtyEntityRecords,
 				getEntityRecordEdits,
 				getEntityConfig,
-			} = select( coreStore );
+			} = select( STORE_NAME );
 
 			return {
 				editedEntities: __experimentalGetDirtyEntityRecords(),

packages/editor/src/components/entities-saved-states/index.js → packages/core-data/src/components/entities-saved-states/index.js

@@ -24,8 +24,8 @@ import { useDispatch } from '@wordpress/data';
  */
 import EntityTypeList from './entity-type-list';
 import { useIsDirty } from './hooks/use-is-dirty';
-import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { STORE_NAME } from '../../name';
 
 function identity( values ) {
 	return values;
@@ -89,7 +89,7 @@ export function EntitiesSavedStatesExtensible( {
 	variant = 'default',
 } ) {
 	const saveButtonRef = useRef();
-	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
+	const { saveDirtyEntities } = unlock( useDispatch( STORE_NAME ) );
 	// To group entities by type.
 	const partitionedSavables = dirtyEntityRecords.reduce( ( acc, record ) => {
 		const { name } = record;
@@ -164,7 +164,7 @@ export function EntitiesSavedStatesExtensible( {
 						close,
 					} )
 				}
-				className="editor-entities-saved-states__save-button"
+				className="entities-saved-states__save-button"
 			>
 				{ saveLabel }
 			</FlexItem>

packages/editor/src/components/entities-saved-states/test/use-is-dirty.js → packages/core-data/src/components/entities-saved-states/test/use-is-dirty.js

@@ -42,15 +42,6 @@ jest.mock( '@wordpress/data', () => {
 	};
 } );
 
-jest.mock( '@wordpress/core-data', () => {
-	return {
-		store: {
-			__experimentalGetDirtyEntityRecords: jest.fn(),
-			getEntityRecordEdits: jest.fn(),
-		},
-	};
-} );
-
 describe( 'useIsDirty', () => {
 	it( 'should calculate dirtyEntityRecords', () => {
 		const { result } = renderHook( () => useIsDirty() );