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

package/src/components/text-alignment-control/index.js

@@ -76,7 +76,6 @@ export default function TextAlignmentControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Text alignment' ) }
 			className={ clsx(

package/src/components/text-decoration-control/index.js

@@ -49,7 +49,6 @@ export default function TextDecorationControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Decoration' ) }
 			className={ clsx(

package/src/components/text-indent-control/index.js

@@ -0,0 +1,135 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	RangeControl,
+	__experimentalSpacer as Spacer,
+	Flex,
+	FlexItem,
+	BaseControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useSettings } from '../../components/use-settings';
+
+/**
+ * Control for line text indent.
+ *
+ * @param {Object}                  props                       Component props.
+ * @param {boolean}                 props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.
+ * @param {string}                  props.value                 Currently selected text indent.
+ * @param {Function}                props.onChange              Handles change in text indent selection.
+ * @param {string|number|undefined} props.__unstableInputWidth  Input width to pass through to inner UnitControl. Should be a valid CSS value.
+ * @param {boolean}                 props.withSlider            Whether to show the slider control.
+ * @param {string}                  props.help                  Help text to display below the control.
+ *
+ * @return {Element} Text indent control.
+ */
+export default function TextIndentControl( {
+	__next40pxDefaultSize = false,
+	value,
+	onChange,
+	__unstableInputWidth = '60px',
+	withSlider = false,
+	help,
+	...otherProps
+} ) {
+	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const units = useCustomUnits( {
+		availableUnits: availableUnits || [
+			'px',
+			'em',
+			'rem',
+			'ch',
+			'%',
+			'vw',
+			'vh',
+		],
+		defaultValues: { px: 16, em: 2, rem: 2, ch: 2 },
+	} );
+
+	const [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(
+		value,
+		units
+	);
+	const isValueUnitRelative =
+		!! valueUnit && [ 'em', 'rem', 'ch', 'vw', 'vh' ].includes( valueUnit );
+
+	if ( ! withSlider ) {
+		return (
+			<UnitControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
+				{ ...otherProps }
+				label={ __( 'Line indent' ) }
+				value={ value }
+				__unstableInputWidth={ __unstableInputWidth }
+				units={ units }
+				onChange={ onChange }
+				help={ help }
+			/>
+		);
+	}
+
+	return (
+		<>
+			<BaseControl.VisualLabel>
+				{ __( 'Line indent' ) }
+			</BaseControl.VisualLabel>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__shouldNotWarnDeprecated36pxSize
+						label={ __( 'Line indent' ) }
+						labelPosition="top"
+						hideLabelFromVision
+						value={ value }
+						onChange={ onChange }
+						size={ otherProps.size }
+						units={ units }
+						__unstableInputWidth={ __unstableInputWidth }
+						min={ 0 }
+					/>
+				</FlexItem>
+				{ withSlider && (
+					<FlexItem isBlock>
+						<Spacer marginX={ 2 } marginBottom={ 0 }>
+							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize={ __next40pxDefaultSize }
+								__shouldNotWarnDeprecated36pxSize
+								label={ __( 'Line indent' ) }
+								hideLabelFromVision
+								value={ valueQuantity }
+								withInputField={ false }
+								onChange={ ( newValue ) => {
+									if ( newValue === undefined ) {
+										onChange?.( undefined );
+									} else {
+										onChange?.(
+											newValue + ( valueUnit ?? 'px' )
+										);
+									}
+								} }
+								min={ 0 }
+								max={ isValueUnitRelative ? 10 : 100 }
+								step={ isValueUnitRelative ? 0.1 : 1 }
+								initialPosition={ 0 }
+							/>
+						</Spacer>
+					</FlexItem>
+				) }
+			</Flex>
+			{ help && (
+				<p className="components-base-control__help">{ help }</p>
+			) }
+		</>
+	);
+}

package/src/components/text-transform-control/index.js

@@ -55,7 +55,6 @@ export default function TextTransformControl( { className, value, onChange } ) {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Letter case' ) }
 			className={ clsx(

package/src/components/url-input/index.js

@@ -476,7 +476,7 @@ class URLInput extends Component {
 		}
 
 		return (
-			<BaseControl __nextHasNoMarginBottom { ...controlProps }>
+			<BaseControl { ...controlProps }>
 				<InputControl { ...inputProps } __next40pxDefaultSize />
 				{ loading && <Spinner /> }
 			</BaseControl>

package/src/components/url-popover/image-url-input-ui.js

@@ -228,14 +228,12 @@ const ImageURLInputUI = ( {
 	const advancedOptions = (
 		<VStack spacing="3">
 			<ToggleControl
-				__nextHasNoMarginBottom
 				label={ __( 'Open in new tab' ) }
 				onChange={ onSetNewTab }
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
 				__next40pxDefaultSize
-				__nextHasNoMarginBottom
 				label={ __( 'Link relation' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
@@ -252,7 +250,6 @@ const ImageURLInputUI = ( {
 			/>
 			<TextControl
 				__next40pxDefaultSize
-				__nextHasNoMarginBottom
 				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }

package/src/components/url-popover/stories/index.story.jsx

@@ -37,7 +37,6 @@ const TestURLPopover = () => {
 					onClose={ close }
 					renderSettings={ () => (
 						<ToggleControl
-							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ setTarget }
 						/>

package/src/components/writing-mode-control/index.js

@@ -40,7 +40,6 @@ export default function WritingModeControl( { className, value, onChange } ) {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Orientation' ) }
 			className={ clsx( 'block-editor-writing-mode-control', className ) }

package/src/content.scss

@@ -14,7 +14,3 @@
 @use "./components/plain-text/content.scss" as *;
 @use "./components/rich-text/content.scss" as *;
 @use "./components/warning/content.scss" as *;
-
-// To do: ideally the iframe does not contain UI, but there's still the block
-// placeholders that will be moved to shadow DOM in the future.
-@include wordpress-admin-schemes();

package/src/hooks/anchor.js

@@ -20,13 +20,6 @@ import { useBlockEditingMode } from '../components/block-editing-mode';
  */
 const ANCHOR_REGEX = /[\s#]/g;
 
-const ANCHOR_SCHEMA = {
-	type: 'string',
-	source: 'attribute',
-	attribute: 'id',
-	selector: '*',
-};
-
 /**
  * Filters registered block settings, extending attributes with anchor using ID
  * of the first node.
@@ -44,7 +37,9 @@ export function addAttribute( settings ) {
 		// Gracefully handle if settings.attributes is undefined.
 		settings.attributes = {
 			...settings.attributes,
-			anchor: ANCHOR_SCHEMA,
+			anchor: {
+				type: 'string',
+			},
 		};
 	}
 
@@ -63,7 +58,6 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 	return (
 		<InspectorControls group="advanced">
 			<TextControl
-				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				className="html-anchor-control"
 				label={ __( 'HTML anchor' ) }
@@ -91,7 +85,7 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 				onChange={ ( nextValue ) => {
 					nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
 					setAttributes( {
-						anchor: nextValue,
+						anchor: nextValue !== '' ? nextValue : undefined,
 					} );
 				} }
 				autoCapitalize="none"

package/src/hooks/block-hooks.js

@@ -197,7 +197,6 @@ function BlockHooksControlPure( {
 
 								return (
 									<ToggleControl
-										__nextHasNoMarginBottom
 										checked={ checked }
 										key={ block.title }
 										label={ block.title }

package/src/hooks/color.scss

@@ -4,10 +4,6 @@
 	.block-editor-contrast-checker {
 		grid-column: span 2;
 		margin-top: $grid-unit-20;
-
-		.components-notice__content {
-			margin-right: 0;
-		}
 	}
 
 	/* Increased specificity required to remove the slot wrapper's row gap */

package/src/hooks/custom-class-name.js

@@ -47,7 +47,6 @@ function CustomClassNameControlsPure( { className, setAttributes } ) {
 	return (
 		<InspectorControls group="advanced">
 			<TextControl
-				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				autoComplete="off"
 				label={ __( 'Additional CSS class(es)' ) }

package/src/hooks/dimensions.js

@@ -159,6 +159,7 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
 	if ( feature === 'any' ) {
 		return !! (
 			support?.aspectRatio ||
+			!! support?.height ||
 			!! support?.minHeight ||
 			!! support?.width
 		);
@@ -169,13 +170,13 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
 
 export default {
 	useBlockProps,
-	attributeKeys: [ 'minHeight', 'width', 'style' ],
+	attributeKeys: [ 'height', 'minHeight', 'width', 'style' ],
 	hasSupport( name ) {
 		return hasDimensionsSupport( name );
 	},
 };
 
-function useBlockProps( { name, minHeight, style } ) {
+function useBlockProps( { name, height, minHeight, style } ) {
 	if (
 		! hasDimensionsSupport( name, 'aspectRatio' ) ||
 		shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' )
@@ -192,16 +193,22 @@ function useBlockProps( { name, minHeight, style } ) {
 	const inlineStyleOverrides = {};
 
 	// Apply rules to unset incompatible styles.
-	// Note that a set `aspectRatio` will win out if both an aspect ratio and a minHeight are set.
+	// Note that a set `aspectRatio` will win out if both an aspect ratio and height-related properties are set.
 	// This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio
-	// that is set should be intentional and should override any existing minHeight. The Cover block
-	// and dimensions controls have logic that will manually clear the aspect ratio if a minHeight
-	// is set.
+	// that is set should be intentional and should override any existing height properties. The Cover block
+	// and dimensions controls have logic that will manually clear the aspect ratio if height properties
+	// are set.
 	if ( style?.dimensions?.aspectRatio ) {
-		// To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
+		// To ensure the aspect ratio does not get overridden by `minHeight` or `height` unset any existing rule.
 		inlineStyleOverrides.minHeight = 'unset';
-	} else if ( minHeight || style?.dimensions?.minHeight ) {
-		// To ensure the minHeight does not get overridden by `aspectRatio` unset any existing rule.
+		inlineStyleOverrides.height = 'unset';
+	} else if (
+		minHeight ||
+		style?.dimensions?.minHeight ||
+		height ||
+		style?.dimensions?.height
+	) {
+		// To ensure height properties do not get overridden by `aspectRatio` unset any existing rule.
 		inlineStyleOverrides.aspectRatio = 'unset';
 	}
 

package/src/hooks/fit-text.js

@@ -3,10 +3,17 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { useEffect, useCallback } from '@wordpress/element';
+import { useEffect, useCallback, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import {
+	ToggleControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 const EMPTY_OBJECT = {};
+const MIN_FONT_SIZE_FOR_WARNING = 6;
 
 /**
  * Internal dependencies
@@ -14,6 +21,8 @@ const EMPTY_OBJECT = {};
 import { optimizeFitText } from '../utils/fit-text-utils';
 import { store as blockEditorStore } from '../store';
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+import InspectorControls from '../components/inspector-controls';
+import FitTextSizeWarning from '../components/fit-text-size-warning';
 
 export const FIT_TEXT_SUPPORT_KEY = 'typography.fitText';
 
@@ -55,6 +64,7 @@ function addAttributes( settings ) {
  * @param {string}   props.clientId Block client ID.
  */
 function useFitText( { fitText, name, clientId } ) {
+	const [ fontSize, setFontSize ] = useState( null );
 	const hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );
 	const blockElement = useBlockElement( clientId );
 
@@ -91,15 +101,16 @@ function useFitText( { fitText, name, clientId } ) {
 
 		const blockSelector = `#block-${ clientId }`;
 
-		const applyFontSize = ( fontSize ) => {
-			if ( fontSize === 0 ) {
+		const applyFontSizeStyle = ( size ) => {
+			if ( size === 0 ) {
 				styleElement.textContent = '';
 			} else {
-				styleElement.textContent = `${ blockSelector } { font-size: ${ fontSize }px !important; }`;
+				styleElement.textContent = `${ blockSelector } { font-size: ${ size }px !important; }`;
 			}
 		};
 
-		optimizeFitText( blockElement, applyFontSize );
+		const optimalSize = optimizeFitText( blockElement, applyFontSizeStyle );
+		setFontSize( optimalSize );
 	}, [ blockElement, clientId, hasFitTextSupport, fitText ] );
 
 	useEffect( () => {
@@ -199,6 +210,80 @@ function useFitText( { fitText, name, clientId } ) {
 		blockElement,
 		hasFitTextSupport,
 	] );
+
+	return { fontSize };
+}
+
+/**
+ * Fit text control component for the typography panel.
+ *
+ * @param {Object}      props               Component props.
+ * @param {string}      props.clientId      Block client ID.
+ * @param {Function}    props.setAttributes Function to set block attributes.
+ * @param {string}      props.name          Block name.
+ * @param {boolean}     props.fitText       Whether fit text is enabled.
+ * @param {string}      props.fontSize      Font size slug.
+ * @param {Object}      props.style         Block style object.
+ * @param {JSX.Element} props.warning       Warning component to display.
+ */
+export function FitTextControl( {
+	clientId,
+	fitText = false,
+	setAttributes,
+	name,
+	fontSize,
+	style,
+	warning,
+} ) {
+	if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
+		return null;
+	}
+	return (
+		<InspectorControls group="typography">
+			<ToolsPanelItem
+				hasValue={ () => fitText }
+				label={ __( 'Fit text' ) }
+				onDeselect={ () => setAttributes( { fitText: undefined } ) }
+				resetAllFilter={ () => ( { fitText: undefined } ) }
+				panelId={ clientId }
+			>
+				<ToggleControl
+					label={ __( 'Fit text' ) }
+					checked={ fitText }
+					onChange={ () => {
+						const newFitText = ! fitText || undefined;
+						const updates = { fitText: newFitText };
+
+						// When enabling fit text, clear font size if it has a value
+						if ( newFitText ) {
+							if ( fontSize ) {
+								updates.fontSize = undefined;
+							}
+							if ( style?.typography?.fontSize ) {
+								updates.style = {
+									...style,
+									typography: {
+										...style?.typography,
+										fontSize: undefined,
+									},
+								};
+							}
+						}
+
+						setAttributes( updates );
+					} }
+					help={
+						fitText
+							? __( 'Text will resize to fit its container.' )
+							: __(
+									'The text will resize to fit its container, resetting other font size settings.'
+							  )
+					}
+				/>
+				{ warning }
+			</ToolsPanelItem>
+		</InspectorControls>
+	);
 }
 
 /**
@@ -230,23 +315,22 @@ function addSaveProps( props, blockType, attributes ) {
 		className,
 	};
 }
+
 /**
  * Override props applied to the block element in the editor.
  *
- * @param {Object}  props          Component props including block attributes.
- * @param {string}  props.name     Block name.
- * @param {boolean} props.fitText  Whether fit text is enabled.
- * @param {string}  props.clientId Block client ID.
+ * @param {Object}  props         Component props including block attributes.
+ * @param {string}  props.name    Block name.
+ * @param {boolean} props.fitText Whether fit text is enabled.
  * @return {Object} Filtered props applied to the block element.
  */
-function useBlockProps( { name, fitText, clientId } ) {
-	useFitText( { fitText, name, clientId } );
-	if ( ! fitText || ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
-		return {};
+function useBlockProps( { name, fitText } ) {
+	if ( fitText && hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
+		return {
+			className: 'has-fit-text',
+		};
 	}
-	return {
-		className: 'has-fit-text',
-	};
+	return {};
 }
 
 addFilter(
@@ -259,10 +343,83 @@ const hasFitTextSupport = ( blockNameOrType ) => {
 	return hasBlockSupport( blockNameOrType, FIT_TEXT_SUPPORT_KEY );
 };
 
+function FitTextEdit( props ) {
+	const { name, attributes, clientId, isSelected, setAttributes } = props;
+	const { fitText } = attributes;
+	const { fontSize } = useFitText( { fitText, name, clientId } );
+
+	return (
+		isSelected && (
+			<FitTextControl
+				clientId={ clientId }
+				fitText={ fitText }
+				setAttributes={ setAttributes }
+				name={ name }
+				fontSize={ attributes.fontSize }
+				style={ attributes.style }
+				warning={
+					fontSize < MIN_FONT_SIZE_FOR_WARNING && (
+						<FitTextSizeWarning />
+					)
+				}
+			/>
+		)
+	);
+}
+
+/**
+ * Higher-order component that when fit text is enabled,
+ * adds the FitTextEdit component to the block's edit interface.
+ * We could not use the expored edit component because, we need
+ * this to added even when the block is not selected to ensure
+ * the fit text calculations are done.
+ */
+const withFitTextEdit = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		const { name, attributes, clientId, isSelected, setAttributes } = props;
+		const { fitText } = attributes;
+		const supportsFitText = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );
+		if ( ! supportsFitText ) {
+			return <BlockEdit { ...props } />;
+		}
+		return (
+			<>
+				<BlockEdit { ...props } />
+				{ fitText && (
+					<FitTextEdit
+						clientId={ clientId }
+						fitText={ fitText }
+						setAttributes={ props.setAttributes }
+						name={ name }
+						attributes={ attributes }
+						isSelected={ isSelected }
+					/>
+				) }
+				{ ! fitText && isSelected && (
+					<FitTextControl
+						clientId={ clientId }
+						fitText={ fitText }
+						setAttributes={ setAttributes }
+						name={ name }
+						fontSize={ attributes.fontSize }
+						style={ attributes.style }
+					/>
+				) }
+			</>
+		);
+	};
+}, 'withFitTextEdit' );
+
+addFilter(
+	'editor.BlockEdit',
+	'core/fit-text/with-fit-text-edit',
+	withFitTextEdit
+);
+
 export default {
 	useBlockProps,
 	addSaveProps,
-	attributeKeys: [ 'fitText' ],
+	attributeKeys: [ 'fitText', 'fontSize', 'style' ],
 	hasSupport: hasFitTextSupport,
 	edit: () => null,
 };

package/src/hooks/font-size.js

@@ -92,16 +92,11 @@ function addSaveProps( props, blockNameOrType, attributes ) {
  */
 export function FontSizeEdit( props ) {
 	const {
-		attributes: { fontSize, style, fitText },
+		attributes: { fontSize, style },
 		setAttributes,
 	} = props;
-
 	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
-	// Hide font size UI when fitText is enabled
-	if ( fitText ) {
-		return null;
-	}
 	const onChange = ( value, selectedItem ) => {
 		// Use the selectedItem's slug if available, otherwise fall back to finding by value
 		const fontSizeSlug =
@@ -216,7 +211,7 @@ function useBlockProps( { name, fontSize, style } ) {
 export default {
 	useBlockProps,
 	addSaveProps,
-	attributeKeys: [ 'fontSize', 'style', 'fitText' ],
+	attributeKeys: [ 'fontSize', 'style' ],
 	hasSupport( name ) {
 		return hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY );
 	},

package/src/hooks/layout.js

@@ -236,7 +236,6 @@ function LayoutPanelPure( {
 					{ showInheritToggle && (
 						<>
 							<ToggleControl
-								__nextHasNoMarginBottom
 								label={ __( 'Inner blocks use content width' ) }
 								checked={
 									layoutType?.name === 'constrained' ||
@@ -323,7 +322,6 @@ function LayoutTypeSwitcher( { type, onChange } ) {
 			__next40pxDefaultSize
 			isBlock
 			label={ __( 'Layout type' ) }
-			__nextHasNoMarginBottom
 			hideLabelFromVision
 			isAdaptiveWidth
 			value={ type }

package/src/hooks/position.js

@@ -268,10 +268,7 @@ export function PositionPanelPure( {
 		web:
 			options.length > 1 ? (
 				<InspectorControls group="position">
-					<BaseControl
-						__nextHasNoMarginBottom
-						help={ stickyHelpText }
-					>
+					<BaseControl help={ stickyHelpText }>
 						<CustomSelectControl
 							__next40pxDefaultSize
 							label={ __( 'Position' ) }

package/src/hooks/spacing-visualizer.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useState, useRef, useEffect, useReducer } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
+import { isShallowEqual } from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies

package/src/hooks/test/__snapshots__/anchor.native.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`anchor should set the ID attribute on the block 1`] = `
-"<!-- wp:paragraph -->
+"<!-- wp:paragraph {"anchor":"my-anchor"} -->
 <p id="my-anchor"></p>
 <!-- /wp:paragraph -->"
 `;