Add a dot before the parent block selector when there are unsaved changes in the Reusable block

packages/block-editor/src/components/block-parent-selector/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockType, store as blocksStore } from '@wordpress/blocks';
-import { ToolbarButton } from '@wordpress/components';
+import { ToolbarButton, Slot } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
@@ -78,6 +78,7 @@ export default function BlockParentSelector() {
 			ref={ nodeRef }
 			{ ...showMoversGestures }
 		>
+			<Slot name="parent-block-selector-unsaved-changes-indicator" />
 			<ToolbarButton
 				className="block-editor-block-parent-selector__button"
 				onClick={ () => selectBlock( firstParentClientId ) }

packages/block-editor/src/components/block-parent-selector/style.scss

@@ -9,3 +9,31 @@
 		border-radius: $radius-block-ui;
 	}
 }
+
+// styles for parent block selector when parent block has changes
+.block-editor-block-parent-selector.parent-block-has-changes {
+	left: calc(-#{$grid-unit-60} - #{$grid-unit-30} - #{$border-width});
+
+	// increase the width of parent selector to make room for the dot
+	.block-editor-block-parent-selector__button {
+		width: $grid-unit-60 + $grid-unit-20;
+	}
+
+	// move the parent selector icon to right side to make room for the dot
+	.block-editor-block-icon {
+		margin-right: -15px;
+	}
+
+	// add the dot before the parent selector icon
+	.parent-block-selector-unsaved-changes-indicator {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		background: var(--wp-admin-theme-color);
+		border-radius: 4px;
+		height: 8px;
+		width: 8px;
+		margin: 0 12px;
+	}
+}
+

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

@@ -12,6 +12,7 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
+	Slot,
 } from '@wordpress/components';
 import {
 	switchToBlockType,
@@ -147,6 +148,9 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						} }
 						icon={
 							<>
+								{ isReusable && (
+									<Slot name="block-unsaved-changes-indicator" />
+								) }
 								<BlockIcon
 									icon={ icon }
 									className="block-editor-block-switcher__toggle"

packages/block-editor/src/components/block-switcher/style.scss

@@ -1,5 +1,15 @@
 .block-editor-block-switcher {
 	position: relative;
+
+	// Show dot before the block switcher in block toolbar if block has edits
+	.block-unsaved-changes-indicator {
+		position: relative;
+		background: var(--wp-admin-theme-color);
+		border-radius: 4px;
+		height: 8px;
+		width: 8px;
+		margin-right: 8px;
+	}
 }
 
 // Show an indicator triangle.

packages/block-editor/src/components/block-toolbar/style.scss

@@ -54,6 +54,15 @@
 	}
 }
 
+// move contextual toolbar to right when parent block has changes
+.block-editor-block-contextual-toolbar.parent-block-has-changes:not(.is-fixed) {
+	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-30});
+
+	.show-icon-labels & {
+		margin-left: 0;
+	}
+}
+
 .block-editor-block-parent-selector {
 	position: absolute;
 	top: -$border-width;

packages/block-editor/src/components/block-unsaved-changes-indicator/parent-block-selector-unsaved-changes-indicator.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { Fill } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
+
+function UnsavedChangesIndicator() {
+	useEffect( () => {
+		// add class to the parent selector to increase it's width
+		const parentSelectorBtn = document.querySelector(
+			'.block-editor-block-parent-selector'
+		);
+		parentSelectorBtn.classList.add( 'parent-block-has-changes' );
+		// add class to the contextual toolbar to move it to the right side
+		const contextualToolBar = document.querySelector(
+			'.block-editor-block-contextual-toolbar'
+		);
+		contextualToolBar.classList.add( 'parent-block-has-changes' );
+
+		return () => {
+			// remove classes from the parent selector and contextual toolbar when component unmounts
+			document
+				.querySelector( '.block-editor-block-parent-selector' )
+				.classList.remove( 'parent-block-has-changes' );
+			document
+				.querySelector( '.block-editor-block-contextual-toolbar' )
+				.classList.remove( 'parent-block-has-changes' );
+		};
+	}, [] );
+
+	return (
+		<div className="parent-block-selector-unsaved-changes-indicator"></div>
+	);
+}
+
+function ParentBlockSelectorUnsavedChangesIndicator() {
+	return (
+		<>
+			<Fill name="parent-block-selector-unsaved-changes-indicator">
+				<UnsavedChangesIndicator />
+			</Fill>
+		</>
+	);
+}
+
+export default ParentBlockSelectorUnsavedChangesIndicator;

packages/block-editor/src/components/block-unsaved-changes-indicator/selected-block-unsaved-changes-indicator.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { Fill } from '@wordpress/components';
+
+function UnsavedChangesIndicator() {
+	return <div className="block-unsaved-changes-indicator"></div>;
+}
+
+function SelectedBlockUnsavedChangesIndicator() {
+	return (
+		<>
+			<Fill name="block-unsaved-changes-indicator">
+				<UnsavedChangesIndicator />
+			</Fill>
+		</>
+	);
+}
+
+export default SelectedBlockUnsavedChangesIndicator;

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

@@ -110,6 +110,8 @@ export { default as BlockSettingsMenuControls } from './block-settings-menu-cont
 export { default as BlockTitle } from './block-title';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as BlockTools } from './block-tools';
+export { default as __experimentalParentBlockSelectorUnsavedChangesIndicator } from './block-unsaved-changes-indicator/parent-block-selector-unsaved-changes-indicator';
+export { default as __experimentalSelectedBlockUnsavedChangesIndicator } from './block-unsaved-changes-indicator/selected-block-unsaved-changes-indicator';
 export {
 	default as CopyHandler,
 	useClipboardHandler as __unstableUseClipboardHandler,

packages/block-library/src/block/edit.js

@@ -21,11 +21,14 @@ import {
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 	__experimentalBlockContentOverlay as BlockContentOverlay,
+	__experimentalParentBlockSelectorUnsavedChangesIndicator as ParentBlockSelectorUnsavedChangesIndicator,
+	__experimentalSelectedBlockUnsavedChangesIndicator as SelectedBlockUnsavedChangesIndicator,
 	InnerBlocks,
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
 	Warning,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { ungroup } from '@wordpress/icons';
@@ -68,6 +71,23 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 		[ ref, clientId ]
 	);
 
+	const { isChildSelected, isSelected } = useSelect( ( select ) => {
+		const { getBlockParents, getSelectedBlockClientId } = select(
+			blockEditorStore
+		);
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const _isSelected = selectedBlockClientId === clientId;
+
+		const parents = getBlockParents( selectedBlockClientId );
+		const firstParentClientId = parents[ parents.length - 1 ];
+		const _isChildSelected = firstParentClientId === clientId;
+
+		return {
+			isChildSelected: _isChildSelected,
+			isSelected: _isSelected,
+		};
+	}, [] );
+
 	const {
 		__experimentalConvertBlockToStatic: convertBlockToStatic,
 	} = useDispatch( reusableBlocksStore );
@@ -156,6 +176,14 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	return (
 		<RecursionProvider>
 			<div { ...blockProps }>
+				{ isSelected && hasEdits && (
+					<SelectedBlockUnsavedChangesIndicator />
+				) }
+
+				{ isChildSelected && hasEdits && (
+					<ParentBlockSelectorUnsavedChangesIndicator />
+				) }
+
 				<BlockControls>
 					<ToolbarGroup>
 						<ToolbarButton