Pattern overrides: disallow override for image with caption/href (#62747)

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

Author: 5 people

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

@@ -426,6 +426,9 @@ export default function Image( {
 		</InspectorControls>
 	);
 
+	const arePatternOverridesEnabled =
+		metadata?.bindings?.__default?.source === 'core/pattern-overrides';
+
 	const {
 		lockUrlControls = false,
 		lockHrefControls = false,
@@ -470,7 +473,7 @@ export default function Image( {
 				lockHrefControls:
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
-					hasParentPattern,
+					hasParentPattern || arePatternOverridesEnabled,
 				lockCaption:
 					// Disable editing the caption if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the caption on the frontend.
@@ -971,7 +974,11 @@ export default function Image( {
 				isSelected={ isSingleSelected }
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
-				showToolbarButton={ isSingleSelected && hasNonContentControls }
+				showToolbarButton={
+					isSingleSelected &&
+					hasNonContentControls &&
+					! arePatternOverridesEnabled
+				}
 				readOnly={ lockCaption }
 			/>
 		</>

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

@@ -34,9 +34,8 @@ const {
  */
 const withPatternOverrideControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isSupportedBlock = Object.keys(
-			PARTIAL_SYNCING_SUPPORTED_BLOCKS
-		).includes( props.name );
+		const isSupportedBlock =
+			!! PARTIAL_SYNCING_SUPPORTED_BLOCKS[ props.name ];
 
 		return (
 			<>

packages/patterns/src/components/pattern-overrides-controls.js

@@ -31,7 +31,11 @@ function addBindings( bindings ) {
 	};
 }
 
-function PatternOverridesControls( { attributes, setAttributes } ) {
+function PatternOverridesControls( {
+	attributes,
+	setAttributes,
+	name: blockName,
+} ) {
 	const controlId = useId();
 	const [ showAllowOverridesModal, setShowAllowOverridesModal ] =
 		useState( false );
@@ -71,15 +75,25 @@ function PatternOverridesControls( { attributes, setAttributes } ) {
 		return null;
 	}
 
+	const hasUnsupportedImageAttributes =
+		blockName === 'core/image' &&
+		( !! attributes.caption?.length || !! attributes.href?.length );
+
+	const helpText = hasUnsupportedImageAttributes
+		? __(
+				`Overrides currently don't support image captions or links. Remove the caption or link first before enabling overrides.`
+		  )
+		: __(
+				'Allow changes to this block throughout instances of this pattern.'
+		  );
+
 	return (
 		<>
 			<InspectorControls group="advanced">
 				<BaseControl
 					id={ controlId }
 					label={ __( 'Overrides' ) }
-					help={ __(
-						'Allow changes to this block throughout instances of this pattern.'
-					) }
+					help={ helpText }
 				>
 					<Button
 						__next40pxDefaultSize
@@ -93,6 +107,8 @@ function PatternOverridesControls( { attributes, setAttributes } ) {
 								setShowAllowOverridesModal( true );
 							}
 						} }
+						disabled={ hasUnsupportedImageAttributes }
+						__experimentalIsFocusable
 					>
 						{ allowOverrides
 							? __( 'Disable overrides' )