Extract pattern overrides toolbar indicator from the block-editor package

Author: kevin940726

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

@@ -35,9 +35,8 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import Shuffle from './shuffle';
-import PatternOverridesToolbarIndicator from '../pattern-overrides-toolbar-indicator';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
-import { canBindBlock } from '../../hooks/use-bindings-attributes';
+
 /**
  * Renders the block toolbar.
  *
@@ -62,18 +61,15 @@ export function PrivateBlockToolbar( {
 		blockClientIds,
 		isDefaultEditingMode,
 		blockType,
-		blockName,
 		toolbarKey,
 		shouldShowVisualToolbar,
 		showParentSelector,
 		isUsingBindings,
-		hasParentPattern,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockMode,
 			getBlockParents,
-			getBlockParentsByBlockName,
 			getSelectedBlockClientIds,
 			isBlockValid,
 			getBlockRootClientId,
@@ -96,18 +92,14 @@ export function PrivateBlockToolbar( {
 		const isVisual = selectedBlockClientIds.every(
 			( id ) => getBlockMode( id ) === 'visual'
 		);
-		const bindings = getBlockAttributes( selectedBlockClientId )?.metadata
-			?.bindings;
-		const parentPatternClientId = getBlockParentsByBlockName(
-			selectedBlockClientId,
-			'core/block',
-			true
-		)[ 0 ];
+		const _isUsingBindings = selectedBlockClientIds.every(
+			( clientId ) =>
+				!! getBlockAttributes( clientId )?.metadata?.bindings
+		);
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
 			isDefaultEditingMode: _isDefaultEditingMode,
-			blockName: _blockName,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			rootClientId: blockRootClientId,
@@ -122,8 +114,7 @@ export function PrivateBlockToolbar( {
 				) &&
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
-			isUsingBindings: !! bindings,
-			hasParentPattern: !! parentPatternClientId,
+			isUsingBindings: _isUsingBindings,
 		};
 	}, [] );
 
@@ -176,13 +167,6 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
-				{ isUsingBindings &&
-					hasParentPattern &&
-					canBindBlock( blockName ) && (
-						<PatternOverridesToolbarIndicator
-							clientIds={ blockClientIds }
-						/>
-					) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					( isDefaultEditingMode || isSynced ) && (
 						<div

packages/block-editor/src/components/pattern-overrides-toolbar-indicator/index.js

@@ -43,6 +43,7 @@ import { PrivateBlockPopover } from './components/block-popover';
 import { PrivateInserterLibrary } from './components/inserter/library';
 import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker';
 import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
+import useBlockDisplayTitle from './components/block-title/use-block-display-title';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -86,4 +87,5 @@ lock( privateApis, {
 	PrivateBlockPopover,
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
+	useBlockDisplayTitle,
 } );

packages/block-editor/src/components/pattern-overrides-toolbar-indicator/style.scss

@@ -1,6 +1,5 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
-@import "./components/pattern-overrides-toolbar-indicator/style.scss";
 @import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";

packages/block-editor/src/private-apis.js

@@ -17,6 +17,7 @@ import { unlock } from '../lock-unlock';
 const {
 	PatternOverridesControls,
 	ResetOverridesControl,
+	PatternOverridesBlockControls,
 	PATTERN_TYPES,
 	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
 	PATTERN_SYNC_TYPES,
@@ -43,6 +44,7 @@ const withPatternOverrideControls = createHigherOrderComponent(
 				{ props.isSelected && isSupportedBlock && (
 					<ControlsWithStoreSubscription { ...props } />
 				) }
+				{ isSupportedBlock && <PatternOverridesBlockControls /> }
 			</>
 		);
 	}