Add deprecation logic.

WordPress · Nov 19, 2018 · 526b956 · 526b956
1 parent a973f0e
commit 526b956
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 3 deletions.
diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, every, map } from 'lodash';
+import { filter, every, map, some } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -220,6 +220,66 @@ export const settings = {
 	},
 
 	deprecated: [
+		{
+			attributes: blockAttributes,
+			isEligible( { images, ids } ) {
+				return images &&
+					images.length > 0 &&
+					(
+						( ! ids && images ) ||
+						( ids && images && ids.length !== images.length ) ||
+						some( images, ( id, index ) => {
+							if ( ! id && ids[ index ] !== null ) {
+								return true;
+							}
+							return parseInt( id, 10 ) !== ids[ index ];
+						} )
+					);
+			},
+			migrate( attributes ) {
+				return {
+					...attributes,
+					ids: map( attributes.images, ( { id } ) => {
+						if ( ! id ) {
+							return null;
+						}
+						return parseInt( id, 10 );
+					} ),
+				};
+			},
+			save( { attributes } ) {
+				const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes;
+				return (
+					<ul className={ `columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
+						{ images.map( ( image ) => {
+							let href;
+
+							switch ( linkTo ) {
+								case 'media':
+									href = image.url;
+									break;
+								case 'attachment':
+									href = image.link;
+									break;
+							}
+
+							const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } data-link={ image.link } className={ image.id ? `wp-image-${ image.id }` : null } />;
+
+							return (
+								<li key={ image.id || image.url } className="blocks-gallery-item">
+									<figure>
+										{ href ? <a href={ href }>{ img }</a> : img }
+										{ image.caption && image.caption.length > 0 && (
+											<RichText.Content tagName="figcaption" value={ image.caption } />
+										) }
+									</figure>
+								</li>
+							);
+						} ) }
+					</ul>
+				);
+			},
+		},
 		{
 			attributes: blockAttributes,
 			save( { attributes } ) {

diff --git a/post-content.php b/post-content.php
@@ -88,7 +88,7 @@
 <p><?php _e( 'Blocks can be anything you need. For instance, you may want to add a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.', 'gutenberg' ); ?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:gallery {"columns":2} -->
+<!-- wp:gallery {"ids":[null,null,null],"columns":2} -->
 <ul class="wp-block-gallery columns-2 is-cropped">
 <li class="blocks-gallery-item"><figure><img src="https://cldup.com/n0g6ME5VKC.jpg" alt="" /></figure></li>
 <li class="blocks-gallery-item"><figure><img src="https://cldup.com/ZjESfxPI3R.jpg" alt="" /></figure></li>
@@ -116,7 +116,7 @@
 <p><?php _e( 'Sure, the full-wide image can be pretty big. But sometimes the image is worth it.', 'gutenberg' ); ?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:gallery {"align":"wide","images":[{"url":"https://cldup.com/_rSwtEeDGD.jpg","alt":""},{"url":"https://cldup.com/L-cC3qX2DN.jpg","alt":""}]} -->
+<!-- wp:gallery {"ids":[null,null],"align":"wide","images":[{"url":"https://cldup.com/_rSwtEeDGD.jpg","alt":""},{"url":"https://cldup.com/L-cC3qX2DN.jpg","alt":""}]} -->
 <ul class="wp-block-gallery alignwide columns-2 is-cropped">
 <li class="blocks-gallery-item"><figure><img src="https://cldup.com/_rSwtEeDGD.jpg" alt="" /></figure></li>
 <li class="blocks-gallery-item"><figure><img src="https://cldup.com/L-cC3qX2DN.jpg" alt="" /></figure></li>