diff --git a/core-blocks/gallery/block.js b/core-blocks/gallery/block.js index 3a7b50319ecde..b30bfbd1e9997 100644 --- a/core-blocks/gallery/block.js +++ b/core-blocks/gallery/block.js @@ -1,7 +1,7 @@ /** * External Dependencies */ -import { filter, pick } from 'lodash'; +import { filter, noop, pick } from 'lodash'; /** * WordPress dependencies @@ -13,8 +13,10 @@ import { DropZone, FormFileUpload, PanelBody, + Placeholder, RangeControl, SelectControl, + Spinner, ToggleControl, Toolbar, } from '@wordpress/components'; @@ -26,6 +28,7 @@ import { ImagePlaceholder, InspectorControls, } from '@wordpress/blocks'; +import { withSelect } from '@wordpress/data'; /** * Internal dependencies @@ -146,19 +149,39 @@ class GalleryBlock extends Component { ); } - componentWillReceiveProps( nextProps ) { + componentWillReceiveProps( { isSelected, attachedImages } ) { // Deselect images when deselecting the block - if ( ! nextProps.isSelected && this.props.isSelected ) { + if ( ! isSelected && this.props.isSelected ) { this.setState( { selectedImage: null, captionSelected: false, } ); } + + // Process REST API data and commit to attributes. + if ( attachedImages !== this.props.attachedImages && + attachedImages && ! this.props.url + ) { + this.props.setAttributes( { + images: attachedImages.map( ( image ) => ( { + url: image.source_url, + alt: image.alt_text, + } ) ), + useAttachedImages: false, + } ); + } } render() { const { attributes, isSelected, className } = this.props; - const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes; + const { + align, + columns = defaultColumnsNumber( attributes ), + imageCrop, + images, + linkTo, + useAttachedImages, + } = attributes; const dropZone = ( ); + if ( useAttachedImages && images.length === 0 ) { + return [ + + + , + ]; + } + if ( images.length === 0 ) { return ( @@ -271,4 +307,15 @@ class GalleryBlock extends Component { } } -export default GalleryBlock; +export default withSelect( ( select, { attributes } ) => { + if ( ! attributes.useAttachedImages ) { + return; + } + + const { getPostMedia = noop } = select( 'core' ) || noop; + const { getCurrentPostId = noop } = select( 'core/editor' ) || noop; + const postId = getCurrentPostId(); + return postId && { + attachedImages: getPostMedia( postId ), + }; +} )( GalleryBlock ); diff --git a/core-blocks/gallery/index.js b/core-blocks/gallery/index.js index ea6cac77ebf1f..2547b37cf8583 100644 --- a/core-blocks/gallery/index.js +++ b/core-blocks/gallery/index.js @@ -59,6 +59,13 @@ const blockAttributes = { }, }, }, + // To be set only by the shortcode transform to signal the intent to + // converting `[shortcode]` to a Gallery block with images filled in as + // attributes. + useAttachedImages: { + type: 'boolean', + default: false, + }, columns: { type: 'number', }, @@ -114,6 +121,10 @@ export const settings = { } ) ); }, }, + useAttachedImages: { + type: 'boolean', + shortcode: ( { named: { ids } } ) => ! ids, + }, columns: { type: 'number', shortcode: ( { named: { columns = '3' } } ) => { diff --git a/core-blocks/test/fixtures/core__gallery.json b/core-blocks/test/fixtures/core__gallery.json index c8aebc9301e4b..8a1917c218dc2 100644 --- a/core-blocks/test/fixtures/core__gallery.json +++ b/core-blocks/test/fixtures/core__gallery.json @@ -17,6 +17,7 @@ "caption": [] } ], + "useAttachedImages": false, "imageCrop": true, "linkTo": "none" }, diff --git a/core-blocks/test/fixtures/core__gallery__columns.json b/core-blocks/test/fixtures/core__gallery__columns.json index 41614c3387ecb..3d2653ae8e928 100644 --- a/core-blocks/test/fixtures/core__gallery__columns.json +++ b/core-blocks/test/fixtures/core__gallery__columns.json @@ -17,6 +17,7 @@ "caption": [] } ], + "useAttachedImages": false, "columns": 1, "imageCrop": true, "linkTo": "none"