diff --git a/packages/block-library/src/cover/transforms.js b/packages/block-library/src/cover/transforms.js index c2e2d42fa4f22..7837225bb3dce 100644 --- a/packages/block-library/src/cover/transforms.js +++ b/packages/block-library/src/cover/transforms.js @@ -23,7 +23,7 @@ const transforms = { anchor, style: { color: { - duotone: style.color.duotone, + duotone: style?.color?.duotone, }, }, }, diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index f9529efb7e793..56561ae4d4fa1 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -80,6 +80,7 @@ export function ImageEdit( { insertBlocksAfter, noticeOperations, onReplace, + clientId, } ) { const { url = '', @@ -300,6 +301,7 @@ export function ImageEdit( { onSelectURL={ onSelectURL } onUploadError={ onUploadError } containerRef={ ref } + clientId={ clientId } /> ) } { ! url && ( diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index ba59b8f4250ec..6000d4513e61d 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -87,28 +87,25 @@ export default function Image( { onSelectURL, onUploadError, containerRef, + clientId, } ) { const captionRef = useRef(); const prevUrl = usePrevious( url ); - const { block, currentId, image, multiImageSelection } = useSelect( + const { getBlock } = useSelect( blockEditorStore ); + const { image, multiImageSelection } = useSelect( ( select ) => { const { getMedia } = select( coreStore ); - const { - getMultiSelectedBlockClientIds, - getBlockName, - getSelectedBlock, - getSelectedBlockClientId, - } = select( blockEditorStore ); + const { getMultiSelectedBlockClientIds, getBlockName } = select( + blockEditorStore + ); const multiSelectedClientIds = getMultiSelectedBlockClientIds(); return { - block: getSelectedBlock(), - currentId: getSelectedBlockClientId(), image: id && isSelected ? getMedia( id ) : null, multiImageSelection: multiSelectedClientIds.length && multiSelectedClientIds.every( - ( clientId ) => - getBlockName( clientId ) === 'core/image' + ( _clientId ) => + getBlockName( _clientId ) === 'core/image' ), }; }, @@ -260,6 +257,13 @@ export default function Image( { const canEditImage = id && naturalWidth && naturalHeight && imageEditing; const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage; + function switchToCover() { + replaceBlocks( + clientId, + switchToBlockType( getBlock( clientId ), 'core/cover' ) + ); + } + const controls = ( <> @@ -297,12 +301,7 @@ export default function Image( { - replaceBlocks( - currentId, - switchToBlockType( block, 'core/cover' ) - ) - } + onClick={ switchToCover } /> ) }