diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index d0ba808946d7a9..41240ac6c48be6 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -187,10 +187,30 @@ function GalleryEdit( props ) { ? `is-style-${ preferredStyle }` : undefined; } + + let newLinkTarget; + if ( imageAttributes.linkTarget || imageAttributes.rel ) { + // When transformed from image blocks, the link destination and rel attributes are inherited. + newLinkTarget = { + linkTarget: imageAttributes.linkTarget, + rel: imageAttributes.rel, + }; + } else { + // When an image is added, update the link destination and rel attributes according to the gallery settings + newLinkTarget = getUpdatedLinkTargetSettings( + linkTarget, + attributes + ); + } + return { ...pickRelevantMediaFiles( image, sizeSlug ), - ...getHrefAndDestination( image, linkTo ), - ...getUpdatedLinkTargetSettings( linkTarget, attributes ), + ...getHrefAndDestination( + image, + linkTo, + imageAttributes?.linkDestination + ), + ...newLinkTarget, className: newClassName, sizeSlug, caption: imageAttributes.caption || image.caption?.raw, diff --git a/packages/block-library/src/gallery/transforms.js b/packages/block-library/src/gallery/transforms.js index 553596f91a8cb7..1be5815c69ab17 100644 --- a/packages/block-library/src/gallery/transforms.js +++ b/packages/block-library/src/gallery/transforms.js @@ -144,6 +144,9 @@ const transforms = { if ( isGalleryV2Enabled() ) { const innerBlocks = validImages.map( ( image ) => { + // Gallery images can't currently be resized so make sure height and width are undefined. + image.width = undefined; + image.height = undefined; return createBlock( 'core/image', image ); } ); @@ -302,26 +305,36 @@ const transforms = { return innerBlocks.map( ( { attributes: { - id, url, alt, caption, + title, + href, + rel, + linkClass, + id, sizeSlug: imageSizeSlug, linkDestination, - href, linkTarget, + anchor, + className, }, } ) => createBlock( 'core/image', { - id, + align, url, alt, caption, + title, + href, + rel, + linkClass, + id, sizeSlug: imageSizeSlug, - align, linkDestination, - href, linkTarget, + anchor, + className, } ) ); } diff --git a/packages/block-library/src/gallery/utils.js b/packages/block-library/src/gallery/utils.js index 71da9db0b7fc24..15f2062ea943da 100644 --- a/packages/block-library/src/gallery/utils.js +++ b/packages/block-library/src/gallery/utils.js @@ -15,18 +15,22 @@ import { } from '../image/constants'; /** - * Determines new href and linkDestination values for an image block from the - * supplied Gallery link destination. + * Determines new href and linkDestination values for an Image block from the + * supplied Gallery link destination, or falls back to the Image blocks link. * - * @param {Object} image Gallery image. - * @param {string} destination Gallery's selected link destination. + * @param {Object} image Gallery image. + * @param {string} galleryDestination Gallery's selected link destination. + * @param {Object} imageDestination Image blocks attributes. * @return {Object} New attributes to assign to image block. */ -export function getHrefAndDestination( image, destination ) { +export function getHrefAndDestination( + image, + galleryDestination, + imageDestination +) { // Gutenberg and WordPress use different constants so if image_default_link_type // option is set we need to map from the WP Core values. - - switch ( destination ) { + switch ( imageDestination ? imageDestination : galleryDestination ) { case LINK_DESTINATION_MEDIA_WP_CORE: case LINK_DESTINATION_MEDIA: return {