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

package/src/hooks/text-align.js

@@ -1,26 +1,19 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
+import { useSelect } from '@wordpress/data';
 import { AlignmentControl, BlockControls } from '../components';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import {
-	cleanEmptyObject,
-	shouldSkipSerialization,
-	useBlockSettings,
-} from './utils';
+	getStyleForState,
+	hasViewportBlockStyleState,
+	setStyleForState,
+} from './block-style-state';
+import { shouldSkipSerialization, useBlockSettings } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 
 export const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
 
@@ -64,7 +57,14 @@ export function getValidTextAlignments( blockTextAlign ) {
 	return blockTextAlign === true ? VALID_TEXT_ALIGNMENTS : NO_TEXT_ALIGNMENTS;
 }
 
+export function getTextAlignControlGroup( isResponsiveEditing, selectedState ) {
+	return isResponsiveEditing && hasViewportBlockStyleState( selectedState )
+		? 'style-state'
+		: 'block';
+}
+
 function BlockEditTextAlignmentToolbarControlsPure( {
+	clientId,
 	style,
 	name: blockName,
 	setAttributes,
@@ -72,6 +72,19 @@ function BlockEditTextAlignmentToolbarControlsPure( {
 	const settings = useBlockSettings( blockName );
 	const hasTextAlignControl = settings?.typography?.textAlign;
 	const blockEditingMode = useBlockEditingMode();
+	const { selectedState, isResponsiveEditing } = useSelect(
+		( select ) => {
+			const {
+				getSelectedBlockStyleState,
+				isResponsiveEditing: getIsResponsiveEditing,
+			} = unlock( select( blockEditorStore ) );
+			return {
+				selectedState: getSelectedBlockStyleState( clientId ),
+				isResponsiveEditing: getIsResponsiveEditing(),
+			};
+		},
+		[ clientId ]
+	);
 
 	if ( ! hasTextAlignControl || blockEditingMode !== 'default' ) {
 		return null;
@@ -87,23 +100,30 @@ function BlockEditTextAlignmentToolbarControlsPure( {
 	const textAlignmentControls = TEXT_ALIGNMENT_OPTIONS.filter( ( control ) =>
 		validTextAlignments.includes( control.align )
 	);
+	const stateStyle = getStyleForState( style, selectedState );
+	const controlsGroup = getTextAlignControlGroup(
+		isResponsiveEditing,
+		selectedState
+	);
 
 	const onChange = ( newTextAlignValue ) => {
-		const newStyle = {
-			...style,
+		const newStateStyle = {
+			...stateStyle,
 			typography: {
-				...style?.typography,
+				...stateStyle?.typography,
 				textAlign: newTextAlignValue,
 			},
 		};
 
-		setAttributes( { style: cleanEmptyObject( newStyle ) } );
+		setAttributes( {
+			style: setStyleForState( style, selectedState, newStateStyle ),
+		} );
 	};
 
 	return (
-		<BlockControls group="block">
+		<BlockControls group={ controlsGroup }>
 			<AlignmentControl
-				value={ style?.typography?.textAlign }
+				value={ stateStyle?.typography?.textAlign }
 				onChange={ onChange }
 				alignmentControls={ textAlignmentControls }
 			/>

package/src/hooks/typography.js

@@ -1,20 +1,13 @@
-/**
- * WordPress dependencies
- */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useMemo, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import InspectorControls from '../components/inspector-controls';
 import {
 	default as StylesTypographyPanel,
 	useHasTypographyPanel,
 } from '../components/global-styles/typography-panel';
-
+import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
 import { LINE_HEIGHT_SUPPORT_KEY } from './line-height';
 import { FONT_FAMILY_SUPPORT_KEY } from './font-family';
 import { FONT_SIZE_SUPPORT_KEY } from './font-size';
@@ -151,32 +144,42 @@ export function TypographyPanel( {
 	const selectedState = useBlockStyleState();
 	const isEnabled = useHasTypographyPanel( settings );
 
-	const { style, fontFamily, fontSize, fitText, textColor } = useSelect(
-		( select ) => {
-			// Early return to avoid subscription when disabled.
-			if ( ! isEnabled ) {
-				return {};
-			}
-			const {
-				style: _style,
-				fontFamily: _fontFamily,
-				fontSize: _fontSize,
-				fitText: _fitText,
-				textColor: _textColor,
-			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-			return {
-				style: _style,
-				fontFamily: _fontFamily,
-				fontSize: _fontSize,
-				fitText: _fitText,
-				textColor: _textColor,
-			};
-		},
-		[ clientId, isEnabled ]
-	);
+	const { style, fontFamily, fontSize, fitText, textColor, className } =
+		useSelect(
+			( select ) => {
+				// Early return to avoid subscription when disabled.
+				if ( ! isEnabled ) {
+					return {};
+				}
+				const {
+					style: _style,
+					fontFamily: _fontFamily,
+					fontSize: _fontSize,
+					fitText: _fitText,
+					textColor: _textColor,
+					className: _className,
+				} = select( blockEditorStore ).getBlockAttributes( clientId ) ||
+				{};
+				return {
+					style: _style,
+					fontFamily: _fontFamily,
+					fontSize: _fontSize,
+					fitText: _fitText,
+					textColor: _textColor,
+					className: _className,
+				};
+			},
+			[ clientId, isEnabled ]
+		);
 
 	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
 
+	const { value: inheritedValue } = useResolvedStyle(
+		name,
+		className,
+		selectedState
+	);
+
 	const value = useMemo( () => {
 		if ( isStateSelected ) {
 			return getStyleForState( style, selectedState );
@@ -214,7 +217,6 @@ export function TypographyPanel( {
 	// Link color failures are reported by the Elements panel, which owns the
 	// link color selection.
 	const enableContrastChecking =
-		! isStateSelected &&
 		! value?.color?.gradient &&
 		!! value?.color?.text &&
 		settings?.color?.text &&
@@ -258,6 +260,7 @@ export function TypographyPanel( {
 			onChange={ onChange }
 			defaultControls={ defaultControls }
 			contrastWarning={ contrastWarning }
+			inheritedValue={ inheritedValue }
 		/>
 	);
 }

package/src/hooks/use-border-props.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getInlineStyles } from './style';
 import { getBorderClasses, getMultiOriginColor } from './border';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';

package/src/hooks/use-cached-truthy.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useState, useEffect } from '@wordpress/element';
 
 /**

package/src/hooks/use-color-props.js

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { getInlineStyles } from './style';
 import {
 	getColorClassName,

package/src/hooks/use-content-only-section-edit.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useDispatch, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 

package/src/hooks/use-dimensions-props.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getInlineStyles } from './style';
 
 // This utility is intended to assist where the serialization of the dimensions

package/src/hooks/use-shadow-props.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getInlineStyles } from './style';
 
 // This utility is intended to assist where the serialization of the shadow

package/src/hooks/use-spacing-props.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getInlineStyles } from './style';
 
 // This utility is intended to assist where the serialization of the spacing

package/src/hooks/use-typography-props.js

@@ -1,22 +1,8 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
+import { kebabCase } from '@wordpress/kebab-case';
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
-import { unlock } from '../lock-unlock';
-
-const { kebabCase } = unlock( componentsPrivateApis );
 
 /*
  * This utility is intended to assist where the serialization of the typography

package/src/hooks/use-zoom-out.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 

package/src/hooks/utils.js

@@ -1,20 +1,9 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { getBlockSupport } from '@wordpress/blocks';
 import { memo, useMemo, useEffect, useId, useState } from '@wordpress/element';
 import { useDispatch, useRegistry } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
 import {
 	useBlockEditContext,
 	mayDisplayControlsKey,

package/src/index.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import './hooks';
 export {
 	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,

package/src/layouts/constrained.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
@@ -19,10 +16,6 @@ import {
 	justifyRight,
 } from '@wordpress/icons';
 import { getCSSRules } from '@wordpress/style-engine';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../components/use-settings';
 import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
@@ -219,6 +212,7 @@ export default {
 		layout = {},
 		onChange,
 		layoutBlockSupport,
+		controlsGroup = 'block',
 	} ) {
 		const { allowJustification = true } = layoutBlockSupport;
 
@@ -226,7 +220,10 @@ export default {
 			return null;
 		}
 		return (
-			<BlockControls group="block" __experimentalShareWithChildBlocks>
+			<BlockControls
+				group={ controlsGroup }
+				__experimentalShareWithChildBlocks
+			>
 				<DefaultLayoutJustifyContentControl
 					layout={ layout }
 					onChange={ onChange }

package/src/layouts/flex.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, _x } from '@wordpress/i18n';
 import {
 	justifyLeft,
@@ -23,10 +20,6 @@ import {
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
@@ -240,6 +233,7 @@ export default {
 		layout = {},
 		onChange,
 		layoutBlockSupport,
+		controlsGroup = 'block',
 	} ) {
 		const { allowVerticalAlignment = true, allowJustification = true } =
 			layoutBlockSupport;
@@ -249,7 +243,10 @@ export default {
 		}
 
 		return (
-			<BlockControls group="block" __experimentalShareWithChildBlocks>
+			<BlockControls
+				group={ controlsGroup }
+				__experimentalShareWithChildBlocks
+			>
 				{ allowJustification && (
 					<FlexLayoutJustifyContentControl
 						layout={ layout }

package/src/layouts/flow.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';

package/src/layouts/grid.js

@@ -1,8 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
-
 import {
 	BaseControl,
 	Flex,
@@ -17,10 +13,6 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
@@ -452,7 +444,6 @@ function GridLayoutColumnsAndRowsControl( {
 				<Flex gap={ 4 }>
 					<FlexItem isBlock>
 						<NumberControl
-							size="__unstable-large"
 							onChange={ ( value ) => {
 								// Allow unsetting the column count when in auto mode.
 								const defaultNewColumnCount = isManualPlacement
@@ -477,7 +468,6 @@ function GridLayoutColumnsAndRowsControl( {
 					<FlexItem isBlock>
 						{ allowSizingOnChildren && isManualPlacement ? (
 							<NumberControl
-								size="__unstable-large"
 								onChange={ ( value ) => {
 									// Don't allow unsetting the row count.
 									const newRowCount =

package/src/layouts/index.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import flex from './flex';
 import flow from './flow';
 import constrained from './constrained';

package/src/layouts/test/constrained.js

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import constrained from '../constrained';
 
 const ConstrainedLayoutInspectorControls = constrained.inspectorControls;

package/src/layouts/test/flex.js

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import flex from '../flex';
 
 const FlexLayoutInspectorControls = flex.inspectorControls;

package/src/layouts/test/flow.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import flow from '../flow';
 
 describe( 'getLayoutStyle', () => {

package/src/layouts/test/grid.js

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import grid from '../grid';
 
 const GridLayoutInspectorControls = grid.inspectorControls;

package/src/layouts/test/utils.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { appendSelectors, getBlockGapCSS } from '../utils';
 
 const layoutDefinitions = {

package/src/layouts/utils.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { LAYOUT_DEFINITIONS } from './definitions';
 
 /**

package/src/lock-unlock.ts

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 
 export const { lock, unlock } =

package/src/private-apis.js

@@ -1,9 +1,7 @@
-/**
- * Internal dependencies
- */
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
-import { lock } from './lock-unlock';
+import { lock, unlock } from './lock-unlock';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
@@ -40,7 +38,6 @@ import {
 	ExperimentalBlockCanvas,
 	BlockCanvasCover,
 } from './components/block-canvas';
-import { getDuotoneFilter } from './components/duotone/utils';
 import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 import {
 	selectBlockPatternsKey,
@@ -79,11 +76,14 @@ import useRemoteUrlData from './components/link-control/use-rich-url-data';
 import { PrivateBlockContext } from './components/block-list/private-block-context';
 import useListViewPanelState from './components/use-list-view-panel-state';
 import InnerContent from './components/inner-content';
+import { useNativeUndo, usesNativeUndo } from './utils/native-undo';
 import {
 	isHashLink,
 	isRelativePath,
 } from './components/link-control/is-url-like';
 
+const { getDuotoneFilter } = unlock( globalStylesEnginePrivateApis );
+
 /**
  * Private @wordpress/block-editor APIs.
  */
@@ -157,4 +157,6 @@ lock( privateApis, {
 	isHashLink,
 	isRelativePath,
 	InnerContent,
+	useNativeUndo,
+	usesNativeUndo,
 } );