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

package/src/components/colors-gradients/style.scss

@@ -24,13 +24,6 @@ $swatch-gap: 12px;
 	min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
-	&,
-	& > div:not(:first-of-type) {
-		display: block;
-	}
-}
-
 .block-editor-panel-color-gradient-settings {
 	@media screen and (min-width: $break-medium) {
 		.components-circular-option-picker__swatches {
@@ -46,6 +39,23 @@ $swatch-gap: 12px;
 		margin-bottom: inherit;
 	}
 
+	/* Increased specificity required to remove the slot wrapper's row gap */
+	&#{&} {
+		.block-editor-panel-color-gradient-settings__inner-wrapper {
+			// `ToolsPanel` spans the inner wrapper across its grid via a
+			// positional selector that assumes a header is present. This panel
+			// can render without one (`showTitle={ false }`), so span it here.
+			grid-column: 1 / -1;
+			row-gap: 0;
+
+			// Unlike the other panels using an inner wrapper, this component
+			// accepts arbitrary children. Those carry no `ToolsPanelItem`
+			// class, so they'd otherwise be auto-placed into a single column.
+			> * {
+				grid-column: 1 / -1;
+			}
+		}
+	}
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content {

package/src/components/colors-gradients/test/control.js

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { screen } from '@testing-library/react';
 import { click, render } from '@ariakit/test/react';
-
-/**
- * Internal dependencies
- */
 import ColorGradientControl from '../control';
 
 const noop = () => {};

package/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
 import { _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../use-settings';
 
 /**

package/src/components/contrast-checker/index.js

@@ -1,13 +1,6 @@
-/**
- * External dependencies
- */
 import a11yPlugin from 'colord/plugins/a11y';
 import namesPlugin from 'colord/plugins/names';
 import { colord, extend } from 'colord';
-
-/**
- * WordPress dependencies
- */
 import { __, sprintf } from '@wordpress/i18n';
 import { Notice } from '@wordpress/components';
 import { speak } from '@wordpress/a11y';

package/src/components/contrast-checker/stories/index.story.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import ContrastChecker from '../';
 
 const meta = {

package/src/components/contrast-checker/test/index.js

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
 import ContrastChecker from '../';
 
 jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );

package/src/components/convert-to-group-buttons/index.js

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { MenuItem } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
-import { switchToBlockType } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
+import { groupBlocks } from '../../utils/group-blocks';
 import useConvertToGroupButtonProps from './use-convert-to-group-button-props';
 import BlockGroupToolbar from './toolbar';
 
@@ -26,11 +19,7 @@ function ConvertToGroupButton( {
 	const { getSelectedBlockClientIds } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const onConvertToGroup = () => {
-		// Activate the `transform` on the Grouping Block which does the conversion.
-		const newBlocks = switchToBlockType(
-			blocksSelection,
-			groupingBlockName
-		);
+		const newBlocks = groupBlocks( blocksSelection, groupingBlockName );
 		if ( newBlocks ) {
 			replaceBlocks( clientIds, newBlocks );
 		}

package/src/components/convert-to-group-buttons/toolbar.js

@@ -1,17 +1,11 @@
-/**
- * WordPress dependencies
- */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { group, row, stack, grid } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { useConvertToGroupButtonProps } from '../convert-to-group-buttons';
 import { store as blockEditorStore } from '../../store';
+import { groupBlocks } from '../../utils/group-blocks';
 
 const layouts = {
 	group: { type: 'constrained' },
@@ -42,10 +36,7 @@ function BlockGroupToolbar() {
 	);
 
 	const onConvertToGroup = ( layout ) => {
-		const newBlocks = switchToBlockType(
-			blocksSelection,
-			groupingBlockName
-		);
+		const newBlocks = groupBlocks( blocksSelection, groupingBlockName );
 
 		if ( typeof layout !== 'string' ) {
 			layout = 'group';

package/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 
 /**

package/src/components/copy-handler/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import useClipboardHandler from '../writing-flow/use-clipboard-handler';
 
 /**

package/src/components/date-format-picker/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { _x, __ } from '@wordpress/i18n';
 import { dateI18n, humanTimeDiff } from '@wordpress/date';
 import { useState, createInterpolateElement } from '@wordpress/element';

package/src/components/date-format-picker/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import DateFormatPicker from '../';
 
 export default {

package/src/components/default-block-appender/content.scss

@@ -111,12 +111,15 @@
 		display: none;
 	}
 
-	// These could be avoided by employing a :not(:only-child) on the parent,
+	// These could be avoided by employing a :not(:first-child) on the parent,
 	// but this should be more performant.
 	// @todo These styles can almost certainly be refactored away we refactor
 	// the markup and classes of the component itself. The rules provide some
-	// baseline styles for when the block is the only one inside.
-	&:only-child {
+	// baseline styles for when the container has no blocks. The appender
+	// always renders after the blocks, so being the first child means the
+	// container is empty; non-block siblings may follow, like the citation
+	// in the quote block.
+	&:first-child {
 		position: relative;
 		right: auto;
 		align-self: center;

package/src/components/default-block-appender/index.js

@@ -1,19 +1,8 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 

package/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
 <div>

package/src/components/default-block-appender/test/index.js

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
 import DefaultBlockAppender, { ZWNBSP } from '../';
 import * as blockEditorActions from '../../../store/actions';
 import * as blockEditorSelectors from '../../../store/selectors';

package/src/components/dimension-control/index.js

@@ -1,6 +1,4 @@
-/**
- * WordPress dependencies
- */
+import clsx from 'clsx';
 import { useMemo, useState } from '@wordpress/element';
 import {
 	BaseControl,
@@ -8,10 +6,6 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../use-settings';
 import PresetInputControl from '../preset-input-control';
 import { CUSTOM_VALUE_SETTINGS } from '../preset-input-control/constants';
@@ -58,6 +52,8 @@ function useDimensionSizes( presets ) {
  * @param {?string}                    props.label          A label for the control.
  * @param {( value: string ) => void } props.onChange       Called when the dimension value changes.
  * @param {string}                     props.value          The current dimension value.
+ * @param {?string}                    props.placeholder    Placeholder text for the custom-value input.
+ * @param {?string}                    props.className      Additional CSS class on the wrapping fieldset.
  * @param {?Object}                    props.dimensionSizes Optional dimension size presets. Falls back to settings from the store.
  *
  * @return {Component} The component to be rendered.
@@ -66,6 +62,8 @@ export default function DimensionControl( {
 	label = __( 'Dimension' ),
 	onChange,
 	value,
+	placeholder,
+	className,
 	dimensionSizes: dimensionSizesProp,
 } ) {
 	const [ dimensionSizesFromSettings, availableUnits ] = useSettings(
@@ -146,7 +144,9 @@ export default function DimensionControl( {
 	};
 
 	return (
-		<fieldset className="block-editor-dimension-control">
+		<fieldset
+			className={ clsx( 'block-editor-dimension-control', className ) }
+		>
 			<BaseControl.VisualLabel as="legend">
 				{ label }
 			</BaseControl.VisualLabel>
@@ -157,6 +157,7 @@ export default function DimensionControl( {
 				minimumCustomValue={ 0 }
 				onChange={ onChange }
 				onUnitChange={ handleUnitChange }
+				placeholder={ placeholder }
 				presets={ options }
 				presetType="dimension"
 				selectedUnit={ selectedUnit }

package/src/components/dimension-control/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import DimensionControl from '../';
 
 export default {

package/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -1,15 +1,7 @@
-/**
- * WordPress dependencies
- */
-import {
-	SelectControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-/**
- * Internal dependencies
- */
 import { useSettings } from '../use-settings';
+import { InheritanceToolsPanelItem } from '../global-styles/inheritance';
 
 /**
  * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
@@ -29,6 +21,9 @@ import { useSettings } from '../use-settings';
  * @property {SelectControlProps[]}         [options]          Aspect ratio options.
  * @property {string}                       [defaultValue]     Default aspect ratio value.
  * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
+ * @property {string}                       [className]        Additional CSS class on the wrapping panel item.
+ * @property {boolean}                      [isInherited]      Whether the control is displaying an inherited Global Styles value.
+ * @property {boolean}                      [hasLocalOverride] Whether a local value is overriding an inherited Global Styles value.
  */
 
 export default function AspectRatioTool( {
@@ -39,6 +34,9 @@ export default function AspectRatioTool( {
 	defaultValue = 'auto',
 	hasValue,
 	isShownByDefault = true,
+	className,
+	isInherited,
+	hasLocalOverride,
 } ) {
 	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
 	const displayValue = value ?? 'auto';
@@ -78,7 +76,10 @@ export default function AspectRatioTool( {
 	];
 
 	return (
-		<ToolsPanelItem
+		<InheritanceToolsPanelItem
+			className={ className }
+			isInherited={ isInherited }
+			hasLocalOverride={ hasLocalOverride }
 			hasValue={
 				hasValue ? hasValue : () => displayValue !== defaultValue
 			}
@@ -93,6 +94,6 @@ export default function AspectRatioTool( {
 				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
 			/>
-		</ToolsPanelItem>
+		</InheritanceToolsPanelItem>
 	);
 }

package/src/components/dimensions-tool/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import AspectRatioTool from './aspect-ratio-tool';
 import ScaleTool from './scale-tool';
 import WidthHeightTool from './width-height-tool';

package/src/components/dimensions-tool/scale-tool.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalToggleGroupControl as ToggleGroupControl,

package/src/components/dimensions-tool/stories/aspect-ratio-tool.story.jsx

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import AspectRatioTool from '../aspect-ratio-tool';
 
 export default {

package/src/components/dimensions-tool/stories/index.story.jsx

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import DimensionsTool from '..';
 
 export default {

package/src/components/dimensions-tool/stories/scale-tool.story.jsx

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import ScaleTool from '../scale-tool';
 
 export default {

package/src/components/dimensions-tool/stories/width-height-tool.story.jsx

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import WidthHeightTool from '../width-height-tool';
 
 export default {

package/src/components/dimensions-tool/test/index.js

@@ -1,18 +1,7 @@
-/**
- * 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';
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import DimensionsTool from '../';
 
 const EMPTY_OBJECT = {};

package/src/components/dimensions-tool/width-height-tool.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,

package/src/components/duotone-control/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	ColorIndicator,
 	Dropdown,

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

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import RichText from '../rich-text';
 
 const EditableText = forwardRef( ( props, ref ) => {

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

@@ -1,20 +1,9 @@
-/**
- * External dependencies
- */
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
-
-/**
- * WordPress dependencies
- */
 import { SVG } from '@wordpress/components';
 import { useCallback, useMemo, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import transformStyles from '../../utils/transform-styles';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
@@ -75,7 +64,22 @@ function EditorStyles( { styles, scope, transformOptions } ) {
 	const [ transformedStyles, transformedSvgs ] = useMemo( () => {
 		const _styles = Object.values( styles ?? [] );
 
-		for ( const [ id, override ] of overrides ) {
+		/*
+		 * Custom CSS overrides are applied after all other overrides so they
+		 * win the cascade at equal specificity, mirroring the front end where
+		 * the custom CSS stylesheet is printed last. Both partitions keep the
+		 * block order established by getStyleOverrides.
+		 */
+		const orderedOverrides = [
+			...overrides.filter(
+				( [ , override ] ) => override?.__unstableType !== 'custom-css'
+			),
+			...overrides.filter(
+				( [ , override ] ) => override?.__unstableType === 'custom-css'
+			),
+		];
+
+		for ( const [ id, override ] of orderedOverrides ) {
 			const index = _styles.findIndex( ( { id: _id } ) => id === _id );
 			const overrideWithId = { ...override, id };
 			if ( index === -1 ) {

package/src/components/fit-text-size-warning/index.js

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

package/src/components/floating-toolbar/nav-up-icon.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { SVG, Path } from '@wordpress/components';
 import { isRTL } from '@wordpress/i18n';
 

package/src/components/font-appearance-control/index.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { CustomSelectControl } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 /**

package/src/components/font-family/index.js

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { CustomSelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {

package/src/components/font-family/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import FontFamilyControl from '..';
 
 export default {
@@ -44,7 +37,7 @@ export const Default = {
 			},
 			{
 				fontFamily:
-					'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+					'-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
 				name: 'System Font',
 				slug: 'system-font',
 			},

package/src/components/font-sizes/font-size-picker.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../use-settings';
 
 function FontSizePicker( props ) {