diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index e6b109da9ad0e..cb1188c010ba1 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/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 ) } diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index ffd0f7847a09c..21623fad95abc 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/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; } diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 2c91f13df2c6a..2db0b6d822ae1 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/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 (
{ href ? { img } : img } +
+ + +