Patterns: disable image caption if part of synced pattern (#58916)

Co-authored-by: glendaviesnz <[email protected]> Co-authored-by: talldan <[email protected]> Co-authored-by: michalczaplinski <[email protected]> Co-authored-by: fabiankaegy <[email protected]> Co-authored-by: annezazu <[email protected]>
WordPress · Feb 27, 2024 · f5cb6f6 · f5cb6f6
1 parent f8f325a
commit f5cb6f6
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -109,6 +109,7 @@ export function RichTextWrapper(
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
 		__unstableAllowPrefixTransformations,
+		disableEditing,
 		...props
 	},
 	forwardedRef
@@ -147,7 +148,7 @@ export function RichTextWrapper(
 		}
 
 		// Disable Rich Text editing if block bindings specify that.
-		let shouldDisableEditing = false;
+		let disableBoundBlocks = false;
 		if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) {
 			const blockTypeAttributes = getBlockType( blockName ).attributes;
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
@@ -168,7 +169,7 @@ export function RichTextWrapper(
 					! blockBindingsSource ||
 					blockBindingsSource.lockAttributesEditing
 				) {
-					shouldDisableEditing = true;
+					disableBoundBlocks = true;
 					break;
 				}
 			}
@@ -178,16 +179,19 @@ export function RichTextWrapper(
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
-			shouldDisableEditing,
+			disableBoundBlocks,
 		};
 	};
-	const { selectionStart, selectionEnd, isSelected, shouldDisableEditing } =
+	const { selectionStart, selectionEnd, isSelected, disableBoundBlocks } =
 		useSelect( selector, [
 			clientId,
 			identifier,
 			originalIsSelected,
 			isBlockSelected,
 		] );
+
+	const shouldDisableEditing = disableEditing || disableBoundBlocks;
+
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -440,19 +444,34 @@ export function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = withDeprecations(
+// This is the private API for the RichText component.
+// It allows access to all props, not just the public ones.
+export const PrivateRichText = withDeprecations(
 	forwardRef( RichTextWrapper )
 );
 
-ForwardedRichTextContainer.Content = Content;
-ForwardedRichTextContainer.isEmpty = ( value ) => {
+PrivateRichText.Content = Content;
+PrivateRichText.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };
 
+// This is the public API for the RichText component.
+// We wrap the PrivateRichText component to hide some props from the public API.
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */
-export default ForwardedRichTextContainer;
+const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
+	return (
+		<PrivateRichText ref={ ref } { ...props } disableEditing={ false } />
+	);
+} );
+
+PublicForwardedRichTextContainer.Content = Content;
+PublicForwardedRichTextContainer.isEmpty = ( value ) => {
+	return ! value || value.length === 0;
+};
+
+export default PublicForwardedRichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
@@ -27,6 +27,7 @@ import { ExperimentalBlockCanvas } from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
 import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 import { selectBlockPatternsKey } from './store/private-keys';
+import { PrivateRichText } from './components/rich-text/';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -58,4 +59,5 @@ lock( privateApis, {
 	usesContextKey,
 	useFlashEditableBlocks,
 	selectBlockPatternsKey,
+	PrivateRichText,
 } );
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -411,6 +411,7 @@ export default function Image( {
 		lockHrefControls = false,
 		lockAltControls = false,
 		lockTitleControls = false,
+		lockCaption = false,
 	} = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
@@ -445,6 +446,10 @@ export default function Image( {
 					// 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,
+				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.
+					hasParentPattern,
 				lockAltControls:
 					!! altBinding &&
 					( ! altBindingSource ||
@@ -908,13 +913,15 @@ export default function Image( {
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
 			{ img }
+
 			<Caption
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 				isSelected={ isSingleSelected }
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
 				showToolbarButton={ isSingleSelected && hasNonContentControls }
+				disableEditing={ lockCaption }
 			/>
 		</>
 	);

diff --git a/packages/block-library/src/utils/caption.js b/packages/block-library/src/utils/caption.js
@@ -10,14 +10,21 @@ import { useState, useEffect, useCallback } from '@wordpress/element';
 import { usePrevious } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import {
-	RichText,
 	BlockControls,
 	__experimentalGetElementClassName,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { ToolbarButton } from '@wordpress/components';
 import { caption as captionIcon } from '@wordpress/icons';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis );
+
 export function Caption( {
 	key = 'caption',
 	attributes,
@@ -28,6 +35,7 @@ export function Caption( {
 	label = __( 'Caption text' ),
 	showToolbarButton = true,
 	className,
+	disableEditing,
 } ) {
 	const caption = attributes[ key ];
 	const prevCaption = usePrevious( caption );
@@ -101,6 +109,7 @@ export function Caption( {
 								createBlock( getDefaultBlockName() )
 							)
 						}
+						disableEditing={ disableEditing }
 					/>
 				) }
 		</>