@wordpress/block-editor 14.1.0 → 14.2.1-next.5368f64a9.0

package/src/hooks/content-lock-ui.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, MenuItem } from '@wordpress/components';
+import { ToolbarButton } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from '@wordpress/element';
@@ -10,7 +10,7 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
-import { BlockControls, BlockSettingsMenuControls } from '../components';
+import { BlockControls } from '../components';
 import { unlock } from '../lock-unlock';
 
 // The implementation of content locking is mainly in this file, although the mechanism
@@ -19,7 +19,7 @@ import { unlock } from '../lock-unlock';
 // Besides the components on this file and the file referenced above the implementation
 // also includes artifacts on the store (actions, reducers, and selector).
 
-function ContentLockControlsPure( { clientId, isSelected } ) {
+function ContentLockControlsPure( { clientId } ) {
 	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -36,9 +36,7 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 		[ clientId ]
 	);
 
-	const { stopEditingAsBlocks, modifyContentLockBlock } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
 
@@ -51,38 +49,15 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 	}
 
 	const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
-	const showStartEditingAsBlocks =
-		! isEditingAsBlocks && isContentLocked && isSelected;
 
 	return (
-		<>
-			{ showStopEditingAsBlocks && (
-				<>
-					<BlockControls group="other">
-						<ToolbarButton onClick={ stopEditingAsBlockCallback }>
-							{ __( 'Done' ) }
-						</ToolbarButton>
-					</BlockControls>
-				</>
-			) }
-			{ showStartEditingAsBlocks && (
-				<BlockSettingsMenuControls>
-					{ ( { selectedClientIds, onClose } ) =>
-						selectedClientIds.length === 1 &&
-						selectedClientIds[ 0 ] === clientId && (
-							<MenuItem
-								onClick={ () => {
-									modifyContentLockBlock( clientId );
-									onClose();
-								} }
-							>
-								{ __( 'Modify' ) }
-							</MenuItem>
-						)
-					}
-				</BlockSettingsMenuControls>
-			) }
-		</>
+		showStopEditingAsBlocks && (
+			<BlockControls group="other">
+				<ToolbarButton onClick={ stopEditingAsBlockCallback }>
+					{ __( 'Done' ) }
+				</ToolbarButton>
+			</BlockControls>
+		)
 	);
 }
 

package/src/hooks/duotone.js

@@ -251,10 +251,6 @@ function useDuotoneStyles( {
 	const selectors = duotoneSelector.split( ',' );
 
 	const selectorsScoped = selectors.map( ( selectorPart ) => {
-		// Extra .editor-styles-wrapper specificity is needed in the editor
-		// since we're not using inline styles to apply the filter. We need to
-		// override duotone applied by global styles and theme.json.
-
 		// Assuming the selector part is a subclass selector (not a tag name)
 		// so we can prepend the filter id class. If we want to support elements
 		// such as `img` or namespaces, we'll need to add a case for that here.

package/src/hooks/layout.js

@@ -233,7 +233,6 @@ function LayoutPanelPure( {
 						<>
 							<ToggleControl
 								__nextHasNoMarginBottom
-								className="block-editor-hooks__toggle-control"
 								label={ __( 'Inner blocks use content width' ) }
 								checked={
 									layoutType?.name === 'constrained' ||
@@ -320,6 +319,8 @@ function LayoutTypeSwitcher( { type, onChange } ) {
 			{ getLayoutTypes().map( ( { name, label } ) => {
 				return (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						key={ name }
 						isPressed={ type === name }
 						onClick={ () => onChange( name ) }

package/src/hooks/layout.scss

@@ -1,31 +1,13 @@
-.block-editor-hooks__layout-controls {
-	display: flex;
-	margin-bottom: $grid-unit-10;
-
-	.block-editor-hooks__layout-controls-unit {
-		display: flex;
-		margin-right: $grid-unit-30;
-
-		svg {
-			margin: auto 0 $grid-unit-05 $grid-unit-10;
-		}
+.block-editor-hooks__layout-constrained {
+	.components-base-control {
+		margin-bottom: 0; // Cancel out margins added by block inspector
 	}
 }
 
-.block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
-	margin-bottom: 0;
-}
-
-.block-editor-hooks__layout-controls-reset {
-	display: flex;
-	justify-content: flex-end;
-	margin-bottom: $grid-unit-30;
-}
-
-.block-editor-hooks__layout-controls-helptext {
+.block-editor-hooks__layout-constrained-helptext {
 	color: $gray-700;
 	font-size: $helptext-font-size;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: 0; // Cancel out margins added by common.css
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
@@ -35,7 +17,3 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
-
-.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
-	margin-bottom: $grid-unit-20;
-}

package/src/hooks/spacing-visualizer.js

@@ -36,16 +36,16 @@ function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
 		);
 	}, [ blockElement, value ] );
 
-	const previousValue = useRef( value );
+	const previousValueRef = useRef( value );
 	const [ isActive, setIsActive ] = useState( false );
 
 	useEffect( () => {
-		if ( isShallowEqual( value, previousValue.current ) || forceShow ) {
+		if ( isShallowEqual( value, previousValueRef.current ) || forceShow ) {
 			return;
 		}
 
 		setIsActive( true );
-		previousValue.current = value;
+		previousValueRef.current = value;
 
 		const timeout = setTimeout( () => {
 			setIsActive( false );

package/src/hooks/style.js

@@ -381,10 +381,7 @@ function useBlockProps( { name, style } ) {
 		useBlockProps
 	) }`;
 
-	// The .editor-styles-wrapper selector is required on elements styles. As it is
-	// added to all other editor styles, not providing it causes reset and global
-	// styles to override element styles because of higher specificity.
-	const baseElementSelector = `.editor-styles-wrapper .${ blockElementsContainerIdentifier }`;
+	const baseElementSelector = `.${ blockElementsContainerIdentifier }`;
 	const blockElementStyles = style?.elements;
 
 	const styles = useMemo( () => {

package/src/hooks/use-bindings-attributes.js

@@ -10,6 +10,7 @@ import { addFilter } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
+import isURLLike from '../components/link-control/is-url-like';
 import { unlock } from '../lock-unlock';
 import BlockContext from '../components/block-context';
 
@@ -134,10 +135,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			) ) {
 				const { source: sourceName, args: sourceArgs } = binding;
 				const source = sources[ sourceName ];
-				if (
-					! source?.getValues ||
-					! canBindAttribute( name, attributeName )
-				) {
+				if ( ! source || ! canBindAttribute( name, attributeName ) ) {
 					continue;
 				}
 
@@ -161,29 +159,30 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 					}
 
 					// Get values in batch if the source supports it.
-					const values = source.getValues( {
-						registry,
-						context,
-						clientId,
-						bindings,
-					} );
+					let values = {};
+					if ( ! source.getValues ) {
+						Object.keys( bindings ).forEach( ( attr ) => {
+							// Default to the `key` or the source label when `getValues` doesn't exist
+							values[ attr ] =
+								bindings[ attr ].args?.key || source.label;
+						} );
+					} else {
+						values = source.getValues( {
+							registry,
+							context,
+							clientId,
+							bindings,
+						} );
+					}
 					for ( const [ attributeName, value ] of Object.entries(
 						values
 					) ) {
-						// Use placeholder when value is undefined.
-						if ( value === undefined ) {
-							if ( attributeName === 'url' ) {
-								attributes[ attributeName ] = null;
-							} else {
-								attributes[ attributeName ] =
-									source.getPlaceholder?.( {
-										registry,
-										context,
-										clientId,
-										attributeName,
-										args: bindings[ attributeName ].args,
-									} );
-							}
+						if (
+							attributeName === 'url' &&
+							( ! value || ! isURLLike( value ) )
+						) {
+							// Return null if value is not a valid URL.
+							attributes[ attributeName ] = null;
 						} else {
 							attributes[ attributeName ] = value;
 						}

package/src/hooks/use-zoom-out.js

@@ -18,22 +18,22 @@ export function useZoomOut( zoomOut = true ) {
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
 
-	const originalEditingMode = useRef( null );
+	const originalEditingModeRef = useRef( null );
 	const mode = __unstableGetEditorMode();
 
 	useEffect( () => {
 		// Only set this on mount so we know what to return to when we unmount.
-		if ( ! originalEditingMode.current ) {
-			originalEditingMode.current = mode;
+		if ( ! originalEditingModeRef.current ) {
+			originalEditingModeRef.current = mode;
 		}
 
 		return () => {
 			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
 			if (
 				__unstableGetEditorMode() === 'zoom-out' &&
-				__unstableGetEditorMode() !== originalEditingMode.current
+				__unstableGetEditorMode() !== originalEditingModeRef.current
 			) {
-				__unstableSetEditorMode( originalEditingMode.current );
+				__unstableSetEditorMode( originalEditingModeRef.current );
 			}
 		};
 	}, [] );
@@ -45,9 +45,9 @@ export function useZoomOut( zoomOut = true ) {
 		} else if (
 			! zoomOut &&
 			__unstableGetEditorMode() === 'zoom-out' &&
-			originalEditingMode.current !== mode
+			originalEditingModeRef.current !== mode
 		) {
-			__unstableSetEditorMode( originalEditingMode.current );
+			__unstableSetEditorMode( originalEditingModeRef.current );
 		}
 	}, [ __unstableGetEditorMode, __unstableSetEditorMode, zoomOut ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
 }

package/src/layouts/constrained.js

@@ -6,11 +6,13 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	Icon,
-	positionCenter,
+	alignNone,
 	stretchWide,
 	justifyLeft,
 	justifyCenter,
@@ -69,54 +71,57 @@ export default {
 			availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		} );
 		return (
-			<>
+			<VStack
+				spacing={ 4 }
+				className="block-editor-hooks__layout-constrained"
+			>
 				{ allowCustomContentAndWideSize && (
 					<>
-						<div className="block-editor-hooks__layout-controls">
-							<div className="block-editor-hooks__layout-controls-unit">
-								<UnitControl
-									className="block-editor-hooks__layout-controls-unit-input"
-									label={ __( 'Content' ) }
-									labelPosition="top"
-									__unstableInputWidth="80px"
-									value={ contentSize || wideSize || '' }
-									onChange={ ( nextWidth ) => {
-										nextWidth =
-											0 > parseFloat( nextWidth )
-												? '0'
-												: nextWidth;
-										onChange( {
-											...layout,
-											contentSize: nextWidth,
-										} );
-									} }
-									units={ units }
-								/>
-								<Icon icon={ positionCenter } />
-							</div>
-							<div className="block-editor-hooks__layout-controls-unit">
-								<UnitControl
-									className="block-editor-hooks__layout-controls-unit-input"
-									label={ __( 'Wide' ) }
-									labelPosition="top"
-									__unstableInputWidth="80px"
-									value={ wideSize || contentSize || '' }
-									onChange={ ( nextWidth ) => {
-										nextWidth =
-											0 > parseFloat( nextWidth )
-												? '0'
-												: nextWidth;
-										onChange( {
-											...layout,
-											wideSize: nextWidth,
-										} );
-									} }
-									units={ units }
-								/>
-								<Icon icon={ stretchWide } />
-							</div>
-						</div>
-						<p className="block-editor-hooks__layout-controls-helptext">
+						<UnitControl
+							__next40pxDefaultSize
+							label={ __( 'Content width' ) }
+							labelPosition="top"
+							value={ contentSize || wideSize || '' }
+							onChange={ ( nextWidth ) => {
+								nextWidth =
+									0 > parseFloat( nextWidth )
+										? '0'
+										: nextWidth;
+								onChange( {
+									...layout,
+									contentSize: nextWidth,
+								} );
+							} }
+							units={ units }
+							prefix={
+								<InputControlPrefixWrapper variant="icon">
+									<Icon icon={ alignNone } />
+								</InputControlPrefixWrapper>
+							}
+						/>
+						<UnitControl
+							__next40pxDefaultSize
+							label={ __( 'Wide width' ) }
+							labelPosition="top"
+							value={ wideSize || contentSize || '' }
+							onChange={ ( nextWidth ) => {
+								nextWidth =
+									0 > parseFloat( nextWidth )
+										? '0'
+										: nextWidth;
+								onChange( {
+									...layout,
+									wideSize: nextWidth,
+								} );
+							} }
+							units={ units }
+							prefix={
+								<InputControlPrefixWrapper variant="icon">
+									<Icon icon={ stretchWide } />
+								</InputControlPrefixWrapper>
+							}
+						/>
+						<p className="block-editor-hooks__layout-constrained-helptext">
 							{ __(
 								'Customize the width for all elements that are assigned to the center or wide columns.'
 							) }
@@ -145,7 +150,7 @@ export default {
 						) }
 					</ToggleGroupControl>
 				) }
-			</>
+			</VStack>
 		);
 	},
 	toolBarControls: function DefaultLayoutToolbarControls( {

package/src/layouts/flex.js

@@ -246,6 +246,8 @@ function FlexLayoutVerticalAlignmentControl( {
 				{ verticalAlignmentOptions.map( ( value, icon, label ) => {
 					return (
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							key={ value }
 							label={ label }
 							icon={ icon }

package/src/layouts/grid.js

@@ -13,6 +13,7 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
@@ -74,7 +75,8 @@ export default {
 		// In the experiment we want to also show column control in Auto mode, and
 		// the minimum width control in Manual mode.
 		const showColumnsControl =
-			window.__experimentalEnableGridInteractivity || layout?.columnCount;
+			window.__experimentalEnableGridInteractivity ||
+			!! layout?.columnCount;
 		const showMinWidthControl =
 			window.__experimentalEnableGridInteractivity ||
 			! layout?.columnCount;
@@ -84,19 +86,21 @@ export default {
 					layout={ layout }
 					onChange={ onChange }
 				/>
-				{ showColumnsControl && (
-					<GridLayoutColumnsAndRowsControl
-						layout={ layout }
-						onChange={ onChange }
-						allowSizingOnChildren={ allowSizingOnChildren }
-					/>
-				) }
-				{ showMinWidthControl && (
-					<GridLayoutMinimumWidthControl
-						layout={ layout }
-						onChange={ onChange }
-					/>
-				) }
+				<VStack spacing={ 4 }>
+					{ showColumnsControl && (
+						<GridLayoutColumnsAndRowsControl
+							layout={ layout }
+							onChange={ onChange }
+							allowSizingOnChildren={ allowSizingOnChildren }
+						/>
+					) }
+					{ showMinWidthControl && (
+						<GridLayoutMinimumWidthControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					) }
+				</VStack>
 			</>
 		);
 	},
@@ -317,7 +321,7 @@ function GridLayoutColumnsAndRowsControl( {
 									const defaultNewColumnCount =
 										isManualPlacement ? 1 : undefined;
 									const newColumnCount =
-										value === ''
+										value === '' || value === '0'
 											? defaultNewColumnCount
 											: parseInt( value, 10 );
 									onChange( {
@@ -327,7 +331,7 @@ function GridLayoutColumnsAndRowsControl( {
 								} else {
 									// Don't allow unsetting the column count.
 									const newColumnCount =
-										value === ''
+										value === '' || value === '0'
 											? 1
 											: parseInt( value, 10 );
 									onChange( {
@@ -337,7 +341,7 @@ function GridLayoutColumnsAndRowsControl( {
 								}
 							} }
 							value={ columnCount }
-							min={ 0 }
+							min={ 1 }
 							label={ __( 'Columns' ) }
 							hideLabelFromVision={
 								! window.__experimentalEnableGridInteractivity ||
@@ -355,7 +359,7 @@ function GridLayoutColumnsAndRowsControl( {
 								onChange={ ( value ) => {
 									// Don't allow unsetting the row count.
 									const newRowCount =
-										value === ''
+										value === '' || value === '0'
 											? 1
 											: parseInt( value, 10 );
 									onChange( {
@@ -364,21 +368,24 @@ function GridLayoutColumnsAndRowsControl( {
 									} );
 								} }
 								value={ rowCount }
-								min={ 0 }
+								min={ 1 }
 								label={ __( 'Rows' ) }
 							/>
 						) : (
 							<RangeControl
 								__next40pxDefaultSize
 								__nextHasNoMarginBottom
-								value={ columnCount ?? 0 }
+								value={ columnCount ?? 1 }
 								onChange={ ( value ) =>
 									onChange( {
 										...layout,
-										columnCount: value,
+										columnCount:
+											value === '' || value === '0'
+												? 1
+												: value,
 									} )
 								}
-								min={ 0 }
+								min={ 1 }
 								max={ 16 }
 								withInputField={ false }
 								label={ __( 'Columns' ) }

package/src/layouts/test/grid.js

@@ -5,7 +5,7 @@ import grid from '../grid';
 
 describe( 'getLayoutStyle', () => {
 	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 expected = `.my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
@@ -19,7 +19,7 @@ describe( 'getLayoutStyle', () => {
 		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 expected = `.my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',

package/src/layouts/test/utils.js

@@ -37,7 +37,7 @@ const layoutDefinitions = {
 describe( 'getBlockGapCSS', () => {
 	it( 'should output default blockGap rules', () => {
 		const expected =
-			'.editor-styles-wrapper .my-container > * { margin-block-start: 0; margin-block-end: 0; }.editor-styles-wrapper .my-container > * + * { margin-block-start: 3em; margin-block-end: 0; }';
+			'.my-container > * { margin-block-start: 0; margin-block-end: 0; }.my-container > * + * { margin-block-start: 3em; margin-block-end: 0; }';
 
 		const result = getBlockGapCSS(
 			'.my-container',
@@ -50,7 +50,7 @@ describe( 'getBlockGapCSS', () => {
 	} );
 
 	it( 'should output flex blockGap rules', () => {
-		const expected = '.editor-styles-wrapper .my-container { gap: 3em; }';
+		const expected = '.my-container { gap: 3em; }';
 
 		const result = getBlockGapCSS(
 			'.my-container',
@@ -97,7 +97,7 @@ describe( 'getBlockGapCSS', () => {
 	} );
 
 	it( 'should treat a blockGap string containing 0 as a valid value', () => {
-		const expected = '.editor-styles-wrapper .my-container { gap: 0; }';
+		const expected = '.my-container { gap: 0; }';
 
 		const result = getBlockGapCSS(
 			'.my-container',
@@ -113,21 +113,19 @@ describe( 'getBlockGapCSS', () => {
 describe( 'appendSelectors', () => {
 	it( 'should append a subselector without an appended selector', () => {
 		expect( appendSelectors( '.original-selector' ) ).toBe(
-			'.editor-styles-wrapper .original-selector'
+			'.original-selector'
 		);
 	} );
 
 	it( 'should append a subselector to a single selector', () => {
 		expect( appendSelectors( '.original-selector', '.appended' ) ).toBe(
-			'.editor-styles-wrapper .original-selector .appended'
+			'.original-selector .appended'
 		);
 	} );
 
 	it( 'should append a subselector to multiple selectors', () => {
 		expect(
 			appendSelectors( '.first-selector,.second-selector', '.appended' )
-		).toBe(
-			'.editor-styles-wrapper .first-selector .appended,.editor-styles-wrapper .second-selector .appended'
-		);
+		).toBe( '.first-selector .appended,.second-selector .appended' );
 	} );
 } );

package/src/layouts/utils.js

@@ -17,19 +17,11 @@ import { LAYOUT_DEFINITIONS } from './definitions';
  * @return {string} - CSS selector.
  */
 export function appendSelectors( selectors, append = '' ) {
-	// Ideally we shouldn't need the `.editor-styles-wrapper` increased specificity here
-	// The problem though is that we have a `.editor-styles-wrapper p { margin: reset; }` style
-	// it's used to reset the default margin added by wp-admin to paragraphs
-	// so we need this to be higher speficity otherwise, it won't be applied to paragraphs inside containers
-	// When the post editor is fully iframed, this extra classname could be removed.
-
 	return selectors
 		.split( ',' )
 		.map(
 			( subselector ) =>
-				`.editor-styles-wrapper ${ subselector }${
-					append ? ` ${ append }` : ''
-				}`
+				`${ subselector }${ append ? ` ${ append }` : '' }`
 		)
 		.join( ',' );
 }