@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

package/src/hooks/layout.js

@@ -14,6 +14,7 @@ import {
 	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import { useSelect } from '@wordpress/data';
 import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -49,12 +50,6 @@ import {
 const VARIATION_PREFIX = 'is-style-';
 
 const layoutBlockSupportKey = 'layout';
-// Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and
-// packages/global-styles-engine/src/core/render.tsx.
-const RESPONSIVE_BREAKPOINTS = {
-	'@mobile': '@media (width <= 480px)',
-	'@tablet': '@media (480px < width <= 782px)',
-};
 const CHILD_LAYOUT_KEYS = [
 	'selfStretch',
 	'flexSize',
@@ -64,6 +59,7 @@ const CHILD_LAYOUT_KEYS = [
 	'rowSpan',
 ];
 const { kebabCase } = unlock( componentsPrivateApis );
+const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
 
 function getDefaultLayout( layoutBlockSupport = {}, blockVariation ) {
 	const defaultBlockLayout = layoutBlockSupport?.default;
@@ -241,6 +237,7 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
  * @param { Object }  options.layout              Active block layout.
  * @param { boolean } options.hasBlockGapSupport  Whether block gap is supported.
  * @param { * }       options.globalBlockGapValue Global block gap fallback.
+ * @param { Object }  options.viewportSettings    Viewport breakpoint settings.
  *
  * @return { string } CSS rule.
  */
@@ -251,8 +248,9 @@ export function getResponsiveLayoutStyles( {
 	layout = {},
 	hasBlockGapSupport,
 	globalBlockGapValue,
+	viewportSettings,
 } ) {
-	return Object.entries( RESPONSIVE_BREAKPOINTS )
+	return Object.entries( getResponsiveMediaQueries( viewportSettings ) )
 		.map( ( [ viewport, mediaQuery ] ) => {
 			const viewportStyle = getStyleForState( attributes?.style, {
 				viewport,
@@ -303,29 +301,34 @@ function LayoutPanelPure( {
 	const settings = useBlockSettings( blockName );
 	// Block settings come from theme.json under settings.[blockName].
 	const { layout: layoutSettings } = settings;
-	const { themeSupportsLayout, activeBlockVariation, selectedState } =
-		useSelect(
-			( select ) => {
-				const blockEditorSelect = select( blockEditorStore );
-				const { getBlockAttributes, getSettings } = blockEditorSelect;
-				const { getSelectedBlockStyleState } =
-					unlock( blockEditorSelect );
-				return {
-					activeBlockVariation: select(
-						blocksStore
-					).getActiveBlockVariation(
-						blockName,
-						getBlockAttributes( clientId ) || {},
-						'block'
-					),
-					themeSupportsLayout: getSettings().supportsLayout,
-					selectedState:
-						getSelectedBlockStyleState?.( clientId ) ??
-						DEFAULT_BLOCK_STYLE_STATE,
-				};
-			},
-			[ blockName, clientId ]
-		);
+	const {
+		themeSupportsLayout,
+		activeBlockVariation,
+		selectedState,
+		isResponsiveEditing,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getSettings,
+				getSelectedBlockStyleState,
+				isResponsiveEditing: getIsResponsiveEditing,
+			} = unlock( select( blockEditorStore ) );
+			return {
+				activeBlockVariation: select(
+					blocksStore
+				).getActiveBlockVariation(
+					blockName,
+					getBlockAttributes( clientId ) || {},
+					'block'
+				),
+				themeSupportsLayout: getSettings().supportsLayout,
+				selectedState: getSelectedBlockStyleState( clientId ),
+				isResponsiveEditing: getIsResponsiveEditing(),
+			};
+		},
+		[ blockName, clientId ]
+	);
 
 	const blockEditingMode = useBlockEditingMode();
 	const isViewportLayoutState =
@@ -575,6 +578,13 @@ function LayoutPanelPure( {
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
 					layoutBlockSupport={ layoutBlockSupport }
+					controlsGroup={
+						isResponsiveEditing &&
+						hasViewportBlockStyleState( selectedState ) &&
+						! hasPseudoBlockStyleState( selectedState )
+							? 'style-state'
+							: 'block'
+					}
 					name={ blockName }
 					clientId={ clientId }
 				/>
@@ -643,6 +653,7 @@ function BlockWithLayoutStyles( {
 	props,
 	blockGapSupport,
 	globalBlockGapValue,
+	viewportSettings,
 	layoutClasses,
 } ) {
 	const { name, attributes } = props;
@@ -678,6 +689,7 @@ function BlockWithLayoutStyles( {
 		layout: usedLayout,
 		hasBlockGapSupport,
 		globalBlockGapValue,
+		viewportSettings,
 	} );
 	const css = [ baseLayoutCSS, responsiveLayoutCSS ]
 		.filter( Boolean )
@@ -763,7 +775,12 @@ export const withLayoutStyles = createHigherOrderComponent(
 						globalStyles?.blocks?.[ name ]?.spacing?.blockGap ??
 						globalStyles?.spacing?.blockGap;
 
-					return { blockGapSupport, globalBlockGapValue };
+					return {
+						blockGapSupport,
+						globalBlockGapValue,
+						viewportSettings:
+							settings?.__experimentalFeatures?.viewport,
+					};
 				},
 				[ blockSupportsLayout, clientId, attributes?.className, name ]
 			);

package/src/hooks/line-height.js

@@ -41,7 +41,6 @@ export function LineHeightEdit( props ) {
 			__unstableInputWidth="100%"
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
-			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/states.js

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+import { useMemo } from '@wordpress/element';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -9,6 +11,10 @@ import { __ } from '@wordpress/i18n';
 import StateControl from '../components/global-styles/state-control';
 import StateControlBadges from '../components/global-styles/state-control-badges';
 import { useToolsPanelDropdownMenuProps } from '../components/global-styles/utils';
+import { useSettings } from '../components/use-settings';
+import { unlock } from '../lock-unlock';
+
+const { getViewportBreakpoints } = unlock( globalStylesEnginePrivateApis );
 
 export const PSEUDO_STATE_LABELS = {
 	':hover': __( 'Hover' ),
@@ -22,12 +28,21 @@ export const RESPONSIVE_STATE_LABELS = {
 	'@mobile': __( 'Mobile' ),
 };
 
-const DEVICE_STATE_OPTIONS = Object.entries( RESPONSIVE_STATE_LABELS ).map(
-	( [ value, label ] ) => ( {
-		value,
-		label,
-	} )
-);
+// Viewport states are selected globally via the editor's device preview.
+function getDeviceStateOptions( viewportSettings ) {
+	const breakpoints = getViewportBreakpoints( viewportSettings );
+
+	return Object.entries( RESPONSIVE_STATE_LABELS )
+		.filter(
+			( [ value ] ) =>
+				( value !== '@tablet' || breakpoints.tablet !== undefined ) &&
+				( value !== '@mobile' || breakpoints.mobile !== undefined )
+		)
+		.map( ( [ value, label ] ) => ( {
+			value,
+			label,
+		} ) );
+}
 
 // Keep in sync with WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS
 // and packages/global-styles-engine/src/core/render.tsx.
@@ -48,6 +63,7 @@ function getPseudoStateOptions( name ) {
 }
 
 const DEFAULT_STATE_VALUE = 'default';
+const EMPTY_STATE_OPTIONS = [];
 
 /**
  * Renders a pseudo-state selector in the block card header.
@@ -62,7 +78,10 @@ const DEFAULT_STATE_VALUE = 'default';
  * @return {Element|null} State control component, or null if not applicable.
  */
 export function BlockStatesControl( { name, value, onChange } ) {
-	const pseudoStateOptions = getPseudoStateOptions( name );
+	const pseudoStateOptions = useMemo(
+		() => getPseudoStateOptions( name ),
+		[ name ]
+	);
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	if ( ! pseudoStateOptions.length ) {
@@ -90,7 +109,15 @@ export function BlockStatesControl( { name, value, onChange } ) {
  * @return {Element|null} Badges component, or null if there is nothing to show.
  */
 export function BlockStateBadges( { name, value, isResponsiveEditing } ) {
-	const pseudoStateOptions = getPseudoStateOptions( name );
+	const pseudoStateOptions = useMemo(
+		() => getPseudoStateOptions( name ),
+		[ name ]
+	);
+	const [ viewportSettings ] = useSettings( 'viewport' );
+	const deviceStateOptions = useMemo(
+		() => getDeviceStateOptions( viewportSettings ),
+		[ viewportSettings ]
+	);
 
 	if ( ! pseudoStateOptions.length && ! isResponsiveEditing ) {
 		return null;
@@ -98,7 +125,9 @@ export function BlockStateBadges( { name, value, isResponsiveEditing } ) {
 
 	return (
 		<StateControlBadges
-			viewportStates={ isResponsiveEditing ? DEVICE_STATE_OPTIONS : [] }
+			viewportStates={
+				isResponsiveEditing ? deviceStateOptions : EMPTY_STATE_OPTIONS
+			}
 			pseudoStates={ pseudoStateOptions }
 			viewportValue={ value?.viewport ?? DEFAULT_STATE_VALUE }
 			pseudoStateValue={ value?.pseudo ?? DEFAULT_STATE_VALUE }

package/src/hooks/style.js

@@ -4,7 +4,10 @@
 import { useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
-import { mergeGlobalStyles } from '@wordpress/global-styles-engine';
+import {
+	mergeGlobalStyles,
+	privateApis as globalStylesEnginePrivateApis,
+} from '@wordpress/global-styles-engine';
 import {
 	getBlockSupport,
 	getBlockType,
@@ -12,7 +15,11 @@ import {
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
-import { getCSSRules, compileCSS } from '@wordpress/style-engine';
+import {
+	getCSSRules,
+	compileCSS,
+	getCSSValueFromRawStyle,
+} from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -49,18 +56,14 @@ import { VALID_BLOCK_PSEUDO_STATES } from './states';
 import { buildScopedBlockSelector } from './state-utils';
 import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockEditingMode } from '../components/block-editing-mode';
+import { useSettings } from '../components/use-settings';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
 import { unlock } from '../lock-unlock';
 
-const BORDER_SIDES = [ 'Top', 'Right', 'Bottom', 'Left' ];
+const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
 
-// Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and
-// packages/global-styles-engine/src/core/render.tsx.
-const RESPONSIVE_BREAKPOINTS = {
-	'@mobile': '@media (width <= 480px)',
-	'@tablet': '@media (480px < width <= 782px)',
-};
+const BORDER_SIDES = [ 'Top', 'Right', 'Bottom', 'Left' ];
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
@@ -202,6 +205,32 @@ function getStateFallbackDimensionStyles( stateStyles ) {
 	}
 }
 
+/**
+ * Returns CSS for text alignment in a block instance state style object.
+ *
+ * Text alignment is not generated by the style engine because base block
+ * alignment is serialized as a class name. State styles need a declaration
+ * instead so viewport and pseudo-state values can override the default class.
+ *
+ * @param {Object} stateStyles State style object.
+ * @param {string} selector    CSS selector for the generated style.
+ * @return {string|undefined} CSS string with the text alignment declaration.
+ */
+function getStateTextAlignCSS( stateStyles, selector ) {
+	const textAlign = stateStyles?.typography?.textAlign;
+
+	if ( typeof textAlign !== 'string' || ! textAlign ) {
+		return undefined;
+	}
+
+	const declaration = `text-align: ${ getCSSValueFromRawStyle(
+		textAlign
+	) } !important`;
+	return selector
+		? `${ selector } { ${ declaration }; }`
+		: `${ declaration };`;
+}
+
 /**
  * Generates CSS for a block instance state style object.
  *
@@ -225,12 +254,13 @@ export function getStateStylesCSS( stateStyles, selector ) {
 	const fallbackCSS = fallbackBorderStyles
 		? compileCSS( fallbackBorderStyles, { selector } )
 		: undefined;
+	const textAlignCSS = getStateTextAlignCSS( stateStyles, selector );
 	const backgroundResetCSS = getStateBackgroundResetCSS(
 		stateStyles,
 		selector
 	);
 
-	return [ importantCSS, fallbackCSS, backgroundResetCSS ]
+	return [ importantCSS, textAlignCSS, fallbackCSS, backgroundResetCSS ]
 		.filter( Boolean )
 		.join( '\n' );
 }
@@ -408,17 +438,25 @@ function getPseudoStateCSSRules( style, name, baseSelector ) {
  * pseudo-state styles. Generated rules are wrapped in the matching breakpoint
  * media query.
  *
- * @param {Object} style        Block style object containing responsive states.
- * @param {string} name         Block name.
- * @param {string} baseSelector Base selector used to scope generated CSS.
+ * @param {Object} style            Block style object containing responsive states.
+ * @param {string} name             Block name.
+ * @param {string} baseSelector     Base selector used to scope generated CSS.
+ * @param {Object} viewportSettings Viewport breakpoint settings.
  * @return {string[]} Generated CSS rule strings.
  */
-export function getResponsiveStateCSSRules( style, name, baseSelector ) {
+export function getResponsiveStateCSSRules(
+	style,
+	name,
+	baseSelector,
+	viewportSettings
+) {
 	const cssRules = [];
 	const validPseudoStates = VALID_BLOCK_PSEUDO_STATES[ name ] ?? [];
 	const nestedStateKeys = [ 'elements', ...validPseudoStates ];
+	const responsiveMediaQueries =
+		getResponsiveMediaQueries( viewportSettings );
 
-	Object.entries( RESPONSIVE_BREAKPOINTS ).forEach(
+	Object.entries( responsiveMediaQueries ).forEach(
 		( [ viewport, mediaQuery ] ) => {
 			const viewportStyles = getStyleForState( style, {
 				viewport,
@@ -970,6 +1008,7 @@ function useBlockProps( { name, style } ) {
 
 	const baseElementSelector = `.${ blockElementsContainerIdentifier }`;
 	const blockElementStyles = style?.elements;
+	const [ viewportSettings ] = useSettings( 'viewport' );
 
 	const styles = useMemo( () => {
 		const cssRules = [];
@@ -988,11 +1027,22 @@ function useBlockProps( { name, style } ) {
 		);
 
 		cssRules.push(
-			...getResponsiveStateCSSRules( style, name, baseElementSelector )
+			...getResponsiveStateCSSRules(
+				style,
+				name,
+				baseElementSelector,
+				viewportSettings
+			)
 		);
 
 		return cssRules.length > 0 ? cssRules.join( '' ) : undefined;
-	}, [ baseElementSelector, blockElementStyles, name, style ] );
+	}, [
+		baseElementSelector,
+		blockElementStyles,
+		name,
+		style,
+		viewportSettings,
+	] );
 
 	useStyleOverride( { css: styles } );