@wordpress/block-editor 15.9.1-next.6deb34194.0 → 15.9.1-next.738bb1424.0

package/src/components/global-styles/typography-panel.js

@@ -9,7 +9,7 @@ import {
 	Notice,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo, useEffect } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
@@ -22,6 +22,7 @@ import LetterSpacingControl from '../letter-spacing-control';
 import TextAlignmentControl from '../text-alignment-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
+import TextIndentControl from '../text-indent-control';
 import WritingModeControl from '../writing-mode-control';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
@@ -29,6 +30,7 @@ import {
 	getMergedFontFamiliesAndFontFamilyFaces,
 	findNearestStyleAndWeight,
 } from './typography-utils';
+import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -41,6 +43,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasTextAlign = useHasTextAlignmentControl( settings );
 	const hasTextTransform = useHasTextTransformControl( settings );
 	const hasTextDecoration = useHasTextDecorationControl( settings );
+	const hasTextIndent = useHasTextIndentControl( settings );
 	const hasWritingMode = useHasWritingModeControl( settings );
 	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
@@ -54,6 +57,7 @@ export function useHasTypographyPanel( settings ) {
 		hasTextTransform ||
 		hasFontSize ||
 		hasTextDecoration ||
+		hasTextIndent ||
 		hasWritingMode ||
 		hasTextColumns
 	);
@@ -117,6 +121,10 @@ function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
+function useHasTextIndentControl( settings ) {
+	return settings?.typography?.textIndent;
+}
+
 /**
  * Concatenate all the font sizes into a single list for the font size picker.
  *
@@ -168,6 +176,7 @@ const DEFAULT_CONTROLS = {
 	textAlign: true,
 	textTransform: true,
 	textDecoration: true,
+	textIndent: true,
 	writingMode: true,
 	textColumns: true,
 };
@@ -180,7 +189,7 @@ export default function TypographyPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
-	fitText = false,
+	isGlobalStyles = false,
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -196,15 +205,57 @@ export default function TypographyPanel( {
 		const slug = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
-		onChange(
-			setImmutably(
-				value,
-				[ 'typography', 'fontFamily' ],
-				slug
-					? `var:preset|font-family|${ slug }`
-					: newValue || undefined
-			)
+		let updatedValue = setImmutably(
+			value,
+			[ 'typography', 'fontFamily' ],
+			slug ? `var:preset|font-family|${ slug }` : newValue || undefined
+		);
+
+		// Check if current font style/weight are available in the new font family.
+		const newFontFamilyFaces =
+			fontFamilies?.find( ( { fontFamily: f } ) => f === newValue )
+				?.fontFace ?? [];
+		const { fontStyles, fontWeights } =
+			getFontStylesAndWeights( newFontFamilyFaces );
+		const hasFontStyle = fontStyles?.some(
+			( { value: fs } ) => fs === fontStyle
 		);
+		const hasFontWeight = fontWeights?.some(
+			( { value: fw } ) => fw?.toString() === fontWeight?.toString()
+		);
+
+		// Find the nearest available font style/weight if not available.
+		if ( ! hasFontStyle || ! hasFontWeight ) {
+			const { nearestFontStyle, nearestFontWeight } =
+				findNearestStyleAndWeight(
+					newFontFamilyFaces,
+					fontStyle,
+					fontWeight
+				);
+			if ( nearestFontStyle || nearestFontWeight ) {
+				// Update to the nearest available font style/weight in the new font family.
+				updatedValue = {
+					...updatedValue,
+					typography: {
+						...updatedValue?.typography,
+						fontStyle: nearestFontStyle || undefined,
+						fontWeight: nearestFontWeight || undefined,
+					},
+				};
+			} else if ( fontStyle || fontWeight ) {
+				// Reset if no available styles/weights found.
+				updatedValue = {
+					...updatedValue,
+					typography: {
+						...updatedValue?.typography,
+						fontStyle: undefined,
+						fontWeight: undefined,
+					},
+				};
+			}
+		}
+
+		onChange( updatedValue );
 	};
 	const hasFontFamily = () => !! value?.typography?.fontFamily;
 	const resetFontFamily = () => setFontFamily( undefined );
@@ -262,11 +313,6 @@ export default function TypographyPanel( {
 	const hasFontWeights = settings?.typography?.fontWeight;
 	const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
 	const fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );
-	const { nearestFontStyle, nearestFontWeight } = findNearestStyleAndWeight(
-		fontFamilyFaces,
-		fontStyle,
-		fontWeight
-	);
 	const setFontAppearance = useCallback(
 		( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {
 			// Only update the font style and weight if they have changed.
@@ -289,24 +335,6 @@ export default function TypographyPanel( {
 		setFontAppearance( {} );
 	}, [ setFontAppearance ] );
 
-	// Check if previous font style and weight values are available in the new font family.
-	useEffect( () => {
-		if ( nearestFontStyle && nearestFontWeight ) {
-			setFontAppearance( {
-				fontStyle: nearestFontStyle,
-				fontWeight: nearestFontWeight,
-			} );
-		} else {
-			// Reset font appearance if there are no available styles or weights.
-			resetFontAppearance();
-		}
-	}, [
-		nearestFontStyle,
-		nearestFontWeight,
-		resetFontAppearance,
-		setFontAppearance,
-	] );
-
 	// Line Height
 	const hasLineHeightEnabled = useHasLineHeightControl( settings );
 	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
@@ -339,6 +367,21 @@ export default function TypographyPanel( {
 	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
 	const resetLetterSpacing = () => setLetterSpacing( undefined );
 
+	// Text Indent
+	const hasTextIndentControl = useHasTextIndentControl( settings );
+	const textIndent = decodeValue( inheritedValue?.typography?.textIndent );
+	const setTextIndent = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'textIndent' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasTextIndent = () => !! value?.typography?.textIndent;
+	const resetTextIndent = () => setTextIndent( undefined );
+
 	// Text Columns
 	const hasTextColumnsControl = useHasTextColumnsControl( settings );
 	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
@@ -449,7 +492,7 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ hasFontSizeEnabled && ! fitText && (
+			{ hasFontSizeEnabled && (
 				<ToolsPanelItem
 					label={ __( 'Size' ) }
 					hasValue={ hasFontSize }
@@ -471,7 +514,6 @@ export default function TypographyPanel( {
 			) }
 			{ hasAppearanceControl && (
 				<ToolsPanelItem
-					className="single-column"
 					label={ appearanceControlLabel }
 					hasValue={ hasFontAppearance }
 					onDeselect={ resetFontAppearance }
@@ -525,6 +567,30 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasTextIndentControl && (
+				<ToolsPanelItem
+					label={ __( 'Line indent' ) }
+					hasValue={ hasTextIndent }
+					onDeselect={ resetTextIndent }
+					isShownByDefault={ defaultControls.textIndent }
+					panelId={ panelId }
+				>
+					<TextIndentControl
+						value={ textIndent }
+						onChange={ setTextIndent }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+						withSlider
+						help={
+							isGlobalStyles
+								? __(
+										'Indents the first line of each paragraph after the first one.'
+								  )
+								: __( 'Indents the first line of text.' )
+						}
+					/>
+				</ToolsPanelItem>
+			) }
 			{ hasTextColumnsControl && (
 				<ToolsPanelItem
 					className="single-column"
@@ -576,7 +642,6 @@ export default function TypographyPanel( {
 						value={ writingMode }
 						onChange={ setWritingMode }
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }
@@ -594,7 +659,6 @@ export default function TypographyPanel( {
 						showNone
 						isBlock
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }
@@ -611,7 +675,6 @@ export default function TypographyPanel( {
 						onChange={ setTextAlign }
 						options={ [ 'left', 'center', 'right', 'justify' ] }
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 
 					{ textAlign === 'justify' && (

package/src/components/grid/grid-item-resizer.js

@@ -61,16 +61,29 @@ function GridItemResizerInner( {
 			const blockClientRect = blockElement.getBoundingClientRect();
 			const rootBlockClientRect =
 				rootBlockElement.getBoundingClientRect();
+
+			const topAvailable = blockClientRect.top > rootBlockClientRect.top;
+			const bottomAvailable =
+				blockClientRect.bottom < rootBlockClientRect.bottom;
+			const leftAvailable =
+				blockClientRect.left > rootBlockClientRect.left;
+			const rightAvailable =
+				blockClientRect.right < rootBlockClientRect.right;
+
 			setEnableSide( {
-				top: blockClientRect.top > rootBlockClientRect.top,
-				bottom: blockClientRect.bottom < rootBlockClientRect.bottom,
-				left: blockClientRect.left > rootBlockClientRect.left,
-				right: blockClientRect.right < rootBlockClientRect.right,
+				top: !! isManualGrid
+					? topAvailable
+					: ! bottomAvailable && topAvailable,
+				bottom: bottomAvailable,
+				left: !! isManualGrid
+					? leftAvailable
+					: ! rightAvailable && leftAvailable,
+				right: rightAvailable,
 			} );
 		} );
 		observer.observe( blockElement );
 		return () => observer.disconnect();
-	}, [ blockElement, rootBlockElement ] );
+	}, [ blockElement, rootBlockElement, isManualGrid ] );
 
 	const justification = {
 		right: 'left',

package/src/components/height-control/README.md

@@ -1,5 +1,7 @@
 # Height Control
 
+**⚠️ DEPRECATED:** This component is deprecated. Please use `DimensionControl` instead for new implementations.
+
 The `HeightControl` component adds a linked unit control and slider component for controlling the height of a block within the block editor. It supports passing a label, and is used for controlling the minimum height dimensions of Group blocks.
 
 _Note:_ It is worth noting that the minimum height option is an opt-in feature. Themes need to declare support for it before it'll be available, and a convenient way to do that is via opting in to the [appearanceTools](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls) UI controls.
@@ -8,6 +10,26 @@ _Note:_ It is worth noting that the minimum height option is an opt-in feature.
 
 ### Usage
 
+**For new implementations, use `DimensionControl` instead:**
+
+```jsx
+import { useState } from 'react';
+import { DimensionControl } from '@wordpress/block-editor';
+
+const MyDimensionControl = () => {
+	const [ value, setValue ] = useState();
+	return (
+		<DimensionControl
+			label={ 'Height' }
+			onChange={ setValue }
+			value={ value }
+		/>
+	);
+};
+```
+
+**Legacy usage (deprecated):**
+
 Renders the markup for height control component, to be used in the block inspector.
 
 ```jsx
@@ -16,12 +38,14 @@ import { HeightControl } from '@wordpress/block-editor';
 
 const MyLineHeightControl = () => (
 	const [ value, setValue ] = useState();
-	<HeightControl
-		label={ 'My Height Control' }
-		onChange={ setValue }
-		value={ value }
-	/>
-);
+	return (
+		<HeightControl
+			label={ 'My Height Control' }
+			onChange={ setValue }
+			value={ value }
+		/>
+	);
+};
 ```
 
 ### Props
@@ -47,4 +71,4 @@ A label for the height control. This is useful when using the height control for
 
 ## Related components
 
-Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

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

@@ -13,6 +13,7 @@ import {
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -53,6 +54,8 @@ const RANGE_CONTROL_CUSTOM_SETTINGS = {
 /**
  * HeightControl renders a linked unit control and range control for adjusting the height of a block.
  *
+ * @deprecated Use DimensionControl instead.
+ *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md
  *
  * @param {Object}                     props
@@ -67,6 +70,11 @@ export default function HeightControl( {
 	onChange,
 	value,
 } ) {
+	deprecated( 'wp.blockEditor.HeightControl', {
+		since: '7.0',
+		version: '7.2',
+		alternative: 'wp.blockEditor.DimensionControl',
+	} );
 	const customRangeValue = parseFloat( value );
 
 	const [ availableUnits ] = useSettings( 'spacing.units' );
@@ -177,7 +185,6 @@ export default function HeightControl( {
 							}
 							withInputField={ false }
 							onChange={ handleSliderChange }
-							__nextHasNoMarginBottom
 							label={ label }
 							hideLabelFromVision
 						/>

package/src/components/html-element-control/index.js

@@ -88,7 +88,6 @@ export default function HTMLElementControl( {
 	return (
 		<VStack spacing={ 2 } className="block-editor-html-element-control">
 			<SelectControl
-				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ modifiedOptions }

package/src/components/iframe/index.js

@@ -21,7 +21,6 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
 import { useScaleCanvas } from './use-scale-canvas';
@@ -119,7 +118,6 @@ function Iframe( {
 	/** @type {[Document, import('react').Dispatch<Document>]} */
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 
 	const setRef = useRefEffect( ( node ) => {
@@ -176,8 +174,6 @@ function Iframe( {
 
 			documentElement.classList.add( 'block-editor-iframe__html' );
 
-			clearerRef( documentElement );
-
 			contentDocument.dir = ownerDocument.dir;
 
 			for ( const compatStyle of getCompatibilityStyles() ) {
@@ -243,7 +239,6 @@ function Iframe( {
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
 		contentRef,
-		clearerRef,
 		writingFlowRef,
 		disabledRef,
 	] );

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

@@ -35,7 +35,6 @@ export default function ZoomDropdown() {
 				<DropdownContentWrapper paddingSize="medium">
 					<RangeControl
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
 						label={ __( 'Zoom' ) }
 						min={ MIN_ZOOM }
 						max={ MAX_ZOOM }

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

@@ -91,7 +91,6 @@ export default function ImageSizeControl( {
 		<VStack className="block-editor-image-size-control" spacing="4">
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
-					__nextHasNoMarginBottom
 					label={ __( 'Resolution' ) }
 					value={ slug }
 					options={ imageSizeOptions }
@@ -129,7 +128,6 @@ export default function ImageSizeControl( {
 						value={ selectedValue }
 						isBlock
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
 					>
 						{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
 							return (

package/src/components/index.js

@@ -54,12 +54,14 @@ export { default as __experimentalFontAppearanceControl } from './font-appearanc
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
 export { default as __experimentalTextDecorationControl } from './text-decoration-control';
+export { default as __experimentalTextIndentControl } from './text-indent-control';
 export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalWritingModeControl } from './writing-mode-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 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 DimensionControl } from './dimension-control';
 export { default as HeightControl } from './height-control';
 export { default as __experimentalImageEditor } from './image-editor';
 export { default as __experimentalImageSizeControl } from './image-size-control';

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -4,7 +4,7 @@
 import { useLayoutEffect, useState } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import isShallowEqual from '@wordpress/is-shallow-equal';
+import { isShallowEqual } from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies

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

@@ -37,7 +37,6 @@ function PatternsExplorerSearch( { searchValue, setSearchValue } ) {
 	return (
 		<div className={ baseClassName }>
 			<SearchControl
-				__nextHasNoMarginBottom
 				onChange={ setSearchValue }
 				value={ searchValue }
 				label={ __( 'Search' ) }

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

@@ -186,6 +186,11 @@ export function BlockTypesTab(
 			continue;
 		}
 
+		// Skip search-only items from browse view (they're still searchable).
+		if ( item.isSearchOnly ) {
+			continue;
+		}
+
 		if ( item.isAllowedInCurrentRoot ) {
 			itemsForCurrentRoot.push( item );
 		} else {

package/src/components/inserter/hooks/use-insertion-point.js

@@ -201,6 +201,8 @@ function useInsertionPoint( {
 			onSelect,
 			shouldFocusBlock,
 			selectBlockOnInsert,
+			setLastFocus,
+			registry,
 		]
 	);
 
@@ -234,6 +236,7 @@ function useInsertionPoint( {
 			hideInsertionPoint,
 			destinationRootClientId,
 			destinationIndex,
+			registry,
 		]
 	);
 

package/src/components/inserter/media-tab/media-panel.js

@@ -25,7 +25,6 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	return (
 		<div className={ baseCssClass }>
 			<SearchControl
-				__nextHasNoMarginBottom
 				className={ `${ baseCssClass }-search` }
 				onChange={ setSearch }
 				value={ search }

package/src/components/inserter/menu.js

@@ -172,7 +172,6 @@ function InserterMenu(
 		return (
 			<>
 				<SearchControl
-					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					onChange={ ( value ) => {
 						if ( hoveredItem ) {

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

@@ -89,7 +89,6 @@ export default function QuickInserter( {
 		>
 			{ showSearch && (
 				<SearchControl
-					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					value={ filterValue }
 					onChange={ ( value ) => {

package/src/components/inspector-controls/README.md

@@ -96,7 +96,6 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<CheckboxControl
-							__nextHasNoMarginBottom
 							heading="Checkbox Field"
 							label="Tick Me"
 							help="Additional help text"
@@ -115,7 +114,6 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<TextControl
-							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							label="Text Field"
 							help="Additional help text"
@@ -124,14 +122,12 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<ToggleControl
-							__nextHasNoMarginBottom
 							label="Toggle Field"
 							checked={ toggleField }
 							onChange={ onChangeToggleField }
 						/>
 
 						<SelectControl
-							__nextHasNoMarginBottom
 							label="Select Control"
 							value={ selectField }
 							options={ [
@@ -208,7 +204,6 @@ function MyBlockEdit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl
-					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					label="HTML anchor"
 					value={ attributes.anchor }

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

@@ -23,6 +23,7 @@ import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { keyboardReturn, linkOff } from '@wordpress/icons';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -35,7 +36,6 @@ import useCreatePage from './use-create-page';
 import useInternalValue from './use-internal-value';
 import { ViewerFill } from './viewer-slot';
 import { DEFAULT_LINK_SETTINGS } from './constants';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Default properties associated with a link control value.
@@ -443,7 +443,6 @@ function LinkControl( {
 					>
 						{ showTextControl && (
 							<TextControl
-								__nextHasNoMarginBottom
 								ref={ textInputRef }
 								className="block-editor-link-control__field block-editor-link-control__text-content"
 								label={ __( 'Text' ) }