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 } /> ) }