@wordpress/block-editor 13.1.0 → 13.3.0

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

@@ -31,6 +31,7 @@ import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
 import { getDuotoneFilter } from '../duotone/utils';
 import { getGapCSSValue } from '../../hooks/gap';
+import { setBackgroundStyleDefaults } from '../../hooks/background';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
@@ -387,6 +388,20 @@ export function getStylesDeclarations(
 		[]
 	);
 
+	/*
+	 * Set background defaults.
+	 * Applies to all background styles except the top-level site background.
+	 */
+	if ( ! isRoot && !! blockStyles.background ) {
+		blockStyles = {
+			...blockStyles,
+			background: {
+				...blockStyles.background,
+				...setBackgroundStyleDefaults( blockStyles.background ),
+			},
+		};
+	}
+
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
@@ -656,7 +671,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 						}
 						const variationSelector =
 							blockSelectors[ blockName ]
-								.styleVariationSelectors?.[ variationName ];
+								?.styleVariationSelectors?.[ variationName ];
 
 						// Process the variation's inner element styles.
 						// This comes before the inner block styles so the
@@ -685,18 +700,18 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 								const variationBlockSelector = scopeSelector(
 									variationSelector,
 									blockSelectors[ variationBlockName ]
-										.selector
+										?.selector
 								);
 								const variationDuotoneSelector = scopeSelector(
 									variationSelector,
 									blockSelectors[ variationBlockName ]
-										.duotoneSelector
+										?.duotoneSelector
 								);
 								const variationFeatureSelectors =
 									scopeFeatureSelectors(
 										variationSelector,
 										blockSelectors[ variationBlockName ]
-											.featureSelectors
+											?.featureSelectors
 									);
 
 								const variationBlockStyleNodes =
@@ -713,10 +728,10 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 									featureSelectors: variationFeatureSelectors,
 									fallbackGapValue:
 										blockSelectors[ variationBlockName ]
-											.fallbackGapValue,
+											?.fallbackGapValue,
 									hasLayoutSupport:
 										blockSelectors[ variationBlockName ]
-											.hasLayoutSupport,
+											?.hasLayoutSupport,
 									styles: variationBlockStyleNodes,
 								} );
 
@@ -881,6 +896,7 @@ export const toStyles = (
 		marginReset: true,
 		presets: true,
 		rootPadding: true,
+		variationStyles: false,
 		...styleOptions,
 	};
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
@@ -923,8 +939,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)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;
 				`;
 		}
 
@@ -1010,7 +1026,7 @@ export const toStyles = (
 					);
 				}
 
-				if ( styleVariationSelectors ) {
+				if ( options.variationStyles && styleVariationSelectors ) {
 					Object.entries( styleVariationSelectors ).forEach(
 						( [ styleVariationName, styleVariationSelector ] ) => {
 							const styleVariations =

package/src/components/global-styles/utils.js

@@ -3,6 +3,11 @@
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
 
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
@@ -136,12 +141,18 @@ export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
 	'typography.fontFamily': 'fontFamily',
 };
 
-export const TOOLSPANEL_DROPDOWNMENU_PROPS = {
-	popoverProps: {
-		placement: 'left-start',
-		offset: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
-	},
-};
+export function useToolsPanelDropdownMenuProps() {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: 259,
+				},
+		  }
+		: {};
+}
 
 function findInPresetsBy(
 	features,

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

@@ -0,0 +1,112 @@
+/**
+ * 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 getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		gridClientId,
+		columnCount
+	);
+
+	return (
+		<BlockControls group="parent">
+			<ToolbarButton
+				icon={ arrowUp }
+				label={ __( 'Move block up' ) }
+				disabled={ rowStart <= 1 }
+				onClick={ () => {
+					onChange( {
+						rowStart: rowStart - 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell( columnStart, rowStart - 1 )
+					);
+				} }
+			/>
+			<ToolbarButton
+				icon={ arrowDown }
+				label={ __( 'Move block down' ) }
+				disabled={ rowCount && rowEnd >= rowCount }
+				onClick={ () => {
+					onChange( {
+						rowStart: rowStart + 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell( columnStart, rowStart + 1 )
+					);
+				} }
+			/>
+			<ToolbarButton
+				icon={ arrowLeft }
+				label={ __( 'Move block left' ) }
+				disabled={ columnStart <= 1 }
+				onClick={ () => {
+					onChange( {
+						columnStart: columnStart - 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell( columnStart - 1, rowStart )
+					);
+				} }
+			/>
+			<ToolbarButton
+				icon={ arrowRight }
+				label={ __( 'Move block right' ) }
+				disabled={ columnCount && columnEnd >= columnCount }
+				onClick={ () => {
+					onChange( {
+						columnStart: columnStart + 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell( columnStart + 1, rowStart )
+					);
+				} }
+			/>
+		</BlockControls>
+	);
+}

package/src/components/{grid-visualizer → grid}/grid-item-resizer.js

@@ -9,11 +9,17 @@ import { useState, useEffect } from '@wordpress/element';
  */
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
-import { getComputedCSS } from './utils';
+import { getComputedCSS, getGridTracks, getClosestTrack } from './utils';
 
-export function GridItemResizer( { clientId, bounds, onChange } ) {
+export function GridItemResizer( {
+	clientId,
+	bounds,
+	onChange,
+	parentLayout,
+} ) {
 	const blockElement = useBlockElement( clientId );
 	const rootBlockElement = blockElement?.parentElement;
+	const { isManualPlacement } = parentLayout;
 
 	if ( ! blockElement || ! rootBlockElement ) {
 		return null;
@@ -26,6 +32,10 @@ export function GridItemResizer( { clientId, bounds, onChange } ) {
 			blockElement={ blockElement }
 			rootBlockElement={ rootBlockElement }
 			onChange={ onChange }
+			isManualGrid={
+				isManualPlacement &&
+				window.__experimentalEnableGridInteractivity
+			}
 		/>
 	);
 }
@@ -36,6 +46,7 @@ function GridItemResizerInner( {
 	blockElement,
 	rootBlockElement,
 	onChange,
+	isManualGrid,
 } ) {
 	const [ resizeDirection, setResizeDirection ] = useState( null );
 	const [ enableSide, setEnableSide ] = useState( {
@@ -171,59 +182,11 @@ function GridItemResizerInner( {
 					onChange( {
 						columnSpan: columnEnd - columnStart + 1,
 						rowSpan: rowEnd - rowStart + 1,
+						columnStart: isManualGrid ? columnStart : undefined,
+						rowStart: isManualGrid ? rowStart : undefined,
 					} );
 				} }
 			/>
 		</BlockPopoverCover>
 	);
 }
-
-/**
- * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end
- * position in pixels of each grid track.
- *
- * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
- *
- * @param {string} template The grid-template-columns or grid-template-rows CSS property value.
- *                          Only supports fixed sizes in pixels.
- * @param {number} gap      The gap between grid tracks in pixels.
- *
- * @return {Array<{start: number, end: number}>} An array of objects with the start and end
- *                                               position in pixels of each grid track.
- */
-function getGridTracks( template, gap ) {
-	const tracks = [];
-	for ( const size of template.split( ' ' ) ) {
-		const previousTrack = tracks[ tracks.length - 1 ];
-		const start = previousTrack ? previousTrack.end + gap : 0;
-		const end = start + parseFloat( size );
-		tracks.push( { start, end } );
-	}
-	return tracks;
-}
-
-/**
- * Given an array of grid tracks and a position in pixels, gets the index of the closest track to
- * that position.
- *
- * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
- *
- * @param {Array<{start: number, end: number}>} tracks   An array of objects with the start and end
- *                                                       position in pixels of each grid track.
- * @param {number}                              position The position in pixels.
- * @param {string}                              edge     The edge of the track to compare the
- *                                                       position to. Either 'start' or 'end'.
- *
- * @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which
- *                  is 1-based.
- */
-function getClosestTrack( tracks, position, edge = 'start' ) {
-	return tracks.reduce(
-		( closest, track, index ) =>
-			Math.abs( track[ edge ] - position ) <
-			Math.abs( tracks[ closest ][ edge ] - position )
-				? index
-				: closest,
-		0
-	);
-}