@wordpress/block-editor 13.1.0 → 13.2.0

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

@@ -14,6 +14,13 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks-before-cell';
+import { store as blockEditorStore } from '../../store';
 
 function helpText( selfStretch, parentLayout ) {
 	const { orientation = 'horizontal' } = parentLayout;
@@ -48,21 +55,46 @@ export default function ChildLayoutControl( {
 	isShownByDefault,
 	panelId,
 } ) {
-	const {
-		selfStretch,
-		flexSize,
-		columnStart,
-		rowStart,
-		columnSpan,
-		rowSpan,
-	} = childLayout;
 	const {
 		type: parentType,
 		default: { type: defaultParentType = 'default' } = {},
-		orientation = 'horizontal',
 	} = parentLayout ?? {};
 	const parentLayoutType = parentType || defaultParentType;
 
+	if ( parentLayoutType === 'flex' ) {
+		return (
+			<FlexControls
+				childLayout={ childLayout }
+				onChange={ onChange }
+				parentLayout={ parentLayout }
+				isShownByDefault={ isShownByDefault }
+				panelId={ panelId }
+			/>
+		);
+	} else if ( parentLayoutType === 'grid' ) {
+		return (
+			<GridControls
+				childLayout={ childLayout }
+				onChange={ onChange }
+				parentLayout={ parentLayout }
+				isShownByDefault={ isShownByDefault }
+				panelId={ panelId }
+			/>
+		);
+	}
+
+	return null;
+}
+
+function FlexControls( {
+	childLayout,
+	onChange,
+	parentLayout,
+	isShownByDefault,
+	panelId,
+} ) {
+	const { selfStretch, flexSize } = childLayout;
+	const { orientation = 'horizontal' } = parentLayout ?? {};
 	const hasFlexValue = () => !! selfStretch;
 	const flexResetLabel =
 		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
@@ -73,6 +105,96 @@ export default function ChildLayoutControl( {
 		} );
 	};
 
+	useEffect( () => {
+		if ( selfStretch === 'fixed' && ! flexSize ) {
+			onChange( {
+				...childLayout,
+				selfStretch: 'fit',
+			} );
+		}
+	}, [] );
+
+	return (
+		<VStack
+			as={ ToolsPanelItem }
+			spacing={ 2 }
+			hasValue={ hasFlexValue }
+			label={ flexResetLabel }
+			onDeselect={ resetFlex }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				size="__unstable-large"
+				label={ childLayoutOrientation( parentLayout ) }
+				value={ selfStretch || 'fit' }
+				help={ helpText( selfStretch, parentLayout ) }
+				onChange={ ( value ) => {
+					const newFlexSize = value !== 'fixed' ? null : flexSize;
+					onChange( {
+						selfStretch: value,
+						flexSize: newFlexSize,
+					} );
+				} }
+				isBlock
+			>
+				<ToggleGroupControlOption
+					key="fit"
+					value="fit"
+					label={ __( 'Fit' ) }
+				/>
+				<ToggleGroupControlOption
+					key="fill"
+					value="fill"
+					label={ __( 'Fill' ) }
+				/>
+				<ToggleGroupControlOption
+					key="fixed"
+					value="fixed"
+					label={ __( 'Fixed' ) }
+				/>
+			</ToggleGroupControl>
+			{ selfStretch === 'fixed' && (
+				<UnitControl
+					size="__unstable-large"
+					onChange={ ( value ) => {
+						onChange( {
+							selfStretch,
+							flexSize: value,
+						} );
+					} }
+					value={ flexSize }
+				/>
+			) }
+		</VStack>
+	);
+}
+
+export function childLayoutOrientation( parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+}
+
+function GridControls( {
+	childLayout,
+	onChange,
+	parentLayout,
+	isShownByDefault,
+	panelId,
+} ) {
+	const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
+	const { columnCount } = parentLayout ?? {};
+	const gridColumnNumber = parseInt( columnCount, 10 ) || 3;
+	const rootClientId = useSelect( ( select ) =>
+		select( blockEditorStore ).getBlockRootClientId( panelId )
+	);
+	const { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		rootClientId,
+		gridColumnNumber
+	);
 	const hasStartValue = () => !! columnStart || !! rowStart;
 	const hasSpanValue = () => !! columnSpan || !! rowSpan;
 	const resetGridStarts = () => {
@@ -88,184 +210,127 @@ export default function ChildLayoutControl( {
 		} );
 	};
 
-	useEffect( () => {
-		if ( selfStretch === 'fixed' && ! flexSize ) {
-			onChange( {
-				...childLayout,
-				selfStretch: 'fit',
-			} );
-		}
-	}, [] );
-
 	return (
 		<>
-			{ parentLayoutType === 'flex' && (
-				<VStack
+			<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 && columnCount && (
+				// 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 }
-					spacing={ 2 }
-					hasValue={ hasFlexValue }
-					label={ flexResetLabel }
-					onDeselect={ resetFlex }
-					isShownByDefault={ isShownByDefault }
+					hasValue={ hasStartValue }
+					label={ __( 'Grid placement' ) }
+					onDeselect={ resetGridStarts }
+					isShownByDefault={ false }
 					panelId={ panelId }
 				>
-					<ToggleGroupControl
-						__nextHasNoMarginBottom
-						size="__unstable-large"
-						label={ childLayoutOrientation( parentLayout ) }
-						value={ selfStretch || 'fit' }
-						help={ helpText( selfStretch, parentLayout ) }
-						onChange={ ( value ) => {
-							const newFlexSize =
-								value !== 'fixed' ? null : flexSize;
-							onChange( {
-								selfStretch: value,
-								flexSize: newFlexSize,
-							} );
-						} }
-						isBlock
-					>
-						<ToggleGroupControlOption
-							key="fit"
-							value="fit"
-							label={ __( 'Fit' ) }
-						/>
-						<ToggleGroupControlOption
-							key="fill"
-							value="fill"
-							label={ __( 'Fill' ) }
-						/>
-						<ToggleGroupControlOption
-							key="fixed"
-							value="fixed"
-							label={ __( 'Fixed' ) }
-						/>
-					</ToggleGroupControl>
-					{ selfStretch === 'fixed' && (
-						<UnitControl
-							size="__unstable-large"
-							onChange={ ( value ) => {
-								onChange( {
-									selfStretch,
-									flexSize: value,
-								} );
-							} }
-							value={ flexSize }
-						/>
-					) }
-				</VStack>
-			) }
-			{ parentLayoutType === 'grid' && (
-				<>
-					<HStack
-						as={ ToolsPanelItem }
-						hasValue={ hasSpanValue }
-						label={ __( 'Grid span' ) }
-						onDeselect={ resetGridSpans }
-						isShownByDefault={ isShownByDefault }
-						panelId={ panelId }
-					>
+					<FlexItem style={ { width: '50%' } }>
 						<InputControl
 							size="__unstable-large"
-							label={ __( 'Column span' ) }
+							label={ __( 'Column' ) }
 							type="number"
 							onChange={ ( value ) => {
 								onChange( {
-									columnStart,
+									columnStart: value,
 									rowStart,
+									columnSpan,
 									rowSpan,
-									columnSpan: value,
 								} );
+								__unstableMarkNextChangeAsNotPersistent();
+								moveBlocksToPosition(
+									[ panelId ],
+									rootClientId,
+									rootClientId,
+									getNumberOfBlocksBeforeCell(
+										value,
+										rowStart
+									)
+								);
 							} }
-							value={ columnSpan }
+							value={ columnStart }
 							min={ 1 }
+							max={
+								gridColumnNumber
+									? gridColumnNumber - ( columnSpan ?? 1 ) + 1
+									: undefined
+							}
 						/>
+					</FlexItem>
+					<FlexItem style={ { width: '50%' } }>
 						<InputControl
 							size="__unstable-large"
-							label={ __( 'Row span' ) }
+							label={ __( 'Row' ) }
 							type="number"
 							onChange={ ( value ) => {
 								onChange( {
 									columnStart,
-									rowStart,
+									rowStart: value,
 									columnSpan,
-									rowSpan: value,
+									rowSpan,
 								} );
+								__unstableMarkNextChangeAsNotPersistent();
+								moveBlocksToPosition(
+									[ panelId ],
+									rootClientId,
+									rootClientId,
+									getNumberOfBlocksBeforeCell(
+										columnStart,
+										value
+									)
+								);
 							} }
-							value={ rowSpan }
+							value={ rowStart }
 							min={ 1 }
+							max={
+								parentLayout?.rowCount
+									? parentLayout.rowCount -
+									  ( rowSpan ?? 1 ) +
+									  1
+									: undefined
+							}
 						/>
-					</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
-											? parentLayout.columnCount -
-											  ( columnSpan ?? 1 ) +
-											  1
-											: undefined
-									}
-								/>
-							</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?.rowCount
-											? parentLayout.rowCount -
-											  ( rowSpan ?? 1 ) +
-											  1
-											: undefined
-									}
-								/>
-							</FlexItem>
-						</Flex>
-					) }
-				</>
+					</FlexItem>
+				</Flex>
 			) }
 		</>
 	);
 }
-
-export function childLayoutOrientation( parentLayout ) {
-	const { orientation = 'horizontal' } = parentLayout;
-
-	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
-}

package/src/components/global-styles/test/use-global-styles-output.js

@@ -565,9 +565,44 @@ describe( 'global styles renderer', () => {
 				},
 			};
 
-			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
-				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }' +
-					':root :where(.is-style-foo.wp-image.wp-image-spacing){padding-top: 2px;}:root :where(.is-style-foo.wp-image.wp-image-border-color){border-color: blue;}:root :where(.is-style-foo.wp-image){color: blue;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			const hasBlockGapSupport = false;
+			const hasFallbackGapSupport = true;
+			const disableLayoutStyles = true;
+			const disableRootPadding = true;
+			const styleOptions = {
+				blockGap: false,
+				blockStyles: true,
+				layoutStyles: false,
+				marginReset: false,
+				presets: false,
+				rootPadding: false,
+			};
+
+			// Confirm no variation styles by default.
+			const withoutVariations = toStyles(
+				Object.freeze( tree ),
+				blockSelectors,
+				hasBlockGapSupport,
+				hasFallbackGapSupport,
+				disableLayoutStyles,
+				disableRootPadding,
+				styleOptions
+			);
+			expect( withoutVariations ).toEqual( '' );
+
+			// Includes variation styles when requested.
+			styleOptions.variationStyles = true;
+			const withVariations = toStyles(
+				Object.freeze( tree ),
+				blockSelectors,
+				hasBlockGapSupport,
+				hasFallbackGapSupport,
+				disableLayoutStyles,
+				disableRootPadding,
+				styleOptions
+			);
+			expect( withVariations ).toEqual(
+				':root :where(.is-style-foo.wp-image.wp-image-spacing){padding-top: 2px;}:root :where(.is-style-foo.wp-image.wp-image-border-color){border-color: blue;}:root :where(.is-style-foo.wp-image){color: blue;}'
 			);
 		} );
 

package/src/components/global-styles/use-global-styles-output.js

@@ -881,6 +881,7 @@ export const toStyles = (
 		marginReset: true,
 		presets: true,
 		rootPadding: true,
+		variationStyles: false,
 		...styleOptions,
 	};
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
@@ -923,8 +924,8 @@ export const toStyles = (
 			ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
 				`;
 		}
 
@@ -1010,7 +1011,7 @@ export const toStyles = (
 					);
 				}
 
-				if ( styleVariationSelectors ) {
+				if ( options.variationStyles && styleVariationSelectors ) {
 					Object.entries( styleVariationSelectors ).forEach(
 						( [ styleVariationName, styleVariationSelector ] ) => {
 							const styleVariations =

package/src/components/grid/grid-item-movers.js

@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton } from '@wordpress/components';
+import { arrowLeft, arrowUp, arrowDown, arrowRight } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockControls from '../block-controls';
+import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
+import { store as blockEditorStore } from '../../store';
+
+export function GridItemMovers( {
+	layout,
+	parentLayout,
+	onChange,
+	gridClientId,
+	blockClientId,
+} ) {
+	const { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	const columnStart = layout?.columnStart ?? 1;
+	const rowStart = layout?.rowStart ?? 1;
+	const columnSpan = layout?.columnSpan ?? 1;
+	const rowSpan = layout?.rowSpan ?? 1;
+	const columnEnd = columnStart + columnSpan - 1;
+	const rowEnd = rowStart + rowSpan - 1;
+	const columnCount = parentLayout?.columnCount;
+	const rowCount = parentLayout?.rowCount;
+
+	const columnCountNumber = parseInt( columnCount, 10 );
+	const rowStartNumber = parseInt( rowStart, 10 );
+	const columnStartNumber = parseInt( columnStart, 10 );
+
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		gridClientId,
+		columnCountNumber
+	);
+
+	return (
+		<BlockControls group="parent">
+			<ToolbarButton
+				icon={ arrowUp }
+				label={ __( 'Move block up' ) }
+				isDisabled={ rowStart <= 1 }
+				onClick={ () => {
+					onChange( {
+						rowStart: rowStart - 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell(
+							columnStartNumber,
+							rowStartNumber - 1
+						)
+					);
+				} }
+			/>
+			<ToolbarButton
+				icon={ arrowDown }
+				label={ __( 'Move block down' ) }
+				isDisabled={ rowCount && rowEnd >= rowCount }
+				onClick={ () => {
+					onChange( {
+						rowStart: rowStart + 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell(
+							columnStartNumber,
+							rowStartNumber + 1
+						)
+					);
+				} }
+			/>
+			<ToolbarButton
+				icon={ arrowLeft }
+				label={ __( 'Move block left' ) }
+				isDisabled={ columnStart <= 1 }
+				onClick={ () => {
+					onChange( {
+						columnStart: columnStartNumber - 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell(
+							columnStartNumber - 1,
+							rowStartNumber
+						)
+					);
+				} }
+			/>
+			<ToolbarButton
+				icon={ arrowRight }
+				label={ __( 'Move block right' ) }
+				isDisabled={ columnCount && columnEnd >= columnCount }
+				onClick={ () => {
+					onChange( {
+						columnStart: columnStartNumber + 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell(
+							columnStartNumber + 1,
+							rowStartNumber
+						)
+					);
+				} }
+			/>
+		</BlockControls>
+	);
+}