@wordpress/block-editor 15.6.3 → 15.7.1-next.2f1c7c01b.0

package/src/components/block-navigation/style.scss

@@ -10,5 +10,5 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 }

package/src/components/block-popover/inbetween.js

@@ -217,7 +217,6 @@ function BlockPopoverInbetween( {
 		return null;
 	}
 
-	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 	// While ideally it would be enough to capture the
 	// bubbling focus event from the Inserter, due to the
 	// characteristics of click focusing of `button`s in
@@ -253,7 +252,6 @@ function BlockPopoverInbetween( {
 			</div>
 		</Popover>
 	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 }
 
 export default BlockPopoverInbetween;

package/src/components/block-quick-navigation/index.js

@@ -60,6 +60,7 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {
 	return (
 		<Button
 			__next40pxDefaultSize
+			className="block-editor-block-quick-navigation__item"
 			isPressed={ isSelected }
 			onClick={ async () => {
 				await selectBlock( clientId );

package/src/components/block-quick-navigation/style.scss

@@ -0,0 +1,5 @@
+@use "@wordpress/base-styles/variables";
+
+.block-editor-block-quick-navigation__item {
+	font-weight: variables.$font-weight-regular;
+}

package/src/components/block-settings-menu-controls/index.js

@@ -19,7 +19,7 @@ import {
 import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
-import { ModifyContentLockMenuItem } from '../content-lock';
+import { ModifyContentOnlySectionMenuItem } from '../content-lock';
 import { BlockRenameControl, useBlockRename } from '../block-rename';
 import { BlockVisibilityMenuItem } from '../block-visibility';
 
@@ -115,7 +115,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 						) }
 						{ fills }
 						{ selectedClientIds.length === 1 && (
-							<ModifyContentLockMenuItem
+							<ModifyContentOnlySectionMenuItem
 								clientId={ selectedClientIds[ 0 ] }
 								onClose={ fillProps?.onClose }
 							/>

package/src/components/block-switcher/style.scss

@@ -94,7 +94,7 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 }
 
 // The block switcher in the contextual toolbar should be bigger.

package/src/components/block-toolbar/switch-section-style.js

@@ -10,7 +10,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,7 +17,6 @@ import { useContext } from '@wordpress/element';
 import useStylesForBlocks from '../block-styles/use-styles-for-block';
 import { replaceActiveStyle } from '../block-styles/utils';
 import { store as blockEditorStore } from '../../store';
-import { GlobalStylesContext } from '../global-styles';
 import { globalStylesDataKey } from '../../store/private-keys';
 import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation';
 
@@ -47,7 +45,6 @@ function SwitchSectionStyle( { clientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	// Get global styles data
-	const { merged: mergedConfig } = useContext( GlobalStylesContext );
 	const { globalSettings, globalStyles, blockName } = useSelect(
 		( select ) => {
 			const settings = select( blockEditorStore ).getSettings();
@@ -64,8 +61,8 @@ function SwitchSectionStyle( { clientId } ) {
 	const activeStyleBackground = activeStyle?.name
 		? getVariationStylesWithRefValues(
 				{
-					settings: mergedConfig?.settings ?? globalSettings,
-					styles: mergedConfig?.styles ?? globalStyles,
+					settings: globalSettings,
+					styles: globalStyles,
 				},
 				blockName,
 				activeStyle.name

package/src/components/block-variation-transforms/index.js

@@ -5,16 +5,13 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
-	DropdownMenu,
-	MenuGroup,
-	MenuItemsChoice,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	VisuallyHidden,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-import { chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -23,6 +20,8 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+const { Menu } = unlock( componentsPrivateApis );
+
 function VariationsButtons( {
 	className,
 	onSelectVariation,
@@ -65,36 +64,45 @@ function VariationsDropdown( {
 	selectedValue,
 	variations,
 } ) {
-	const selectOptions = variations.map(
-		( { name, title, description } ) => ( {
-			value: name,
-			label: title,
-			info: description,
-		} )
-	);
-
 	return (
-		<DropdownMenu
-			className={ className }
-			label={ __( 'Transform to variation' ) }
-			text={ __( 'Transform to variation' ) }
-			popoverProps={ {
-				position: 'bottom center',
-				className: `${ className }__popover`,
-			} }
-			icon={ chevronDown }
-			toggleProps={ { iconPosition: 'right' } }
-		>
-			{ () => (
-				<MenuGroup>
-					<MenuItemsChoice
-						choices={ selectOptions }
-						value={ selectedValue }
-						onSelect={ onSelectVariation }
-					/>
-				</MenuGroup>
-			) }
-		</DropdownMenu>
+		<div className={ className }>
+			<Menu>
+				<Menu.TriggerButton
+					render={
+						<Button
+							className="block-editor-block-variation-transforms__button"
+							__next40pxDefaultSize
+							variant="secondary"
+						>
+							{ __( 'Transform to variation' ) }
+						</Button>
+					}
+				/>
+				<Menu.Popover position="bottom">
+					<Menu.Group>
+						{ variations.map( ( variation ) => (
+							<Menu.RadioItem
+								key={ variation.name }
+								value={ variation.name }
+								checked={ selectedValue === variation.name }
+								onChange={ () =>
+									onSelectVariation( variation.name )
+								}
+							>
+								<Menu.ItemLabel>
+									{ variation.title }
+								</Menu.ItemLabel>
+								{ variation.description && (
+									<Menu.ItemHelpText>
+										{ variation.description }
+									</Menu.ItemHelpText>
+								) }
+							</Menu.RadioItem>
+						) ) }
+					</Menu.Group>
+				</Menu.Popover>
+			</Menu>
+		</div>
 	);
 }
 

package/src/components/block-variation-transforms/style.scss

@@ -1,49 +1,19 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
 
-.block-editor-block-variation-transforms:where(fieldset) {
-	// Reset `fieldset` browser defaults.
-	border: 0;
-	padding: 0;
-	margin: 0;
-}
-
 .block-editor-block-variation-transforms {
 	box-sizing: border-box;
 	padding: 0 $grid-unit-20 $grid-unit-20 52px;
-	width: 100%;
-
-	.components-dropdown-menu__toggle {
-		border: $border-width solid $gray-700;
-		border-radius: $radius-small;
-		min-height: 30px;
-		width: 100%;
-		position: relative;
-		text-align: left;
-		justify-content: left;
-		padding: 6px 12px;
 
-		// For all button sizes allow sufficient space for the
-		// dropdown "arrow" icon to display.
-		&.components-dropdown-menu__toggle {
-			padding-right: $icon-size;
-		}
-
-		&:focus:not(:disabled) {
-			border-color: var(--wp-admin-theme-color);
-			box-shadow: 0 0 0 calc(var(--wp-admin-border-width-focus) - #{ $border-width }) var(--wp-admin-theme-color);
-		}
-
-		svg {
-			height: 100%;
-			padding: 0;
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
+	&:where(fieldset) {
+		// Reset `fieldset` browser defaults.
+		border: 0;
+		padding: 0;
+		margin: 0;
 	}
 }
 
-.block-editor-block-variation-transforms__popover .components-popover__content {
-	min-width: 230px;
+.block-editor-block-variation-transforms__button {
+	width: 100%;
+	justify-content: center;
 }

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -42,7 +42,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 
 .emotion-6 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;

package/src/components/content-lock/index.js

@@ -1 +1 @@
-export { ModifyContentLockMenuItem } from './modify-content-lock-menu-item';
+export { ModifyContentOnlySectionMenuItem } from './modify-content-lock-menu-item';

package/src/components/content-lock/modify-content-lock-menu-item.js

@@ -12,42 +12,45 @@ import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 // The implementation of content locking is mainly in this file, although the mechanism
-// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
-// at block-editor/src/components/block-list/index.js.
+// to stop editing a content only section when an outside block is selected is in the component
+// `StopEditingContentOnlySectionOnOutsideSelect` at block-editor/src/components/block-list/index.js.
 // Besides the components on this file and the file referenced above the implementation
 // also includes artifacts on the store (actions, reducers, and selector).
 
-export function ModifyContentLockMenuItem( { clientId, onClose } ) {
-	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
-		( select ) => {
-			const {
-				getContentLockingParent,
-				getTemplateLock,
-				getTemporarilyEditingAsBlocks,
-			} = unlock( select( blockEditorStore ) );
-			return {
-				templateLock: getTemplateLock( clientId ),
-				isLockedByParent: !! getContentLockingParent( clientId ),
-				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
-			};
-		},
-		[ clientId ]
-	);
+export function ModifyContentOnlySectionMenuItem( { clientId, onClose } ) {
+	const { templateLock, isLockedByParent, isEditingContentOnlySection } =
+		useSelect(
+			( select ) => {
+				const {
+					getContentLockingParent,
+					getTemplateLock,
+					getEditedContentOnlySection,
+				} = unlock( select( blockEditorStore ) );
+				return {
+					templateLock: getTemplateLock( clientId ),
+					isLockedByParent: !! getContentLockingParent( clientId ),
+					isEditingContentOnlySection:
+						getEditedContentOnlySection() === clientId,
+				};
+			},
+			[ clientId ]
+		);
 	const blockEditorActions = useDispatch( blockEditorStore );
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
-	if ( ! isContentLocked && ! isEditingAsBlocks ) {
+	if ( ! isContentLocked && ! isEditingContentOnlySection ) {
 		return null;
 	}
 
-	const { modifyContentLockBlock } = unlock( blockEditorActions );
-	const showStartEditingAsBlocks = ! isEditingAsBlocks && isContentLocked;
+	const { editContentOnlySection } = unlock( blockEditorActions );
+	const showStartEditingAsBlocks =
+		! isEditingContentOnlySection && isContentLocked;
 
 	return (
 		showStartEditingAsBlocks && (
 			<MenuItem
 				onClick={ () => {
-					modifyContentLockBlock( clientId );
+					editContentOnlySection( clientId );
 					onClose();
 				} }
 			>

package/src/components/global-styles/border-panel.js

@@ -11,13 +11,14 @@ import {
 } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
-import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
+import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import { useBorderPanelLabel } from '../../hooks/border';
 import { ShadowPopover, useShadowPresets } from './shadow-panel-components';

package/src/components/global-styles/color-panel.js

@@ -21,13 +21,14 @@ import {
 } from '@wordpress/components';
 import { useCallback, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import ColorGradientControl from '../colors-gradients/control';
 import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
-import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
+import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
 import { reset as resetIcon } from '@wordpress/icons';

package/src/components/global-styles/color-panel.native.js

@@ -5,13 +5,13 @@ import { useSelect } from '@wordpress/data';
 import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import PanelColorGradientSettings from '../colors-gradients/panel-color-gradient-settings';
 import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
-import { getValueFromVariable } from './utils';
 import { setImmutably } from '../../utils/object';
 import ContrastChecker from '../contrast-checker';
 import InspectorControls from '../inspector-controls';

package/src/components/global-styles/dimensions-panel.js

@@ -17,11 +17,12 @@ import {
 } from '@wordpress/components';
 import { Icon, alignNone, stretchWide } from '@wordpress/icons';
 import { useCallback, useState, Platform } from '@wordpress/element';
+import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
-import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
+import { useToolsPanelDropdownMenuProps } from './utils';
 import SpacingSizesControl from '../spacing-sizes-control';
 import HeightControl from '../height-control';
 import ChildLayoutControl from '../child-layout-control';

package/src/components/global-styles/filters-panel.js

@@ -24,11 +24,12 @@ import {
 import { __, _x } from '@wordpress/i18n';
 import { useCallback, useMemo, useRef } from '@wordpress/element';
 import { reset as resetIcon } from '@wordpress/icons';
+import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
-import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
+import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 
 const EMPTY_ARRAY = [];

package/src/components/global-styles/hooks.js

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import fastDeepEqual from 'fast-deep-equal/es6';
-
 /**
  * WordPress dependencies
  */
-import { useContext, useCallback, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 import { _x } from '@wordpress/i18n';
@@ -14,202 +9,8 @@ import { _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getValueFromVariable, getPresetVariableFromValue } from './utils';
-import { getValueFromObjectPath, setImmutably } from '../../utils/object';
-import { GlobalStylesContext } from './context';
 import { unlock } from '../../lock-unlock';
 
-const EMPTY_CONFIG = { settings: {}, styles: {} };
-
-const VALID_SETTINGS = [
-	'appearanceTools',
-	'useRootPaddingAwareAlignments',
-	'background.backgroundImage',
-	'background.backgroundRepeat',
-	'background.backgroundSize',
-	'background.backgroundPosition',
-	'border.color',
-	'border.radius',
-	'border.style',
-	'border.width',
-	'border.radiusSizes',
-	'shadow.presets',
-	'shadow.defaultPresets',
-	'color.background',
-	'color.button',
-	'color.caption',
-	'color.custom',
-	'color.customDuotone',
-	'color.customGradient',
-	'color.defaultDuotone',
-	'color.defaultGradients',
-	'color.defaultPalette',
-	'color.duotone',
-	'color.gradients',
-	'color.heading',
-	'color.link',
-	'color.palette',
-	'color.text',
-	'custom',
-	'dimensions.aspectRatio',
-	'dimensions.minHeight',
-	'layout.contentSize',
-	'layout.definitions',
-	'layout.wideSize',
-	'lightbox.enabled',
-	'lightbox.allowEditing',
-	'position.fixed',
-	'position.sticky',
-	'spacing.customSpacingSize',
-	'spacing.defaultSpacingSizes',
-	'spacing.spacingSizes',
-	'spacing.spacingScale',
-	'spacing.blockGap',
-	'spacing.margin',
-	'spacing.padding',
-	'spacing.units',
-	'typography.fluid',
-	'typography.customFontSize',
-	'typography.defaultFontSizes',
-	'typography.dropCap',
-	'typography.fontFamilies',
-	'typography.fontSizes',
-	'typography.fontStyle',
-	'typography.fontWeight',
-	'typography.letterSpacing',
-	'typography.lineHeight',
-	'typography.textAlign',
-	'typography.textColumns',
-	'typography.textDecoration',
-	'typography.textTransform',
-	'typography.writingMode',
-];
-
-export const useGlobalStylesReset = () => {
-	const { user, setUserConfig } = useContext( GlobalStylesContext );
-	const config = {
-		settings: user.settings,
-		styles: user.styles,
-	};
-	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
-	return [
-		canReset,
-		useCallback( () => setUserConfig( EMPTY_CONFIG ), [ setUserConfig ] ),
-	];
-};
-
-export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
-	const { setUserConfig, ...configs } = useContext( GlobalStylesContext );
-	const appendedBlockPath = blockName ? '.blocks.' + blockName : '';
-	const appendedPropertyPath = propertyPath ? '.' + propertyPath : '';
-	const contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;
-	const globalPath = `settings${ appendedPropertyPath }`;
-	const sourceKey = source === 'all' ? 'merged' : source;
-
-	const settingValue = useMemo( () => {
-		const configToUse = configs[ sourceKey ];
-		if ( ! configToUse ) {
-			throw 'Unsupported source';
-		}
-
-		if ( propertyPath ) {
-			return (
-				getValueFromObjectPath( configToUse, contextualPath ) ??
-				getValueFromObjectPath( configToUse, globalPath )
-			);
-		}
-
-		let result = {};
-		VALID_SETTINGS.forEach( ( setting ) => {
-			const value =
-				getValueFromObjectPath(
-					configToUse,
-					`settings${ appendedBlockPath }.${ setting }`
-				) ??
-				getValueFromObjectPath( configToUse, `settings.${ setting }` );
-			if ( value !== undefined ) {
-				result = setImmutably( result, setting.split( '.' ), value );
-			}
-		} );
-		return result;
-	}, [
-		configs,
-		sourceKey,
-		propertyPath,
-		contextualPath,
-		globalPath,
-		appendedBlockPath,
-	] );
-
-	const setSetting = ( newValue ) => {
-		setUserConfig( ( currentConfig ) =>
-			setImmutably( currentConfig, contextualPath.split( '.' ), newValue )
-		);
-	};
-	return [ settingValue, setSetting ];
-}
-
-export function useGlobalStyle(
-	path,
-	blockName,
-	source = 'all',
-	{ shouldDecodeEncode = true } = {}
-) {
-	const {
-		merged: mergedConfig,
-		base: baseConfig,
-		user: userConfig,
-		setUserConfig,
-	} = useContext( GlobalStylesContext );
-	const appendedPath = path ? '.' + path : '';
-	const finalPath = ! blockName
-		? `styles${ appendedPath }`
-		: `styles.blocks.${ blockName }${ appendedPath }`;
-
-	const setStyle = ( newValue ) => {
-		setUserConfig( ( currentConfig ) =>
-			setImmutably(
-				currentConfig,
-				finalPath.split( '.' ),
-				shouldDecodeEncode
-					? getPresetVariableFromValue(
-							mergedConfig.settings,
-							blockName,
-							path,
-							newValue
-					  )
-					: newValue
-			)
-		);
-	};
-
-	let rawResult, result;
-	switch ( source ) {
-		case 'all':
-			rawResult = getValueFromObjectPath( mergedConfig, finalPath );
-			result = shouldDecodeEncode
-				? getValueFromVariable( mergedConfig, blockName, rawResult )
-				: rawResult;
-			break;
-		case 'user':
-			rawResult = getValueFromObjectPath( userConfig, finalPath );
-			result = shouldDecodeEncode
-				? getValueFromVariable( mergedConfig, blockName, rawResult )
-				: rawResult;
-			break;
-		case 'base':
-			rawResult = getValueFromObjectPath( baseConfig, finalPath );
-			result = shouldDecodeEncode
-				? getValueFromVariable( baseConfig, blockName, rawResult )
-				: rawResult;
-			break;
-		default:
-			throw 'Unsupported source';
-	}
-
-	return [ result, setStyle ];
-}
-
 /**
  * React hook that overrides a global settings object with block and element specific settings.
  *

package/src/components/global-styles/index.js

@@ -1,18 +1,4 @@
-export {
-	useGlobalStylesReset,
-	useGlobalSetting,
-	useGlobalStyle,
-	useSettingsForBlockElement,
-} from './hooks';
-export { getBlockCSSSelector } from './get-block-css-selector';
-export {
-	getLayoutStyles,
-	getBlockSelectors,
-	toStyles,
-	useGlobalStylesOutput,
-	useGlobalStylesOutputWithConfig,
-} from './use-global-styles-output';
-export { GlobalStylesContext } from './context';
+export { useSettingsForBlockElement } from './hooks';
 export {
 	default as TypographyPanel,
 	useHasTypographyPanel,
@@ -37,5 +23,3 @@ export {
 	default as BackgroundPanel,
 	useHasBackgroundPanel,
 } from './background-panel';
-export { areGlobalStyleConfigsEqual } from './utils';
-export { default as getGlobalStylesChanges } from './get-global-styles-changes';