Merge pull request #1469 from WordPress/fix/1445-gallery-id

Update gallery images to include post id
WordPress · Jun 30, 2017 · 7804758 · 7804758
2 parents f76800d + 538bbb9
commit 7804758
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 20 deletions.
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
@@ -3,13 +3,14 @@
  */
 import { __ } from 'i18n';
 import { Toolbar, Placeholder } from 'components';
+import { pick } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import './block.scss';
-import { registerBlockType, query as hpq } from '../../api';
+import { registerBlockType } from '../../api';
 import MediaUploadButton from '../../media-upload-button';
 import InspectorControls from '../../inspector-controls';
 import RangeControl from '../../inspector-controls/range-control';
@@ -19,8 +20,6 @@ import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import GalleryImage from './gallery-image';
 import BlockDescription from '../../block-description';
 
-const { query, attr } = hpq;
-
 const MAX_COLUMNS = 8;
 
 const editMediaLibrary = ( attributes, setAttributes ) => {
@@ -49,6 +48,13 @@ const editMediaLibrary = ( attributes, setAttributes ) => {
 	editFrame.open( 'gutenberg-gallery' );
 };
 
+// the media library image object contains numerous attributes
+// we only need this set to display the image in the library
+const slimImageObjects = ( imgs ) => {
+	const attrSet = [ 'sizes', 'mime', 'type', 'subtype', 'id', 'url', 'alt' ];
+	return imgs.map( ( img ) => pick( img, attrSet ) );
+};
+
 function defaultColumnsNumber( attributes ) {
 	attributes.images = attributes.images || [];
 	return Math.min( 3, attributes.images.length );
@@ -59,14 +65,6 @@ registerBlockType( 'core/gallery', {
 	icon: 'format-gallery',
 	category: 'common',
 
-	attributes: {
-		images:
-			query( 'div.wp-block-gallery figure.blocks-gallery-image img', {
-				url: attr( 'src' ),
-				alt: attr( 'alt' ),
-			} ) || [],
-	},
-
 	getEditWrapperProps( attributes ) {
 		const { align } = attributes;
 		if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
@@ -101,7 +99,7 @@ registerBlockType( 'core/gallery', {
 		);
 
 		if ( images.length === 0 ) {
-			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
+			const setMediaUrl = ( imgs ) => setAttributes( { images: slimImageObjects( imgs ) } );
 			const uploadButtonProps = { isLarge: true };
 
 			return [

diff --git a/blocks/test/fixtures/core__gallery.html b/blocks/test/fixtures/core__gallery.html
@@ -1,4 +1,4 @@
-<!-- wp:core/gallery -->
+<!-- wp:core/gallery {"images":[{"sizes":{"full":{"url":"https://cldup.com/uuUqE_dXzy.jpg","height":1080,"width":810,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":1,"url":"https://cldup.com/uuUqE_dXzy.jpg","alt":"title"},{"sizes":{"full":{"url":"http://google.com/hi.png","height":1080,"width":1440,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":2,"url":"http://google.com/hi.png","alt":"title"}]} -->
 <div class="wp-block-gallery">
 	<figure class="blocks-gallery-image">
 		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />

diff --git a/blocks/test/fixtures/core__gallery.json b/blocks/test/fixtures/core__gallery.json
@@ -4,8 +4,38 @@
         "name": "core/gallery",
         "attributes": {
             "images": [
-                { "url": "https://cldup.com/uuUqE_dXzy.jpg", "alt": "title" },
-                { "url": "http://google.com/hi.png", "alt": "title" }
+                {
+                    "sizes": {
+                        "full": {
+                            "url": "https://cldup.com/uuUqE_dXzy.jpg",
+                            "height": 1080,
+                            "width": 810,
+                            "orientation": "portrait"
+                        }
+                    },
+                    "mime": "image/jpeg",
+                    "type": "image",
+                    "subtype": "jpeg",
+                    "id": 1,
+                    "url": "https://cldup.com/uuUqE_dXzy.jpg",
+                    "alt": "title"
+                },
+                {
+                    "sizes": {
+                        "full": {
+                            "url": "http://google.com/hi.png",
+                            "height": 1080,
+                            "width": 1440,
+                            "orientation": "landscape"
+                        }
+                    },
+                    "mime": "image/jpeg",
+                    "type": "image",
+                    "subtype": "jpeg",
+                    "id": 2,
+                    "url": "http://google.com/hi.png",
+                    "alt": "title"
+                }
             ]
         }
     }

diff --git a/blocks/test/fixtures/core__gallery.parsed.json b/blocks/test/fixtures/core__gallery.parsed.json
@@ -1,7 +1,42 @@
 [
     {
         "blockName": "core/gallery",
-        "attrs": null,
+        "attrs": {
+            "images": [
+                {
+                    "sizes": {
+                        "full": {
+                            "url": "https://cldup.com/uuUqE_dXzy.jpg",
+                            "height": 1080,
+                            "width": 810,
+                            "orientation": "portrait"
+                        }
+                    },
+                    "mime": "image/jpeg",
+                    "type": "image",
+                    "subtype": "jpeg",
+                    "id": 1,
+                    "url": "https://cldup.com/uuUqE_dXzy.jpg",
+                    "alt": "title"
+                },
+                {
+                    "sizes": {
+                        "full": {
+                            "url": "http://google.com/hi.png",
+                            "height": 1080,
+                            "width": 1440,
+                            "orientation": "landscape"
+                        }
+                    },
+                    "mime": "image/jpeg",
+                    "type": "image",
+                    "subtype": "jpeg",
+                    "id": 2,
+                    "url": "http://google.com/hi.png",
+                    "alt": "title"
+                }
+            ]
+        },
         "rawContent": "\n<div class=\"wp-block-gallery\">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>\n"
     },
     {

diff --git a/blocks/test/fixtures/core__gallery.serialized.html b/blocks/test/fixtures/core__gallery.serialized.html
@@ -1,7 +1,6 @@
-<!-- wp:core/gallery -->
+<!-- wp:core/gallery {"images":[{"sizes":{"full":{"url":"https://cldup.com/uuUqE_dXzy.jpg","height":1080,"width":810,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":1,"url":"https://cldup.com/uuUqE_dXzy.jpg","alt":"title"},{"sizes":{"full":{"url":"http://google.com/hi.png","height":1080,"width":1440,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":2,"url":"http://google.com/hi.png","alt":"title"}]} -->
 <div class="alignnone columns-2 is-cropped wp-block-gallery">
     <figure class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></figure>
     <figure class="blocks-gallery-image"><img src="http://google.com/hi.png" alt="title" /></figure>
 </div>
-<!-- /wp:core/gallery -->
-
+<!-- /wp:core/gallery -->
diff --git a/blocks/test/full-content.js b/blocks/test/full-content.js
@@ -55,7 +55,7 @@ function normalizeReactTree( element ) {
 	// Check if we got an object first, then if it actually has a `type` like a
 	// React component.  Sometimes we get other stuff here, which probably
 	// indicates a bug.
-	if ( isObject( element ) && element.type ) {
+	if ( isObject( element ) && element.type && element.props ) {
 		const toReturn = {
 			type: element.type,
 		};