@wordpress/block-editor 14.5.0 → 14.6.0

package/src/components/image-size-control/index.js

@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import {
-	Button,
-	ButtonGroup,
 	SelectControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -18,6 +18,25 @@ import useDimensionHandler from './use-dimension-handler';
 const IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];
 const noop = () => {};
 
+/**
+ * Get scaled width and height for the given scale.
+ *
+ * @param {number} scale       The scale to get the scaled width and height for.
+ * @param {number} imageWidth  The image width.
+ * @param {number} imageHeight The image height.
+ *
+ * @return {Object} The scaled width and height.
+ */
+function getScaledWidthAndHeight( scale, imageWidth, imageHeight ) {
+	const scaledWidth = Math.round( imageWidth * ( scale / 100 ) );
+	const scaledHeight = Math.round( imageHeight * ( scale / 100 ) );
+
+	return {
+		scaledWidth,
+		scaledHeight,
+	};
+}
+
 export default function ImageSizeControl( {
 	imageSizeHelp,
 	imageWidth,
@@ -33,6 +52,40 @@ export default function ImageSizeControl( {
 	const { currentHeight, currentWidth, updateDimension, updateDimensions } =
 		useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
 
+	/**
+	 * Updates the dimensions for the given scale.
+	 * Handler for toggle group control change.
+	 *
+	 * @param {number} scale The scale to update the dimensions for.
+	 */
+	const handleUpdateDimensions = ( scale ) => {
+		if ( undefined === scale ) {
+			updateDimensions();
+			return;
+		}
+
+		const { scaledWidth, scaledHeight } = getScaledWidthAndHeight(
+			scale,
+			imageWidth,
+			imageHeight
+		);
+
+		updateDimensions( scaledHeight, scaledWidth );
+	};
+
+	/**
+	 * Add the stored image preset value to toggle group control.
+	 */
+	const selectedValue = IMAGE_SIZE_PRESETS.find( ( scale ) => {
+		const { scaledWidth, scaledHeight } = getScaledWidthAndHeight(
+			scale,
+			imageWidth,
+			imageHeight
+		);
+
+		return currentWidth === scaledWidth && currentHeight === scaledHeight;
+	} );
+
 	return (
 		<>
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
@@ -70,47 +123,25 @@ export default function ImageSizeControl( {
 							size="__unstable-large"
 						/>
 					</HStack>
-					<HStack>
-						<ButtonGroup aria-label={ __( 'Image size presets' ) }>
-							{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
-								const scaledWidth = Math.round(
-									imageWidth * ( scale / 100 )
-								);
-								const scaledHeight = Math.round(
-									imageHeight * ( scale / 100 )
-								);
-
-								const isCurrent =
-									currentWidth === scaledWidth &&
-									currentHeight === scaledHeight;
-
-								return (
-									<Button
-										key={ scale }
-										size="small"
-										variant={
-											isCurrent ? 'primary' : undefined
-										}
-										isPressed={ isCurrent }
-										onClick={ () =>
-											updateDimensions(
-												scaledHeight,
-												scaledWidth
-											)
-										}
-									>
-										{ scale }%
-									</Button>
-								);
-							} ) }
-						</ButtonGroup>
-						<Button
-							size="small"
-							onClick={ () => updateDimensions() }
-						>
-							{ __( 'Reset' ) }
-						</Button>
-					</HStack>
+					<ToggleGroupControl
+						label={ __( 'Image size presets' ) }
+						hideLabelFromVision
+						onChange={ handleUpdateDimensions }
+						value={ selectedValue }
+						isBlock
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+					>
+						{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
+							return (
+								<ToggleGroupControlOption
+									key={ scale }
+									value={ scale }
+									label={ `${ scale }%` }
+								/>
+							);
+						} ) }
+					</ToggleGroupControl>
 				</div>
 			) }
 		</>

package/src/components/image-size-control/test/index.js

@@ -221,47 +221,8 @@ describe( 'ImageSizeControl', () => {
 		} );
 	} );
 
-	describe( 'reset button', () => {
-		it( 'resets both height and width to default values', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<ImageSizeControl
-					imageHeight="100"
-					imageWidth="200"
-					height="300"
-					width="400"
-					onChange={ mockOnChange }
-				/>
-			);
-
-			const heightInput = screen.getByRole( 'spinbutton', {
-				name: 'Height',
-			} );
-			const widthInput = screen.getByRole( 'spinbutton', {
-				name: 'Width',
-			} );
-
-			// The initial dimension values display first.
-			expect( heightInput ).toHaveValue( 300 );
-			expect( widthInput ).toHaveValue( 400 );
-
-			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
-
-			// Both attributes are set to undefined to clear custom values.
-			expect( mockOnChange ).toHaveBeenLastCalledWith( {
-				height: undefined,
-				width: undefined,
-			} );
-
-			// The inputs display the default values once more.
-			expect( heightInput ).toHaveValue( 100 );
-			expect( widthInput ).toHaveValue( 200 );
-		} );
-	} );
-
 	describe( 'image size percentage presets', () => {
-		it( 'updates height and width attributes on selection', async () => {
+		it( 'updates height and width on selection', async () => {
 			const user = userEvent.setup();
 
 			render(
@@ -272,44 +233,25 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const button = screen.getByRole( 'button', {
+			const button = screen.getByRole( 'radio', {
 				name: '50%',
-				pressed: false,
+				checked: false,
 			} );
 
 			await user.click( button );
 
-			expect( button ).toHaveClass( 'is-pressed' );
+			expect( button ).toBeChecked();
 
 			// Both attributes are set to the rounded scaled value.
 			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: 50,
 				width: 101,
 			} );
-		} );
-
-		it( 'updates height and width inputs on selection', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<ImageSizeControl
-					imageHeight="100"
-					imageWidth="201"
-					onChange={ mockOnChange }
-				/>
-			);
-
-			const button = screen.getByRole( 'button', {
-				name: '50%',
-				pressed: false,
-			} );
-
-			await user.click( button );
 
-			// Both attributes are set to the rounded scaled value.
 			expect(
 				screen.getByRole( 'spinbutton', { name: 'Height' } )
 			).toHaveValue( 50 );
+
 			expect(
 				screen.getByRole( 'spinbutton', { name: 'Width' } )
 			).toHaveValue( 101 );

package/src/components/inner-blocks/index.js

@@ -195,17 +195,24 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		( select ) => {
 			const {
 				getBlockName,
-				__unstableGetEditorMode,
+				isZoomOut,
 				getTemplateLock,
 				getBlockRootClientId,
 				getBlockEditingMode,
 				getBlockSettings,
 				getSectionRootClientId,
 			} = unlock( select( blockEditorStore ) );
-			let _isDropZoneDisabled;
 
 			if ( ! clientId ) {
-				return { isDropZoneDisabled: _isDropZoneDisabled };
+				const sectionRootClientId = getSectionRootClientId();
+				// Disable the root drop zone when zoomed out and the section root client id
+				// is not the root block list (represented by an empty string).
+				// This avoids drag handling bugs caused by having two block lists acting as
+				// drop zones - the actual 'root' block list and the section root.
+				return {
+					isDropZoneDisabled:
+						isZoomOut() && sectionRootClientId !== '',
+				};
 			}
 
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
@@ -214,14 +221,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
 
-			_isDropZoneDisabled = blockEditingMode === 'disabled';
+			let _isDropZoneDisabled = blockEditingMode === 'disabled';
 
-			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+			if ( isZoomOut() ) {
 				// In zoom out mode, we want to disable the drop zone for the sections.
 				// The inner blocks belonging to the section drop zone is
 				// already disabled by the blocks themselves being disabled.
 				const sectionRootClientId = getSectionRootClientId();
-
 				_isDropZoneDisabled = clientId !== sectionRootClientId;
 			}
 

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -34,6 +34,7 @@ import {
 	INSERTER_PATTERN_TYPES,
 } from './utils';
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 const noop = () => {};
 
@@ -45,8 +46,7 @@ export function PatternCategoryPreviews( {
 	showTitlesAsTooltip,
 } ) {
 	const isZoomOutMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
 		[]
 	);
 	const [ allPatterns, , onClickPattern ] = usePatternsState(
@@ -117,7 +117,6 @@ export function PatternCategoryPreviews( {
 	const { changePage } = pagingProps;
 
 	// Hide block pattern preview on unmount.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => () => onHover( null ), [] );
 
 	const onSetPatternSyncFilter = useCallback(

package/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -158,7 +158,7 @@ export function PatternsFilter( {
 								value={ patternSyncFilter }
 							/>
 						</MenuGroup>
-						<div className="block-editor-tool-selector__help">
+						<div className="block-editor-inserter__patterns-filter-help">
 							{ createInterpolateElement(
 								__(
 									'Patterns are available from the <Link>WordPress.org Pattern Directory</Link>, bundled in the active theme, or created by users on this site. Only patterns created on this site can be synced.'

package/src/components/inserter/category-tabs/index.js

@@ -6,6 +6,7 @@ import {
 	privateApis as componentsPrivateApis,
 	__unstableMotion as motion,
 } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,11 +32,22 @@ function CategoryTabs( {
 
 	const previousSelectedCategory = usePrevious( selectedCategory );
 
+	const selectedTabId = selectedCategory ? selectedCategory.name : null;
+	const [ activeTabId, setActiveId ] = useState();
+	const firstTabId = categories?.[ 0 ]?.name;
+	useEffect( () => {
+		// If there is no active tab, make the first tab the active tab, so that
+		// when focus is moved to the tablist, the first tab will be focused
+		// despite not being selected
+		if ( selectedTabId === null && ! activeTabId && firstTabId ) {
+			setActiveId( firstTabId );
+		}
+	}, [ selectedTabId, activeTabId, firstTabId, setActiveId ] );
+
 	return (
 		<Tabs
-			className="block-editor-inserter__category-tabs"
 			selectOnMove={ false }
-			selectedTabId={ selectedCategory ? selectedCategory.name : null }
+			selectedTabId={ selectedTabId }
 			orientation="vertical"
 			onSelect={ ( categoryId ) => {
 				// Pass the full category object
@@ -45,6 +57,8 @@ function CategoryTabs( {
 					)
 				);
 			} }
+			activeTabId={ activeTabId }
+			onActiveTabIdChange={ setActiveId }
 		>
 			<Tabs.TabList className="block-editor-inserter__category-tablist">
 				{ categories.map( ( category ) => (

package/src/components/inserter/menu.js

@@ -16,7 +16,7 @@ import {
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDebouncedInput } from '@wordpress/compose';
+import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -33,6 +33,7 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
 import { useZoomOut } from '../../hooks/use-zoom-out';
+import { unlock } from '../../lock-unlock';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -54,8 +55,7 @@ function InserterMenu(
 	ref
 ) {
 	const isZoomOutMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
 		[]
 	);
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
@@ -67,6 +67,8 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
+	const isLargeViewport = useViewportMatch( 'large' );
+
 	function getInitialTab() {
 		if ( __experimentalInitialTab ) {
 			return __experimentalInitialTab;
@@ -80,7 +82,7 @@ function InserterMenu(
 
 	const shouldUseZoomOut =
 		selectedTab === 'patterns' || selectedTab === 'media';
-	useZoomOut( shouldUseZoomOut );
+	useZoomOut( shouldUseZoomOut && isLargeViewport );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {

package/src/components/inserter/style.scss

@@ -123,6 +123,12 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__panel-header {
+	// Use `position: relative` to ensure any absolute positioned child elements are
+	// positioned relative to the panel header.
+	// This makes the overflow rule of the panel work correctly, particularly when the
+	// `VisuallyHidden` component is used within the inserter UI.
+	position: relative;
+
 	display: inline-flex;
 	align-items: center;
 	padding: $grid-unit-20 $grid-unit-20 0;
@@ -260,6 +266,13 @@ $block-inserter-tabs-height: 44px;
 	margin-top: $grid-unit-30;
 }
 
+.block-editor-inserter__patterns-filter-help {
+	padding: $grid-unit-20;
+	border-top: $border-width solid $gray-300;
+	color: $gray-700;
+	min-width: 280px;
+}
+
 .block-editor-inserter__media-list,
 .block-editor-block-patterns-list {
 	overflow-y: auto;

package/src/components/inserter-button/index.native.js

@@ -54,7 +54,7 @@ class MenuItem extends Component {
 		const accessibilityLabelFormat = blockIsNew
 			? // translators: Newly available block name. %s: The localized block name
 			  __( '%s block, newly available' )
-			: // translators: Block name. %s: The localized block name
+			: // translators: %s: Block name e.g. "Image block"
 			  __( '%s block' );
 		const accessibilityLabel = sprintf(
 			accessibilityLabelFormat,

package/src/components/inspector-controls-tabs/index.js

@@ -46,18 +46,13 @@ export default function InspectorControlsTabs( {
 				<Tabs.TabList>
 					{ tabs.map( ( tab ) =>
 						showIconLabels ? (
-							<Tabs.Tab
-								key={ tab.name }
-								tabId={ tab.name }
-								className={ tab.className }
-							>
+							<Tabs.Tab key={ tab.name } tabId={ tab.name }>
 								{ tab.title }
 							</Tabs.Tab>
 						) : (
 							<Tooltip text={ tab.title } key={ tab.name }>
 								<Tabs.Tab
 									tabId={ tab.name }
-									className={ tab.className }
 									aria-label={ tab.title }
 								>
 									<Icon icon={ tab.icon } />

package/src/components/inspector-controls-tabs/utils.js

@@ -9,7 +9,6 @@ export const TAB_SETTINGS = {
 	title: __( 'Settings' ),
 	value: 'settings',
 	icon: cog,
-	className: 'block-editor-block-inspector__tab-item',
 };
 
 export const TAB_STYLES = {
@@ -17,7 +16,6 @@ export const TAB_STYLES = {
 	title: __( 'Styles' ),
 	value: 'styles',
 	icon: styles,
-	className: 'block-editor-block-inspector__tab-item',
 };
 
 export const TAB_LIST_VIEW = {
@@ -25,5 +23,4 @@ export const TAB_LIST_VIEW = {
 	title: __( 'List View' ),
 	value: 'list-view',
 	icon: listView,
-	className: 'block-editor-block-inspector__tab-item',
 };

package/src/components/link-control/link-preview.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	ExternalLink,
@@ -96,7 +96,8 @@ export default function LinkPreview( {
 
 	return (
 		<div
-			aria-label={ __( 'Currently selected' ) }
+			role="group"
+			aria-label={ __( 'Manage link' ) }
 			className={ clsx( 'block-editor-link-control__search-item', {
 				'is-current': true,
 				'is-rich': hasRichData,
@@ -107,7 +108,14 @@ export default function LinkPreview( {
 			} ) }
 		>
 			<div className="block-editor-link-control__search-item-top">
-				<span className="block-editor-link-control__search-item-header">
+				<span
+					className="block-editor-link-control__search-item-header"
+					role="figure"
+					aria-label={
+						/* translators: Accessibility text for the link preview when editing a link. */
+						__( 'Link information' )
+					}
+				>
 					<span
 						className={ clsx(
 							'block-editor-link-control__search-item-icon',
@@ -149,6 +157,7 @@ export default function LinkPreview( {
 					label={ __( 'Edit link' ) }
 					onClick={ onEditClick }
 					size="compact"
+					showTooltip={ ! showIconLabels }
 				/>
 				{ hasUnlinkControl && (
 					<Button
@@ -156,19 +165,17 @@ export default function LinkPreview( {
 						label={ __( 'Remove link' ) }
 						onClick={ onRemove }
 						size="compact"
+						showTooltip={ ! showIconLabels }
 					/>
 				) }
 				<Button
 					icon={ copySmall }
-					label={ sprintf(
-						// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
-						__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
-						isEmptyURL || showIconLabels ? '' : ': ' + value.url
-					) }
+					label={ __( 'Copy link' ) }
 					ref={ ref }
 					accessibleWhenDisabled
 					disabled={ isEmptyURL }
 					size="compact"
+					showTooltip={ ! showIconLabels }
 				/>
 				<ViewerSlot fillProps={ value } />
 			</div>