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

package/src/components/spacing-sizes-control/style.scss

@@ -6,12 +6,12 @@
 	padding: 0;
 	margin: 0;
 
-	.spacing-sizes-control__unit-control,
+	.spacing-sizes-control__custom-value-input,
 	.spacing-sizes-control__label {
 		margin-bottom: 0;
 	}
 
-	.spacing-sizes-control__preset-range,
+	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
 		flex: 1;
 		margin-bottom: 0; // Needed for some instances of the range control, such as the Spacer block.
@@ -23,14 +23,20 @@
 	margin-bottom: $grid-unit-15;
 }
 
-.spacing-sizes-control__wrapper {
-	align-items: center;
-}
-
 .spacing-sizes-control__dropdown {
 	height: $grid-unit-30;
 }
 
-.spacing-sizes-control__wrapper .preset-input-control__icon {
+.spacing-sizes-control__custom-select-control,
+.spacing-sizes-control__custom-value-input {
+	flex: 1;
+}
+
+.spacing-sizes-control__icon,
+.spacing-sizes-control__custom-toggle {
+	flex: 0 0 auto;
+}
+
+.spacing-sizes-control__icon {
 	margin-left: $grid-unit-05 * -1; // Aligns the icon to the control header.
 }

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

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

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

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

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

@@ -55,6 +55,7 @@ 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 { ...controlProps }>
+			<BaseControl __nextHasNoMarginBottom { ...controlProps }>
 				<InputControl { ...inputProps } __next40pxDefaultSize />
 				{ loading && <Spinner /> }
 			</BaseControl>

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

@@ -228,12 +228,14 @@ 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 }
@@ -250,6 +252,7 @@ const ImageURLInputUI = ( {
 			/>
 			<TextControl
 				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }

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

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

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

@@ -40,6 +40,7 @@ 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,3 +14,7 @@
 @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,6 +20,13 @@ 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.
@@ -37,9 +44,7 @@ export function addAttribute( settings ) {
 		// Gracefully handle if settings.attributes is undefined.
 		settings.attributes = {
 			...settings.attributes,
-			anchor: {
-				type: 'string',
-			},
+			anchor: ANCHOR_SCHEMA,
 		};
 	}
 
@@ -58,6 +63,7 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 	return (
 		<InspectorControls group="advanced">
 			<TextControl
+				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				className="html-anchor-control"
 				label={ __( 'HTML anchor' ) }
@@ -85,7 +91,7 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 				onChange={ ( nextValue ) => {
 					nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
 					setAttributes( {
-						anchor: nextValue !== '' ? nextValue : undefined,
+						anchor: nextValue,
 					} );
 				} }
 				autoCapitalize="none"

package/src/hooks/block-hooks.js

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

package/src/hooks/color.scss

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

package/src/hooks/dimensions.js

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

package/src/hooks/fit-text.js

@@ -3,17 +3,10 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { useEffect, useCallback, useState } from '@wordpress/element';
+import { useEffect, useCallback } 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
@@ -21,8 +14,6 @@ const MIN_FONT_SIZE_FOR_WARNING = 6;
 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';
 
@@ -64,7 +55,6 @@ 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 );
 
@@ -101,16 +91,15 @@ function useFitText( { fitText, name, clientId } ) {
 
 		const blockSelector = `#block-${ clientId }`;
 
-		const applyFontSizeStyle = ( size ) => {
-			if ( size === 0 ) {
+		const applyFontSize = ( fontSize ) => {
+			if ( fontSize === 0 ) {
 				styleElement.textContent = '';
 			} else {
-				styleElement.textContent = `${ blockSelector } { font-size: ${ size }px !important; }`;
+				styleElement.textContent = `${ blockSelector } { font-size: ${ fontSize }px !important; }`;
 			}
 		};
 
-		const optimalSize = optimizeFitText( blockElement, applyFontSizeStyle );
-		setFontSize( optimalSize );
+		optimizeFitText( blockElement, applyFontSize );
 	}, [ blockElement, clientId, hasFitTextSupport, fitText ] );
 
 	useEffect( () => {
@@ -210,80 +199,6 @@ 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>
-	);
 }
 
 /**
@@ -315,22 +230,23 @@ 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 {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.
  * @return {Object} Filtered props applied to the block element.
  */
-function useBlockProps( { name, fitText } ) {
-	if ( fitText && hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
-		return {
-			className: 'has-fit-text',
-		};
+function useBlockProps( { name, fitText, clientId } ) {
+	useFitText( { fitText, name, clientId } );
+	if ( ! fitText || ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
+		return {};
 	}
-	return {};
+	return {
+		className: 'has-fit-text',
+	};
 }
 
 addFilter(
@@ -343,83 +259,10 @@ 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', 'fontSize', 'style' ],
+	attributeKeys: [ 'fitText' ],
 	hasSupport: hasFitTextSupport,
 	edit: () => null,
 };

package/src/hooks/font-size.js

@@ -92,11 +92,16 @@ function addSaveProps( props, blockNameOrType, attributes ) {
  */
 export function FontSizeEdit( props ) {
 	const {
-		attributes: { fontSize, style },
+		attributes: { fontSize, style, fitText },
 		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 =
@@ -211,7 +216,7 @@ function useBlockProps( { name, fontSize, style } ) {
 export default {
 	useBlockProps,
 	addSaveProps,
-	attributeKeys: [ 'fontSize', 'style' ],
+	attributeKeys: [ 'fontSize', 'style', 'fitText' ],
 	hasSupport( name ) {
 		return hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY );
 	},

package/src/hooks/layout.js

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

package/src/hooks/position.js

@@ -268,7 +268,10 @@ export function PositionPanelPure( {
 		web:
 			options.length > 1 ? (
 				<InspectorControls group="position">
-					<BaseControl help={ stickyHelpText }>
+					<BaseControl
+						__nextHasNoMarginBottom
+						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 {"anchor":"my-anchor"} -->
+"<!-- wp:paragraph -->
 <p id="my-anchor"></p>
 <!-- /wp:paragraph -->"
 `;

package/src/hooks/typography.js

@@ -31,7 +31,6 @@ function omit( object, keys ) {
 const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
 const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
 const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
-const TEXT_INDENT_SUPPORT_KEY = 'typography.textIndent';
 const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
@@ -46,7 +45,6 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	TEXT_ALIGN_SUPPORT_KEY,
 	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
-	TEXT_INDENT_SUPPORT_KEY,
 	WRITING_MODE_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,
@@ -146,16 +144,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 	);
 
 	const onChange = ( newStyle ) => {
-		const newAttributes = styleToAttributes( newStyle );
-
-		// If setting a font size and fitText is currently enabled, disable it
-		const hasFontSize =
-			newAttributes.fontSize || newAttributes.style?.typography?.fontSize;
-		if ( hasFontSize && fitText ) {
-			newAttributes.fitText = undefined;
-		}
-
-		setAttributes( newAttributes );
+		setAttributes( styleToAttributes( newStyle ) );
 	};
 
 	if ( ! isEnabled ) {
@@ -175,6 +164,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 			value={ value }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
+			fitText={ fitText }
 		/>
 	);
 }