@wordpress/block-editor 12.20.0 → 12.22.0

package/src/components/block-tools/index.js

@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
-import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -20,14 +19,13 @@ import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
+import { useShowBlockTools } from './use-show-block-tools';
 
 function selector( select ) {
 	const {
 		getSelectedBlockClientId,
 		getFirstMultiSelectedBlockClientId,
-		getBlock,
 		getSettings,
-		hasMultiSelection,
 		__unstableGetEditorMode,
 		isTyping,
 	} = select( blockEditorStore );
@@ -35,36 +33,13 @@ function selector( select ) {
 	const clientId =
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
-	const { name = '', attributes = {} } = getBlock( clientId ) || {};
 	const editorMode = __unstableGetEditorMode();
-	const hasSelectedBlock = clientId && name;
-	const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
-		name,
-		attributes,
-	} );
-	const _showEmptyBlockSideInserter =
-		clientId &&
-		! isTyping() &&
-		editorMode === 'edit' &&
-		isUnmodifiedDefaultBlock( { name, attributes } );
-	const maybeShowBreadcrumb =
-		hasSelectedBlock &&
-		! hasMultiSelection() &&
-		( editorMode === 'navigation' || editorMode === 'zoom-out' );
 
 	return {
 		clientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isTyping: isTyping(),
 		isZoomOutMode: editorMode === 'zoom-out',
-		showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
-		showBreadcrumb: ! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
-		showBlockToolbar:
-			! getSettings().hasFixedToolbar &&
-			! _showEmptyBlockSideInserter &&
-			hasSelectedBlock &&
-			! isEmptyDefaultBlock &&
-			! maybeShowBreadcrumb,
 	};
 }
 
@@ -82,18 +57,20 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const {
-		clientId,
-		hasFixedToolbar,
-		isTyping,
-		isZoomOutMode,
-		showEmptyBlockSideInserter,
-		showBreadcrumb,
-		showBlockToolbar,
-	} = useSelect( selector, [] );
+	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect(
+		selector,
+		[]
+	);
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
+
+	const {
+		showEmptyBlockSideInserter,
+		showBreadcrumb,
+		showBlockToolbarPopover,
+	} = useShowBlockTools();
+
 	const {
 		duplicateBlocks,
 		removeBlocks,
@@ -186,7 +163,7 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showBlockToolbar && (
+				{ showBlockToolbarPopover && (
 					<BlockToolbarPopover
 						__unstableContentRef={ __unstableContentRef }
 						clientId={ clientId }

package/src/components/block-tools/use-show-block-tools.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useHasBlockToolbar } from '../block-toolbar/use-has-block-toolbar';
+
+/**
+ * Source of truth for which block tools are showing in the block editor.
+ *
+ * @return {Object} Object of which block tools will be shown.
+ */
+export function useShowBlockTools() {
+	const hasBlockToolbar = useHasBlockToolbar();
+
+	return useSelect(
+		( select ) => {
+			const {
+				getSelectedBlockClientId,
+				getFirstMultiSelectedBlockClientId,
+				getBlock,
+				getSettings,
+				hasMultiSelection,
+				__unstableGetEditorMode,
+				isTyping,
+			} = select( blockEditorStore );
+
+			const clientId =
+				getSelectedBlockClientId() ||
+				getFirstMultiSelectedBlockClientId();
+
+			const { name = '', attributes = {} } = getBlock( clientId ) || {};
+			const editorMode = __unstableGetEditorMode();
+			const hasSelectedBlock = clientId && name;
+			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
+				name,
+				attributes,
+			} );
+			const _showEmptyBlockSideInserter =
+				clientId &&
+				! isTyping() &&
+				editorMode === 'edit' &&
+				isUnmodifiedDefaultBlock( { name, attributes } );
+			const maybeShowBreadcrumb =
+				hasSelectedBlock &&
+				! hasMultiSelection() &&
+				( editorMode === 'navigation' || editorMode === 'zoom-out' );
+
+			return {
+				showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+				showBreadcrumb:
+					! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
+				showBlockToolbarPopover:
+					hasBlockToolbar &&
+					! getSettings().hasFixedToolbar &&
+					! _showEmptyBlockSideInserter &&
+					hasSelectedBlock &&
+					! isEmptyDefaultBlock &&
+					! maybeShowBreadcrumb,
+				showFixedToolbar:
+					editorMode !== 'zoom-out' &&
+					hasBlockToolbar &&
+					getSettings().hasFixedToolbar,
+			};
+		},
+		[ hasBlockToolbar ]
+	);
+}

package/src/components/caption/index.native.js

@@ -53,7 +53,7 @@ const Caption = ( {
 			__unstableOnSplitAtEnd={ () =>
 				insertBlocksAfter( createBlock( 'core/paragraph' ) )
 			}
-			deleteEnter={ true }
+			deleteEnter
 		/>
 	</View>
 );

package/src/components/child-layout-control/index.js

@@ -7,6 +7,10 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalInputControl as InputControl,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
@@ -28,25 +32,62 @@ function helpText( selfStretch, parentLayout ) {
 /**
  * Form to edit the child layout value.
  *
- * @param {Object}   props              Props.
- * @param {Object}   props.value        The child layout value.
- * @param {Function} props.onChange     Function to update the child layout value.
- * @param {Object}   props.parentLayout The parent layout value.
+ * @param {Object}   props                  Props.
+ * @param {Object}   props.value            The child layout value.
+ * @param {Function} props.onChange         Function to update the child layout value.
+ * @param {Object}   props.parentLayout     The parent layout value.
  *
+ * @param {boolean}  props.isShownByDefault
+ * @param {string}   props.panelId
  * @return {Element} child layout edit element.
  */
 export default function ChildLayoutControl( {
 	value: childLayout = {},
 	onChange,
 	parentLayout,
+	isShownByDefault,
+	panelId,
 } ) {
-	const { selfStretch, flexSize, columnSpan, rowSpan } = childLayout;
+	const {
+		selfStretch,
+		flexSize,
+		columnStart,
+		rowStart,
+		columnSpan,
+		rowSpan,
+	} = childLayout;
 	const {
 		type: parentType,
 		default: { type: defaultParentType = 'default' } = {},
+		orientation = 'horizontal',
 	} = parentLayout ?? {};
 	const parentLayoutType = parentType || defaultParentType;
 
+	const hasFlexValue = () => !! selfStretch;
+	const flexResetLabel =
+		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+	const resetFlex = () => {
+		onChange( {
+			selfStretch: undefined,
+			flexSize: undefined,
+		} );
+	};
+
+	const hasStartValue = () => !! columnStart || !! rowStart;
+	const hasSpanValue = () => !! columnSpan || !! rowSpan;
+	const resetGridStarts = () => {
+		onChange( {
+			columnStart: undefined,
+			rowStart: undefined,
+		} );
+	};
+	const resetGridSpans = () => {
+		onChange( {
+			columnSpan: undefined,
+			rowSpan: undefined,
+		} );
+	};
+
 	useEffect( () => {
 		if ( selfStretch === 'fixed' && ! flexSize ) {
 			onChange( {
@@ -59,7 +100,15 @@ export default function ChildLayoutControl( {
 	return (
 		<>
 			{ parentLayoutType === 'flex' && (
-				<>
+				<VStack
+					as={ ToolsPanelItem }
+					spacing={ 2 }
+					hasValue={ hasFlexValue }
+					label={ flexResetLabel }
+					onDeselect={ resetFlex }
+					isShownByDefault={ isShownByDefault }
+					panelId={ panelId }
+				>
 					<ToggleGroupControl
 						__nextHasNoMarginBottom
 						size={ '__unstable-large' }
@@ -74,7 +123,7 @@ export default function ChildLayoutControl( {
 								flexSize: newFlexSize,
 							} );
 						} }
-						isBlock={ true }
+						isBlock
 					>
 						<ToggleGroupControlOption
 							key={ 'fit' }
@@ -104,37 +153,100 @@ export default function ChildLayoutControl( {
 							value={ flexSize }
 						/>
 					) }
-				</>
+				</VStack>
 			) }
 			{ parentLayoutType === 'grid' && (
-				<HStack>
-					<InputControl
-						size={ '__unstable-large' }
-						label={ __( 'Column Span' ) }
-						type="number"
-						onChange={ ( value ) => {
-							onChange( {
-								rowSpan,
-								columnSpan: value,
-							} );
-						} }
-						value={ columnSpan }
-						min={ 1 }
-					/>
-					<InputControl
-						size={ '__unstable-large' }
-						label={ __( 'Row Span' ) }
-						type="number"
-						onChange={ ( value ) => {
-							onChange( {
-								columnSpan,
-								rowSpan: value,
-							} );
-						} }
-						value={ rowSpan }
-						min={ 1 }
-					/>
-				</HStack>
+				<>
+					<HStack
+						as={ ToolsPanelItem }
+						hasValue={ hasSpanValue }
+						label={ __( 'Grid span' ) }
+						onDeselect={ resetGridSpans }
+						isShownByDefault={ isShownByDefault }
+						panelId={ panelId }
+					>
+						<InputControl
+							size={ '__unstable-large' }
+							label={ __( 'Column span' ) }
+							type="number"
+							onChange={ ( value ) => {
+								onChange( {
+									columnStart,
+									rowStart,
+									rowSpan,
+									columnSpan: value,
+								} );
+							} }
+							value={ columnSpan }
+							min={ 1 }
+						/>
+						<InputControl
+							size={ '__unstable-large' }
+							label={ __( 'Row span' ) }
+							type="number"
+							onChange={ ( value ) => {
+								onChange( {
+									columnStart,
+									rowStart,
+									columnSpan,
+									rowSpan: value,
+								} );
+							} }
+							value={ rowSpan }
+							min={ 1 }
+						/>
+					</HStack>
+					{ window.__experimentalEnableGridInteractivity && (
+						// Use Flex with an explicit width on the FlexItem instead of HStack to
+						// work around an issue in webkit where inputs with a max attribute are
+						// sized incorrectly.
+						<Flex
+							as={ ToolsPanelItem }
+							hasValue={ hasStartValue }
+							label={ __( 'Grid placement' ) }
+							onDeselect={ resetGridStarts }
+							isShownByDefault={ false }
+							panelId={ panelId }
+						>
+							<FlexItem style={ { width: '50%' } }>
+								<InputControl
+									size={ '__unstable-large' }
+									label={ __( 'Column' ) }
+									type="number"
+									onChange={ ( value ) => {
+										onChange( {
+											columnStart: value,
+											rowStart,
+											columnSpan,
+											rowSpan,
+										} );
+									} }
+									value={ columnStart }
+									min={ 1 }
+									max={ parentLayout?.columnCount }
+								/>
+							</FlexItem>
+							<FlexItem style={ { width: '50%' } }>
+								<InputControl
+									size={ '__unstable-large' }
+									label={ __( 'Row' ) }
+									type="number"
+									onChange={ ( value ) => {
+										onChange( {
+											columnStart,
+											rowStart: value,
+											columnSpan,
+											rowSpan,
+										} );
+									} }
+									value={ rowStart }
+									min={ 1 }
+									max={ parentLayout?.columnCount }
+								/>
+							</FlexItem>
+						</Flex>
+					) }
+				</>
 			) }
 		</>
 	);

package/src/components/color-palette/control.js

@@ -14,7 +14,7 @@ export default function ColorPaletteControl( {
 			onColorChange={ onChange }
 			colorValue={ value }
 			gradients={ [] }
-			disableCustomGradients={ true }
+			disableCustomGradients
 		/>
 	);
 }

package/src/components/colors-gradients/control.js

@@ -133,7 +133,7 @@ function ColorGradientControlInner( {
 					{ canChooseAColor && canChooseAGradient && (
 						<div>
 							<Tabs
-								initialTabId={
+								defaultTabId={
 									gradientValue
 										? TAB_IDS.gradient
 										: !! canChooseAColor && TAB_IDS.color

package/src/components/colors-gradients/test/control.js

@@ -64,7 +64,7 @@ describe( 'ColorPaletteControl', () => {
 				] }
 				gradients={ [] }
 				disableCustomColors={ false }
-				disableCustomGradients={ true }
+				disableCustomGradients
 				onColorChange={ noop }
 				onGradientChange={ noop }
 			/>
@@ -102,7 +102,7 @@ describe( 'ColorPaletteControl', () => {
 						slug: 'light-green-cyan-to-vivid-green-cyan',
 					},
 				] }
-				disableCustomColors={ true }
+				disableCustomColors
 				disableCustomGradients={ false }
 				onColorChange={ noop }
 				onGradientChange={ noop }

package/src/components/contrast-checker/test/index.js

@@ -221,7 +221,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				isLargeText={ true }
+				isLargeText
 			/>
 		);
 
@@ -263,7 +263,7 @@ describe( 'ContrastChecker', () => {
 				backgroundColor="#C44B4B"
 				textColor="#000000"
 				fontSize={ 23 }
-				isLargeText={ true }
+				isLargeText
 			/>
 		);
 
@@ -363,7 +363,7 @@ describe( 'ContrastChecker', () => {
 				backgroundColor={ backgroundColor }
 				textColor={ textColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -378,7 +378,7 @@ describe( 'ContrastChecker', () => {
 				textColor={ 'rgba(0,0,0,0.9)' }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -399,7 +399,7 @@ describe( 'ContrastChecker', () => {
 				linkColor={ 'rgba(0,0,0,0.9)' }
 				textColor={ textColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -420,7 +420,7 @@ describe( 'ContrastChecker', () => {
 				textColor={ textColor }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -437,7 +437,7 @@ describe( 'ContrastChecker', () => {
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -454,7 +454,7 @@ describe( 'ContrastChecker', () => {
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -477,7 +477,7 @@ describe( 'ContrastChecker', () => {
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -498,7 +498,7 @@ describe( 'ContrastChecker', () => {
 				linkColor={ 'rgba(0,0,0,0.7)' }
 				textColor={ 'rgba(0,0,0,0.7)' }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 

package/src/components/convert-to-group-buttons/toolbar.js

@@ -4,7 +4,7 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { group, row, stack } from '@wordpress/icons';
+import { group, row, stack, grid } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
 /**
@@ -17,6 +17,7 @@ const layouts = {
 	group: { type: 'constrained' },
 	row: { type: 'flex', flexWrap: 'nowrap' },
 	stack: { type: 'flex', orientation: 'vertical' },
+	grid: { type: 'grid' },
 };
 
 function BlockGroupToolbar() {
@@ -60,6 +61,7 @@ function BlockGroupToolbar() {
 
 	const onConvertToRow = () => onConvertToGroup( 'row' );
 	const onConvertToStack = () => onConvertToGroup( 'stack' );
+	const onConvertToGrid = () => onConvertToGroup( 'grid' );
 
 	// Don't render the button if the current selection cannot be grouped.
 	// A good example is selecting multiple button blocks within a Buttons block:
@@ -75,6 +77,9 @@ function BlockGroupToolbar() {
 	const canInsertStack = !! variations.find(
 		( { name } ) => name === 'group-stack'
 	);
+	const canInsertGrid = !! variations.find(
+		( { name } ) => name === 'group-grid'
+	);
 
 	return (
 		<ToolbarGroup>
@@ -97,6 +102,13 @@ function BlockGroupToolbar() {
 					onClick={ onConvertToStack }
 				/>
 			) }
+			{ canInsertGrid && (
+				<ToolbarButton
+					icon={ grid }
+					label={ _x( 'Grid', 'verb' ) }
+					onClick={ onConvertToGrid }
+				/>
+			) }
 		</ToolbarGroup>
 	);
 }

package/src/components/default-block-appender/content.scss

@@ -29,12 +29,15 @@
 	// In "constrained" layout containers, the first and last paragraphs have their margins zeroed out.
 	// In the case of this appender, it needs to apply those same rules to avoid layout shifts.
 	// Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs.
-	:where(body .is-layout-constrained) & {
+	:where(body .is-layout-constrained) &,
+	:where(.wp-site-blocks) & {
 		> :first-child:first-child {
 			margin-block-start: 0;
+			margin-block-end: 0;
 		}
 
-		// Since this particular appender will only ever appear on an entirely empty document, we don't account for last-child.
+		// Since this appender will only ever appear on an entirely empty document, we don't account for last-child.
+		// This is also because it will never be the last child, the block inserter that sits in this appender is the last child.
 	}
 
 	// Dropzone.