Block gallery: add support for image reordering

packages/block-library/src/gallery/edit.js

@@ -50,6 +50,9 @@ class GalleryEdit extends Component {
 		this.setLinkTo = this.setLinkTo.bind( this );
 		this.setColumnsNumber = this.setColumnsNumber.bind( this );
 		this.toggleImageCrop = this.toggleImageCrop.bind( this );
+		this.onMove = this.onMove.bind( this );
+		this.onMoveForward = this.onMoveForward.bind( this );
+		this.onMoveBackward = this.onMoveBackward.bind( this );
 		this.onRemoveImage = this.onRemoveImage.bind( this );
 		this.setImageAttributes = this.setImageAttributes.bind( this );
 		this.setAttributes = this.setAttributes.bind( this );
@@ -84,6 +87,32 @@ class GalleryEdit extends Component {
 		};
 	}
 
+	onMove( oldIndex, newIndex ) {
+		const images = [ ...this.props.attributes.images ];
+		images.splice( newIndex, 1, this.props.attributes.images[ oldIndex ] );
+		images.splice( oldIndex, 1, this.props.attributes.images[ newIndex ] );
+		this.setState( { selectedImage: newIndex } );
+		this.setAttributes( { images } );
+	}
+
+	onMoveForward( oldIndex ) {
+		return () => {
+			if ( oldIndex === this.props.attributes.images.length - 1 ) {
+				return;
+			}
+			this.onMove( oldIndex, oldIndex + 1 );
+		};
+	}
+
+	onMoveBackward( oldIndex ) {
+		return () => {
+			if ( oldIndex === 0 ) {
+				return;
+			}
+			this.onMove( oldIndex, oldIndex - 1 );
+		};
+	}
+
 	onRemoveImage( index ) {
 		return () => {
 			const images = filter( this.props.attributes.images, ( img, i ) => index !== i );
@@ -256,7 +285,11 @@ class GalleryEdit extends Component {
 									url={ img.url }
 									alt={ img.alt }
 									id={ img.id }
+									isFirstItem={ index === 0 }
+									isLastItem={ ( index + 1 ) === images.length }
 									isSelected={ isSelected && this.state.selectedImage === index }
+									onMoveBackward={ this.onMoveBackward( index ) }
+									onMoveForward={ this.onMoveForward( index ) }
 									onRemove={ this.onRemoveImage( index ) }
 									onSelect={ this.onSelectImage( index ) }
 									setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }

packages/block-library/src/gallery/editor.scss

@@ -59,6 +59,7 @@ ul.wp-block-gallery {
 		}
 	}
 
+	.is-selected .block-library-gallery-item__move-menu,
 	.is-selected .block-library-gallery-item__inline-menu {
 		background-color: theme(primary);
 
@@ -79,11 +80,9 @@ ul.wp-block-gallery {
 	}
 }
 
+.block-library-gallery-item__move-menu,
 .block-library-gallery-item__inline-menu {
 	padding: 2px;
-	position: absolute;
-	top: -2px;
-	right: -2px;
 	display: inline-flex;
 	z-index: z-index(".block-library-gallery-item__inline-menu");
 
@@ -92,6 +91,20 @@ ul.wp-block-gallery {
 	}
 }
 
+.block-library-gallery-item__inline-menu {
+	position: absolute;
+	top: -2px;
+	right: -2px;
+}
+
+.block-library-gallery-item__move-menu {
+	position: absolute;
+	top: -2px;
+	left: -2px;
+}
+
+.blocks-gallery-item__move-backward,
+.blocks-gallery-item__move-forward,
 .blocks-gallery-item__remove {
 	padding: 0;
 }

packages/block-library/src/gallery/gallery-image.js

@@ -86,7 +86,7 @@ class GalleryImage extends Component {
 	}
 
 	render() {
-		const { url, alt, id, linkTo, link, isSelected, caption, onRemove, setAttributes, 'aria-label': ariaLabel } = this.props;
+		const { url, alt, id, linkTo, link, isFirstItem, isLastItem, isSelected, caption, onRemove, onMoveForward, onMoveBackward, setAttributes, 'aria-label': ariaLabel } = this.props;
 
 		let href;
 
@@ -128,11 +128,28 @@ class GalleryImage extends Component {
 		return (
 			<figure className={ className }>
 				{ href ? <a href={ href }>{ img }</a> : img }
+				<div className="block-library-gallery-item__move-menu">
+					<IconButton
+						icon="arrow-left"
+						onClick={ isFirstItem ? undefined : onMoveBackward }
+						className="blocks-gallery-item__move-backward"
+						label={ __( 'Move Image Backward' ) }
+						aria-disabled={ isFirstItem }
+						disabled={ ! isSelected }
+					/>
+					<IconButton
+						icon="arrow-right"
+						onClick={ isLastItem ? undefined : onMoveForward }
+						className="blocks-gallery-item__move-forward"
+						label={ __( 'Move Image Forward' ) }
+						aria-disabled={ isLastItem }
+						disabled={ ! isSelected }
+					/>
+				</div>
 				<div className="block-library-gallery-item__inline-menu">
 					<IconButton
 						icon="no-alt"
 						onClick={ onRemove }
-						onFocus={ this.onSelectImage }
 						className="blocks-gallery-item__remove"
 						label={ __( 'Remove Image' ) }
 						disabled={ ! isSelected }