Merge branch 'trunk' into 68671-add-reset-button-duotone

yogeshbhutkar · Feb 3, 2025 · 81ef102 · 81ef102
2 parents d40a130 + 693e315
commit 81ef102
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 16 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -14,7 +14,7 @@ Display a date archive of your posts. ([Source](https://github.com/WordPress/gut
 
 -	**Name:** core/archives
 -	**Category:** widgets
--	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** displayAsDropdown, showLabel, showPostCounts, type
 
 ## Audio

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -201,6 +201,11 @@ function Items( {
 						getDefaultBlockName(),
 						rootClientId
 					) );
+			const hasSelectedRoot = !! (
+				rootClientId &&
+				selectedBlockClientId &&
+				rootClientId === selectedBlockClientId
+			);
 
 			return {
 				order: _order,
@@ -214,8 +219,8 @@ function Items( {
 					hasAppender &&
 					! _isZoomOut() &&
 					( hasCustomAppender ||
-						showRootAppender ||
-						rootClientId === selectedBlockClientId ),
+						hasSelectedRoot ||
+						showRootAppender ),
 			};
 		},
 		[ rootClientId, hasAppender, hasCustomAppender ]

diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -13,8 +13,8 @@ import {
 	Composite,
 	Tooltip,
 } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
+import { useMemo, useRef } from '@wordpress/element';
+import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
 
 /**
  * External dependencies
@@ -119,7 +119,7 @@ export function ShadowPopover( { shadow, onShadowChange, settings } ) {
 		<Dropdown
 			popoverProps={ popoverProps }
 			className="block-editor-global-styles__shadow-dropdown"
-			renderToggle={ renderShadowToggle() }
+			renderToggle={ renderShadowToggle( shadow, onShadowChange ) }
 			renderContent={ () => (
 				<DropdownContentWrapper paddingSize="medium">
 					<ShadowPopoverContainer
@@ -133,25 +133,54 @@ export function ShadowPopover( { shadow, onShadowChange, settings } ) {
 	);
 }
 
-function renderShadowToggle() {
+function renderShadowToggle( shadow, onShadowChange ) {
 	return ( { onToggle, isOpen } ) => {
+		const shadowButtonRef = useRef( undefined );
+
 		const toggleProps = {
 			onClick: onToggle,
 			className: clsx( { 'is-open': isOpen } ),
 			'aria-expanded': isOpen,
+			ref: shadowButtonRef,
+		};
+
+		const removeButtonProps = {
+			onClick: () => {
+				if ( isOpen ) {
+					onToggle();
+				}
+				onShadowChange( undefined );
+				// Return focus to parent button.
+				shadowButtonRef.current?.focus();
+			},
+			className: clsx(
+				'block-editor-global-styles__shadow-editor__remove-button',
+				{ 'is-open': isOpen }
+			),
+			label: __( 'Remove' ),
 		};
 
 		return (
-			<Button __next40pxDefaultSize { ...toggleProps }>
-				<HStack justify="flex-start">
-					<Icon
-						className="block-editor-global-styles__toggle-icon"
-						icon={ shadowIcon }
-						size={ 24 }
+			<>
+				<Button __next40pxDefaultSize { ...toggleProps }>
+					<HStack justify="flex-start">
+						<Icon
+							className="block-editor-global-styles__toggle-icon"
+							icon={ shadowIcon }
+							size={ 24 }
+						/>
+						<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
+					</HStack>
+				</Button>
+				{ !! shadow && (
+					<Button
+						__next40pxDefaultSize
+						size="small"
+						icon={ reset }
+						{ ...removeButtonProps }
 					/>
-					<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
-				</HStack>
-			</Button>
+				) }
+			</>
 		);
 	};
 }

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -36,6 +36,28 @@
 	}
 }
 
+.block-editor-global-styles__shadow-editor__remove-button {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+	opacity: 0;
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s ease-in-out;
+	}
+
+	.block-editor-global-styles__shadow-dropdown:hover &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}
+
 .block-editor-global-styles-filters-panel__dropdown {
 	border: 1px solid rgba(0, 0, 0, 0.1);
 	border-radius: $radius-small;

diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json
@@ -54,6 +54,15 @@
 				"fontSize": true
 			}
 		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}