Gallery: Add simple columns slider (#1135)

* Add column attribute with slider input in block inspector. * Display images in columns as determined by `columns`. * Persist columns number as part of attributes * Enable wide and full-width for galleries. * Remove key, since it's not part of a list. * Switch to using URL for key. Default columns logic takes into account how many images are present. Place in separate function to be able to pass it directly in the destructuring and avoid extra `let` and extra `if` it’s not a function, based on the `attributes`.
WordPress · Jun 11, 2017 · c2732e7 · c2732e7
1 parent 27bcb9f
commit c2732e7
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 28 deletions.
diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
@@ -1,7 +1,7 @@
 
 export default function GalleryImage( props ) {
 	return (
-		<figure key={ props.i } className="blocks-gallery-image">
+		<figure className="blocks-gallery-image">
 			<img src={ props.img.url } alt={ props.img.alt } />
 		</figure>
 	);

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
@@ -1,16 +1,20 @@
 /**
  * Internal dependencies
  */
+import { __ } from 'i18n';
 import './style.scss';
 import { registerBlockType, query as hpq } from '../../api';
 
 import Placeholder from 'components/placeholder';
 import MediaUploadButton from '../../media-upload-button';
+import InspectorControls from '../../inspector-controls';
 
 import GalleryImage from './gallery-image';
 
 const { query, attr } = hpq;
 
+const MAX_COLUMNS = 8;
+
 const editMediaLibrary = ( attributes, setAttributes ) => {
 	const frameConfig = {
 		frame: 'post',
@@ -51,6 +55,11 @@ function toggleAlignment( align ) {
 	};
 }
 
+function defaultColumnsNumber( attributes ) {
+	attributes.images = attributes.images || [];
+	return Math.min( 3, attributes.images.length );
+}
+
 registerBlockType( 'core/gallery', {
 	title: wp.i18n.__( 'Gallery' ),
 	icon: 'format-gallery',
@@ -61,15 +70,10 @@ registerBlockType( 'core/gallery', {
 			query( 'div.blocks-gallery figure.blocks-gallery-image img', {
 				url: attr( 'src' ),
 				alt: attr( 'alt' ),
-			} ),
+			} ) || [],
 	},
 
 	controls: [
-		{
-			icon: 'format-image',
-			title: wp.i18n.__( 'Edit Gallery' ),
-			onClick: editMediaLibrary,
-		},
 		{
 			icon: 'align-left',
 			title: wp.i18n.__( 'Align left' ),
@@ -89,16 +93,36 @@ registerBlockType( 'core/gallery', {
 			onClick: toggleAlignment( 'right' ),
 		},
 		{
-			icon: 'align-full-width',
-			title: wp.i18n.__( 'Wide width' ),
+			icon: 'align-wide',
+			title: __( 'Wide width' ),
 			isActive: ( { align } ) => 'wide' === align,
 			onClick: toggleAlignment( 'wide' ),
 		},
+		{
+			icon: 'align-full-width',
+			title: __( 'Full width' ),
+			isActive: ( { align } ) => 'full' === align,
+			onClick: toggleAlignment( 'full' ),
+		},
+		{
+			icon: 'format-image',
+			title: wp.i18n.__( 'Edit Gallery' ),
+			onClick: editMediaLibrary,
+		},
 	],
 
-	edit( { attributes, setAttributes } ) {
-		const { images, align = 'none' } = attributes;
-		if ( ! images ) {
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
+			return { 'data-align': align };
+		}
+	},
+
+	edit( { attributes, setAttributes, focus, id } ) {
+		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
+		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
+		const rangeId = `blocks-gallery-range-${ id }`;
+		if ( images.length === 0 ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			return (
 				<Placeholder
@@ -119,21 +143,26 @@ registerBlockType( 'core/gallery', {
 		}
 
 		return (
-			<div className={ `blocks-gallery align${ align }` }>
-				{ images.map( ( img, i ) => (
-					<GalleryImage key={ i } img={ img } />
+			<div className={ `blocks-gallery align${ align } columns-${ columns }` }>
+				{ images.map( ( img ) => (
+					<GalleryImage key={ img.url } img={ img } />
 				) ) }
+				{ focus && images.length > 1 &&
+					<InspectorControls>
+						<label className="blocks-text-control__label" htmlFor={ rangeId }>{ __( 'Columns' ) }</label>
+						<input id={ rangeId } type="range" min="1" max={ Math.min( MAX_COLUMNS, images.length ) } value={ columns } onChange={ setColumnsNumber } />
+						<span>{columns}</span>
+					</InspectorControls> }
 			</div>
 		);
 	},
 
 	save( { attributes } ) {
-		const { images, align = 'none' } = attributes;
-
+		const { images, columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
 		return (
-			<div className={ `blocks-gallery align${ align }` } >
-				{ images.map( ( img, i ) => (
-					<GalleryImage key={ i } img={ img } />
+			<div className={ `blocks-gallery align${ align } columns-${ columns }` } >
+				{ images.map( ( img ) => (
+					<GalleryImage key={ img.url } img={ img } />
 				) ) }
 			</div>
 		);

diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss
@@ -1,17 +1,41 @@
 
 .blocks-gallery {
-
 	display: flex;
 	flex-wrap: wrap;
-
-	.blocks-gallery-image {
 
+	.blocks-gallery-image {
+		flex-grow: 1;
 		margin: 8px;
 
 		img {
-			max-width: 120px;
+			max-width: 100%;
 		}
 	}
+
+	&.columns-1 figure {
+		width: calc(100% / 1 - 2 * 8px);
+	}
+	&.columns-2 figure {
+		width: calc(100% / 2 - 3 * 8px);
+	}
+	&.columns-3 figure {
+		width: calc(100% / 3 - 4 * 8px);
+	}
+	&.columns-4 figure {
+		width: calc(100% / 4 - 5 * 8px);
+	}
+	&.columns-5 figure {
+		width: calc(100% / 5 - 6 * 8px);
+	}
+	&.columns-6 figure {
+		width: calc(100% / 6 - 7 * 8px);
+	}
+	&.columns-7 figure {
+		width: calc(100% / 7 - 8 * 8px);
+	}
+	&.columns-8 figure {
+		width: calc(100% / 8 - 9 * 8px);
+	}
 }
 
 .blocks-gallery.is-placeholder {

diff --git a/blocks/test/fixtures/core-gallery.html b/blocks/test/fixtures/core-gallery.html
@@ -4,7 +4,7 @@
 		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
 	</figure>
 	<figure class="blocks-gallery-image">
-		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
+		<img src="http://google.com/hi.png" alt="title" />
 	</figure>
 </div>
 <!-- /wp:core/gallery -->
diff --git a/blocks/test/fixtures/core-gallery.json b/blocks/test/fixtures/core-gallery.json
@@ -5,7 +5,7 @@
         "attributes": {
             "images": [
                 { "url": "https://cldup.com/uuUqE_dXzy.jpg", "alt": "title" },
-                { "url": "https://cldup.com/uuUqE_dXzy.jpg", "alt": "title" }
+                { "url": "http://google.com/hi.png", "alt": "title" }
             ]
         }
     }

diff --git a/blocks/test/fixtures/core-gallery.serialized.html b/blocks/test/fixtures/core-gallery.serialized.html
@@ -1,7 +1,7 @@
 <!-- wp:core/gallery -->
-<div class="blocks-gallery alignnone">
-    <figure class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></figure>
+<div class="blocks-gallery alignnone columns-2">
     <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 -->
 
diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
@@ -289,6 +289,7 @@ class VisualEditorBlock extends wp.element.Component {
 						insertBlockAfter={ onInsertAfter }
 						setFocus={ partial( onFocus, block.uid ) }
 						mergeBlocks={ this.mergeBlocks }
+						id={ block.uid }
 					/>
 				</div>
 			</div>