pass through contenteditable and aria-readonly props

WordPress · Feb 12, 2024 · e1019b5 · e1019b5
1 parent 7f33f24
commit e1019b5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -109,7 +109,6 @@ export function RichTextWrapper(
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
 		__unstableAllowPrefixTransformations,
-		disableEditing,
 		...props
 	},
 	forwardedRef
@@ -148,7 +147,7 @@ export function RichTextWrapper(
 		}
 
 		// Disable Rich Text editing if block bindings specify that.
-		let disableBoundBlocks = false;
+		let shouldDisableEditing = false;
 		if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) {
 			const blockTypeAttributes = getBlockType( blockName ).attributes;
 			const { getBlockBindingsSource } = unlock(
@@ -164,7 +163,7 @@ export function RichTextWrapper(
 						'rich-text' &&
 					getBlockBindingsSource( args.source )?.lockAttributesEditing
 				) {
-					disableBoundBlocks = true;
+					shouldDisableEditing = true;
 					break;
 				}
 			}
@@ -174,19 +173,17 @@ export function RichTextWrapper(
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
-			disableBoundBlocks,
+			shouldDisableEditing,
 		};
 	};
-	const { selectionStart, selectionEnd, isSelected, disableBoundBlocks } =
+	const { selectionStart, selectionEnd, isSelected, shouldDisableEditing } =
 		useSelect( selector, [
 			clientId,
 			identifier,
 			originalIsSelected,
 			isBlockSelected,
 		] );
 
-	const shouldDisableEditing = disableEditing || disableBoundBlocks;
-
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -361,6 +358,7 @@ export function RichTextWrapper(
 				aria-multiline={ ! disableLineBreaks }
 				aria-label={ placeholder }
 				aria-readonly={ shouldDisableEditing }
+				contentEditable={ ! shouldDisableEditing }
 				{ ...props }
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [
@@ -415,7 +413,6 @@ export function RichTextWrapper(
 					useFirefoxCompat(),
 					anchorRef,
 				] ) }
-				contentEditable={ ! shouldDisableEditing }
 				suppressContentEditableWarning={ true }
 				className={ classnames(
 					'block-editor-rich-text__editable',

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -801,7 +801,8 @@ export default function Image( {
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
 				showToolbarButton={ isSingleSelected && hasNonContentControls }
-				disableEditing={ lockCaption }
+				contentEditable={ ! lockCaption }
+				aria-readonly={ lockCaption }
 			/>
 		</>
 	);

diff --git a/packages/block-library/src/utils/caption.js b/packages/block-library/src/utils/caption.js
@@ -28,7 +28,7 @@ export function Caption( {
 	label = __( 'Caption text' ),
 	showToolbarButton = true,
 	className,
-	disableEditing,
+	...props
 } ) {
 	const caption = attributes[ key ];
 	const prevCaption = usePrevious( caption );
@@ -102,7 +102,7 @@ export function Caption( {
 								createBlock( getDefaultBlockName() )
 							)
 						}
-						disableEditing={ disableEditing }
+						{ ...props }
 					/>
 				) }
 		</>