@wordpress/block-editor 13.3.0 → 13.4.0

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

@@ -11,6 +11,7 @@ import {
 	getComputedFluidTypographyValue,
 	getTypographyValueAndUnit,
 } from '../font-sizes/fluid-utils';
+import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 /**
  * @typedef {Object} FluidPreset
@@ -127,9 +128,9 @@ export function getFluidTypographyOptionsFromSettings( settings ) {
  * Returns an object of merged font families and the font faces from the selected font family
  * based on the theme.json settings object and the currently selected font family.
  *
- * @param {Object} settings           Theme.json settings
- * @param {string} selectedFontFamily Decoded font family string
- * @return {Object} Merged font families and font faces from the selected font family
+ * @param {Object} settings           Theme.json settings.
+ * @param {string} selectedFontFamily Decoded font family string.
+ * @return {Object} Merged font families and font faces from the selected font family.
  */
 export function getMergedFontFamiliesAndFontFamilyFaces(
 	settings,
@@ -153,11 +154,10 @@ export function getMergedFontFamiliesAndFontFamilyFaces(
  * Returns the nearest font weight value from the available font weight list based on the new font weight.
  * The nearest font weight is the one with the smallest difference from the new font weight.
  *
- * @param {Array}  availableFontWeights Array of available font weights
- * @param {string} newFontWeightValue   New font weight value
- * @return {string} Nearest font weight
+ * @param {Array}  availableFontWeights Array of available font weights.
+ * @param {string} newFontWeightValue   New font weight value.
+ * @return {string} Nearest font weight.
  */
-
 export function findNearestFontWeight(
 	availableFontWeights,
 	newFontWeightValue
@@ -185,3 +185,99 @@ export function findNearestFontWeight(
 
 	return nearestFontWeight;
 }
+
+/**
+ * Returns the nearest font style based on the new font style.
+ * Defaults to an empty string if the new font style is not valid or available.
+ *
+ * @param {Array}  availableFontStyles Array of available font weights.
+ * @param {string} newFontStyleValue   New font style value.
+ * @return {string} Nearest font style or an empty string.
+ */
+export function findNearestFontStyle( availableFontStyles, newFontStyleValue ) {
+	if ( typeof newFontStyleValue !== 'string' || ! newFontStyleValue ) {
+		return '';
+	}
+
+	const validStyles = [ 'normal', 'italic', 'oblique' ];
+	if ( ! validStyles.includes( newFontStyleValue ) ) {
+		return '';
+	}
+
+	if (
+		! availableFontStyles ||
+		availableFontStyles.length === 0 ||
+		availableFontStyles.find(
+			( style ) => style.value === newFontStyleValue
+		)
+	) {
+		return newFontStyleValue;
+	}
+
+	if (
+		newFontStyleValue === 'oblique' &&
+		! availableFontStyles.find( ( style ) => style.value === 'oblique' )
+	) {
+		return 'italic';
+	}
+
+	return '';
+}
+
+/**
+ * Returns the nearest font style and weight based on the available font family faces and the new font style and weight.
+ *
+ * @param {Array}  fontFamilyFaces Array of available font family faces.
+ * @param {string} fontStyle       New font style. Defaults to previous value.
+ * @param {string} fontWeight      New font weight. Defaults to previous value.
+ * @return {Object} Nearest font style and font weight.
+ */
+export function findNearestStyleAndWeight(
+	fontFamilyFaces,
+	fontStyle,
+	fontWeight
+) {
+	let nearestFontStyle = fontStyle;
+	let nearestFontWeight = fontWeight;
+
+	const { fontStyles, fontWeights, combinedStyleAndWeightOptions } =
+		getFontStylesAndWeights( fontFamilyFaces );
+
+	// Check if the new font style and weight are available in the font family faces.
+	const hasFontStyle = fontStyles?.some(
+		( { value: fs } ) => fs === fontStyle
+	);
+	const hasFontWeight = fontWeights?.some(
+		( { value: fw } ) => fw === fontWeight
+	);
+
+	if ( ! hasFontStyle ) {
+		/*
+		 * Default to italic if oblique is not available.
+		 * Or find the nearest font style based on the nearest font weight.
+		 */
+		nearestFontStyle = fontStyle
+			? findNearestFontStyle( fontStyles, fontStyle )
+			: combinedStyleAndWeightOptions?.find(
+					( option ) =>
+						option.style.fontWeight ===
+						findNearestFontWeight( fontWeights, fontWeight )
+			  )?.style?.fontStyle;
+	}
+
+	if ( ! hasFontWeight ) {
+		/*
+		 * Find the nearest font weight based on available weights.
+		 * Or find the nearest font weight based on the nearest font style.
+		 */
+		nearestFontWeight = fontWeight
+			? findNearestFontWeight( fontWeights, fontWeight )
+			: combinedStyleAndWeightOptions?.find(
+					( option ) =>
+						option.style.fontStyle ===
+						( nearestFontStyle || fontStyle )
+			  )?.style?.fontWeight;
+	}
+
+	return { nearestFontStyle, nearestFontWeight };
+}

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

@@ -38,6 +38,12 @@ import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
 import { setThemeFileUris } from './theme-file-uri-utils';
 
+// Elements that rely on class names in their selectors.
+const ELEMENT_CLASS_NAMES = {
+	button: 'wp-element-button',
+	caption: 'wp-element-caption',
+};
+
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
 const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
@@ -643,6 +649,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 		nodes.push( {
 			styles,
 			selector: ROOT_BLOCK_SELECTOR,
+			// Root selector (body) styles should not be wrapped in `:root where()` to keep
+			// specificity at (0,0,1) and maintain backwards compatibility.
+			skipSelectorWrapper: true,
 		} );
 	}
 
@@ -651,6 +660,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			nodes.push( {
 				styles: tree.styles?.elements?.[ name ],
 				selector,
+				// Top level elements that don't use a class name should not receive the
+				// `:root :where()` wrapper to maintain backwards compatibility.
+				skipSelectorWrapper: ! ELEMENT_CLASS_NAMES[ name ],
 			} );
 		}
 	} );
@@ -957,6 +969,7 @@ export const toStyles = (
 				hasLayoutSupport,
 				featureSelectors,
 				styleVariationSelectors,
+				skipSelectorWrapper,
 			} ) => {
 				// Process styles for block support features with custom feature level
 				// CSS selectors set.
@@ -1015,7 +1028,10 @@ export const toStyles = (
 					disableRootPadding
 				);
 				if ( styleDeclarations?.length ) {
-					ruleset += `:root :where(${ selector }){${ styleDeclarations.join(
+					const generalSelector = skipSelectorWrapper
+						? selector
+						: `:root :where(${ selector })`;
+					ruleset += `${ generalSelector }{${ styleDeclarations.join(
 						';'
 					) };}`;
 				}
@@ -1109,7 +1125,11 @@ export const toStyles = (
 								.map( ( sel ) => sel + pseudoKey )
 								.join( ',' );
 
-							const pseudoRule = `${ _selector }{${ pseudoDeclarations.join(
+							// As pseudo classes such as :hover, :focus etc. have class-level
+							// specificity, they must use the `:root :where()` wrapper. This.
+							// caps the specificity at `0-1-0` to allow proper nesting of variations
+							// and block type element styles.
+							const pseudoRule = `:root :where(${ _selector }){${ pseudoDeclarations.join(
 								';'
 							) };}`;
 

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

@@ -1,10 +1,25 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
-import { arrowLeft, arrowUp, arrowDown, arrowRight } from '@wordpress/icons';
+import {
+	VisuallyHidden,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
+import {
+	chevronLeft,
+	chevronUp,
+	chevronDown,
+	chevronRight,
+} from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -39,74 +54,129 @@ export function GridItemMovers( {
 
 	return (
 		<BlockControls group="parent">
+			<ToolbarGroup className="block-editor-grid-item-mover__move-button-container">
+				<GridItemMover
+					className="is-left-button"
+					icon={ chevronLeft }
+					label={ __( 'Move left' ) }
+					description={ __( 'Move left' ) }
+					isDisabled={ columnStart <= 1 }
+					onClick={ () => {
+						onChange( {
+							columnStart: columnStart - 1,
+						} );
+						__unstableMarkNextChangeAsNotPersistent();
+						moveBlocksToPosition(
+							[ blockClientId ],
+							gridClientId,
+							gridClientId,
+							getNumberOfBlocksBeforeCell(
+								columnStart - 1,
+								rowStart
+							)
+						);
+					} }
+				/>
+				<div className="block-editor-grid-item-mover__move-vertical-button-container">
+					<GridItemMover
+						className="is-up-button"
+						icon={ chevronUp }
+						label={ __( 'Move up' ) }
+						description={ __( 'Move up' ) }
+						isDisabled={ rowStart <= 1 }
+						onClick={ () => {
+							onChange( {
+								rowStart: rowStart - 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart,
+									rowStart - 1
+								)
+							);
+						} }
+					/>
+					<GridItemMover
+						className="is-down-button"
+						icon={ chevronDown }
+						label={ __( 'Move down' ) }
+						description={ __( 'Move down' ) }
+						isDisabled={ rowCount && rowEnd >= rowCount }
+						onClick={ () => {
+							onChange( {
+								rowStart: rowStart + 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart,
+									rowStart + 1
+								)
+							);
+						} }
+					/>
+				</div>
+				<GridItemMover
+					className="is-right-button"
+					icon={ chevronRight }
+					label={ __( 'Move right' ) }
+					description={ __( 'Move right' ) }
+					isDisabled={ columnCount && columnEnd >= columnCount }
+					onClick={ () => {
+						onChange( {
+							columnStart: columnStart + 1,
+						} );
+						__unstableMarkNextChangeAsNotPersistent();
+						moveBlocksToPosition(
+							[ blockClientId ],
+							gridClientId,
+							gridClientId,
+							getNumberOfBlocksBeforeCell(
+								columnStart + 1,
+								rowStart
+							)
+						);
+					} }
+				/>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
+
+function GridItemMover( {
+	className,
+	icon,
+	label,
+	isDisabled,
+	onClick,
+	description,
+} ) {
+	const instanceId = useInstanceId( GridItemMover );
+	const descriptionId = `block-editor-grid-item-mover-button__description-${ instanceId }`;
+	return (
+		<>
 			<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 )
-					);
-				} }
+				className={ clsx(
+					'block-editor-grid-item-mover-button',
+					className
+				) }
+				icon={ icon }
+				label={ label }
+				aria-describedby={ descriptionId }
+				onClick={ isDisabled ? null : onClick }
+				disabled={ isDisabled }
+				accessibleWhenDisabled
 			/>
-		</BlockControls>
+			<VisuallyHidden id={ descriptionId }>
+				{ description }
+			</VisuallyHidden>
+		</>
 	);
 }

package/src/components/grid/grid-visualizer.js

@@ -89,7 +89,7 @@ const GridVisualizerGrid = forwardRef(
 					'is-dropping-allowed': isDroppingAllowed,
 				} ) }
 				clientId={ gridClientId }
-				__unstablePopoverSlot="block-toolbar"
+				__unstablePopoverSlot="__unstable-block-tools-after"
 			>
 				<div
 					ref={ ref }

package/src/components/grid/style.scss

@@ -96,3 +96,117 @@
 	}
 }
 
+.block-editor-grid-item-mover__move-button-container {
+	display: flex;
+	padding: 0;
+	border: none;
+	justify-content: center;
+
+	.block-editor-grid-item-mover-button {
+		width: $block-toolbar-height * 0.5;
+		min-width: 0 !important; // overrides default button width.
+		overflow: hidden;
+		padding-left: 0;
+		padding-right: 0;
+
+		svg {
+			min-width: $grid-unit-30;
+		}
+
+		// Focus and toggle pseudo elements.
+		&::before {
+			content: "";
+			position: absolute;
+			display: block;
+			border-radius: $radius-block-ui;
+			height: $grid-unit-40;
+
+			// Position the focus rectangle.
+			left: $grid-unit-10;
+			right: $grid-unit-10;
+			z-index: -1;
+
+			// Animate in.
+			animation: components-button__appear-animation 0.1s ease;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
+		}
+
+		// Don't show the focus inherited by the Button component.
+		&:focus,
+		&:focus:enabled,
+		&:focus::before {
+			box-shadow: none;
+			outline: none;
+		}
+
+		&:focus-visible::before {
+			@include block-toolbar-button-style__focus();
+		}
+	}
+}
+
+
+.block-editor-grid-item-mover__move-vertical-button-container {
+	display: flex;
+	position: relative;
+	@include break-small() {
+		flex-direction: column;
+		justify-content: space-around;
+
+		> .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
+			height: $block-toolbar-height * 0.5 - $grid-unit-05;
+			width: 100%;
+			min-width: 0 !important; // overrides default button width.
+
+			// Focus style.
+			&::before {
+				height: calc(100% - 4px);
+			}
+		}
+
+		.block-editor-grid-item-mover-button.is-up-button svg,
+		.block-editor-grid-item-mover-button.is-down-button svg {
+			flex-shrink: 0;
+			height: $block-toolbar-height * 0.5 - $grid-unit-05;
+		}
+	}
+}
+
+.show-icon-labels {
+
+	.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
+		border-right: 1px solid $gray-700;
+		padding-right: 12px;
+	}
+
+	.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
+		border-left: 1px solid $gray-700;
+		padding-left: 12px;
+	}
+
+
+	.block-editor-grid-item-mover__move-vertical-button-container {
+		&::before {
+			@include break-small() {
+				content: "";
+				height: $border-width;
+				width: 100%;
+				background: $gray-200;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				// With Top toolbar enabled, this separator has a smaller width. Translating the
+				// X axis allows to make the separator always centered regardless of its width.
+				transform: translate(-50%, 0);
+				margin-top: -$border-width * 0.5;
+			}
+
+			@include break-medium {
+				background: $gray-900;
+			}
+		}
+	}
+
+}
+