Add simple columns slider

WordPress · Jun 11, 2017 · a3fc90d · a3fc90d
1 parent a7428d3
commit a3fc90d
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 7 deletions.
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
@@ -6,6 +6,7 @@ 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';
 
@@ -96,8 +97,9 @@ registerBlockType( 'core/gallery', {
 		},
 	],
 
-	edit( { attributes, setAttributes } ) {
-		const { images, align = 'none' } = attributes;
+	edit( { attributes, setAttributes, focus } ) {
+		let { images, columns, align = 'none' } = attributes;
+		const setColumnsNumber = ( event ) => { setAttributes( { columns: event.target.value } ); };
 		if ( ! images ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			return (
@@ -117,12 +119,21 @@ registerBlockType( 'core/gallery', {
 				</Placeholder>
 			);
 		}
+		if ( !columns ) {
+			columns = Math.min( 3, images.length );
+		}
 
 		return (
-			<div className={ `blocks-gallery align${ align }` }>
+			<div className={ `blocks-gallery align${ align } columns-${ columns }` }>
 				{ images.map( ( img, i ) => (
 					<GalleryImage key={ i } img={ img } />
 				) ) }
+				{ focus && images.length > 1 &&
+					<InspectorControls>
+						<label>Columns:</label>
+						<input type="range" min="1" max={ images.length } value={ columns } onChange={ setColumnsNumber } />
+						<span>{columns}</span>
+					</InspectorControls> }
 			</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 {