@wordpress/block-editor 16.1.0 → 16.2.0

package/src/components/media-placeholder/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	FormFileUpload,
@@ -20,10 +13,6 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { keyboardReturn } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import MediaUpload from '../media-upload';
 import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';

package/src/components/media-placeholder/test/get-computed-accept-attribute.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getComputedAcceptAttribute } from '../utils';
 
 describe( 'getComputedAcceptAttribute', () => {

package/src/components/media-placeholder/test/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { MediaPlaceholder } from '../';
 
 jest.mock( '../../media-upload/check', () => () => null );

package/src/components/media-replace-flow/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __, _x } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
@@ -27,10 +20,6 @@ import { compose } from '@wordpress/compose';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import MediaUpload from '../media-upload';
 import MediaUploadCheck from '../media-upload/check';
 import LinkControl from '../link-control';

package/src/components/media-replace-flow/test/index.js

@@ -1,17 +1,7 @@
-/**
- * External dependencies
- */
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
-/**
- * Internal dependencies
- */
 import MediaReplaceFlow from '../';
 
 const noop = () => {};

package/src/components/media-upload/check.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 
 export function MediaUploadCheck( { fallback = null, children } ) {

package/src/components/media-upload/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { withFilters } from '@wordpress/components';
 
 /**

package/src/components/multi-selection-inspector/index.js

@@ -1,36 +1,57 @@
-/**
- * WordPress dependencies
- */
 import { sprintf, _n } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { copy } from '@wordpress/icons';
-import { __experimentalHStack as HStack } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
+import { Stack } from '@wordpress/ui';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 export default function MultiSelectionInspector() {
-	const selectedBlockCount = useSelect(
-		( select ) => select( blockEditorStore ).getSelectedBlockCount(),
-		[]
-	);
+	const { selectedBlockCount, totalBlockCount } = useSelect( ( select ) => {
+		const {
+			getSelectedBlockCount,
+			getMultiSelectedBlockClientIds,
+			getClientIdsOfDescendants,
+		} = select( blockEditorStore );
+		const count = getSelectedBlockCount();
+		return {
+			selectedBlockCount: count,
+			totalBlockCount:
+				count +
+				getClientIdsOfDescendants( getMultiSelectedBlockClientIds() )
+					.length,
+		};
+	}, [] );
 	return (
-		<HStack
+		<Stack
+			direction="row"
+			align="center"
 			justify="flex-start"
-			spacing={ 2 }
+			gap="sm"
 			className="block-editor-multi-selection-inspector__card"
 		>
 			<BlockIcon icon={ copy } showColors />
-			<div className="block-editor-multi-selection-inspector__card-title">
-				{ sprintf(
-					/* translators: %d: number of blocks */
-					_n( '%d Block', '%d Blocks', selectedBlockCount ),
-					selectedBlockCount
+			<Stack direction="column">
+				<div className="block-editor-multi-selection-inspector__card-title">
+					{ sprintf(
+						/* translators: %d: number of blocks */
+						_n( '%d Block', '%d Blocks', selectedBlockCount ),
+						selectedBlockCount
+					) }
+				</div>
+				{ totalBlockCount > selectedBlockCount && (
+					<div className="block-editor-multi-selection-inspector__card-description">
+						{ sprintf(
+							/* translators: %d: number of blocks including nested blocks */
+							_n(
+								'%d including nested block',
+								'%d including nested blocks',
+								totalBlockCount
+							),
+							totalBlockCount
+						) }
+					</div>
 				) }
-			</div>
-		</HStack>
+			</Stack>
+		</Stack>
 	);
 }

package/src/components/multi-selection-inspector/style.scss

@@ -1,3 +1,4 @@
+@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .block-editor-multi-selection-inspector__card {
@@ -8,6 +9,10 @@
 	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
 
+.block-editor-multi-selection-inspector__card-description {
+	color: $gray-700;
+}
+
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
 	margin-left: -2px;
 	padding: 0 3px;

package/src/components/navigable-toolbar/index.js

@@ -1,10 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { NavigableMenu, Toolbar } from '@wordpress/components';
 import {
 	useState,
 	useRef,
+	useContext,
 	useLayoutEffect,
 	useEffect,
 	useCallback,
@@ -14,11 +12,8 @@ import deprecated from '@wordpress/deprecated';
 import { focus } from '@wordpress/dom';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { ESCAPE } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
+import { BlockRefs } from '../provider/block-refs-provider';
 import { unlock } from '../../lock-unlock';
 
 function hasOnlyToolbarItem( elements ) {
@@ -115,6 +110,11 @@ function useToolbarFocus( {
 	const [ initialFocusOnMount ] = useState( focusOnMount );
 	const [ initialIndex ] = useState( defaultIndex );
 
+	const { getLastFocus, getSelectedBlockClientId } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { refsMap } = useContext( BlockRefs );
+
 	const focusToolbar = useCallback( () => {
 		focusFirstTabbableIn( toolbarRef.current );
 	}, [ toolbarRef ] );
@@ -176,31 +176,42 @@ function useToolbarFocus( {
 		};
 	}, [ initialIndex, initialFocusOnMount, onIndexChange, toolbarRef ] );
 
-	const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
 	/**
 	 * Handles returning focus to the block editor canvas when pressing escape.
 	 */
 	useEffect( () => {
-		const navigableToolbarRef = toolbarRef.current;
-
-		if ( focusEditorOnEscape ) {
-			const handleKeyDown = ( event ) => {
-				const lastFocus = getLastFocus();
-				if ( event.keyCode === ESCAPE && lastFocus?.current ) {
-					// Focus the last focused element when pressing escape.
-					event.preventDefault();
-					lastFocus.current.focus();
-				}
-			};
-			navigableToolbarRef.addEventListener( 'keydown', handleKeyDown );
-			return () => {
-				navigableToolbarRef.removeEventListener(
-					'keydown',
-					handleKeyDown
-				);
-			};
+		if ( ! focusEditorOnEscape ) {
+			return;
 		}
-	}, [ focusEditorOnEscape, getLastFocus, toolbarRef ] );
+
+		const navigableToolbar = toolbarRef.current;
+		const handleKeyDown = ( event ) => {
+			if ( event.keyCode !== ESCAPE ) {
+				return;
+			}
+			// The last focused element is only recorded once focus has left
+			// the canvas, so fall back to the selected block. Without it
+			// escape leaves focus stranded in the toolbar, with no way back
+			// to the canvas by keyboard.
+			const target =
+				getLastFocus()?.current ??
+				refsMap.get( getSelectedBlockClientId() );
+			if ( target ) {
+				event.preventDefault();
+				target.focus();
+			}
+		};
+		navigableToolbar.addEventListener( 'keydown', handleKeyDown );
+		return () => {
+			navigableToolbar.removeEventListener( 'keydown', handleKeyDown );
+		};
+	}, [
+		focusEditorOnEscape,
+		getLastFocus,
+		getSelectedBlockClientId,
+		refsMap,
+		toolbarRef,
+	] );
 }
 
 export default function NavigableToolbar( {

package/src/components/observe-typing/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useRefEffect, useMergeRefs } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { isTextField } from '@wordpress/dom';
@@ -14,10 +11,6 @@ import {
 	ESCAPE,
 	TAB,
 } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 
 /**

package/src/components/panel-color-settings/README.md

@@ -6,14 +6,7 @@ It is essentially a wrapper around the `PanelColorGradientSettings` component, b
 ## Usage
 
 ```jsx
-/**
- * External dependencies
- */
 import { useState } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { PanelColorSettings } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 

package/src/components/panel-color-settings/index.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import PanelColorGradientSettings from '../colors-gradients/panel-color-gradient-settings';
 
 const PanelColorSettings = ( { colorSettings, ...props } ) => {

package/src/components/panel-color-settings/test/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import PanelColorSettings from '../';
 
 const noop = () => {};

package/src/components/plain-text/index.js

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import TextareaAutosize from 'react-autosize-textarea';
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import EditableText from '../editable-text';
 
 /**

package/src/components/plain-text/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import PlainText from '..';
 
 const meta = {

package/src/components/preset-input-control/custom-value-controls.js

@@ -1,11 +1,7 @@
-/**
- * WordPress dependencies
- */
 import {
 	RangeControl,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
-
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/preset-input-control/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	CustomSelectControl,
@@ -13,10 +10,6 @@ import { usePrevious } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 import { useState, useEffect, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import {
 	CUSTOM_VALUE_SETTINGS,
 	ICON_SIZE,

package/src/components/preset-input-control/test/index.js

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
 import PresetInputControl from '../index';
 
 describe( 'PresetInputControl', () => {

package/src/components/preset-input-control/test/utils.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	isValuePreset,
 	getPresetSlug,

package/src/components/preview-options/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import deprecated from '@wordpress/deprecated';
 
 export default function PreviewOptions() {

package/src/components/provider/block-refs-provider.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createContext, useMemo } from '@wordpress/element';
 import { observableMap } from '@wordpress/compose';
 

package/src/components/provider/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useDispatch } from '@wordpress/data';
 import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
@@ -10,10 +7,6 @@ import {
 	detectClientSideMediaSupport,
 	isHeicCanvasSupported,
 } from '@wordpress/upload-media';
-
-/**
- * Internal dependencies
- */
 import withRegistryProvider from './with-registry-provider';
 import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';

package/src/components/provider/selection-context.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createContext } from '@wordpress/element';
 
 const noop = () => {};

package/src/components/provider/test/experimental-provider.js

@@ -1,15 +1,5 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-/**
- * WordPress dependencies
- */
 import { useRegistry, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { BlockEditorProvider, ExperimentalBlockEditorProvider } from '../';
 import { store as blockEditorStore } from '../../../store';
 

package/src/components/provider/test/use-block-sync.js

@@ -1,20 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { registerBlockType } from '@wordpress/blocks';
-
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import useBlockSync from '../use-block-sync';
 import withRegistryProvider from '../with-registry-provider';
 import * as blockEditorActions from '../../../store/actions';
-
 import { store as blockEditorStore } from '../../../store';
 jest.mock( '../../../store/actions', () => {
 	const actions = jest.requireActual( '../../../store/actions' );

package/src/components/provider/use-block-sync.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { useContext, useEffect, useRef } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { SelectionContext } from './selection-context';
 

package/src/components/provider/use-media-upload-settings.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
 
 /**

package/src/components/provider/with-registry-provider.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { storeConfig } from '../../store';
 import { STORE_NAME as blockEditorStoreName } from '../../store/constants';
 

package/src/components/publish-date-time-picker/index.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { DateTimePicker, TimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 import { getSettings } from '@wordpress/date';
-
-/**
- * Internal dependencies
- */
 import InspectorPopoverHeader from '../inspector-popover-header';
 
 export function PublishDateTimePicker(

package/src/components/recursion-provider/README.md

@@ -7,9 +7,6 @@ To help with detecting infinite loops on the client, the `RecursionProvider` com
 ## Usage
 
 ```jsx
-/**
- * WordPress dependencies
- */
 import {
 	RecursionProvider,
 	useHasRecursion,

package/src/components/recursion-provider/index.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { createContext, useContext, useMemo } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import { useBlockEditContext } from '../block-edit/context';
 
 const RenderedRefsContext = createContext( {} );

package/src/components/recursion-provider/test/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { useHasRecursion, RecursionProvider } from '..';
 import {
 	BlockEditContextProvider,

package/src/components/resizable-box-popover/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { ResizableBox } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import BlockPopoverCover from '../block-popover/cover';
 
 export default function ResizableBoxPopover( {

package/src/components/resolution-tool/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	SelectControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,

package/src/components/resolution-tool/stories/index.story.jsx

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useReducer } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import ResolutionTool from '..';
 
 export default {

package/src/components/responsive-block-control/index.js

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { ToggleControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import ResponsiveBlockControlLabel from './label';
 
 function ResponsiveBlockControl( props ) {