@wordpress/block-editor 13.2.0 → 13.3.0

package/src/components/grid/use-grid-layout-sync.js

@@ -30,12 +30,10 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 	useEffect( () => {
 		const updates = {};
 
-		const { columnCount, rowCount = 2 } = gridLayout;
-		const isManualGrid = !! columnCount;
+		const { columnCount, rowCount, isManualPlacement } = gridLayout;
 
-		if ( isManualGrid ) {
+		if ( isManualPlacement ) {
 			const rects = [];
-			let cellsTaken = 0;
 
 			// Respect the position of blocks that already have a columnStart and rowStart value.
 			for ( const clientId of blockOrder ) {
@@ -46,7 +44,6 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 					columnSpan = 1,
 					rowSpan = 1,
 				} = attributes.style?.layout || {};
-				cellsTaken += columnSpan * rowSpan;
 				if ( ! columnStart || ! rowStart ) {
 					continue;
 				}
@@ -60,29 +57,21 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 				);
 			}
 
-			// Ensure there's enough rows to fit all blocks.
-			const minimumNeededRows = Math.ceil( cellsTaken / columnCount );
-			if ( rowCount < minimumNeededRows ) {
-				updates[ gridClientId ] = {
-					layout: {
-						...gridLayout,
-						rowCount: minimumNeededRows,
-					},
-				};
-			}
-
 			// When in manual mode, ensure that every block has a columnStart and rowStart value.
 			for ( const clientId of blockOrder ) {
 				const attributes = getBlockAttributes( clientId );
-				const { columnStart, rowStart, columnSpan, rowSpan } =
-					attributes.style?.layout || {};
+				const {
+					columnStart,
+					rowStart,
+					columnSpan = 1,
+					rowSpan = 1,
+				} = attributes.style?.layout || {};
 				if ( columnStart && rowStart ) {
 					continue;
 				}
 				const [ newColumnStart, newRowStart ] = getFirstEmptyCell(
 					rects,
 					columnCount,
-					minimumNeededRows,
 					columnSpan,
 					rowSpan
 				);
@@ -105,6 +94,17 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 					},
 				};
 			}
+
+			// Ensure there's enough rows to fit all blocks.
+			const bottomMostRow = Math.max( ...rects.map( ( r ) => r.rowEnd ) );
+			if ( ! rowCount || rowCount < bottomMostRow ) {
+				updates[ gridClientId ] = {
+					layout: {
+						...gridLayout,
+						rowCount: bottomMostRow,
+					},
+				};
+			}
 		} else {
 			// When in auto mode, remove all of the columnStart and rowStart values.
 			for ( const clientId of blockOrder ) {
@@ -121,6 +121,16 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 					};
 				}
 			}
+
+			// Remove row styles in auto mode
+			if ( rowCount ) {
+				updates[ gridClientId ] = {
+					layout: {
+						...gridLayout,
+						rowCount: undefined,
+					},
+				};
+			}
 		}
 
 		if ( Object.keys( updates ).length ) {
@@ -143,14 +153,8 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 	] );
 }
 
-function getFirstEmptyCell(
-	rects,
-	columnCount,
-	rowCount,
-	columnSpan = 1,
-	rowSpan = 1
-) {
-	for ( let row = 1; row <= rowCount; row++ ) {
+function getFirstEmptyCell( rects, columnCount, columnSpan = 1, rowSpan = 1 ) {
+	for ( let row = 1; ; row++ ) {
 		for ( let column = 1; column <= columnCount; column++ ) {
 			const rect = new GridRect( {
 				columnStart: column,
@@ -163,5 +167,4 @@ function getFirstEmptyCell(
 			}
 		}
 	}
-	return [ 1, 1 ];
 }

package/src/components/iframe/content.scss

@@ -11,6 +11,7 @@
 .block-editor-iframe__scale-container {
 	width: 100%;
 	height: 100%;
+	display: flex;
 }
 
 .block-editor-iframe__scale-container.is-zoomed-out {

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

@@ -269,7 +269,8 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		props.ref,
 		__unstableDisableDropZone ||
 		isDropZoneDisabled ||
-		( layout?.columnCount && window.__experimentalEnableGridInteractivity )
+		( layout?.isManualPlacement &&
+			window.__experimentalEnableGridInteractivity )
 			? null
 			: blockDropZoneRef,
 	] );

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

@@ -2,9 +2,8 @@
  * Internal dependencies
  */
 import { PatternCategoryPreviews } from './pattern-category-previews';
-import { useZoomOut } from '../../../hooks/use-zoom-out';
 
-function PatternCategoryPreviewPanelInner( {
+export function PatternCategoryPreviewPanel( {
 	rootClientId,
 	onInsert,
 	onHover,
@@ -24,17 +23,3 @@ function PatternCategoryPreviewPanelInner( {
 		/>
 	);
 }
-
-function PatternCategoryPreviewPanelWithZoomOut( props ) {
-	useZoomOut();
-	return <PatternCategoryPreviewPanelInner { ...props } />;
-}
-
-export function PatternCategoryPreviewPanel( props ) {
-	// When the pattern panel is showing, we want to use zoom out mode
-	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
-		return <PatternCategoryPreviewPanelWithZoomOut { ...props } />;
-	}
-
-	return <PatternCategoryPreviewPanelInner { ...props } />;
-}

package/src/components/inserter/menu.js

@@ -30,8 +30,9 @@ import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-catego
 import { MediaTab, MediaCategoryPanel } from './media-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
-import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
+import TabbedSidebar from '../tabbed-sidebar';
+import { useZoomOut } from '../../hooks/use-zoom-out';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -88,7 +89,7 @@ function InserterMenu(
 				shouldForceFocusBlock,
 				_rootClientId
 			);
-			onSelect();
+			onSelect( blocks );
 
 			// Check for focus loss due to filtering blocks by selected block type
 			window.requestAnimationFrame( () => {
@@ -145,6 +146,11 @@ function InserterMenu(
 
 	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
+	const showZoomOut =
+		showPatternPanel && window.__experimentalEnableZoomedOutPatternsTab;
+
+	useZoomOut( showZoomOut );
+
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;
@@ -315,21 +321,49 @@ function InserterMenu(
 			ref={ ref }
 		>
 			<div className="block-editor-inserter__main-area">
-				<InserterTabs
+				<TabbedSidebar
 					ref={ tabsRef }
 					onSelect={ handleSetSelectedTab }
 					onClose={ onClose }
 					selectedTab={ selectedTab }
-				>
-					{ inserterSearch }
-					{ selectedTab === 'blocks' &&
-						! delayedFilterValue &&
-						blocksTab }
-					{ selectedTab === 'patterns' &&
-						! delayedFilterValue &&
-						patternsTab }
-					{ selectedTab === 'media' && mediaTab }
-				</InserterTabs>
+					closeButtonLabel={ __( 'Close block inserter' ) }
+					tabs={ [
+						{
+							name: 'blocks',
+							title: __( 'Blocks' ),
+							panel: (
+								<>
+									{ inserterSearch }
+									{ selectedTab === 'blocks' &&
+										! delayedFilterValue &&
+										blocksTab }
+								</>
+							),
+						},
+						{
+							name: 'patterns',
+							title: __( 'Patterns' ),
+							panel: (
+								<>
+									{ inserterSearch }
+									{ selectedTab === 'patterns' &&
+										! delayedFilterValue &&
+										patternsTab }
+								</>
+							),
+						},
+						{
+							name: 'media',
+							title: __( 'Media' ),
+							panel: (
+								<>
+									{ inserterSearch }
+									{ mediaTab }
+								</>
+							),
+						},
+					] }
+				/>
 			</div>
 			{ showInserterHelpPanel && hoveredItem && (
 				<Popover

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

@@ -85,7 +85,12 @@ export default function QuickInserter( {
 	// When clicking Browse All select the appropriate block so as
 	// the insertion point can work as expected.
 	const onBrowseAll = () => {
-		setInserterIsOpened( { rootClientId, insertionIndex, filterValue } );
+		setInserterIsOpened( {
+			rootClientId,
+			insertionIndex,
+			filterValue,
+			onSelect,
+		} );
 	};
 
 	let maxBlockPatterns = 0;

package/src/components/inserter/style.scss

@@ -17,19 +17,13 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__main-area {
-	position: relative;
-	display: flex;
-	flex-direction: column;
 	height: 100%;
 	gap: $grid-unit-20;
+	position: relative;
 
 	&.show-as-tabs {
 		gap: 0;
 	}
-
-	@include break-medium {
-		width: $block-inserter-width;
-	}
 }
 
 .block-editor-inserter__popover.is-quick {
@@ -109,48 +103,6 @@ $block-inserter-tabs-height: 44px;
 	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
 }
 
-.block-editor-inserter__tabs {
-	flex-grow: 1;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	.block-editor-inserter__tablist-and-close-button {
-		border-bottom: $border-width solid $gray-300;
-		padding-right: $grid-unit-15;
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.block-editor-inserter__close-button {
-		/* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
-		order: 1;
-		align-self: center;
-	}
-
-	.block-editor-inserter__tablist {
-		width: 100%;
-		margin-bottom: -$border-width;
-
-		button[role="tab"] {
-			flex-grow: 1;
-			&[id$="reusable"] {
-				flex-grow: inherit;
-				// These are to align the `reusable` icon with the search icon.
-				padding-left: $grid-unit-20;
-				padding-right: $grid-unit-20;
-			}
-		}
-	}
-
-	.block-editor-inserter__tabpanel {
-		display: flex;
-		flex-grow: 1;
-		flex-direction: column;
-		overflow-y: auto;
-	}
-}
-
 .block-editor-inserter__no-tab-container {
 	overflow-y: auto;
 	flex-grow: 1;

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -10,7 +10,7 @@ import { useCallback } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../global-styles/utils';
+import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
 
 export default function BlockSupportToolsPanel( { children, group, label } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
@@ -20,7 +20,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 		getSelectedBlockClientId,
 		hasMultiSelection,
 	} = useSelect( blockEditorStore );
-
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const panelId = getSelectedBlockClientId();
 	const resetAll = useCallback(
 		( resetFilters = [] ) => {
@@ -72,7 +72,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			shouldRenderPlaceholderItems // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
-			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ children }
 		</ToolsPanel>

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

@@ -166,7 +166,7 @@ export default function LinkPreview( {
 						isEmptyURL || showIconLabels ? '' : ': ' + value.url
 					) }
 					ref={ ref }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					disabled={ isEmptyURL }
 					size="compact"
 				/>

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

@@ -60,28 +60,37 @@ const InsertFromURLPopover = ( {
 	</URLPopover>
 );
 
-const URLSelectionUI = ( {
-	isURLInputVisible,
-	src,
-	onChangeSrc,
-	onSubmitSrc,
-	openURLInput,
-	closeURLInput,
-} ) => {
+const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const [ isURLInputVisible, setIsURLInputVisible ] = useState( false );
+
+	const openURLInput = () => {
+		setIsURLInputVisible( true );
+	};
+	const closeURLInput = () => {
+		setIsURLInputVisible( false );
+		popoverAnchor?.focus();
+	};
+
+	const onSubmitSrc = ( event ) => {
+		event.preventDefault();
+		if ( src && onSelectURL ) {
+			onSelectURL( src );
+			closeURLInput();
+		}
+	};
 
 	return (
-		<div
-			className="block-editor-media-placeholder__url-input-container"
-			ref={ setPopoverAnchor }
-		>
+		<div className="block-editor-media-placeholder__url-input-container">
 			<Button
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
 				variant="secondary"
+				aria-haspopup="dialog"
+				ref={ setPopoverAnchor }
 			>
 				{ __( 'Insert from URL' ) }
 			</Button>
@@ -138,7 +147,6 @@ export function MediaPlaceholder( {
 		return getSettings().mediaUpload;
 	}, [] );
 	const [ src, setSrc ] = useState( '' );
-	const [ isURLInputVisible, setIsURLInputVisible ] = useState( false );
 
 	useEffect( () => {
 		setSrc( value?.src ?? '' );
@@ -159,21 +167,6 @@ export function MediaPlaceholder( {
 		setSrc( event.target.value );
 	};
 
-	const openURLInput = () => {
-		setIsURLInputVisible( true );
-	};
-	const closeURLInput = () => {
-		setIsURLInputVisible( false );
-	};
-
-	const onSubmitSrc = ( event ) => {
-		event.preventDefault();
-		if ( src && onSelectURL ) {
-			onSelectURL( src );
-			closeURLInput();
-		}
-	};
-
 	const onFilesUpload = ( files ) => {
 		if ( ! handleUpload ) {
 			return onSelect( files );
@@ -404,12 +397,9 @@ export function MediaPlaceholder( {
 		return (
 			onSelectURL && (
 				<URLSelectionUI
-					isURLInputVisible={ isURLInputVisible }
 					src={ src }
 					onChangeSrc={ onChangeSrc }
-					onSubmitSrc={ onSubmitSrc }
-					openURLInput={ openURLInput }
-					closeURLInput={ closeURLInput }
+					onSelectURL={ onSelectURL }
 				/>
 			)
 		);

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

@@ -210,6 +210,7 @@ export default function NavigableToolbar( {
 	shouldUseKeyboardFocusShortcut = true,
 	__experimentalInitialIndex: initialIndex,
 	__experimentalOnIndexChange: onIndexChange,
+	orientation = 'horizontal',
 	...props
 } ) {
 	const toolbarRef = useRef();
@@ -230,6 +231,7 @@ export default function NavigableToolbar( {
 			<Toolbar
 				label={ props[ 'aria-label' ] }
 				ref={ toolbarRef }
+				orientation={ orientation }
 				{ ...props }
 			>
 				{ children }
@@ -239,7 +241,7 @@ export default function NavigableToolbar( {
 
 	return (
 		<NavigableMenu
-			orientation="horizontal"
+			orientation={ orientation }
 			role="toolbar"
 			ref={ toolbarRef }
 			{ ...props }

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -3,13 +3,13 @@
  */
 import {
 	Button,
-	CustomSelectControl,
 	Icon,
 	RangeControl,
 	__experimentalHStack as HStack,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
@@ -31,6 +31,11 @@ import {
 	getPresetValueFromCustomValue,
 	isValueSpacingPreset,
 } from '../utils';
+import { unlock } from '../../../lock-unlock';
+
+const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
+	componentsPrivateApis
+);
 
 const CUSTOM_VALUE_SETTINGS = {
 	px: { max: 300, steps: 1 },

package/src/components/tabbed-sidebar/README.md

@@ -0,0 +1,76 @@
+# Tabbed Panel
+
+The `TabbedPanel` component is used to create the secondary panels in the editor.
+
+## Development guidelines
+
+This acts as a wrapper for the `Tabs` component, but adding conventions that can be shared between all secondary panels, for example:
+
+-   A close button
+-   Tabs that fill the panel
+-   Custom scollbars
+
+### Usage
+
+Renders a block alignment toolbar with alignments options.
+
+```jsx
+import { TabbedSidebar } from '@wordpress/components';
+
+const MyTabbedSidebar = () => (
+	<TabbedSidebar
+		tabs={ [
+			{
+				name: 'slug-1',
+				title: _x( 'Title 1', 'context' ),
+				panel: <PanelContents>,
+				panelRef: useRef('an-optional-ref'),
+			},
+			{
+				name: 'slug-2',
+				title: _x( 'Title 2', 'context' ),
+				panel: <PanelContents />,
+			},
+		] }
+		onClose={ onClickCloseButton }
+		onSelect={ onSelectTab }
+		defaultTabId="slug-1"
+		ref={ tabsRef }
+	/>
+);
+```
+
+### Props
+
+### `defaultTabId`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+This is passed to the `Tabs` component so it can handle the tab to select by default when it component renders.
+
+### `onClose`
+
+-   **Type:** `Function`
+
+The function that is called when the close button is clicked.
+
+### `onSelect`
+
+-   **Type:** `Function`
+
+This is passed to the `Tabs` component - it will be called when a tab has been selected. It is passed the selected tab's ID as an argument.
+
+### `selectedTab`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+This is passed to the `Tabs` component - it will display this tab as selected.
+
+### `tabs`
+
+-   **Type:** `Array`
+-   **Default:** `undefined`
+
+An array of tabs which will be rendered as `TabList` and `TabPanel` components.

package/src/components/tabbed-sidebar/index.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+function TabbedSidebar(
+	{ defaultTabId, onClose, onSelect, selectedTab, tabs, closeButtonLabel },
+	ref
+) {
+	return (
+		<div className="block-editor-tabbed-sidebar">
+			<Tabs
+				selectOnMove={ false }
+				defaultTabId={ defaultTabId }
+				onSelect={ onSelect }
+				selectedTabId={ selectedTab }
+			>
+				<div className="block-editor-tabbed-sidebar__tablist-and-close-button">
+					<Button
+						className="block-editor-tabbed-sidebar__close-button"
+						icon={ closeSmall }
+						label={ closeButtonLabel }
+						onClick={ () => onClose() }
+						size="small"
+					/>
+
+					<Tabs.TabList
+						className="block-editor-tabbed-sidebar__tablist"
+						ref={ ref }
+					>
+						{ tabs.map( ( tab ) => (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className="block-editor-tabbed-sidebar__tab"
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+				</div>
+				{ tabs.map( ( tab ) => (
+					<Tabs.TabPanel
+						key={ tab.name }
+						tabId={ tab.name }
+						focusable={ false }
+						className="block-editor-tabbed-sidebar__tabpanel"
+						ref={ tab.panelRef }
+					>
+						{ tab.panel }
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
+		</div>
+	);
+}
+
+export default forwardRef( TabbedSidebar );