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

package/src/hooks/dimensions.js

@@ -1,24 +1,14 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import InspectorControls from '../components/inspector-controls';
 import {
 	DimensionsPanel as StylesDimensionsPanel,
 	useHasDimensionsPanel,
 } from '../components/global-styles';
+import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
 import { MarginVisualizer, PaddingVisualizer } from './spacing-visualizer';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
@@ -78,17 +68,28 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 	const selectedState = useBlockStyleState();
 	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
 	const isEnabled = useHasDimensionsPanel( settings, selectedState );
-	const style = useSelect(
+	const { style, className } = useSelect(
 		( select ) => {
 			// Early return to avoid subscription when disabled
 			if ( ! isEnabled ) {
-				return undefined;
+				return {};
 			}
-			return select( blockEditorStore ).getBlockAttributes( clientId )
-				?.style;
+			const attributes =
+				select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return {
+				style: attributes.style,
+				className: attributes.className,
+			};
 		},
 		[ clientId, isEnabled ]
 	);
+
+	const { value: inheritedValue } = useResolvedStyle(
+		name,
+		className,
+		selectedState
+	);
+
 	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
 	const value = isStateSelected
 		? getStyleForState( style, selectedState )
@@ -139,6 +140,7 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 				onVisualize={
 					isStateSelected ? undefined : setVisualizedProperty
 				}
+				inheritedValue={ inheritedValue }
 			/>
 			{ ! isStateSelected &&
 				!! settings?.spacing?.padding &&

package/src/hooks/duotone.js

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
-
-/**
- * WordPress dependencies
- */
 import {
 	getBlockSupport,
 	getBlockType,
@@ -15,31 +8,32 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useEffect } from '@wordpress/element';
-import { getBlockSelector } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
+import { useSelect } from '@wordpress/data';
+import {
+	getBlockSelector,
+	privateApis as globalStylesEnginePrivateApis,
+} from '@wordpress/global-styles-engine';
 import {
 	BlockControls,
 	InspectorControls,
 	__experimentalDuotoneControl as DuotoneControl,
 	useSettings,
 } from '../components';
-import {
-	getDuotoneFilter,
-	getDuotoneStylesheet,
-	getDuotoneUnsetStylesheet,
-} from '../components/duotone/utils';
 import { scopeSelector } from '../components/global-styles/utils';
 import {
 	cleanEmptyObject,
 	useBlockSettings,
 	usePrivateStyleOverride,
 } from './utils';
+import { unlock } from '../lock-unlock';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
+import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+import { store as blockEditorStore } from '../store';
+
+const { getDuotoneFilter, getDuotoneStylesheet, getDuotoneUnsetStylesheet } =
+	unlock( globalStylesEnginePrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -98,11 +92,21 @@ export function getDuotonePresetFromColors( colors, duotonePalette ) {
 	return preset ? `var:preset|duotone|${ preset.slug }` : undefined;
 }
 
-function DuotonePanelPure( { style, setAttributes, name } ) {
+function DuotonePanelPure( { style, setAttributes, name, clientId } ) {
 	const duotoneStyle = style?.color?.duotone;
 	const settings = useBlockSettings( name );
 	const blockEditingMode = useBlockEditingMode();
 
+	const className = useSelect(
+		( select ) =>
+			clientId
+				? select( blockEditorStore ).getBlockAttributes( clientId )
+						?.className
+				: undefined,
+		[ clientId ]
+	);
+	const { value: inheritedValue } = useResolvedStyle( name, className );
+
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
 		defaultSetting: 'color.defaultDuotone',
@@ -137,7 +141,9 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 		<>
 			<InspectorControls group="filter">
 				<StylesFiltersPanel
-					value={ { filter: { duotone: duotonePresetOrColors } } }
+					value={ {
+						filter: { duotone: duotonePresetOrColors },
+					} }
 					onChange={ ( newDuotone ) => {
 						const newStyle = {
 							...style,
@@ -150,6 +156,7 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 						} );
 					} }
 					settings={ settings }
+					inheritedValue={ inheritedValue }
 				/>
 			</InspectorControls>
 			<BlockControls group="block" __experimentalShareWithChildBlocks>

package/src/hooks/elements.js

@@ -1,19 +1,13 @@
-/**
- * WordPress dependencies
- */
 import { getBlockSupport } 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 {
 	useHasColorPanel,
 	default as StylesColorPanel,
 } from '../components/global-styles/color-panel';
+import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
 import { cleanEmptyObject } from './utils';
 import { store as blockEditorStore } from '../store';
 import { COLOR_SUPPORT_KEY } from './color';
@@ -59,18 +53,27 @@ export function ElementsEdit( {
 	const selectedState = useBlockStyleState();
 	const isEnabled = useHasColorPanel( settings );
 
-	const style = useSelect(
+	const { style, className } = useSelect(
 		( select ) => {
 			if ( ! isEnabled ) {
-				return undefined;
+				return {};
 			}
 			const attributes =
 				select( blockEditorStore ).getBlockAttributes( clientId );
-			return attributes?.style;
+			return {
+				style: attributes?.style,
+				className: attributes?.className,
+			};
 		},
 		[ clientId, isEnabled ]
 	);
 
+	const { value: inheritedValue } = useResolvedStyle(
+		name,
+		className,
+		selectedState
+	);
+
 	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
 
 	const value = useMemo( () => {
@@ -93,7 +96,6 @@ export function ElementsEdit( {
 	// Text and background color failures are reported by the Typography and
 	// Background panels, which own those selections.
 	const enableContrastChecking =
-		! isStateSelected &&
 		!! value?.elements?.link?.color?.text &&
 		settings?.color?.link &&
 		false !==
@@ -135,6 +137,7 @@ export function ElementsEdit( {
 			defaultControls={ defaultControls }
 			label={ label }
 			contrastWarning={ contrastWarning }
+			inheritedValue={ inheritedValue }
 		/>
 	);
 }

package/src/hooks/fit-text.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { useEffect, useCallback, useState } from '@wordpress/element';
@@ -11,13 +8,8 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
-
 const EMPTY_OBJECT = {};
 const MIN_FONT_SIZE_FOR_WARNING = 12;
-
-/**
- * Internal dependencies
- */
 import { optimizeFitText } from '../utils/fit-text-utils';
 import { store as blockEditorStore } from '../store';
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';

package/src/hooks/font-family.js

@@ -1,20 +1,11 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
+import { kebabCase } from '@wordpress/kebab-case';
 import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
-import { unlock } from '../lock-unlock';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
-const { kebabCase } = unlock( componentsPrivateApis );
 
 /**
  * Filters registered block settings, extending attributes to include

package/src/hooks/font-size.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
 import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import {
 	getFontSize,
 	getFontSizeClass,

package/src/hooks/gap.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 
 /**

package/src/hooks/generated-class-name.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport, getBlockDefaultClassName } from '@wordpress/blocks';
 

package/src/hooks/grid-visualizer.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { GridVisualizer, useGridLayoutSync } from '../components/grid';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
@@ -21,45 +14,48 @@ function GridLayoutSync( props ) {
 }
 
 function GridTools( { clientId, layout } ) {
-	const { isVisible, blockVisibility, deviceType } = useSelect(
-		( select ) => {
-			const {
-				isBlockSelected,
-				hasSelectedInnerBlock,
-				isDraggingBlocks,
-				getTemplateLock,
-				getBlockEditingMode,
-				getBlockAttributes,
-				getSettings,
-			} = select( blockEditorStore );
+	const { isVisible, blockVisibility, deviceType, viewportSettings } =
+		useSelect(
+			( select ) => {
+				const {
+					isBlockSelected,
+					hasSelectedInnerBlock,
+					isDraggingBlocks,
+					getTemplateLock,
+					getBlockEditingMode,
+					getBlockAttributes,
+					getSettings,
+				} = select( blockEditorStore );
 
-			// These calls are purposely ordered from least expensive to most expensive.
-			// Hides the visualizer in cases where the user is not or cannot interact with it.
-			// Also hide if a child block is selected, because layout-child.js will render
-			// the visualizer in that case (with proper childGridClientId handling).
-			if (
-				( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
-				getTemplateLock( clientId ) ||
-				getBlockEditingMode( clientId ) !== 'default' ||
-				hasSelectedInnerBlock( clientId )
-			) {
-				return { isVisible: false };
-			}
+				// These calls are purposely ordered from least expensive to most expensive.
+				// Hides the visualizer in cases where the user is not or cannot interact with it.
+				// Also hide if a child block is selected, because layout-child.js will render
+				// the visualizer in that case (with proper childGridClientId handling).
+				if (
+					( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
+					getTemplateLock( clientId ) ||
+					getBlockEditingMode( clientId ) !== 'default' ||
+					hasSelectedInnerBlock( clientId )
+				) {
+					return { isVisible: false };
+				}
 
-			const attributes = getBlockAttributes( clientId );
-			const settings = getSettings();
-			const currentDeviceType =
-				settings?.[ deviceTypeKey ]?.toLowerCase() ||
-				BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
+				const attributes = getBlockAttributes( clientId );
+				const settings = getSettings();
+				const currentDeviceType =
+					settings?.[ deviceTypeKey ]?.toLowerCase() ||
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 
-			return {
-				isVisible: true,
-				blockVisibility: attributes?.metadata?.blockVisibility,
-				deviceType: currentDeviceType,
-			};
-		},
-		[ clientId ]
-	);
+				return {
+					isVisible: true,
+					blockVisibility: attributes?.metadata?.blockVisibility,
+					deviceType: currentDeviceType,
+					viewportSettings:
+						settings?.__experimentalFeatures?.viewport,
+				};
+			},
+			[ clientId ]
+		);
 
 	// Get the block's DOM element to derive the canvas iframe window,
 	// so viewport detection matches the actual block rendering context
@@ -71,6 +67,7 @@ function GridTools( { clientId, layout } ) {
 		blockVisibility,
 		deviceType,
 		view: canvasView,
+		viewportSettings,
 	} );
 
 	// Check whether any ancestor is hidden at the viewport actually detected

package/src/hooks/index.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	createBlockEditFilter,
 	createBlockListBlockFilter,

package/src/hooks/layout-child.js

@@ -1,13 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 import { useStyleOverride } from './utils';
@@ -26,13 +20,10 @@ import {
 	getStyleForState,
 } from './block-style-state';
 
+const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
+
 // Used for generating the instance ID
 const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
-// Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS.
-const RESPONSIVE_BREAKPOINTS = {
-	'@mobile': '@media (width <= 480px)',
-	'@tablet': '@media (480px < width <= 782px)',
-};
 
 // These are the serialized `selfStretch` values. `max` used to be called
 // "Fixed" in the UI, but was renamed and replaced by `fixedNoShrink`.
@@ -253,10 +244,11 @@ export function getResponsiveChildLayoutStyles( {
 	style = {},
 	selector,
 	parentLayout = {},
+	viewportSettings,
 } ) {
 	const baseLayout = style?.layout ?? {};
 
-	return Object.entries( RESPONSIVE_BREAKPOINTS )
+	return Object.entries( getResponsiveMediaQueries( viewportSettings ) )
 		.map( ( [ viewport, mediaQuery ] ) => {
 			const viewportLayout = getStyleForState( style, {
 				viewport,
@@ -282,9 +274,15 @@ export function getResponsiveChildLayoutStyles( {
 }
 
 function useBlockPropsChildLayoutStyles( { style } ) {
-	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
-		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
-	} );
+	const { shouldRenderChildLayoutStyles, viewportSettings } = useSelect(
+		( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			return {
+				shouldRenderChildLayoutStyles: ! settings.disableLayoutStyles,
+				viewportSettings: settings?.__experimentalFeatures?.viewport,
+			};
+		}
+	);
 	const layout = style?.layout ?? {};
 	const { columnStart, rowStart, columnSpan, rowSpan } = layout;
 	const parentLayout = useLayout() || {};
@@ -320,6 +318,7 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 				style,
 				selector,
 				parentLayout,
+				viewportSettings,
 			} ),
 		].join( '' );
 	}
@@ -373,6 +372,7 @@ function GridTools( {
 		parentBlockVisibility,
 		blockBlockVisibility,
 		deviceType,
+		viewportSettings,
 		isChildBlockAGrid,
 	} = useSelect(
 		( select ) => {
@@ -411,6 +411,7 @@ function GridTools( {
 				blockBlockVisibility:
 					blockAttributes?.metadata?.blockVisibility,
 				deviceType: currentDeviceType,
+				viewportSettings: settings?.__experimentalFeatures?.viewport,
 				// Check if the selected child block is itself a grid.
 				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
 			};
@@ -431,6 +432,7 @@ function GridTools( {
 		blockVisibility: parentBlockVisibility,
 		deviceType,
 		view: canvasView,
+		viewportSettings,
 	} );
 
 	// Check whether any ancestor of the parent grid is hidden at the viewport
@@ -457,6 +459,7 @@ function GridTools( {
 			blockVisibility: blockBlockVisibility,
 			deviceType,
 			view: canvasView,
+			viewportSettings,
 		} );
 
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.