Gallery Block: adding buttons to remove image from galleries inline

WordPress · Sep 4, 2017 · 2b73158 · 2b73158
1 parent 51c2765
commit 2b73158
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss
@@ -6,3 +6,21 @@
 .editor-visual-editor__block[data-type="core/gallery"] .editor-visual-editor__block-edit {
 	overflow: hidden;
 }
+
+.blocks-gallery-image {
+	position: relative;
+}
+
+.blocks-gallery-image__remove {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	padding: 0;
+	border: 1px solid $light-gray-900;
+	background: $white;
+	opacity: 0.8;
+
+	&:hover {
+		opacity: 1;
+	}
+}
diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress Dependencies
+ */
+import { IconButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 export default function GalleryImage( props ) {
 	let href = null;
@@ -14,6 +19,14 @@ export default function GalleryImage( props ) {
 
 	return (
 		<figure className="blocks-gallery-image">
+			{ props.edit &&
+				<IconButton
+					icon="no-alt"
+					onClick={ props.onRemove }
+					className="blocks-gallery-image__remove"
+					label={ __( 'Remove Image' ) }
+				/>
+			}
 			{ href ? <a href={ href }>{ image }</a> : image }
 		</figure>
 	);

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
@@ -1,3 +1,8 @@
+/**
+ * External Dependencies
+ */
+import { filter } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -80,12 +85,13 @@ registerBlockType( 'core/gallery', {
 		const setColumnsNumber = ( value ) => setAttributes( { columns: value } );
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } );
-
 		const onSelectImages = ( imgs ) => setAttributes( { images: imgs } );
-
 		const uploadFromFiles = ( event ) => {
 			mediaUpload( event.target.files, setAttributes, isGallery );
 		};
+		const removeImage = ( index ) => () => {
+			setAttributes( { images: filter( images, ( img, i ) => index !== i ) } );
+		};
 
 		const controls = (
 			focus && (
@@ -179,8 +185,8 @@ registerBlockType( 'core/gallery', {
 				</InspectorControls>
 			),
 			<div key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
-				{ images.map( ( img ) => (
-					<GalleryImage key={ img.url } img={ img } />
+				{ images.map( ( img, index ) => (
+					<GalleryImage key={ img.url } img={ img } edit onRemove={ removeImage( index ) } />
 				) ) }
 			</div>,
 		];