diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index deafde69b35c3..01753ceda4728 100644
--- 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(
@@ -170,7 +171,7 @@ export function RichTextWrapper(
! blockBindingsSource ||
blockBindingsSource.lockAttributesEditing
) {
- shouldDisableEditing = true;
+ disableBoundBlocks = true;
break;
}
}
@@ -180,16 +181,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 );
@@ -441,19 +445,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 (
+
+ );
+} );
+
+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
index 220aa5f412727..ec6843ead2489 100644
--- 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
index f188f8eaaf310..5da87d6f9eb07 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -408,6 +408,7 @@ export default function Image( {
lockHrefControls = false,
lockAltControls = false,
lockTitleControls = false,
+ lockCaption = false,
} = useSelect(
( select ) => {
if ( ! isSingleSelected ) {
@@ -441,6 +442,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 ||
@@ -797,6 +802,7 @@ export default function Image( {
which causes duplicated image upload. */ }
{ ! temporaryURL && controls }
{ img }
+
>
);
diff --git a/packages/block-library/src/utils/caption.js b/packages/block-library/src/utils/caption.js
index e9055cc29df02..57f034c76c6ed 100644
--- 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 }
/>
) }
>