@wordpress/block-editor 14.12.0 → 14.13.0

package/src/components/block-list/index.js

@@ -19,6 +19,7 @@ import {
 	useCallback,
 	useEffect,
 } from '@wordpress/element';
+import { getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -171,13 +172,13 @@ function Items( {
 			const {
 				getSettings,
 				getBlockOrder,
-				getSelectedBlockClientId,
 				getSelectedBlockClientIds,
 				__unstableGetVisibleBlocks,
 				getTemplateLock,
 				getBlockEditingMode,
 				isSectionBlock,
 				isZoomOut: _isZoomOut,
+				canInsertBlockType,
 			} = unlock( select( blockEditorStore ) );
 
 			const _order = getBlockOrder( rootClientId );
@@ -190,10 +191,25 @@ function Items( {
 				};
 			}
 
-			const selectedBlockClientId = getSelectedBlockClientId();
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+			const showRootAppender =
+				! rootClientId &&
+				! selectedBlockClientId &&
+				( ! _order.length ||
+					! canInsertBlockType(
+						getDefaultBlockName(),
+						rootClientId
+					) );
+			const hasSelectedRoot = !! (
+				rootClientId &&
+				selectedBlockClientId &&
+				rootClientId === selectedBlockClientId
+			);
+
 			return {
 				order: _order,
-				selectedBlocks: getSelectedBlockClientIds(),
+				selectedBlocks: selectedBlockClientIds,
 				visibleBlocks: __unstableGetVisibleBlocks(),
 				isZoomOut: _isZoomOut(),
 				shouldRenderAppender:
@@ -203,10 +219,8 @@ function Items( {
 					hasAppender &&
 					! _isZoomOut() &&
 					( hasCustomAppender ||
-						rootClientId === selectedBlockClientId ||
-						( ! rootClientId &&
-							! selectedBlockClientId &&
-							! _order.length ) ),
+						hasSelectedRoot ||
+						showRootAppender ),
 			};
 		},
 		[ rootClientId, hasAppender, hasCustomAppender ]

package/src/components/block-mover/style.scss

@@ -87,10 +87,11 @@
 		right: $grid-unit-10;
 		z-index: -1;
 
-		// Animate in.
-		animation: components-button__appear-animation 0.1s ease;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
+		@media not ( prefers-reduced-motion ) {
+			// Animate in.
+			animation: components-button__appear-animation 0.1s ease;
+			animation-fill-mode: forwards;
+		}
 	}
 
 	// Don't show the focus inherited by the Button component.

package/src/components/block-pattern-setup/style.scss

@@ -130,7 +130,9 @@
 				background-color: $white;
 				margin: auto;
 				padding: 0;
-				transition: transform 0.5s, z-index 0.5s;
+				@media not ( prefers-reduced-motion ) {
+					transition: transform 0.5s, z-index 0.5s;
+				}
 				z-index: z-index(".block-editor-block-pattern-setup .pattern-slide");
 
 				&.active-slide {

package/src/components/block-patterns-list/style.scss

@@ -44,9 +44,9 @@
 			outline: $border-width solid rgba($black, 0.1);
 			outline-offset: -$border-width;
 			border-radius: $radius-medium;
-
-			transition: outline 0.1s linear;
-			@include reduce-motion("transition");
+			@media not ( prefers-reduced-motion ) {
+				transition: outline 0.1s linear;
+			}
 		}
 	}
 

package/src/components/block-popover/use-popover-scroll.js

@@ -2,24 +2,29 @@
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
+import { getScrollContainer } from '@wordpress/dom';
+
+const scrollContainerCache = new WeakMap();
 
 /**
  * Allow scrolling "through" popovers over the canvas. This is only called for
  * as long as the pointer is over a popover. Do not use React events because it
  * will bubble through portals.
  *
- * @param {Object} scrollableRef
+ * @param {Object} contentRef
  */
-function usePopoverScroll( scrollableRef ) {
+function usePopoverScroll( contentRef ) {
 	return useRefEffect(
 		( node ) => {
-			if ( ! scrollableRef ) {
-				return;
-			}
-
 			function onWheel( event ) {
 				const { deltaX, deltaY } = event;
-				scrollableRef.current.scrollBy( deltaX, deltaY );
+				const contentEl = contentRef.current;
+				let scrollContainer = scrollContainerCache.get( contentEl );
+				if ( ! scrollContainer ) {
+					scrollContainer = getScrollContainer( contentEl );
+					scrollContainerCache.set( contentEl, scrollContainer );
+				}
+				scrollContainer.scrollBy( deltaX, deltaY );
 			}
 			// Tell the browser that we do not call event.preventDefault
 			// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
@@ -29,7 +34,7 @@ function usePopoverScroll( scrollableRef ) {
 				node.removeEventListener( 'wheel', onWheel, options );
 			};
 		},
-		[ scrollableRef ]
+		[ contentRef ]
 	);
 }
 

package/src/components/block-switcher/style.scss

@@ -129,7 +129,9 @@
 		.block-editor-block-switcher__preview-patterns-container-list__item {
 			height: 100%;
 			border-radius: $radius-small;
-			transition: all 0.05s ease-in-out;
+			@media not ( prefers-reduced-motion ) {
+				transition: all 0.05s ease-in-out;
+			}
 			position: relative;
 			border: $border-width solid transparent;
 

package/src/components/block-toolbar/style.scss

@@ -12,9 +12,11 @@
 	overflow-y: hidden;
 	overflow-x: auto;
 
-	// Animation
-	transition: border-color 0.1s linear, box-shadow 0.1s linear;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+
+		// Animation
+		transition: border-color 0.1s linear, box-shadow 0.1s linear;
+	}
 
 	@include break-small() {
 		overflow: inherit;

package/src/components/block-tools/block-toolbar-popover.js

@@ -11,7 +11,7 @@ import { useShortcut } from '@wordpress/keyboard-shortcuts';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../block-popover';
+import { PrivateBlockPopover } from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
 import { store as blockEditorStore } from '../../store';
@@ -58,7 +58,7 @@ export default function BlockToolbarPopover( {
 
 	return (
 		! isTyping && (
-			<BlockPopover
+			<PrivateBlockPopover
 				clientId={ clientIdToPositionOver }
 				bottomClientId={ lastClientId }
 				className={ clsx( 'block-editor-block-list__block-popover', {
@@ -66,6 +66,7 @@ export default function BlockToolbarPopover( {
 				} ) }
 				resize={ false }
 				{ ...popoverProps }
+				__unstableContentRef={ __unstableContentRef }
 			>
 				<PrivateBlockToolbar
 					// If the toolbar is being shown because of being forced
@@ -79,7 +80,7 @@ export default function BlockToolbarPopover( {
 					} }
 					variant="toolbar"
 				/>
-			</BlockPopover>
+			</PrivateBlockPopover>
 		)
 	);
 }

package/src/components/block-tools/style.scss

@@ -191,9 +191,12 @@
 
 	.is-dragging-components-draggable & {
 		opacity: 0;
-		// Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details.
-		// It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements.
-		animation: hide-during-dragging 1ms linear forwards;
+		@media not ( prefers-reduced-motion ) {
+
+			// Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details.
+			// It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements.
+			animation: hide-during-dragging 1ms linear forwards;
+		}
 	}
 
 	.block-editor-block-parent-selector {

package/src/components/button-block-appender/content.scss

@@ -79,10 +79,8 @@
 		background-color: var(--wp-admin-theme-color);
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
 		color: $light-gray-placeholder;
-		transition: background-color 0.2s ease-in-out;
-
-		@media ( prefers-reduced-motion: reduce ) {
-			transition: none;
+		@media not ( prefers-reduced-motion ) {
+			transition: background-color 0.2s ease-in-out;
 		}
 	}
 }

package/src/components/colors-gradients/style.scss

@@ -129,8 +129,9 @@ $swatch-gap: 12px;
 	top: $grid-unit;
 	margin: auto $grid-unit auto;
 	opacity: 0;
-	transition: opacity 0.1s ease-in-out;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: opacity 0.1s ease-in-out;
+	}
 
 	&.block-editor-panel-color-gradient-settings__reset {
 		border-radius: $radius-small;

package/src/components/global-styles/filters-panel.js

@@ -9,8 +9,6 @@ import clsx from 'clsx';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
@@ -21,9 +19,11 @@ import {
 	Dropdown,
 	Flex,
 	FlexItem,
+	Button,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, useRef } from '@wordpress/element';
+import { reset as resetIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -117,6 +117,50 @@ const LabeledColorIndicator = ( { indicator, label } ) => (
 	</HStack>
 );
 
+const renderToggle =
+	( duotone, resetDuotone ) =>
+	( { onToggle, isOpen } ) => {
+		const duotoneButtonRef = useRef( undefined );
+
+		const toggleProps = {
+			onClick: onToggle,
+			className: clsx( { 'is-open': isOpen } ),
+			'aria-expanded': isOpen,
+			ref: duotoneButtonRef,
+		};
+
+		const removeButtonProps = {
+			onClick: () => {
+				if ( isOpen ) {
+					onToggle();
+				}
+				resetDuotone();
+				// Return focus to parent button.
+				duotoneButtonRef.current?.focus();
+			},
+			className: 'block-editor-panel-duotone-settings__reset',
+			label: __( 'Reset' ),
+		};
+
+		return (
+			<>
+				<Button __next40pxDefaultSize { ...toggleProps }>
+					<LabeledColorIndicator
+						indicator={ duotone }
+						label={ __( 'Duotone' ) }
+					/>
+				</Button>
+				{ duotone && (
+					<Button
+						size="small"
+						icon={ resetIcon }
+						{ ...removeButtonProps }
+					/>
+				) }
+			</>
+		);
+	};
+
 export default function FiltersPanel( {
 	as: Wrapper = FiltersToolsPanel,
 	value,
@@ -182,24 +226,7 @@ export default function FiltersPanel( {
 					<Dropdown
 						popoverProps={ popoverProps }
 						className="block-editor-global-styles-filters-panel__dropdown"
-						renderToggle={ ( { onToggle, isOpen } ) => {
-							const toggleProps = {
-								onClick: onToggle,
-								className: clsx( { 'is-open': isOpen } ),
-								'aria-expanded': isOpen,
-							};
-
-							return (
-								<ItemGroup isBordered isSeparated>
-									<Item as="button" { ...toggleProps }>
-										<LabeledColorIndicator
-											indicator={ duotone }
-											label={ __( 'Duotone' ) }
-										/>
-									</Item>
-								</ItemGroup>
-							);
-						} }
+						renderToggle={ renderToggle( duotone, resetDuotone ) }
 						renderContent={ () => (
 							<DropdownContentWrapper paddingSize="small">
 								<MenuGroup label={ __( 'Duotone' ) }>

package/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
@@ -46,6 +46,8 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => onShadowChange( undefined ) }
+						disabled={ ! shadow }
+						accessibleWhenDisabled
 					>
 						{ __( 'Clear' ) }
 					</Button>
@@ -119,7 +121,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 +135,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>
+				) }
+			</>
 		);
 	};
 }

package/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,33 @@
 	}
 }
 
+.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 $gray-300;
+	border-radius: $radius-small;
+}
+
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
 	appearance: none;
@@ -53,7 +81,9 @@
 	box-sizing: border-box;
 
 	transform: scale(1);
-	transition: transform 0.1s ease;
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 0.1s ease;
+	}
 	will-change: transform;
 
 	&:focus {
@@ -75,3 +105,25 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
+
+.block-editor-panel-duotone-settings__reset {
+	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-filters-panel__dropdown:hover &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}

package/src/components/grid/style.scss

@@ -126,10 +126,11 @@
 			right: $grid-unit-10;
 			z-index: -1;
 
-			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
+			@media not ( prefers-reduced-motion ) {
+				// Animate in.
+				animation: components-button__appear-animation 0.1s ease;
+				animation-fill-mode: forwards;
+			}
 		}
 
 		// Don't show the focus inherited by the Button component.

package/src/components/iframe/content.scss

@@ -4,8 +4,11 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// Prevents a flash of background color change when entering/exiting zoom out
-	transition: background-color 400ms;
+
+	@media not ( prefers-reduced-motion ) {
+		// Prevents a flash of background color change when entering/exiting zoom out
+		transition: background-color 400ms;
+	}
 
 	&.zoom-out-animation {
 		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -93,7 +93,7 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 							{
 								slug: 'original',
 								name: __( 'Original' ),
-								aspect: defaultAspect,
+								ratio: defaultAspect,
 							},
 							...( showDefaultRatios
 								? defaultRatios

package/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 {

package/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();

package/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 (
 		<div className="block-editor-inserter__no-results">
-			<Icon
-				className="block-editor-inserter__no-results-icon"
-				icon={ blockDefault }
-			/>
 			<p>{ __( 'No results found.' ) }</p>
 		</div>
 	);

package/src/components/inserter/quick-inserter.js

@@ -21,6 +21,7 @@ import { store as blockEditorStore } from '../../store';
 
 const SEARCH_THRESHOLD = 6;
 const SHOWN_BLOCK_TYPES = 6;
+const SHOWN_BLOCK_PATTERNS = 2;
 
 export default function QuickInserter( {
 	onSelect,
@@ -106,7 +107,9 @@ export default function QuickInserter( {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
-					maxBlockPatterns={ 0 }
+					maxBlockPatterns={
+						!! filterValue ? SHOWN_BLOCK_PATTERNS : 0
+					}
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
 					selectBlockOnInsert={ selectBlockOnInsert }

package/src/components/inserter/search-results.js

@@ -84,7 +84,9 @@ function InserterSearchResults( {
 	] = useBlockTypesState( destinationRootClientId, onInsertBlocks, isQuick );
 	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
-		destinationRootClientId
+		destinationRootClientId,
+		undefined,
+		isQuick
 	);
 
 	const filteredBlockPatterns = useMemo( () => {