Pattern overrides: Fix aspect ratio not working in image with overrid…

…es (#62828)

* Remove only supported attributes

* Try alternative approach

* Update comment

* Return early while editing the original pattern

* Move conditional inside conditional

* Add missing check

* Go back to running always bindings

* Use block context to detect presence of parent pattern for overrides (#62861)

* Use block context to detect presence of parent pattern

* Regenerate fixtures

* Update image block to use context for checking a parent pattern block exists

* Rename context to `pattern/overrides` to be consistent with php code

* Move pattern overrides context shim to pattern overrides hooks

* Remove shim

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>

* Reduce diff

* Change array order

---------

Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>

packages/block-editor/src/hooks/use-bindings-attributes.js

@@ -97,6 +97,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
 		const { name, clientId, context } = props;
+		const hasParentPattern = !! props.context[ 'pattern/overrides' ];
 		const hasPatternOverridesDefaultBinding =
 			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
 				?.source === 'core/pattern-overrides';
@@ -216,13 +217,20 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 						}
 					}
 
-					// Only apply normal attribute updates to blocks
-					// that have partial bindings. Currently this is
-					// only skipped for pattern overrides sources.
 					if (
-						! hasPatternOverridesDefaultBinding &&
+						// Don't update non-connected attributes if the block is using pattern overrides
+						// and the editing is happening while overriding the pattern (not editing the original).
+						! (
+							hasPatternOverridesDefaultBinding &&
+							hasParentPattern
+						) &&
 						Object.keys( keptAttributes ).length
 					) {
+						// Don't update caption and href until they are supported.
+						if ( hasPatternOverridesDefaultBinding ) {
+							delete keptAttributes?.caption;
+							delete keptAttributes?.href;
+						}
 						setAttributes( keptAttributes );
 					}
 				} );
@@ -236,6 +244,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 				setAttributes,
 				sources,
 				hasPatternOverridesDefaultBinding,
+				hasParentPattern,
 			]
 		);
 

packages/block-library/src/block/block.json

@@ -12,9 +12,13 @@
 			"type": "number"
 		},
 		"content": {
-			"type": "object"
+			"type": "object",
+			"default": {}
 		}
 	},
+	"providesContext": {
+		"pattern/overrides": "content"
+	},
 	"supports": {
 		"customClassName": false,
 		"html": false,

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

@@ -445,16 +445,12 @@ export default function Image( {
 				return {};
 			}
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			const { getBlockParentsByBlockName } = unlock(
-				select( blockEditorStore )
-			);
 			const {
 				url: urlBinding,
 				alt: altBinding,
 				title: titleBinding,
 			} = metadata?.bindings || {};
-			const hasParentPattern =
-				getBlockParentsByBlockName( clientId, 'core/block' ).length > 0;
+			const hasParentPattern = !! context[ 'pattern/overrides' ];
 			const urlBindingSource = getBlockBindingsSource(
 				urlBinding?.source
 			);
@@ -510,7 +506,12 @@ export default function Image( {
 					: __( 'Connected to dynamic data' ),
 			};
 		},
-		[ clientId, isSingleSelected, metadata?.bindings ]
+		[
+			arePatternOverridesEnabled,
+			context,
+			isSingleSelected,
+			metadata?.bindings,
+		]
 	);
 
 	const showUrlInput =

packages/editor/src/bindings/pattern-overrides.js

@@ -9,23 +9,22 @@ const CONTENT = 'content';
 export default {
 	name: 'core/pattern-overrides',
 	label: _x( 'Pattern Overrides', 'block bindings source' ),
-	getValue( { registry, clientId, attributeName } ) {
-		const { getBlockAttributes, getBlockParentsByBlockName } =
-			registry.select( blockEditorStore );
+	getValue( { registry, clientId, context, attributeName } ) {
+		const patternOverridesContent = context[ 'pattern/overrides' ];
+		const { getBlockAttributes } = registry.select( blockEditorStore );
 		const currentBlockAttributes = getBlockAttributes( clientId );
-		const [ patternClientId ] = getBlockParentsByBlockName(
-			clientId,
-			'core/block',
-			true
-		);
+
+		if ( ! patternOverridesContent ) {
+			return currentBlockAttributes[ attributeName ];
+		}
 
 		const overridableValue =
-			getBlockAttributes( patternClientId )?.[ CONTENT ]?.[
+			patternOverridesContent?.[
 				currentBlockAttributes?.metadata?.name
 			]?.[ attributeName ];
 
 		// If there is no pattern client ID, or it is not overwritten, return the default value.
-		if ( ! patternClientId || overridableValue === undefined ) {
+		if ( overridableValue === undefined ) {
 			return currentBlockAttributes[ attributeName ];
 		}
 

packages/editor/src/hooks/pattern-overrides.js

@@ -14,6 +14,8 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { store as editorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
+/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
+
 const {
 	PatternOverridesControls,
 	ResetOverridesControl,
@@ -46,7 +48,8 @@ const withPatternOverrideControls = createHigherOrderComponent(
 				{ isSupportedBlock && <PatternOverridesBlockControls /> }
 			</>
 		);
-	}
+	},
+	'withPatternOverrideControls'
 );
 
 // Split into a separate component to avoid a store subscription

test/integration/fixtures/blocks/core__block.json

@@ -3,7 +3,8 @@
 		"name": "core/block",
 		"isValid": true,
 		"attributes": {
-			"ref": 123
+			"ref": 123,
+			"content": {}
 		},
 		"innerBlocks": []
 	}