Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
Feb 21, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b44aa19
disable rich text if attribute not part of bindings
glendaviesnz Feb 12, 2024
ebe532b
Revert "disable rich text if attribute not part of bindings"
glendaviesnz Feb 12, 2024
31b9d05
Lock the caption if the image is in a pattern
glendaviesnz Feb 12, 2024
7097e8f
pass explicit prop to disable rich text editing
glendaviesnz Feb 12, 2024
5d98f72
pass through contenteditable and aria-readonly props
glendaviesnz Feb 12, 2024
356437c
Revert "pass through contenteditable and aria-readonly props"
glendaviesnz Feb 13, 2024
adf900a
Switch to a private version of the RichText component for the new prop
glendaviesnz Feb 14, 2024
03a8d89
Fix comment error
glendaviesnz Feb 14, 2024
a75bb56
Remove the private prefix
glendaviesnz Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 27 additions & 8 deletions packages/block-editor/src/components/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ export function RichTextWrapper(
__unstableDisableFormats: disableFormats,
disableLineBreaks,
__unstableAllowPrefixTransformations,
disableEditing,
...props
},
forwardedRef
Expand Down Expand Up @@ -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(
Expand All @@ -170,7 +171,7 @@ export function RichTextWrapper(
! blockBindingsSource ||
blockBindingsSource.lockAttributesEditing
) {
shouldDisableEditing = true;
disableBoundBlocks = true;
break;
}
}
Expand All @@ -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 );
Expand Down Expand Up @@ -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 (
<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';
2 changes: 2 additions & 0 deletions packages/block-editor/src/private-apis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -58,4 +59,5 @@ lock( privateApis, {
usesContextKey,
useFlashEditableBlocks,
selectBlockPatternsKey,
PrivateRichText,
} );
7 changes: 7 additions & 0 deletions packages/block-library/src/image/image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,7 @@ export default function Image( {
lockHrefControls = false,
lockAltControls = false,
lockTitleControls = false,
lockCaption = false,
} = useSelect(
( select ) => {
if ( ! isSingleSelected ) {
Expand Down Expand Up @@ -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 ||
Expand Down Expand Up @@ -797,13 +802,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 }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem scalable. What about rich text everywhere else?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ellatrix I don't see it as something that needs to be scalable. At the moment caption is disabled because it's an edge case, one of the few content attributes that block bindings can't process (due to the lack of a replace_inner_html function in the html processor).

In the future when caption is supported by block bindings it'll be possible to revert this PR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, ok

/>
</>
);
Expand Down
11 changes: 10 additions & 1 deletion packages/block-library/src/utils/caption.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -28,6 +35,7 @@ export function Caption( {
label = __( 'Caption text' ),
showToolbarButton = true,
className,
disableEditing,
} ) {
const caption = attributes[ key ];
const prevCaption = usePrevious( caption );
Expand Down Expand Up @@ -101,6 +109,7 @@ export function Caption( {
createBlock( getDefaultBlockName() )
)
}
disableEditing={ disableEditing }
/>
) }
</>
Expand Down
Loading