@wordpress/block-editor 10.4.0 → 11.0.0

package/src/components/height-control/index.js

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	BaseControl,
+	RangeControl,
+	Flex,
+	FlexItem,
+	__experimentalSpacer as Spacer,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+
+const RANGE_CONTROL_CUSTOM_SETTINGS = {
+	px: { max: 1000, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 50, step: 0.1 },
+	rem: { max: 50, step: 0.1 },
+};
+
+export default function HeightControl( {
+	onChange,
+	label = __( 'Height' ),
+	value,
+} ) {
+	const customRangeValue = parseFloat( value );
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vh',
+			'vw',
+		],
+	} );
+
+	const selectedUnit =
+		useMemo(
+			() => parseQuantityAndUnitFromRawValue( value ),
+			[ value ]
+		)[ 1 ] ||
+		units[ 0 ]?.value ||
+		'px';
+
+	const handleSliderChange = ( next ) => {
+		onChange( [ next, selectedUnit ].join( '' ) );
+	};
+
+	const handleUnitChange = ( newUnit ) => {
+		// Attempt to smooth over differences between currentUnit and newUnit.
+		// This should slightly improve the experience of switching between unit types.
+		const [ currentValue, currentUnit ] =
+			parseQuantityAndUnitFromRawValue( value );
+
+		if ( [ 'em', 'rem' ].includes( newUnit ) && currentUnit === 'px' ) {
+			// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
+			onChange( ( currentValue / 16 ).toFixed( 2 ) + newUnit );
+		} else if (
+			[ 'em', 'rem' ].includes( currentUnit ) &&
+			newUnit === 'px'
+		) {
+			// Convert to pixel value assuming a root size of 16px.
+			onChange( Math.round( currentValue * 16 ) + newUnit );
+		} else if (
+			[ 'vh', 'vw', '%' ].includes( newUnit ) &&
+			currentValue > 100
+		) {
+			// When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
+			onChange( 100 + newUnit );
+		}
+	};
+
+	return (
+		<fieldset className="block-editor-height-control">
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						value={ value }
+						units={ units }
+						onChange={ onChange }
+						onUnitChange={ handleUnitChange }
+						min={ 0 }
+						size={ '__unstable-large' }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<Spacer marginX={ 2 } marginBottom={ 0 }>
+						<RangeControl
+							value={ customRangeValue }
+							min={ 0 }
+							max={
+								RANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]
+									?.max ?? 100
+							}
+							step={
+								RANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]
+									?.step ?? 0.1
+							}
+							withInputField={ false }
+							onChange={ handleSliderChange }
+							__nextHasNoMarginBottom
+						/>
+					</Spacer>
+				</FlexItem>
+			</Flex>
+		</fieldset>
+	);
+}

package/src/components/height-control/stories/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HeightControl from '../';
+
+export default {
+	component: HeightControl,
+	title: 'BlockEditor/HeightControl',
+};
+
+const Template = ( props ) => {
+	const [ value, setValue ] = useState();
+	return <HeightControl onChange={ setValue } value={ value } { ...props } />;
+};
+
+export const Default = Template.bind( {} );

package/src/components/height-control/style.scss

@@ -0,0 +1,5 @@
+.block-editor-height-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}

package/src/components/iframe/index.js

@@ -188,7 +188,17 @@ async function loadScript( head, { id, src } ) {
 }
 
 function Iframe(
-	{ contentRef, children, head, tabIndex = 0, assets, isZoomedOut, ...props },
+	{
+		contentRef,
+		children,
+		head,
+		tabIndex = 0,
+		assets,
+		scale = 1,
+		frameSize = 0,
+		readonly,
+		...props
+	},
 	ref
 ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
@@ -322,7 +332,7 @@ function Iframe(
 								{ head }
 								<style>
 									{ `html { transition: background 5s; ${
-										isZoomedOut
+										frameSize
 											? 'background: #2f2f2f; transition: background 0s;'
 											: ''
 									} }` }
@@ -333,23 +343,20 @@ function Iframe(
 								className={ classnames(
 									'block-editor-iframe__body',
 									BODY_CLASS_NAME,
-									...bodyClasses,
-									{
-										'is-zoomed-out': isZoomedOut,
-									}
+									...bodyClasses
 								) }
-								style={
-									isZoomedOut
-										? {
-												// This is the remaining percentage from the scaling down
-												// of the iframe body(`scale(0.45)`). We also need to subtract
-												// the body's bottom margin.
-												marginBottom: `-${
-													contentHeight * 0.55 - 100
-												}px`,
-										  }
-										: {}
-								}
+								style={ {
+									// This is the remaining percentage from the scaling down
+									// of the iframe body(`scale(0.45)`). We also need to subtract
+									// the body's bottom margin.
+									marginBottom: `-${
+										contentHeight * ( 1 - scale ) -
+										frameSize
+									}px`,
+									marginTop: frameSize,
+									transform: `scale( ${ scale } )`,
+								} }
+								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }
 								{ /*

package/src/components/image-editor/use-save-image.js

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+// Disable Reason: Needs to be refactored.
+// eslint-disable-next-line no-restricted-imports
 import apiFetch from '@wordpress/api-fetch';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useMemo, useState } from '@wordpress/element';

package/src/components/image-editor/zoom-dropdown.js

@@ -28,6 +28,7 @@ export default function ZoomDropdown() {
 			) }
 			renderContent={ () => (
 				<RangeControl
+					__nextHasNoMarginBottom
 					label={ __( 'Zoom' ) }
 					min={ MIN_ZOOM }
 					max={ MAX_ZOOM }

package/src/components/index.js

@@ -53,6 +53,7 @@ export { default as __experimentalColorGradientControl } from './colors-gradient
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
+export { default as __experimentalHeightControl } from './height-control';
 export {
 	default as __experimentalImageEditor,
 	ImageEditingProvider as __experimentalImageEditingProvider,
@@ -73,6 +74,7 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
+export { default as __experimentalOffCanvasEditor } from './off-canvas-editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';

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

@@ -7,9 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
+	getBlockSupport,
 	getBlockType,
 	store as blocksStore,
 	__unstableGetInnerBlocksProps as getInnerBlocksProps,
@@ -74,27 +75,43 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
-	const context = useSelect(
+	const { context, name } = useSelect(
 		( select ) => {
 			const block = select( blockEditorStore ).getBlock( clientId );
 
 			// This check is here to avoid the Redux zombie bug where a child subscription
 			// is called before a parent, causing potential JS errors when the child has been removed.
 			if ( ! block ) {
-				return;
+				return {};
 			}
 
 			const blockType = getBlockType( block.name );
 
 			if ( ! blockType || ! blockType.providesContext ) {
-				return;
+				return {};
 			}
 
-			return getBlockContext( block.attributes, blockType );
+			return {
+				context: getBlockContext( block.attributes, blockType ),
+				name: block.name,
+			};
 		},
 		[ clientId ]
 	);
 
+	const { allowSizingOnChildren = false } =
+		getBlockSupport( name, '__experimentalLayout' ) || {};
+
+	const layout = useMemo(
+		() => ( {
+			...__experimentalLayout,
+			...( allowSizingOnChildren && {
+				allowSizingOnChildren: true,
+			} ),
+		} ),
+		[ __experimentalLayout, allowSizingOnChildren ]
+	);
+
 	// This component needs to always be synchronous as it's the one changing
 	// the async mode depending on the block selection.
 	return (
@@ -103,7 +120,7 @@ function UncontrolledInnerBlocks( props ) {
 				rootClientId={ clientId }
 				renderAppender={ renderAppender }
 				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				__experimentalLayout={ __experimentalLayout }
+				__experimentalLayout={ layout }
 				wrapperRef={ wrapperRef }
 				placeholder={ placeholder }
 			/>
@@ -150,7 +167,8 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
-	const { __unstableDisableLayoutClassNames } = options;
+	const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } =
+		options;
 	const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } =
 		useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
@@ -187,11 +205,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		[ clientId, isSmallScreen ]
 	);
 
+	const blockDropZoneRef = useBlockDropZone( {
+		rootClientId: clientId,
+	} );
+
 	const ref = useMergeRefs( [
 		props.ref,
-		useBlockDropZone( {
-			rootClientId: clientId,
-		} ),
+		__unstableDisableDropZone ? null : blockDropZoneRef,
 	] );
 
 	const innerBlocksProps = {

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -40,23 +40,36 @@ export default function useInnerBlockTemplateSync(
 	templateLock,
 	templateInsertUpdatesSelection
 ) {
-	const { getSelectedBlocksInitialCaretPosition, isBlockSelected } =
-		useSelect( blockEditorStore );
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
-	const innerBlocks = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks( clientId ),
+	const {
+		getBlocks,
+		getSelectedBlocksInitialCaretPosition,
+		isBlockSelected,
+	} = useSelect( blockEditorStore );
+	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	const { innerBlocks } = useSelect(
+		( select ) => ( {
+			innerBlocks: select( blockEditorStore ).getBlocks( clientId ),
+		} ),
 		[ clientId ]
 	);
-	const { getBlocks } = useSelect( blockEditorStore );
 
 	// Maintain a reference to the previous value so we can do a deep equality check.
 	const existingTemplate = useRef( null );
+
 	useLayoutEffect( () => {
+		let isCancelled = false;
+
 		// There's an implicit dependency between useInnerBlockTemplateSync and useNestedSettingsUpdate
 		// The former needs to happen after the latter and since the latter is using microtasks to batch updates (performance optimization),
 		// we need to schedule this one in a microtask as well.
-		// Exemple: If you remove queueMicrotask here, ctrl + click to insert quote block won't close the inserter.
+		// Example: If you remove queueMicrotask here, ctrl + click to insert quote block won't close the inserter.
 		window.queueMicrotask( () => {
+			if ( isCancelled ) {
+				return;
+			}
+
 			// Only synchronize innerBlocks with template if innerBlocks are empty
 			// or a locking "all" or "contentOnly" exists directly on the block.
 			const currentInnerBlocks = getBlocks( clientId );
@@ -65,7 +78,7 @@ export default function useInnerBlockTemplateSync(
 				templateLock === 'all' ||
 				templateLock === 'contentOnly';
 
-			const hasTemplateChanged = ! isEqual(
+			const hasTemplateChanged = ! fastDeepEqual(
 				template,
 				existingTemplate.current
 			);
@@ -80,7 +93,8 @@ export default function useInnerBlockTemplateSync(
 				template
 			);
 
-			if ( ! isEqual( nextBlocks, currentInnerBlocks ) ) {
+			if ( ! fastDeepEqual( nextBlocks, currentInnerBlocks ) ) {
+				__unstableMarkNextChangeAsNotPersistent();
 				replaceInnerBlocks(
 					clientId,
 					nextBlocks,
@@ -96,5 +110,9 @@ export default function useInnerBlockTemplateSync(
 				);
 			}
 		} );
+
+		return () => {
+			isCancelled = true;
+		};
 	}, [ innerBlocks, template, templateLock, clientId ] );
 }

package/src/components/inserter/block-patterns-explorer/sidebar.js

@@ -36,6 +36,7 @@ function PatternsExplorerSearch( { filterValue, setFilterValue } ) {
 	return (
 		<div className={ baseClassName }>
 			<SearchControl
+				__nextHasNoMarginBottom
 				onChange={ setFilterValue }
 				value={ filterValue }
 				label={ __( 'Search for patterns' ) }

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

@@ -8,20 +8,16 @@ import {
 	useRef,
 	useEffect,
 } from '@wordpress/element';
-import { _x, __, isRTL } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 import { useAsyncList, useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
 	FlexBlock,
 	Button,
 } from '@wordpress/components';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+import { Icon, chevronRight } from '@wordpress/icons';
 import { focus } from '@wordpress/dom';
 
 /**
@@ -30,6 +26,7 @@ import { focus } from '@wordpress/dom';
 import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
+import MobileTabNavigation from './mobile-tab-navigation';
 
 function usePatternsCategories() {
 	const [ allPatterns, allCategories ] = usePatternsState();
@@ -56,10 +53,17 @@ function usePatternsCategories() {
 				)
 			)
 			.sort( ( { name: currentName }, { name: nextName } ) => {
-				if ( ! [ currentName, nextName ].includes( 'featured' ) ) {
+				if (
+					! [ currentName, nextName ].some( ( categoryName ) =>
+						[ 'featured', 'text' ].includes( categoryName )
+					)
+				) {
 					return 0;
 				}
-				return currentName === 'featured' ? -1 : 1;
+				// Move `featured` category to the top and `text` to the bottom.
+				return currentName === 'featured' || nextName === 'text'
+					? -1
+					: 1;
 			} );
 
 		if (
@@ -86,6 +90,7 @@ export function BlockPatternsCategoryDialog( {
 	rootClientId,
 	onInsert,
 	category,
+	showTitlesAsTooltip,
 } ) {
 	const container = useRef();
 
@@ -100,12 +105,13 @@ export function BlockPatternsCategoryDialog( {
 	return (
 		<div
 			ref={ container }
-			className="block-editor-inserter__patterns-category-panel"
+			className="block-editor-inserter__patterns-category-dialog"
 		>
 			<BlockPatternsCategoryPanel
 				rootClientId={ rootClientId }
 				onInsert={ onInsert }
 				category={ category }
+				showTitlesAsTooltip={ showTitlesAsTooltip }
 			/>
 		</div>
 	);
@@ -115,6 +121,7 @@ export function BlockPatternsCategoryPanel( {
 	rootClientId,
 	onInsert,
 	category,
+	showTitlesAsTooltip,
 } ) {
 	const [ allPatterns, , onClick ] = usePatternsState(
 		onInsert,
@@ -151,7 +158,7 @@ export function BlockPatternsCategoryPanel( {
 	}
 
 	return (
-		<div>
+		<div className="block-editor-inserter__patterns-category-panel">
 			<div className="block-editor-inserter__patterns-category-panel-title">
 				{ category.label }
 			</div>
@@ -164,6 +171,7 @@ export function BlockPatternsCategoryPanel( {
 				orientation="vertical"
 				category={ category.label }
 				isDraggable
+				showTitlesAsTooltip={ showTitlesAsTooltip }
 			/>
 		</div>
 	);
@@ -178,7 +186,6 @@ function BlockPatternsTabs( {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 	const categories = usePatternsCategories();
 	const isMobile = useViewportMatch( 'medium', '<' );
-
 	return (
 		<>
 			{ ! isMobile && (
@@ -215,12 +222,6 @@ function BlockPatternsTabs( {
 									</HStack>
 								</Item>
 							) ) }
-
-							<div
-								role="presentation"
-								className="block-editor-inserter__patterns-fill-space"
-							/>
-
 							<div role="listitem">
 								<Button
 									className="block-editor-inserter__patterns-explore-button"
@@ -237,10 +238,16 @@ function BlockPatternsTabs( {
 				</div>
 			) }
 			{ isMobile && (
-				<BlockPatternsTabNavigation
-					onInsert={ onInsert }
-					rootClientId={ rootClientId }
-				/>
+				<MobileTabNavigation categories={ categories }>
+					{ ( category ) => (
+						<BlockPatternsCategoryPanel
+							onInsert={ onInsert }
+							rootClientId={ rootClientId }
+							category={ category }
+							showTitlesAsTooltip={ false }
+						/>
+					) }
+				</MobileTabNavigation>
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal
@@ -253,54 +260,4 @@ function BlockPatternsTabs( {
 	);
 }
 
-function BlockPatternsTabNavigation( { onInsert, rootClientId } ) {
-	const categories = usePatternsCategories();
-
-	return (
-		<NavigatorProvider initialPath="/">
-			<NavigatorScreen path="/">
-				<ItemGroup>
-					{ categories.map( ( category ) => (
-						<NavigatorButton
-							key={ category.name }
-							path={ `/category/${ category.name }` }
-							as={ Item }
-							isAction
-						>
-							<HStack>
-								<FlexBlock>{ category.label }</FlexBlock>
-								<Icon
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</HStack>
-						</NavigatorButton>
-					) ) }
-				</ItemGroup>
-			</NavigatorScreen>
-
-			{ categories.map( ( category ) => (
-				<NavigatorScreen
-					key={ category.name }
-					path={ `/category/${ category.name }` }
-				>
-					<NavigatorBackButton
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						isSmall
-						aria-label={ __( 'Navigate to the categories list' ) }
-					>
-						{ __( 'Back' ) }
-					</NavigatorBackButton>
-					<BlockPatternsCategoryPanel
-						category={ category }
-						rootClientId={ rootClientId }
-						onInsert={ onInsert }
-					/>
-				</NavigatorScreen>
-			) ) }
-		</NavigatorProvider>
-	);
-}
-
 export default BlockPatternsTabs;

package/src/components/inserter/block-types-tab.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, groupBy, orderBy } from 'lodash';
+import { map, groupBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,6 +17,7 @@ import BlockTypesList from '../block-types-list';
 import InserterPanel from './panel';
 import useBlockTypesState from './hooks/use-block-types-state';
 import InserterListbox from '../inserter-listbox';
+import { orderBy } from '../../utils/sorting';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -42,7 +43,7 @@ export function BlockTypesTab( {
 	);
 
 	const suggestedItems = useMemo( () => {
-		return orderBy( items, [ 'frecency' ], [ 'desc' ] ).slice(
+		return orderBy( items, 'frecency', 'desc' ).slice(
 			0,
 			MAX_SUGGESTED_ITEMS
 		);

package/src/components/inserter/hooks/use-debounced-input.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+
+export default function useDebouncedInput( defaultValue = '' ) {
+	const [ input, setInput ] = useState( defaultValue );
+	const [ debounced, setter ] = useState( defaultValue );
+	const setDebounced = useDebounce( setter, 250 );
+	useEffect( () => {
+		if ( debounced !== input ) {
+			setDebounced( input );
+		}
+	}, [ debounced, input ] );
+	return [ input, setInput, debounced ];
+}