@wordpress/block-editor 10.0.2 → 10.0.4

package/src/components/list-view/index.js

@@ -188,6 +188,7 @@ function ListView(
 				onCollapseRow={ collapseRow }
 				onExpandRow={ expandRow }
 				onFocusRow={ focusRow }
+				applicationAriaLabel={ __( 'Block navigation structure' ) }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch

package/src/components/rich-text/index.js

@@ -173,6 +173,13 @@ function RichTextWrapper(
 
 	// Handle deprecated format.
 	if ( Array.isArray( originalValue ) ) {
+		deprecated( 'wp.blockEditor.RichText value prop as children type', {
+			since: '6.1',
+			version: '6.3',
+			alternative: 'value prop as string',
+			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+		} );
+
 		adjustedValue = childrenSource.toHTML( originalValue );
 		adjustedOnChange = ( newValue ) =>
 			originalOnChange(
@@ -436,6 +443,13 @@ ForwardedRichTextContainer.Content = ( {
 } ) => {
 	// Handle deprecated `children` and `node` sources.
 	if ( Array.isArray( value ) ) {
+		deprecated( 'wp.blockEditor.RichText value prop as children type', {
+			since: '6.1',
+			version: '6.3',
+			alternative: 'value prop as string',
+			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+		} );
+
 		value = childrenSource.toHTML( value );
 	}
 

package/src/components/spacing-sizes-control/index.js

@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { __experimentalText as Text } from '@wordpress/components';
+import { BaseControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -68,8 +73,15 @@ export default function SpacingSizesControl( {
 	};
 
 	return (
-		<fieldset role="region" className="component-spacing-sizes-control">
-			<Text as="legend">{ label }</Text>
+		<fieldset
+			role="region"
+			className={ classnames( 'component-spacing-sizes-control', {
+				'is-unlinked': ! isLinked,
+			} ) }
+		>
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
 			{ ! hasOneSide && (
 				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
 			) }

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -9,12 +9,12 @@ import classnames from 'classnames';
 import { useState, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
+	BaseControl,
 	Button,
 	RangeControl,
 	CustomSelectControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
@@ -167,21 +167,21 @@ export default function SpacingInputControl( {
 		<>
 			{ side !== 'all' && (
 				<HStack className="components-spacing-sizes-control__side-labels">
-					<Text className="components-spacing-sizes-control__side-label">
+					<BaseControl.VisualLabel className="components-spacing-sizes-control__side-label">
 						{ LABELS[ side ] }
-					</Text>
+					</BaseControl.VisualLabel>
 
 					{ showHint && (
-						<Text className="components-spacing-sizes-control__hint-single">
+						<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-single">
 							{ currentValueHint }
-						</Text>
+						</BaseControl.VisualLabel>
 					) }
 				</HStack>
 			) }
 			{ side === 'all' && showHint && (
-				<Text className="components-spacing-sizes-control__hint-all">
+				<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-all">
 					{ currentValueHint }
-				</Text>
+				</BaseControl.VisualLabel>
 			) }
 
 			{ ! disableCustomSpacingSizes && (
@@ -256,6 +256,7 @@ export default function SpacingInputControl( {
 					marks={ marks }
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
+					__nextHasNoMarginBottom={ true }
 				/>
 			) }
 			{ ! showRangeControl && ! showCustomValueControl && (

package/src/components/spacing-sizes-control/style.scss

@@ -1,7 +1,8 @@
 .tools-panel-item-spacing {
 	display: grid;
 	grid-template-columns: auto 1fr auto;
-	grid-row-gap: $grid-unit-05;
+	align-items: center;
+	grid-template-rows: 25px auto;
 }
 
 .component-spacing-sizes-control {
@@ -17,21 +18,34 @@
 		align-self: center;
 	}
 
+	.components-base-control__label {
+		margin-bottom: 0;
+		height: $grid-unit-20;
+	}
+
 	.components-spacing-sizes-control__side-labels {
 		grid-column: 1 / 1;
-		min-height: 30px;
 		justify-content: left;
+		height: $grid-unit-20;
+		margin-top: $grid-unit-15;
+	}
+
+	.components-spacing-sizes-control__side-label {
+		grid-column: 1 / 1;
+		justify-self: left;
+		margin-bottom: 0;
 	}
 
-	.components-spacing-sizes-control__hint-single {
-		margin-top: 0;
-		margin-left: 0;
+	&.is-unlinked {
+		.components-range-control.components-spacing-sizes-control__range-control {
+			margin-top: $grid-unit-15;
+		}
 	}
 
 	.components-spacing-sizes-control__hint-single,
 	.components-spacing-sizes-control__hint-all {
 		color: $gray-700;
-		font-size: 12px;
+		margin-bottom: 0;
 	}
 
 	.components-spacing-sizes-control__hint-all {
@@ -47,6 +61,11 @@
 		grid-row: 1 / 1;
 		justify-self: end;
 		padding: 0;
+		&.is-small.has-icon {
+			padding: 0;
+			min-width: $icon-size;
+			height: $grid-unit-20;
+		}
 	}
 
 	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
@@ -56,13 +75,11 @@
 	.components-spacing-sizes-control__custom-toggle-single {
 		grid-column: 3 / 3;
 		justify-self: end;
-	}
-
-	.components-spacing-sizes-control__custom-toggle-all,
-	.components-spacing-sizes-control__custom-toggle-single {
 		&.is-small.has-icon {
 			padding: 0;
 			min-width: $icon-size;
+			height: $grid-unit-20;
+			margin-top: $grid-unit-15;
 		}
 	}
 
@@ -75,7 +92,6 @@
 	.components-spacing-sizes-control__custom-value-range {
 		grid-column: span 2;
 		margin-left: $grid-unit-10;
-		padding-right: $grid-unit-10;
 		height: 30px;
 	}
 
@@ -85,12 +101,7 @@
 
 	.components-spacing-sizes-control__range-control {
 		grid-column: span 3;
-		padding-right: $grid-unit-10;
-		height: 30px;
-	}
-
-	.components-range-control__wrapper {
-		margin-bottom: 0;
+		height: 40px;
 	}
 
 	.components-range-control__mark {
@@ -112,13 +123,6 @@
 		z-index: 3;
 	}
 
-	.components-spacing-sizes-control__side-label {
-		margin-right: $grid-unit-05;
-		grid-column: 1 / 1;
-		justify-self: left;
-		font-size: 12px;
-	}
-
 	.components-spacing-sizes-control__custom-select-control {
 		grid-column: span 3;
 	}

package/src/hooks/index.js

@@ -20,6 +20,7 @@ import './metadata';
 import './metadata-name';
 
 export { useCustomSides } from './dimensions';
+export { useLayoutClasses, useLayoutStyles } from './layout';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';

package/src/hooks/layout.js

@@ -37,58 +37,101 @@ import { getLayoutType, getLayoutTypes } from '../layouts';
 const layoutBlockSupportKey = '__experimentalLayout';
 
 /**
- * Generates the utility classnames for the given blocks layout attributes.
- * This method was primarily added to reintroduce classnames that were removed
- * in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719), rather
- * than providing an extensive list of all possible layout classes. The plan is to
- * have the style engine generate a more extensive list of utility classnames which
- * will then replace this method.
+ * Generates the utility classnames for the given block's layout attributes.
  *
- * @param { Object } layout            Layout object.
- * @param { Object } layoutDefinitions An object containing layout definitions, stored in theme.json.
+ * @param { Object } block Block object.
  *
  * @return { Array } Array of CSS classname strings.
  */
-function useLayoutClasses( layout, layoutDefinitions ) {
+export function useLayoutClasses( block = {} ) {
 	const rootPaddingAlignment = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().__experimentalFeatures
 			?.useRootPaddingAwareAlignments;
 	}, [] );
+	const globalLayoutSettings = useSetting( 'layout' ) || {};
+
+	const { attributes = {}, name } = block;
+	const { layout } = attributes;
+
+	const { default: defaultBlockLayout } =
+		getBlockSupport( name, layoutBlockSupportKey ) || {};
+	const usedLayout =
+		layout?.inherit || layout?.contentSize || layout?.wideSize
+			? { ...layout, type: 'constrained' }
+			: layout || defaultBlockLayout || {};
+
 	const layoutClassnames = [];
 
-	if ( layoutDefinitions?.[ layout?.type || 'default' ]?.className ) {
+	if (
+		globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
+			?.className
+	) {
 		layoutClassnames.push(
-			layoutDefinitions?.[ layout?.type || 'default' ]?.className
+			globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
+				?.className
 		);
 	}
 
 	if (
-		( layout?.inherit ||
-			layout?.contentSize ||
-			layout?.type === 'constrained' ) &&
+		( usedLayout?.inherit ||
+			usedLayout?.contentSize ||
+			usedLayout?.type === 'constrained' ) &&
 		rootPaddingAlignment
 	) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
-	if ( layout?.orientation ) {
-		layoutClassnames.push( `is-${ kebabCase( layout.orientation ) }` );
+	if ( usedLayout?.orientation ) {
+		layoutClassnames.push( `is-${ kebabCase( usedLayout.orientation ) }` );
 	}
 
-	if ( layout?.justifyContent ) {
+	if ( usedLayout?.justifyContent ) {
 		layoutClassnames.push(
-			`is-content-justification-${ kebabCase( layout.justifyContent ) }`
+			`is-content-justification-${ kebabCase(
+				usedLayout.justifyContent
+			) }`
 		);
 	}
 
-	if ( layout?.flexWrap && layout.flexWrap === 'nowrap' ) {
+	if ( usedLayout?.flexWrap && usedLayout.flexWrap === 'nowrap' ) {
 		layoutClassnames.push( 'is-nowrap' );
 	}
 
 	return layoutClassnames;
 }
 
+/**
+ * Generates a CSS rule with the given block's layout styles.
+ *
+ * @param { Object } block    Block object.
+ * @param { string } selector A selector to use in generating the CSS rule.
+ *
+ * @return { string } CSS rule.
+ */
+export function useLayoutStyles( block = {}, selector ) {
+	const { attributes = {}, name } = block;
+	const { layout = {}, style = {} } = attributes;
+	// Update type for blocks using legacy layouts.
+	const usedLayout =
+		layout?.inherit || layout?.contentSize || layout?.wideSize
+			? { ...layout, type: 'constrained' }
+			: layout || {};
+	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
+	const globalLayoutSettings = useSetting( 'layout' ) || {};
+	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGapSupport !== null;
+	const css = fullLayoutType?.getLayoutStyle?.( {
+		blockName: name,
+		selector,
+		layout,
+		layoutDefinitions: globalLayoutSettings?.definitions,
+		style,
+		hasBlockGapSupport,
+	} );
+	return css;
+}
+
 function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const { layout } = attributes;
 	const defaultThemeLayout = useSetting( 'layout' );
@@ -299,7 +342,7 @@ export const withInspectorControls = createHigherOrderComponent(
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const { name, attributes } = props;
+		const { name, attributes, block } = props;
 		const hasLayoutBlockSupport = hasBlockSupport(
 			name,
 			layoutBlockSupportKey
@@ -321,7 +364,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 				? { ...layout, type: 'constrained' }
 				: layout || defaultBlockLayout || {};
 		const layoutClasses = hasLayoutBlockSupport
-			? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
+			? useLayoutClasses( block )
 			: null;
 		const selector = `.${ getBlockDefaultClassName(
 			name

package/src/index.js

@@ -12,6 +12,8 @@ export {
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	useCachedTruthy,
+	useLayoutClasses as __experimentaluseLayoutClasses,
+	useLayoutStyles as __experimentaluseLayoutStyles,
 } from './hooks';
 export * from './components';
 export * from './elements';