added possibility to clear the gallery control

nk-crew · Oct 8, 2024 · e1a68e9 · e1a68e9
1 parent ec28773
commit e1a68e9
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 10 deletions.
diff --git a/assets/editor/index.scss b/assets/editor/index.scss
@@ -370,24 +370,48 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		background-color: rgba(255, 255, 255, 0.5);
+		backdrop-filter: blur(2px);
 		width: 100%;
 		height: 100%;
 		opacity: 0;
 		transition: 0.15s opacity;
+
+		> .components-button {
+			background-color: #fff;
+			color: #000;
+		}
 	}
 
 	&:hover .lzb-gutenberg-gallery-button,
 	&:hover .lzb-gutenberg-image-button {
 		opacity: 1;
 	}
 
+	.lzb-gutenberg-gallery-button-edit:hover,
+	.lzb-gutenberg-gallery-button-edit:focus {
+		color: #2279ea;
+	}
+
+	.lzb-gutenberg-gallery-button-remove {
+		&:hover,
+		&:focus {
+			color: #ea2c22;
+		}
+
+		svg {
+			width: 1em;
+			height: 1em;
+			fill: none;
+		}
+	}
+
 	.lzb-gutenberg-image-item,
 	.lzb-gutenberg-gallery-item {
 		position: relative;
 		display: block;
 		background-color: #e6e6e6;
 		border-radius: 3px;
-		transition: 0.15s opacity;
 
 		&::after {
 			display: block;
@@ -432,11 +456,6 @@
 		width: 30%;
 		margin: 0 auto;
 	}
-
-	&:hover .lzb-gutenberg-gallery-item,
-	&:hover .lzb-gutenberg-image-item {
-		opacity: 0.6;
-	}
 }
 
 // File control

diff --git a/controls/gallery/gallery-control.js b/controls/gallery/gallery-control.js
@@ -2,7 +2,13 @@
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
-import { Button, DropZone, withNotices } from '@wordpress/components';
+import {
+	Button,
+	ButtonGroup,
+	Tooltip,
+	DropZone,
+	withNotices,
+} from '@wordpress/components';
 import { MediaPlaceholder, MediaUpload } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
@@ -121,11 +127,61 @@ function GalleryControl(props) {
 									});
 								}}
 							/>
-							<div className="lzb-gutenberg-gallery-button">
-								<Button variant="secondary" size="small">
+							<ButtonGroup className="lzb-gutenberg-gallery-button">
+								<Button
+									variant="secondary"
+									size="compact"
+									className="lzb-gutenberg-gallery-button-edit"
+								>
 									{__('Edit Gallery', 'lazy-blocks')}
 								</Button>
-							</div>
+								<Tooltip
+									text={__(
+										'Clear the gallery',
+										'lazy-blocks'
+									)}
+								>
+									<Button
+										variant="secondary"
+										size="compact"
+										className="lzb-gutenberg-gallery-button-remove"
+										onClick={(e) => {
+											e.preventDefault();
+											e.stopPropagation();
+
+											onChange([]);
+										}}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="24"
+											height="24"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											strokeWidth="2"
+											strokeLinecap="round"
+											strokeLinejoin="round"
+										>
+											<path d="M3 6h18" />
+											<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+											<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+											<line
+												x1="10"
+												x2="10"
+												y1="11"
+												y2="17"
+											/>
+											<line
+												x1="14"
+												x2="14"
+												y1="11"
+												y2="17"
+											/>
+										</svg>
+									</Button>
+								</Tooltip>
+							</ButtonGroup>
 							{value.map((img) => (
 								<div
 									className="lzb-gutenberg-gallery-item"