Skip to content

Commit

Permalink
Patterns: disable image caption if part of synced pattern (#58916)
Browse files Browse the repository at this point in the history 
Co-authored-by: glendaviesnz <glendaviesnz@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: michalczaplinski <czapla@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
  • Loading branch information
@glendaviesnz @talldan
@michalczaplinski @fabiankaegy @annezazu
6 people authored Feb 21, 2024
1 parent dcbd067 commit cab4b28
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 9 deletions.
35 changes: 27 additions & 8 deletions packages/block-editor/src/components/rich-text/index.js
View file
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,7 @@ export default function Image( {
lockHrefControls = false,
lockAltControls = false,
lockTitleControls = false,
lockCaption = false,
} = useSelect(
( select ) => {
if ( ! isSingleSelected ) {
Expand Down Expand Up @@ -444,6 +445,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 @@ -907,13 +912,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 }
/>
</>
);
Expand Down
11 changes: 10 additions & 1 deletion packages/block-library/src/utils/caption.js
View file
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

1 comment on commit cab4b28

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in cab4b28.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7996267217
📝 Reported issues:

Please sign in to comment.