diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index fc22672c05ca0..17ba42f95a226 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -104,7 +104,8 @@ }, "providesContext": { "allowResize": "allowResize", - "isGrouped": "isGrouped" + "isGrouped": "isGrouped", + "imageCrop": "imageCrop", }, "supports": { "anchor": true, diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index b45588aa09cda..7dbe7a328fe0b 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -3,7 +3,7 @@ "name": "core/image", "title": "Image", "category": "media", - "usesContext": [ "allowResize", "isGrouped" ], + "usesContext": [ "allowResize", "isGrouped", "imageCrop" ], "description": "Insert an image to make a visual statement.", "keywords": [ "img", "photo", "picture" ], "textdomain": "default", diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index f8d3e96d67a9b..56e428fdbac3a 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -59,7 +59,11 @@ import { store as coreStore } from '@wordpress/core-data'; import styles from './styles.scss'; import { getUpdatedLinkTargetSettings } from './utils'; -import { LINK_DESTINATION_CUSTOM } from './constants'; +import { + LINK_DESTINATION_CUSTOM, + LINK_DESTINATION_ATTACHMENT, + LINK_DESTINATION_MEDIA, +} from './constants'; const getUrlForSlug = ( image, { sizeSlug } ) => { return get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ); @@ -167,10 +171,10 @@ export class ImageEdit extends Component { } componentDidUpdate( previousProps ) { - if ( ! previousProps.image && this.props.image ) { - const { image, attributes } = this.props; + const { image, attributes, setAttributes } = this.props; + if ( ! previousProps.image && image ) { const url = getUrlForSlug( image, attributes ) || image.source_url; - this.props.setAttributes( { url } ); + setAttributes( { url } ); } } @@ -283,14 +287,13 @@ export class ImageEdit extends Component { } onSetSizeSlug( sizeSlug ) { - const { image } = this.props; + const { image, setAttributes } = this.props; const url = getUrlForSlug( image, { sizeSlug } ); if ( ! url ) { return null; } - - this.props.setAttributes( { + setAttributes( { url, width: undefined, height: undefined, @@ -299,11 +302,8 @@ export class ImageEdit extends Component { } onSelectMediaUploadOption( media ) { - const { - attributes: { id, url }, - imageDefaultSize, - } = this.props; - + const { imageDefaultSize } = this.props; + const { id, url, destination } = this.props.attributes; const mediaAttributes = { id: media.id, url: media.url, @@ -323,6 +323,17 @@ export class ImageEdit extends Component { additionalAttributes = { url }; } + let href; + switch ( destination ) { + case LINK_DESTINATION_MEDIA: + href = media.url; + break; + case LINK_DESTINATION_ATTACHMENT: + href = media.link; + break; + } + mediaAttributes.href = href; + this.props.setAttributes( { ...mediaAttributes, ...additionalAttributes, @@ -363,9 +374,17 @@ export class ImageEdit extends Component { setMappedAttributes( { url: href, ...restAttributes } ) { const { setAttributes } = this.props; + return href === undefined - ? setAttributes( restAttributes ) - : setAttributes( { ...restAttributes, href } ); + ? setAttributes( { + ...restAttributes, + linkDestination: LINK_DESTINATION_CUSTOM, + } ) + : setAttributes( { + ...restAttributes, + href, + linkDestination: LINK_DESTINATION_CUSTOM, + } ); } getLinkSettings() { @@ -373,7 +392,6 @@ export class ImageEdit extends Component { const { attributes: { href: url, ...unMappedAttributes }, } = this.props; - const mappedAttributes = { ...unMappedAttributes, url }; return ( @@ -438,6 +456,7 @@ export class ImageEdit extends Component { image, clientId, imageDefaultSize, + context: { isGrouped = false, imageCrop = false }, featuredImageId, wasBlockJustInserted, } = this.props; @@ -516,6 +535,13 @@ export class ImageEdit extends Component { wide: 'center', }; + const additionalImageProps = isGrouped + ? { + height: '100%', + resizeMode: imageCrop ? 'cover' : 'contain', + } + : {}; + const getImageComponent = ( openMediaOptions, getMediaOptions ) => ( { return ( - { + + { + ); } } /> diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 008a3500effba..06445c1050366 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -30,3 +30,8 @@ padding-right: 0; padding-bottom: $grid-unit; } + +.isGallery { + height: 150; + overflow: visible; +}