@wordpress/block-editor 13.1.0 → 13.3.0

package/src/components/grid/utils.js

@@ -0,0 +1,178 @@
+export function range( start, length ) {
+	return Array.from( { length }, ( _, i ) => start + i );
+}
+
+export class GridRect {
+	constructor( {
+		columnStart,
+		rowStart,
+		columnEnd,
+		rowEnd,
+		columnSpan,
+		rowSpan,
+	} = {} ) {
+		this.columnStart = columnStart ?? 1;
+		this.rowStart = rowStart ?? 1;
+		if ( columnSpan !== undefined ) {
+			this.columnEnd = this.columnStart + columnSpan - 1;
+		} else {
+			this.columnEnd = columnEnd ?? this.columnStart;
+		}
+		if ( rowSpan !== undefined ) {
+			this.rowEnd = this.rowStart + rowSpan - 1;
+		} else {
+			this.rowEnd = rowEnd ?? this.rowStart;
+		}
+	}
+
+	get columnSpan() {
+		return this.columnEnd - this.columnStart + 1;
+	}
+
+	get rowSpan() {
+		return this.rowEnd - this.rowStart + 1;
+	}
+
+	contains( column, row ) {
+		return (
+			column >= this.columnStart &&
+			column <= this.columnEnd &&
+			row >= this.rowStart &&
+			row <= this.rowEnd
+		);
+	}
+
+	containsRect( rect ) {
+		return (
+			this.contains( rect.columnStart, rect.rowStart ) &&
+			this.contains( rect.columnEnd, rect.rowEnd )
+		);
+	}
+
+	intersectsRect( rect ) {
+		return (
+			this.columnStart <= rect.columnEnd &&
+			this.columnEnd >= rect.columnStart &&
+			this.rowStart <= rect.rowEnd &&
+			this.rowEnd >= rect.rowStart
+		);
+	}
+}
+
+export function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}
+
+/**
+ * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end
+ * position in pixels of each grid track.
+ *
+ * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
+ *
+ * @param {string} template The grid-template-columns or grid-template-rows CSS property value.
+ *                          Only supports fixed sizes in pixels.
+ * @param {number} gap      The gap between grid tracks in pixels.
+ *
+ * @return {Array<{start: number, end: number}>} An array of objects with the start and end
+ *                                               position in pixels of each grid track.
+ */
+export function getGridTracks( template, gap ) {
+	const tracks = [];
+	for ( const size of template.split( ' ' ) ) {
+		const previousTrack = tracks[ tracks.length - 1 ];
+		const start = previousTrack ? previousTrack.end + gap : 0;
+		const end = start + parseFloat( size );
+		tracks.push( { start, end } );
+	}
+	return tracks;
+}
+
+/**
+ * Given an array of grid tracks and a position in pixels, gets the index of the closest track to
+ * that position.
+ *
+ * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
+ *
+ * @param {Array<{start: number, end: number}>} tracks   An array of objects with the start and end
+ *                                                       position in pixels of each grid track.
+ * @param {number}                              position The position in pixels.
+ * @param {string}                              edge     The edge of the track to compare the
+ *                                                       position to. Either 'start' or 'end'.
+ *
+ * @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which
+ *                  is 1-based.
+ */
+export function getClosestTrack( tracks, position, edge = 'start' ) {
+	return tracks.reduce(
+		( closest, track, index ) =>
+			Math.abs( track[ edge ] - position ) <
+			Math.abs( tracks[ closest ][ edge ] - position )
+				? index
+				: closest,
+		0
+	);
+}
+
+export function getGridRect( gridElement, rect ) {
+	const columnGap = parseFloat( getComputedCSS( gridElement, 'column-gap' ) );
+	const rowGap = parseFloat( getComputedCSS( gridElement, 'row-gap' ) );
+	const gridColumnTracks = getGridTracks(
+		getComputedCSS( gridElement, 'grid-template-columns' ),
+		columnGap
+	);
+	const gridRowTracks = getGridTracks(
+		getComputedCSS( gridElement, 'grid-template-rows' ),
+		rowGap
+	);
+	const columnStart = getClosestTrack( gridColumnTracks, rect.left ) + 1;
+	const rowStart = getClosestTrack( gridRowTracks, rect.top ) + 1;
+	const columnEnd =
+		getClosestTrack( gridColumnTracks, rect.right, 'end' ) + 1;
+	const rowEnd = getClosestTrack( gridRowTracks, rect.bottom, 'end' ) + 1;
+	return new GridRect( {
+		columnStart,
+		columnEnd,
+		rowStart,
+		rowEnd,
+	} );
+}
+
+export function getGridItemRect( gridItemElement ) {
+	return getGridRect(
+		gridItemElement.parentElement,
+		new window.DOMRect(
+			gridItemElement.offsetLeft,
+			gridItemElement.offsetTop,
+			gridItemElement.offsetWidth,
+			gridItemElement.offsetHeight
+		)
+	);
+}
+
+export function getGridInfo( gridElement ) {
+	const gridTemplateColumns = getComputedCSS(
+		gridElement,
+		'grid-template-columns'
+	);
+	const gridTemplateRows = getComputedCSS(
+		gridElement,
+		'grid-template-rows'
+	);
+	const numColumns = gridTemplateColumns.split( ' ' ).length;
+	const numRows = gridTemplateRows.split( ' ' ).length;
+	const numItems = numColumns * numRows;
+	return {
+		numColumns,
+		numRows,
+		numItems,
+		currentColor: getComputedCSS( gridElement, 'color' ),
+		style: {
+			gridTemplateColumns,
+			gridTemplateRows,
+			gap: getComputedCSS( gridElement, 'gap' ),
+			padding: getComputedCSS( gridElement, 'padding' ),
+		},
+	};
+}

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/image-editor/aspect-ratio-dropdown.js

@@ -78,7 +78,6 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 			label={ __( 'Aspect Ratio' ) }
 			popoverProps={ POPOVER_PROPS }
 			toggleProps={ toggleProps }
-			className="wp-block-image__aspect-ratio"
 		>
 			{ ( { onClose } ) => (
 				<>

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

@@ -267,7 +267,10 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 
 	const ref = useMergeRefs( [
 		props.ref,
-		__unstableDisableDropZone || isDropZoneDisabled
+		__unstableDisableDropZone ||
+		isDropZoneDisabled ||
+		( 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/rich-text/event-listeners/input-rules.js

@@ -14,7 +14,7 @@ import {
 	START_OF_SELECTED_AREA,
 } from '../../../utils/selection';
 
-function findSelection( blocks ) {
+export function findSelection( blocks ) {
 	let i = blocks.length;
 
 	while ( i-- ) {

package/src/components/rich-text/index.native.js

@@ -24,7 +24,6 @@ import {
 	create,
 	split,
 	toHTMLString,
-	slice,
 } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 
@@ -46,6 +45,8 @@ import EmbedHandlerPicker from './embed-handler-picker';
 import { Content } from './content';
 import RichText from './native';
 import { withDeprecations } from './with-deprecations';
+import { findSelection } from './event-listeners/input-rules';
+import { START_OF_SELECTED_AREA } from '../../utils/selection';
 
 const classes = 'block-editor-rich-text__editable';
 
@@ -502,7 +503,7 @@ export function RichTextWrapper(
 	);
 
 	const inputRule = useCallback(
-		( value, valueToFormat ) => {
+		( value ) => {
 			if ( ! onReplace ) {
 				return;
 			}
@@ -518,7 +519,7 @@ export function RichTextWrapper(
 				return;
 			}
 
-			const trimmedTextBefore = text.slice( 0, startPosition ).trim();
+			const trimmedTextBefore = text.slice( 0, start ).trim();
 			const prefixTransforms = getBlockTransforms( 'from' ).filter(
 				( { type } ) => type === 'prefix'
 			);
@@ -533,15 +534,16 @@ export function RichTextWrapper(
 				return;
 			}
 
-			const content = valueToFormat(
-				slice( value, startPosition, text.length )
-			);
+			const content = toHTMLString( {
+				value: insert( value, START_OF_SELECTED_AREA, 0, start ),
+			} );
 			const block = transformation.transform( content );
-
+			const currentSelection = findSelection( [ block ] );
 			onReplace( [ block ] );
+			selectionChange( ...currentSelection );
 			__unstableMarkAutomaticChange();
 		},
-		[ onReplace, __unstableMarkAutomaticChange ]
+		[ onReplace, start, selectionChange, __unstableMarkAutomaticChange ]
 	);
 
 	const mergedRef = useMergeRefs( [ providedRef, fallbackRef ] );

package/src/components/rich-text/native/index.native.js

@@ -316,6 +316,23 @@ export class RichText extends Component {
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
 			event.nativeEvent.text
 		);
+
+		const { __unstableInputRule } = this.props;
+		const currentValuePosition = {
+			end: this.isIOS ? this.selectionEnd : this.selectionEnd + 1,
+			start: this.isIOS ? this.selectionStart : this.selectionStart + 1,
+		};
+
+		if (
+			__unstableInputRule &&
+			__unstableInputRule( {
+				...currentValuePosition,
+				...this.formatToValue( contentWithoutRootTag ),
+			} )
+		) {
+			return;
+		}
+
 		// On iOS, onChange can be triggered after selection changes, even though there are no content changes.
 		if ( contentWithoutRootTag === this.value?.toString() ) {
 			return;

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 },