diff --git a/packages/editor/src/hooks/pattern-overrides.js b/packages/editor/src/hooks/pattern-overrides.js
index 426bc4d357f0bd..07310123c53dd4 100644
--- a/packages/editor/src/hooks/pattern-overrides.js
+++ b/packages/editor/src/hooks/pattern-overrides.js
@@ -6,6 +6,7 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
import { createHigherOrderComponent } from '@wordpress/compose';
import { useBlockEditingMode } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
+import { memo } from '@wordpress/element';
import { store as blocksStore } from '@wordpress/blocks';
/**
@@ -25,6 +26,68 @@ const {
PATTERN_SYNC_TYPES,
} = unlock( patternsPrivateApis );
+// Split into a separate component to avoid a store subscription
+// on every block.
+const MemoizedControlsWithStoreSubscription = memo(
+ function ControlsWithStoreSubscription( props ) {
+ const blockEditingMode = useBlockEditingMode();
+ const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect(
+ ( select ) => {
+ const { getBlockBindingsSource } = unlock(
+ select( blocksStore )
+ );
+ const { getCurrentPostType, getEditedPostAttribute } =
+ select( editorStore );
+
+ return {
+ // For editing link to the site editor if the theme and user permissions support it.
+ hasPatternOverridesSource: !! getBlockBindingsSource(
+ 'core/pattern-overrides'
+ ),
+ isEditingSyncedPattern:
+ getCurrentPostType() === PATTERN_TYPES.user &&
+ getEditedPostAttribute( 'meta' )
+ ?.wp_pattern_sync_status !==
+ PATTERN_SYNC_TYPES.unsynced &&
+ getEditedPostAttribute( 'wp_pattern_sync_status' ) !==
+ PATTERN_SYNC_TYPES.unsynced,
+ };
+ },
+ []
+ );
+
+ const bindings = props.metadata?.bindings;
+ const hasPatternBindings =
+ !! bindings &&
+ Object.values( bindings ).some(
+ ( binding ) => binding.source === 'core/pattern-overrides'
+ );
+
+ const shouldShowPatternOverridesControls =
+ isEditingSyncedPattern && blockEditingMode === 'default';
+ const shouldShowResetOverridesControl =
+ ! isEditingSyncedPattern &&
+ !! props.metadata?.name &&
+ blockEditingMode !== 'disabled' &&
+ hasPatternBindings;
+
+ if ( ! hasPatternOverridesSource ) {
+ return null;
+ }
+
+ return (
+ <>
+ { shouldShowPatternOverridesControls && (
+
+ ) }
+ { shouldShowResetOverridesControl && (
+
+ ) }
+ >
+ );
+ }
+);
+
/**
* Override the default edit UI to include a new block inspector control for
* assigning a partial syncing controls to supported blocks in the pattern editor.
@@ -41,9 +104,19 @@ const withPatternOverrideControls = createHigherOrderComponent(
return (
<>
-
+
{ props.isSelected && isSupportedBlock && (
-
+
) }
{ isSupportedBlock && }
>
@@ -52,63 +125,6 @@ const withPatternOverrideControls = createHigherOrderComponent(
'withPatternOverrideControls'
);
-// Split into a separate component to avoid a store subscription
-// on every block.
-function ControlsWithStoreSubscription( props ) {
- const blockEditingMode = useBlockEditingMode();
- const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect(
- ( select ) => {
- const { getBlockBindingsSource } = unlock( select( blocksStore ) );
- const { getCurrentPostType, getEditedPostAttribute } =
- select( editorStore );
-
- return {
- // For editing link to the site editor if the theme and user permissions support it.
- hasPatternOverridesSource: !! getBlockBindingsSource(
- 'core/pattern-overrides'
- ),
- isEditingSyncedPattern:
- getCurrentPostType() === PATTERN_TYPES.user &&
- getEditedPostAttribute( 'meta' )?.wp_pattern_sync_status !==
- PATTERN_SYNC_TYPES.unsynced &&
- getEditedPostAttribute( 'wp_pattern_sync_status' ) !==
- PATTERN_SYNC_TYPES.unsynced,
- };
- },
- []
- );
-
- const bindings = props.attributes.metadata?.bindings;
- const hasPatternBindings =
- !! bindings &&
- Object.values( bindings ).some(
- ( binding ) => binding.source === 'core/pattern-overrides'
- );
-
- const shouldShowPatternOverridesControls =
- isEditingSyncedPattern && blockEditingMode === 'default';
- const shouldShowResetOverridesControl =
- ! isEditingSyncedPattern &&
- !! props.attributes.metadata?.name &&
- blockEditingMode !== 'disabled' &&
- hasPatternBindings;
-
- if ( ! hasPatternOverridesSource ) {
- return null;
- }
-
- return (
- <>
- { shouldShowPatternOverridesControls && (
-
- ) }
- { shouldShowResetOverridesControl && (
-
- ) }
- >
- );
-}
-
addFilter(
'editor.BlockEdit',
'core/editor/with-pattern-override-controls',
diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js
index 3a5ff3e0674a6e..1513acf49e178c 100644
--- a/packages/patterns/src/components/pattern-overrides-controls.js
+++ b/packages/patterns/src/components/pattern-overrides-controls.js
@@ -32,9 +32,9 @@ function addBindings( bindings ) {
}
function PatternOverridesControls( {
- attributes,
+ metadata,
setAttributes,
- name: blockName,
+ hasUnsupportedAttributes,
} ) {
const controlId = useId();
const [ showAllowOverridesModal, setShowAllowOverridesModal ] =
@@ -42,8 +42,8 @@ function PatternOverridesControls( {
const [ showDisallowOverridesModal, setShowDisallowOverridesModal ] =
useState( false );
- const hasName = !! attributes.metadata?.name;
- const defaultBindings = attributes.metadata?.bindings?.__default;
+ const hasName = !! metadata?.name;
+ const defaultBindings = metadata?.bindings?.__default;
const hasOverrides =
hasName && defaultBindings?.source === PATTERN_OVERRIDES_BINDING_SOURCE;
const isConnectedToOtherSources =
@@ -51,13 +51,13 @@ function PatternOverridesControls( {
defaultBindings.source !== PATTERN_OVERRIDES_BINDING_SOURCE;
function updateBindings( isChecked, customName ) {
- const prevBindings = attributes?.metadata?.bindings;
+ const prevBindings = metadata?.bindings;
const updatedBindings = isChecked
? addBindings( prevBindings )
: removeBindings( prevBindings );
const updatedMetadata = {
- ...attributes.metadata,
+ ...metadata,
bindings: updatedBindings,
};
@@ -75,12 +75,8 @@ function PatternOverridesControls( {
return null;
}
- const hasUnsupportedImageAttributes =
- blockName === 'core/image' &&
- ( !! attributes.caption?.length || !! attributes.href?.length );
-
const helpText =
- ! hasOverrides && hasUnsupportedImageAttributes
+ ! hasOverrides && hasUnsupportedAttributes
? __(
`Overrides currently don't support image captions or links. Remove the caption or link first before enabling overrides.`
)
@@ -108,9 +104,7 @@ function PatternOverridesControls( {
setShowAllowOverridesModal( true );
}
} }
- disabled={
- ! hasOverrides && hasUnsupportedImageAttributes
- }
+ disabled={ ! hasOverrides && hasUnsupportedAttributes }
accessibleWhenDisabled
>
{ hasOverrides
@@ -122,7 +116,7 @@ function PatternOverridesControls( {
{ showAllowOverridesModal && (
setShowAllowOverridesModal( false ) }
onSave={ ( newName ) => {
updateBindings( true, newName );
diff --git a/packages/patterns/src/components/reset-overrides-control.js b/packages/patterns/src/components/reset-overrides-control.js
index 41d47cd7d81642..0e199d34f8a865 100644
--- a/packages/patterns/src/components/reset-overrides-control.js
+++ b/packages/patterns/src/components/reset-overrides-control.js
@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
const CONTENT = 'content';
export default function ResetOverridesControl( props ) {
- const name = props.attributes.metadata?.name;
+ const name = props.metadata?.name;
const registry = useRegistry();
const isOverriden = useSelect(
( select ) => {