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,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
  } }
  icon={
  <>
+ <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,42 @@
+/**
+ * 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
+ parentSelectorBtn.classList.remove( 'parent-block-has-changes' );
+ contextualToolBar.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
@@ -165,18 +193,19 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
  showTooltip
  />
  </ToolbarGroup>
- <ToolbarGroup>
- <ToolbarButton
- isPrimary
- className="block-library-block__reusable-block-save-button"
- onClick={ saveEditedRecords }
- label={ __( 'Save reusable block' ) }
- showTooltip
- isDisabled={ ! hasEdits }
- >
- { __( 'Save' ) }
- </ToolbarButton>
- </ToolbarGroup>
+ { hasEdits && (
+ <ToolbarGroup>
+ <ToolbarButton
+ isPrimary
+ className="block-library-block__reusable-block-save-button"
+ onClick={ saveEditedRecords }
+ label={ __( 'Save reusable block' ) }
+ showTooltip
+ >
+ { __( 'Save' ) }
+ </ToolbarButton>
+ </ToolbarGroup>
+ ) }
  </BlockControls>
  <InspectorControls>
  <PanelBody>