Add indicator for bindings to save entities panel

WordPress · May 27, 2024 · 00c9e1f · 00c9e1f
1 parent 0975ba9
commit 00c9e1f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js
@@ -1,11 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { CheckboxControl, PanelRow } from '@wordpress/components';
+import { Icon, CheckboxControl, Flex, 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';
+import { connection } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -35,15 +36,31 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 	);
 
 	return (
-		<PanelRow>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label={
-					decodeEntities( entityRecordTitle ) || __( 'Untitled' )
-				}
-				checked={ checked }
-				onChange={ onChange }
-			/>
-		</PanelRow>
+		<>
+			<PanelRow>
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					label={
+						decodeEntities( entityRecordTitle ) || __( 'Untitled' )
+					}
+					checked={ checked }
+					onChange={ onChange }
+				/>
+			</PanelRow>
+			{ record.hasMetaChanges && (
+				<PanelRow>
+					<Flex className="entities-saved-states__block-bindings">
+						<Icon
+							className="entities-saved-states__connections-icon"
+							icon={ connection }
+							size={ 24 }
+						/>
+						<span className="entities-saved-states__bindings-text">
+							{ __( 'Block Bindings.' ) }
+						</span>
+					</Flex>
+				</PanelRow>
+			) }
+		</>
 	);
 }
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
@@ -37,3 +37,16 @@
 		height: $header-height + $border-width;
 	}
 }
+
+.entities-saved-states__block-bindings {
+	margin-left: $grid-unit-30;
+	align-items: center;
+}
+
+.entities-saved-states__connections-icon {
+	flex-grow: 0;
+}
+
+.entities-saved-states__bindings-text {
+	flex-grow: 1;
+}