@wordpress/block-editor 12.19.2 → 12.20.0

package/src/components/rich-text/format-toolbar-container.js

@@ -3,13 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Popover, ToolbarGroup } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import {
-	isCollapsed,
-	getActiveFormats,
-	useAnchor,
-	store as richTextStore,
-} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -17,22 +10,6 @@ import {
 import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
 import NavigableToolbar from '../navigable-toolbar';
-import { store as blockEditorStore } from '../../store';
-
-function InlineSelectionToolbar( { editableContentElement, activeFormats } ) {
-	const lastFormat = activeFormats[ activeFormats.length - 1 ];
-	const lastFormatType = lastFormat?.type;
-	const settings = useSelect(
-		( select ) => select( richTextStore ).getFormatType( lastFormatType ),
-		[ lastFormatType ]
-	);
-	const popoverAnchor = useAnchor( {
-		editableContentElement,
-		settings,
-	} );
-
-	return <InlineToolbar popoverAnchor={ popoverAnchor } />;
-}
 
 function InlineToolbar( { popoverAnchor } ) {
 	return (
@@ -56,35 +33,11 @@ function InlineToolbar( { popoverAnchor } ) {
 	);
 }
 
-const FormatToolbarContainer = ( {
-	inline,
-	editableContentElement,
-	value,
-} ) => {
-	const hasInlineToolbar = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
-		[]
-	);
-
+const FormatToolbarContainer = ( { inline, editableContentElement } ) => {
 	if ( inline ) {
 		return <InlineToolbar popoverAnchor={ editableContentElement } />;
 	}
 
-	if ( hasInlineToolbar ) {
-		const activeFormats = getActiveFormats( value );
-
-		if ( isCollapsed( value ) && ! activeFormats.length ) {
-			return null;
-		}
-
-		return (
-			<InlineSelectionToolbar
-				editableContentElement={ editableContentElement }
-				activeFormats={ activeFormats }
-			/>
-		);
-	}
-
 	// Render regular toolbar.
 	return (
 		<BlockControls group="inline">

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

@@ -156,12 +156,19 @@ export function RichTextWrapper(
 			for ( const [ attribute, args ] of Object.entries(
 				blockBindings
 			) ) {
-				// If any of the attributes with source "rich-text" is part of the bindings,
-				// has a source with `lockAttributesEditing`, disable it.
 				if (
-					blockTypeAttributes?.[ attribute ]?.source ===
-						'rich-text' &&
-					getBlockBindingsSource( args.source )?.lockAttributesEditing
+					blockTypeAttributes?.[ attribute ]?.source !== 'rich-text'
+				) {
+					break;
+				}
+
+				// If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it.
+				const blockBindingsSource = getBlockBindingsSource(
+					args.source
+				);
+				if (
+					! blockBindingsSource ||
+					blockBindingsSource.lockAttributesEditing
 				) {
 					shouldDisableEditing = true;
 					break;
@@ -348,7 +355,6 @@ export function RichTextWrapper(
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
 					editableContentElement={ anchorRef.current }
-					value={ value }
 				/>
 			) }
 			<TagName

package/src/components/rich-text/use-paste-handler.js

@@ -58,13 +58,35 @@ export function usePasteHandler( props ) {
 			const isInternal =
 				event.clipboardData.getData( 'rich-text' ) === 'true';
 
+			function pasteInline( content ) {
+				const transformed = formatTypes.reduce(
+					( accumulator, { __unstablePasteRule } ) => {
+						// Only allow one transform.
+						if ( __unstablePasteRule && accumulator === value ) {
+							accumulator = __unstablePasteRule( value, {
+								html,
+								plainText,
+							} );
+						}
+
+						return accumulator;
+					},
+					value
+				);
+				if ( transformed !== value ) {
+					onChange( transformed );
+				} else {
+					const valueToInsert = create( { html: content } );
+					addActiveFormats( valueToInsert, value.activeFormats );
+					onChange( insert( value, valueToInsert ) );
+				}
+			}
+
 			// If the data comes from a rich text instance, we can directly use it
 			// without filtering the data. The filters are only meant for externally
 			// pasted content and remove inline styles.
 			if ( isInternal ) {
-				const pastedValue = create( { html } );
-				addActiveFormats( pastedValue, value.activeFormats );
-				onChange( insert( value, pastedValue ) );
+				pasteInline( html );
 				return;
 			}
 
@@ -135,28 +157,7 @@ export function usePasteHandler( props ) {
 			} );
 
 			if ( typeof content === 'string' ) {
-				const transformed = formatTypes.reduce(
-					( accumlator, { __unstablePasteRule } ) => {
-						// Only allow one transform.
-						if ( __unstablePasteRule && accumlator === value ) {
-							accumlator = __unstablePasteRule( value, {
-								html,
-								plainText,
-							} );
-						}
-
-						return accumlator;
-					},
-					value
-				);
-
-				if ( transformed !== value ) {
-					onChange( transformed );
-				} else {
-					const valueToInsert = create( { html: content } );
-					addActiveFormats( valueToInsert, value.activeFormats );
-					onChange( insert( value, valueToInsert ) );
-				}
+				pasteInline( content );
 			} else if ( content.length > 0 ) {
 				if ( onReplace && isEmpty( value ) ) {
 					onReplace( content, content.length - 1, -1 );

package/src/components/skip-to-selected-block/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 
@@ -11,7 +11,14 @@ import { Button } from '@wordpress/components';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
-const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
+ */
+export default function SkipToSelectedBlock() {
+	const selectedBlockClientId = useSelect(
+		( select ) => select( blockEditorStore ).getBlockSelectionStart(),
+		[]
+	);
 	const ref = useBlockRef( selectedBlockClientId );
 	const onClick = () => {
 		ref.current.focus();
@@ -26,14 +33,4 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 			{ __( 'Skip to the selected block' ) }
 		</Button>
 	) : null;
-};
-
-/**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
- */
-export default withSelect( ( select ) => {
-	return {
-		selectedBlockClientId:
-			select( blockEditorStore ).getBlockSelectionStart(),
-	};
-} )( SkipToSelectedBlock );
+}

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -297,7 +297,6 @@ export default function SpacingInputControl( {
 					options={ options }
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
-					__nextUnconstrainedWidth={ true }
 					size={ '__unstable-large' }
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import scrollIntoView from 'dom-scroll-into-view';
 
 /**
  * WordPress dependencies
@@ -83,21 +82,13 @@ class URLInput extends Component {
 		if (
 			showSuggestions &&
 			selectedSuggestion !== null &&
-			this.suggestionNodes[ selectedSuggestion ] &&
-			! this.scrollingIntoView
+			this.suggestionNodes[ selectedSuggestion ]
 		) {
-			this.scrollingIntoView = true;
-			scrollIntoView(
-				this.suggestionNodes[ selectedSuggestion ],
-				this.autocompleteRef.current,
-				{
-					onlyScrollIfNeeded: true,
-				}
-			);
-
-			this.props.setTimeout( () => {
-				this.scrollingIntoView = false;
-			}, 100 );
+			this.suggestionNodes[ selectedSuggestion ].scrollIntoView( {
+				behavior: 'instant',
+				block: 'nearest',
+				inline: 'nearest',
+			} );
 		}
 
 		// Update suggestions when the value changes.

package/src/hooks/anchor.scss

@@ -1,4 +1,4 @@
 .html-anchor-control .components-external-link {
-	display: block;
+	display: inline-block;
 	margin-top: $grid-unit-10;
 }

package/src/hooks/background.js

@@ -374,11 +374,14 @@ function backgroundSizeHelpText( value ) {
 }
 
 export const coordsToBackgroundPosition = ( value ) => {
-	if ( ! value || isNaN( value.x ) || isNaN( value.y ) ) {
+	if ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {
 		return undefined;
 	}
 
-	return `${ value.x * 100 }% ${ value.y * 100 }%`;
+	const x = isNaN( value.x ) ? 0.5 : value.x;
+	const y = isNaN( value.y ) ? 0.5 : value.y;
+
+	return `${ x * 100 }% ${ y * 100 }%`;
 };
 
 export const backgroundPositionToCoords = ( value ) => {

package/src/hooks/layout-child.js

@@ -9,13 +9,16 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../store';
 import { useStyleOverride } from './utils';
+import { useLayout } from '../components/block-list/layout';
 
 function useBlockPropsChildLayoutStyles( { style } ) {
 	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
 		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
 	} );
 	const layout = style?.layout ?? {};
-	const { selfStretch, flexSize } = layout;
+	const { selfStretch, flexSize, columnSpan, rowSpan } = layout;
+	const parentLayout = useLayout() || {};
+	const { columnCount, minimumColumnWidth } = parentLayout;
 	const id = useInstanceId( useBlockPropsChildLayoutStyles );
 	const selector = `.wp-container-content-${ id }`;
 
@@ -30,6 +33,55 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 			css = `${ selector } {
 				flex-grow: 1;
 			}`;
+		} else if ( columnSpan ) {
+			css = `${ selector } {
+				grid-column: span ${ columnSpan };
+			}`;
+		}
+		/**
+		 * If minimumColumnWidth is set on the parent, or if no
+		 * columnCount is set, the grid is responsive so a
+		 * container query is needed for the span to resize.
+		 */
+		if ( columnSpan && ( minimumColumnWidth || ! columnCount ) ) {
+			// Calculate the container query value.
+			const columnSpanNumber = parseInt( columnSpan );
+			let parentColumnValue = parseFloat( minimumColumnWidth );
+			/**
+			 * 12rem is the default minimumColumnWidth value.
+			 * If parentColumnValue is not a number, default to 12.
+			 */
+			if ( isNaN( parentColumnValue ) ) {
+				parentColumnValue = 12;
+			}
+
+			let parentColumnUnit = minimumColumnWidth?.replace(
+				parentColumnValue,
+				''
+			);
+			/**
+			 * Check that parent column unit is either 'px', 'rem' or 'em'.
+			 * If not, default to 'rem'.
+			 */
+			if ( ! [ 'px', 'rem', 'em' ].includes( parentColumnUnit ) ) {
+				parentColumnUnit = 'rem';
+			}
+
+			const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
+			const containerQueryValue =
+				columnSpanNumber * parentColumnValue +
+				( columnSpanNumber - 1 ) * defaultGapValue;
+
+			css += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) {
+				${ selector } {
+					grid-column: 1 / -1;
+				}
+			}`;
+		}
+		if ( rowSpan ) {
+			css += `${ selector } {
+				grid-row: span ${ rowSpan };
+			}`;
 		}
 	}
 

package/src/hooks/position.js

@@ -288,7 +288,6 @@ export function PositionPanelPure( {
 						help={ stickyHelpText }
 					>
 						<CustomSelectControl
-							__nextUnconstrainedWidth
 							__next40pxDefaultSize
 							className="block-editor-hooks__position-selection__select-control"
 							label={ __( 'Position' ) }

package/src/layouts/grid.js

@@ -8,9 +8,13 @@ import {
 	Flex,
 	FlexItem,
 	RangeControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -51,6 +55,12 @@ const RANGE_CONTROL_MAX_VALUES = {
 	dvmax: 100,
 };
 
+const units = [
+	{ value: 'px', label: 'px', default: 0 },
+	{ value: 'rem', label: 'rem', default: 0 },
+	{ value: 'em', label: 'em', default: 0 },
+];
+
 export default {
 	name: 'grid',
 	label: __( 'Grid' ),
@@ -58,13 +68,24 @@ export default {
 		layout = {},
 		onChange,
 	} ) {
-		return layout?.columnCount ? (
-			<GridLayoutColumnsControl layout={ layout } onChange={ onChange } />
-		) : (
-			<GridLayoutMinimumWidthControl
-				layout={ layout }
-				onChange={ onChange }
-			/>
+		return (
+			<>
+				<GridLayoutTypeControl
+					layout={ layout }
+					onChange={ onChange }
+				/>
+				{ layout?.columnCount ? (
+					<GridLayoutColumnsControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				) : (
+					<GridLayoutMinimumWidthControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				) }
+			</>
 		);
 	},
 	toolBarControls: function DefaultLayoutToolbarControls() {
@@ -97,7 +118,8 @@ export default {
 			);
 		} else if ( minimumColumnWidth ) {
 			rules.push(
-				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`
+				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
+				`container-type: inline-size`
 			);
 		}
 
@@ -152,38 +174,6 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 		} else if ( [ 'em', 'rem' ].includes( unit ) && newUnit === 'px' ) {
 			// Convert to pixel value assuming a root size of 16px.
 			newValue = Math.round( quantity * 16 ) + newUnit;
-		} else if (
-			[
-				'vh',
-				'vw',
-				'%',
-				'svw',
-				'lvw',
-				'dvw',
-				'svh',
-				'lvh',
-				'dvh',
-				'vi',
-				'svi',
-				'lvi',
-				'dvi',
-				'vb',
-				'svb',
-				'lvb',
-				'dvb',
-				'vmin',
-				'svmin',
-				'lvmin',
-				'dvmin',
-				'vmax',
-				'svmax',
-				'lvmax',
-				'dvmax',
-			].includes( newUnit ) &&
-			quantity > 100
-		) {
-			// When converting to `%` or viewport-relative units, cap the new value at 100.
-			newValue = 100 + newUnit;
 		}
 
 		onChange( {
@@ -209,7 +199,10 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 						} }
 						onUnitChange={ handleUnitChange }
 						value={ value }
+						units={ units }
 						min={ 0 }
+						label={ __( 'Minimum column width' ) }
+						hideLabelFromVision
 					/>
 				</FlexItem>
 				<FlexItem isBlock>
@@ -219,6 +212,8 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 						min={ 0 }
 						max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }
 						withInputField={ false }
+						label={ __( 'Minimum column width' ) }
+						hideLabelFromVision
 					/>
 				</FlexItem>
 			</Flex>
@@ -231,17 +226,101 @@ function GridLayoutColumnsControl( { layout, onChange } ) {
 	const { columnCount = 3 } = layout;
 
 	return (
-		<RangeControl
-			label={ __( 'Columns' ) }
-			value={ columnCount }
-			onChange={ ( value ) =>
-				onChange( {
-					...layout,
-					columnCount: value,
-				} )
-			}
-			min={ 1 }
-			max={ 6 }
-		/>
+		<fieldset>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Columns' ) }
+			</BaseControl.VisualLabel>
+			<Flex gap={ 4 }>
+				<FlexItem isBlock>
+					<NumberControl
+						size={ '__unstable-large' }
+						onChange={ ( value ) => {
+							/**
+							 * If the input is cleared, avoid switching
+							 * back to "Auto" by setting a value of "1".
+							 */
+							const validValue = value !== '' ? value : '1';
+							onChange( {
+								...layout,
+								columnCount: validValue,
+							} );
+						} }
+						value={ columnCount }
+						min={ 1 }
+						label={ __( 'Columns' ) }
+						hideLabelFromVision
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<RangeControl
+						value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
+						onChange={ ( value ) =>
+							onChange( {
+								...layout,
+								columnCount: value,
+							} )
+						}
+						min={ 1 }
+						max={ 16 }
+						withInputField={ false }
+						label={ __( 'Columns' ) }
+						hideLabelFromVision
+					/>
+				</FlexItem>
+			</Flex>
+		</fieldset>
+	);
+}
+
+// Enables switching between grid types
+function GridLayoutTypeControl( { layout, onChange } ) {
+	const { columnCount, minimumColumnWidth } = layout;
+
+	/**
+	 * When switching, temporarily save any custom values set on the
+	 * previous type so we can switch back without loss.
+	 */
+	const [ tempColumnCount, setTempColumnCount ] = useState(
+		columnCount || 3
+	);
+	const [ tempMinimumColumnWidth, setTempMinimumColumnWidth ] = useState(
+		minimumColumnWidth || '12rem'
+	);
+
+	const isManual = !! columnCount ? 'manual' : 'auto';
+
+	const onChangeType = ( value ) => {
+		if ( value === 'manual' ) {
+			setTempMinimumColumnWidth( minimumColumnWidth || '12rem' );
+		} else {
+			setTempColumnCount( columnCount || 3 );
+		}
+		onChange( {
+			...layout,
+			columnCount: value === 'manual' ? tempColumnCount : null,
+			minimumColumnWidth:
+				value === 'auto' ? tempMinimumColumnWidth : null,
+		} );
+	};
+
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom={ true }
+			label={ __( 'Type' ) }
+			value={ isManual }
+			onChange={ onChangeType }
+			isBlock={ true }
+		>
+			<ToggleGroupControlOption
+				key={ 'auto' }
+				value="auto"
+				label={ __( 'Auto' ) }
+			/>
+			<ToggleGroupControlOption
+				key={ 'manual' }
+				value="manual"
+				label={ __( 'Manual' ) }
+			/>
+		</ToggleGroupControl>
 	);
 }

package/src/layouts/test/grid.js

@@ -4,8 +4,8 @@
 import grid from '../grid';
 
 describe( 'getLayoutStyle', () => {
-	it( 'should return a single `grid-template-columns` property if no non-default params are provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }`;
+	it( 'should return only `grid-template-columns` and `container-type` properties if no non-default params are provided', () => {
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
@@ -16,6 +16,20 @@ describe( 'getLayoutStyle', () => {
 			layoutDefinitions: undefined,
 		} );
 
+		expect( result ).toBe( expected );
+	} );
+	it( 'should return only `grid-template-columns` if columnCount property is provided', () => {
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: { columnCount: 3 },
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
 		expect( result ).toBe( expected );
 	} );
 } );

package/src/private-apis.js

@@ -26,6 +26,7 @@ import { usesContextKey } from './components/rich-text/format-edit';
 import { ExperimentalBlockCanvas } from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
 import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
+import { selectBlockPatternsKey } from './store/private-keys';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -56,4 +57,5 @@ lock( privateApis, {
 	useReusableBlocksRenameHint,
 	usesContextKey,
 	useFlashEditableBlocks,
+	selectBlockPatternsKey,
 } );