Address feedback

- Move li outside of component - Fix CSS typo - Add deprecated section
WordPress · Jan 18, 2018 · 4466445 · 4466445
1 parent d8eaefb
commit 4466445
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 28 deletions.
diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js
@@ -238,16 +238,17 @@ class GalleryBlock extends Component {
 			<ul key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
 				{ dropZone }
 				{ images.map( ( img, index ) => (
-					<GalleryImage
-						key={ img.id || img.url }
-						url={ img.url }
-						alt={ img.alt }
-						id={ img.id }
-						isSelected={ this.state.selectedImage === index }
-						onRemove={ this.onRemoveImage( index ) }
-						onClick={ this.onSelectImage( index ) }
-						setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
-					/>
+					<li className="blocks-gallery-item" key={ img.id || img.url }>
+						<GalleryImage
+							url={ img.url }
+							alt={ img.alt }
+							id={ img.id }
+							isSelected={ this.state.selectedImage === index }
+							onRemove={ this.onRemoveImage( index ) }
+							onClick={ this.onSelectImage( index ) }
+							setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
+						/>
+					</li>
 				) ) }
 			</ul>,
 		];

diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss
@@ -5,7 +5,7 @@
 .blocks-gallery-item {
 	position: relative;
 
-	&.is-selected {
+	.is-selected {
 		outline: 4px solid $blue-medium-500;
 		outline-offset: -4px;
 	}

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
@@ -36,28 +36,26 @@ class GalleryImage extends Component {
 
 		const img = url ? <img src={ url } alt={ alt } data-id={ id } /> : <Spinner />;
 
-		const className = classnames( 'blocks-gallery-item', {
+		const className = classnames( {
 			'is-selected': isSelected,
 		} );
 
 		// Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup
 		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 		return (
-			<li className={ className } onClick={ onClick }>
-				<figure>
-					{ isSelected &&
-						<div className="blocks-gallery-image__inline-menu">
-							<IconButton
-								icon="no-alt"
-								onClick={ onRemove }
-								className="blocks-gallery-image__remove"
-								label={ __( 'Remove Image' ) }
-							/>
-						</div>
-					}
-					{ href ? <a href={ href }>{ img }</a> : img }
-				</figure>
-			</li>
+			<figure className={ className } onClick={ onClick }>
+				{ isSelected &&
+					<div className="blocks-gallery-image__inline-menu">
+						<IconButton
+							icon="no-alt"
+							onClick={ onRemove }
+							className="blocks-gallery-image__remove"
+							label={ __( 'Remove Image' ) }
+						/>
+					</div>
+				}
+				{ href ? <a href={ href }>{ img }</a> : img }
+			</figure>
 		);
 		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 	}

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
@@ -33,7 +33,7 @@ registerBlockType( 'core/gallery', {
 			type: 'array',
 			default: [],
 			source: 'query',
-			selector: 'ul.wp-block-gallery .blocks-gallery-item img',
+			selector: 'ul.wp-block-gallery .blocks-gallery-image img',
 			query: {
 				url: {
 					source: 'attribute',
@@ -178,4 +178,38 @@ registerBlockType( 'core/gallery', {
 		);
 	},
 
+	deprecated: [
+		{
+			save( { attributes } ) {
+				const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
+				return (
+					<div className={ `align${ align } 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 } />;
+
+							return (
+								<li key={ image.id || image.url } className="blocks-gallery-image">
+									<figure>
+										{ href ? <a href={ href }>{ img }</a> : img }
+									</figure>
+								</li>
+							);
+						} ) }
+					</div>
+				);
+			},
+		},
+	],
+
 } );