Rename the component

Author: kevin940726

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

@@ -35,7 +35,7 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import Shuffle from './shuffle';
-import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
+import PatternOverridesToolbarIndicator from '../pattern-overrides-toolbar-indicator';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 import { canBindBlock } from '../../hooks/use-bindings-attributes';
 /**
@@ -179,7 +179,9 @@ export function PrivateBlockToolbar( {
 				{ isUsingBindings &&
 					hasParentPattern &&
 					canBindBlock( blockName ) && (
-						<BlockBindingsIndicator clientIds={ blockClientIds } />
+						<PatternOverridesToolbarIndicator
+							clientIds={ blockClientIds }
+						/>
 					) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					( isDefaultEditingMode || isSynced ) && (

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

@@ -20,7 +20,13 @@ import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
-export default function BlockBindingsToolbarIndicator( { clientIds } ) {
+/**
+ * This component is currently only for pattern overrides, which is a WP-only feature.
+ * Ideally, this should be moved to the `patterns` package once ready.
+ * @param {Object} props           The component props.
+ * @param {Array}  props.clientIds The client IDs of the selected blocks.
+ */
+export default function PatternOverridesToolbarIndicator( { clientIds } ) {
 	const isSingleBlockSelected = clientIds.length === 1;
 	const { icon, firstBlockName } = useSelect(
 		( select ) => {
@@ -76,18 +82,18 @@ export default function BlockBindingsToolbarIndicator( { clientIds } ) {
 			<ToolbarItem>
 				{ ( toggleProps ) => (
 					<DropdownMenu
-						className="block-editor-block-bindings-toolbar-indicator"
+						className="block-editor-pattern-overrides-toolbar-indicator"
 						label={ firstBlockTitle }
 						popoverProps={ {
 							placement: 'bottom-start',
 							className:
-								'block-editor-block-bindings-toolbar-indicator__popover',
+								'block-editor-pattern-overrides-toolbar-indicator__popover',
 						} }
 						icon={
 							<>
 								<BlockIcon
 									icon={ icon }
-									className="block-editor-block-bindings-toolbar-indicator-icon"
+									className="block-editor-pattern-overrides-toolbar-indicator-icon"
 									showColors
 								/>
 							</>

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

@@ -0,0 +1,12 @@
+.block-editor-pattern-overrides-toolbar-indicator__popover .components-popover__content {
+	min-width: 260px;
+	padding: $grid-unit-20;
+}
+
+.block-editor-pattern-overrides-toolbar-indicator .block-editor-pattern-overrides-toolbar-indicator-icon.has-colors svg {
+	fill: var(--wp-block-synced-color);
+}
+
+.editor-collapsible-block-toolbar .block-editor-pattern-overrides-toolbar-indicator {
+	height: 32px;
+}

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

@@ -1,6 +1,6 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
-@import "./components/block-bindings-toolbar-indicator/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";