Add disability conditions for forward/backward buttons

WordPress · Apr 2, 2019 · ed24ea2 · ed24ea2
1 parent d21c2d8
commit ed24ea2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -294,6 +294,8 @@ 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 ) }

diff --git 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, onMoveForward, onMoveBackward, 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;
 
@@ -134,12 +134,14 @@ class GalleryImage extends Component {
 							onClick={ onMoveBackward }
 							className="blocks-gallery-item__move-backward"
 							label={ __( 'Move Image Backward' ) }
+							disabled={ isFirstItem }
 						/>
 						<IconButton
 							icon="arrow-right"
 							onClick={ onMoveForward }
 							className="blocks-gallery-item__move-forward"
 							label={ __( 'Move Image Forward' ) }
+							disabled={ isLastItem }
 						/>
 					</div> :
 					null