diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index d3a2f0ae0795c8..61c5cc277c1355 100644
--- 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
index 1cfdff0be286ee..c335ef29384f4d 100644
--- 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 } ) {
(
{
+ 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 (
-
+ ) }
+
);
};
}
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index c51ffa3116d9f0..5684cf9c0d3034 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -24,6 +24,7 @@
.block-editor-global-styles__shadow-dropdown {
display: block;
padding: 0;
+ position: relative;
button {
width: 100%;
@@ -35,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;
+ }
+}
+
// These styles are similar to the color palette.
.block-editor-global-styles__shadow-indicator {
appearance: none;
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index ae587720278200..58faf9f9a34e1a 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -174,11 +174,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
* returns. Optionally, you can also pass any other props through this hook, and
* they will be merged and returned.
*
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
+ *
* @param {Object} props Optional. Props to pass to the element. Must contain
* the ref if one is defined.
* @param {Object} options Optional. Inner blocks options.
- *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
*/
export function useInnerBlocksProps( props = {}, options = {} ) {
const {
diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
index 1398a5abd51e4b..635c44d2e085c5 100644
--- a/packages/block-editor/src/components/inner-blocks/index.native.js
+++ b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -35,11 +35,11 @@ import { MAX_NESTING_DEPTH } from './constants';
* returns. Optionally, you can also pass any other props through this hook, and
* they will be merged and returned.
*
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md
+ *
* @param {Object} props Optional. Props to pass to the element. Must contain
* the ref if one is defined.
* @param {Object} options Optional. Inner blocks options.
- *
- * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md
*/
export function useInnerBlocksProps( props = {}, options = {} ) {
const fallbackRef = useRef();
diff --git a/packages/block-editor/src/components/inserter/no-results.js b/packages/block-editor/src/components/inserter/no-results.js
index 3ca6569dc14ea4..e005622f3cf3dc 100644
--- a/packages/block-editor/src/components/inserter/no-results.js
+++ b/packages/block-editor/src/components/inserter/no-results.js
@@ -2,15 +2,10 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Icon, blockDefault } from '@wordpress/icons';
function InserterNoResults() {
return (
-
{ __( 'No results found.' ) }