@wordpress/block-editor 14.10.1 → 14.12.0

package/src/components/inspector-controls-tabs/position-controls-panel.js

@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	__experimentalUseSlotFills as useSlotFills,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useLayoutEffect, useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,40 +15,75 @@ import { __ } from '@wordpress/i18n';
 import InspectorControlsGroups from '../inspector-controls/groups';
 import { default as InspectorControls } from '../inspector-controls';
 import { store as blockEditorStore } from '../../store';
+import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
+import { cleanEmptyObject } from '../../hooks/utils';
 
 const PositionControlsPanel = () => {
-	const [ initialOpen, setInitialOpen ] = useState();
+	const { selectedClientIds, selectedBlocks, hasPositionAttribute } =
+		useSelect( ( select ) => {
+			const { getBlocksByClientId, getSelectedBlockClientIds } =
+				select( blockEditorStore );
 
-	// Determine whether the panel should be expanded.
-	const { multiSelectedBlocks } = useSelect( ( select ) => {
-		const { getBlocksByClientId, getSelectedBlockClientIds } =
-			select( blockEditorStore );
-		const clientIds = getSelectedBlockClientIds();
-		return {
-			multiSelectedBlocks: getBlocksByClientId( clientIds ),
-		};
-	}, [] );
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const _selectedBlocks = getBlocksByClientId(
+				selectedBlockClientIds
+			);
 
-	useLayoutEffect( () => {
-		// If any selected block has a position set, open the panel by default.
-		// The first block's value will still be used within the control though.
-		if ( initialOpen === undefined ) {
-			setInitialOpen(
-				multiSelectedBlocks.some(
+			return {
+				selectedClientIds: selectedBlockClientIds,
+				selectedBlocks: _selectedBlocks,
+				hasPositionAttribute: _selectedBlocks?.some(
 					( { attributes } ) => !! attributes?.style?.position?.type
-				)
-			);
+				),
+			};
+		}, [] );
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	function resetPosition() {
+		if ( ! selectedClientIds?.length || ! selectedBlocks?.length ) {
+			return;
 		}
-	}, [ initialOpen, multiSelectedBlocks, setInitialOpen ] );
+
+		const attributesByClientId = Object.fromEntries(
+			selectedBlocks?.map( ( { clientId, attributes } ) => [
+				clientId,
+				{
+					style: cleanEmptyObject( {
+						...attributes?.style,
+						position: {
+							...attributes?.style?.position,
+							type: undefined,
+							top: undefined,
+							right: undefined,
+							bottom: undefined,
+							left: undefined,
+						},
+					} ),
+				},
+			] )
+		);
+
+		updateBlockAttributes( selectedClientIds, attributesByClientId, true );
+	}
 
 	return (
-		<PanelBody
+		<ToolsPanel
 			className="block-editor-block-inspector__position"
-			title={ __( 'Position' ) }
-			initialOpen={ initialOpen ?? false }
+			label={ __( 'Position' ) }
+			resetAll={ resetPosition }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
-			<InspectorControls.Slot group="position" />
-		</PanelBody>
+			<ToolsPanelItem
+				isShownByDefault={ hasPositionAttribute }
+				label={ __( 'Position' ) }
+				hasValue={ () => hasPositionAttribute }
+				onDeselect={ resetPosition }
+			>
+				<InspectorControls.Slot group="position" />
+			</ToolsPanelItem>
+		</ToolsPanel>
 	);
 };
 

package/src/components/line-height-control/index.native.js

@@ -14,7 +14,7 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
 	return (
 		<UnitControl
 			label={ __( 'Line Height' ) }
-			// Set minimun value of 1 since lower values break on Android
+			// Set minimum value of 1 since lower values break on Android
 			min={ 1 }
 			max={ 5 }
 			step={ STEP }

package/src/components/link-control/README.md

@@ -50,7 +50,7 @@ Consumers who which to take advantage of this functionality should ensure that t
 When creating links the `LinkControl` component will handle two kinds of input from users:
 
 1. Entity searches - the user may input free-text based search queries for entities retrieved from remote data sources (in the context of WordPress these are post-type entities). For example, a user might search for a `Page` they have just created by name (eg: About) and the UI will return a matching result if found.
-2. Direct entry - the user may also enter any arbitrary URL-like text. This includes full URLs (https://), URL fragements (eg: `#myinternallink`), `tel` protocol links (eg: `tel: 0800 1234`) and `mailto` protocol links (eg: `mailto: hello@wordpress.org`).
+2. Direct entry - the user may also enter any arbitrary URL-like text. This includes full URLs (https://), URL fragments (eg: `#myinternallink`), `tel` protocol links (eg: `tel: 0800 1234`) and `mailto` protocol links (eg: `mailto: hello@wordpress.org`).
 
 In addition, `<LinkControl>` also allows for on the fly creation of links based on the **current content of the `<input>` element**. When enabled, a default "Create new" search suggestion is appended to all non-URL-like search results.
 
@@ -79,7 +79,7 @@ The resulting default properties of `value` include:
 -   `title` (`string`, optional): Link title.
 -   `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom `settings` prop.
 
-Note: `<LinkControl>` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control.
+Note: `<LinkControl>` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop is stabilized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control.
 
 ```jsx
 const memoizedValue = useMemo(

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

@@ -265,7 +265,7 @@ function LinkControl( {
 
 	const handleSelectSuggestion = ( updatedValue ) => {
 		// Suggestions may contains "settings" values (e.g. `opensInNewTab`)
-		// which should not overide any existing settings values set by the
+		// which should not override any existing settings values set by the
 		// user. This filters out any settings values from the suggestion.
 		const nonSettingsChanges = Object.keys( updatedValue ).reduce(
 			( acc, key ) => {

package/src/components/link-control/test/index.js

@@ -31,7 +31,7 @@ const mockFetchSearchSuggestions = jest.fn();
 /**
  * The call to the real method `fetchRichUrlData` is wrapped in a promise in order to make it cancellable.
  * Therefore if we pass any value as the mock of `fetchRichUrlData` then ALL of the tests will require
- * addition code to handle the async nature of `fetchRichUrlData`. This is unecessary. Instead we default
+ * addition code to handle the async nature of `fetchRichUrlData`. This is unnecessary. Instead we default
  * to an undefined value which will ensure that the code under test does not call `fetchRichUrlData`. Only
  * when we are testing the "rich previews" to we update this value with a true mock.
  */
@@ -354,7 +354,7 @@ describe( 'Basic rendering', () => {
 
 		it( 'should display human friendly error message if value URL prop is empty when component is forced into no-editing (preview) mode', async () => {
 			// Why do we need this test?
-			// Occasionally `forceIsEditingLink` is set explictly to `false` which causes the Link UI to render
+			// Occasionally `forceIsEditingLink` is set explicitly to `false` which causes the Link UI to render
 			// it's preview even if the `value` has no URL.
 			// for an example of this see the usage in the following file whereby forceIsEditingLink is used to start/stop editing mode:
 			// https://github.com/WordPress/gutenberg/blob/fa5728771df7cdc86369f7157d6aa763649937a7/packages/format-library/src/link/inline.js#L151.
@@ -2422,7 +2422,7 @@ describe( 'Controlling link title text', () => {
 
 	it.each( [
 		[ '', 'Testing' ],
-		[ '(with leading and traling whitespace)', '    Testing    ' ],
+		[ '(with leading and trailing whitespace)', '    Testing    ' ],
 		[
 			// Note: link control should always preserve the original value.
 			// The consumer is responsible for filtering or otherwise handling the value.

package/src/components/link-control/use-search-handler.js

@@ -94,7 +94,7 @@ const handleEntitySearch = async (
 	return isURLLike( val ) || ! withCreateSuggestion
 		? results
 		: results.concat( {
-				// the `id` prop is intentionally ommitted here because it
+				// the `id` prop is intentionally omitted here because it
 				// is never exposed as part of the component's public API.
 				// see: https://github.com/WordPress/gutenberg/pull/19775#discussion_r378931316.
 				title: val, // Must match the existing `<input>`s text value.

package/src/components/list-view/README.md

@@ -15,7 +15,7 @@ In addition to presenting the structure of the blocks in the editor, the ListVie
 
 ### Usage
 
-Renders a list view with default syles.
+Renders a list view with default styles.
 
 ```jsx
 import { ListView } from '@wordpress/block-editor';

package/src/components/list-view/block-select-button.js

@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import {
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
@@ -25,6 +26,8 @@ import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import useListViewImages from './use-list-view-images';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+const { Badge } = unlock( componentsPrivateApis );
 
 function ListViewBlockSelectButton(
 	{
@@ -117,12 +120,9 @@ function ListViewBlockSelectButton(
 				</span>
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-						<Truncate
-							className="block-editor-list-view-block-select-button__anchor"
-							ellipsizeMode="auto"
-						>
+						<Badge className="block-editor-list-view-block-select-button__anchor">
 							{ blockInformation.anchor }
-						</Truncate>
+						</Badge>
 					</span>
 				) }
 				{ isSticky && (

package/src/components/list-view/style.scss

@@ -44,7 +44,7 @@
 
 		svg {
 			fill: currentColor;
-			// Optimizate for high contrast modes.
+			// Optimize for high contrast modes.
 			// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
 			@media (forced-colors: active) {
 				fill: CanvasText;
@@ -408,15 +408,11 @@
 		position: absolute;
 		right: 0;
 		transform: translateY(-50%);
-		background: rgba($black, 0.1);
-		border-radius: $radius-x-small;
-		padding: 2px 6px;
-		max-width: 100%;
-		box-sizing: border-box;
 	}
 
 	&.is-selected .block-editor-list-view-block-select-button__anchor {
 		background: rgba($black, 0.3);
+		color: $white;
 	}
 
 	.block-editor-list-view-block-select-button__lock,
@@ -484,7 +480,7 @@ $block-navigation-max-indent: 8;
 	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"]
 	.block-editor-list-view__expander {
 		@if $i - 1 >= 0 {
-			margin-left: ($grid-unit-30 * $i); // Effectivly centers the expander below the parent's icon.
+			margin-left: ($grid-unit-30 * $i); // Effectively centers the expander below the parent's icon.
 		} @else {
 			margin-left: 0;
 		}

package/src/components/media-placeholder/content.scss

@@ -1,11 +1,3 @@
-.block-editor-media-placeholder__url-input-form {
-	min-width: 260px;
-
-	@include break-small() {
-		width: 300px;
-	}
-}
-
 .block-editor-media-placeholder__cancel-button.is-link {
 	margin: 1em;
 	display: block;

package/src/components/media-placeholder/index.js

@@ -47,6 +47,7 @@ const InsertFromURLPopover = ( {
 			<InputControl
 				__next40pxDefaultSize
 				label={ __( 'URL' ) }
+				type="url"
 				hideLabelFromVision
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }

package/src/components/media-placeholder/style.scss

@@ -0,0 +1,7 @@
+.block-editor-media-placeholder__url-input-form {
+	min-width: 260px;
+
+	@include break-small() {
+		width: 300px;
+	}
+}

package/src/components/observe-typing/index.js

@@ -111,7 +111,7 @@ export function useMouseMoveTypingReset() {
  * Sets and removes the `isTyping` flag based on user actions:
  *
  * - Sets the flag if the user types within the given element.
- * - Removes the flag when the user selects some text, focusses a non-text
+ * - Removes the flag when the user selects some text, focuses a non-text
  *   field, presses ESC or TAB, or moves the mouse in the document.
  */
 export function useTypingObserver() {

package/src/components/provider/index.js

@@ -4,7 +4,6 @@
 import { useDispatch } from '@wordpress/data';
 import { useEffect, useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
-//eslint-disable-next-line import/no-extraneous-dependencies -- Experimental package, not published.
 import {
 	MediaUploadProvider,
 	store as uploadStore,

package/src/components/provider/use-block-sync.js

@@ -33,7 +33,7 @@ const noop = () => {};
  * the template part in the block editor back to the entity and vice-versa.
  *
  * Here are some of its basic functions:
- * - Initalizes the block-editor store for the given clientID to the blocks
+ * - Initializes the block-editor store for the given clientID to the blocks
  *   given via props.
  * - Adds incoming changes (like undo) to the block-editor store.
  * - Adds outgoing changes (like editing content) to the controlling entity,
@@ -49,7 +49,7 @@ const noop = () => {};
  *                                        root controller rather than an inner block
  *                                        controller.
  * @param {Object[]}      props.value     The control value for the blocks. This value
- *                                        is used to initalize the block-editor store
+ *                                        is used to initialize the block-editor store
  *                                        and for resetting the blocks to incoming
  *                                        changes like undo.
  * @param {Object}        props.selection The selection state responsible to restore the selection on undo/redo.

package/src/components/resolution-tool/stories/index.story.js

@@ -16,9 +16,59 @@ export default {
 	title: 'BlockEditor/ResolutionControl',
 	component: ResolutionTool,
 	tags: [ 'status-private' ],
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'A control for selecting image resolution with preset size options.',
+			},
+		},
+	},
 	argTypes: {
-		panelId: { control: false },
-		onChange: { action: 'changed' },
+		value: {
+			control: { type: null },
+			description: 'Currently selected resolution value.',
+			table: { type: { summary: 'string' } },
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Handles change in resolution selection.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		options: {
+			control: 'object',
+			description: 'Array of resolution options to display.',
+			table: {
+				type: { summary: 'array' },
+			},
+		},
+		defaultValue: {
+			control: 'radio',
+			options: [ 'thumbnail', 'medium', 'large', 'full' ],
+			description: 'Default resolution value.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		isShownByDefault: {
+			control: 'boolean',
+			description:
+				'Whether the control is shown by default in the panel.',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		panelId: {
+			control: { type: null },
+			description: 'ID of the parent tools panel.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
 	},
 };
 

package/src/components/rich-text/README.md

@@ -52,7 +52,7 @@ _Optional._ By default, all registered formats are allowed. This setting can be
 	tagName="h2"
 	identifier="content"
 	value={ attributes.content }
-	allowedFormats={ [ 'core/bold', 'core/italic' ] } // Allow the content to be made bold or italic, but do not allow othe formatting options
+	allowedFormats={ [ 'core/bold', 'core/italic' ] } // Allow the content to be made bold or italic, but do not allow other formatting options
 	onChange={ ( content ) => setAttributes( { content } ) }
 	placeholder={ __( 'Heading...' ) }
 />

package/src/components/rich-text/event-listeners/input-rules.js

@@ -112,12 +112,12 @@ export default ( props ) => ( element ) => {
 
 		const value = getValue();
 		const transformed = formatTypes.reduce(
-			( accumlator, { __unstableInputRule } ) => {
+			( accumulator, { __unstableInputRule } ) => {
 				if ( __unstableInputRule ) {
-					accumlator = __unstableInputRule( accumlator );
+					accumulator = __unstableInputRule( accumulator );
 				}
 
-				return accumlator;
+				return accumulator;
 			},
 			preventEventDiscovery( value )
 		);

package/src/components/rich-text/native/use-format-types.js

@@ -35,7 +35,7 @@ const interactiveContentTags = new Set( [
  * @param {Object}  $0                              Options
  * @param {string}  $0.clientId                     Block client ID.
  * @param {string}  $0.identifier                   Block attribute.
- * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formattings or not.
+ * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formatting or not.
  * @param {Array}   $0.allowedFormats               Allowed formats
  */
 export function useFormatTypes( {

package/src/components/rich-text/use-format-types.js

@@ -59,7 +59,7 @@ function getPrefixedSelectKeys( selected, prefix ) {
  * @param {Object}  $0                              Options
  * @param {string}  $0.clientId                     Block client ID.
  * @param {string}  $0.identifier                   Block attribute.
- * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formattings or not.
+ * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formatting or not.
  * @param {Array}   $0.allowedFormats               Allowed formats
  */
 export function useFormatTypes( {

package/src/components/spacing-sizes-control/README.md

@@ -0,0 +1,93 @@
+# Spacing Sizes Control
+
+The SpacingSizesControl component provides a flexible user interface for controlling spacing values in blocks, allowing users to modify values for different sides. It supports three viewing modes:
+
+1. Single: Control one side at a time.
+2. Axial: Control horizontal and vertical sides together.
+3. Custom: Control each side separately.
+
+## Usage
+
+```jsx
+import { __experimentalSpacingSizesControl as SpacingSizesControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+function Example() {
+	const [ sides, setSides ] = useState( {
+		top: '0px',
+		right: '0px',
+		bottom: '0px',
+		left: '0px',
+	} );
+
+	return (
+		<SpacingSizesControl
+			values={ sides }
+			onChange={ setSides }
+			label="Sides"
+		/>
+	);
+}
+```
+
+## Props
+
+### `inputProps`
+
+-   Type: `Object`
+-   Required: No
+-   Description: Additional props to pass to the input controls.
+
+### `label`
+
+-   Type: `String`
+-   Required: Yes
+-   Description: Label for the control.
+
+### `minimumCustomValue`
+
+-   Type: `Number`
+-   Default: 0
+-   Description: Minimum value allowed for custom input.
+
+### `onChange`
+
+-   Type: `Function`
+-   Required: Yes
+-   Description: Callback function called when spacing values change. Receives an object containing the updated values.
+
+### `onMouseOut`
+
+-   Type: `Function`
+-   Required: No
+-   Description: Callback function called when mouse leaves the control.
+
+### `onMouseOver`
+
+-   Type: `Function`
+-   Required: No
+-   Description: Callback function called when mouse enters the control.
+
+### `showSideInLabel`
+
+-   Type: `Boolean`
+-   Default: true
+-   Description: Whether to show the side (top, right, etc.) in the control label.
+
+### `sides`
+
+-   Type: `Array`
+-   Default: ALL_SIDES (top, right, bottom, left)
+-   Description: Array of sides that can be controlled.
+
+### `useSelect`
+
+-   Type: `Boolean`
+-   Required: No
+-   Description: Whether to use a select control for predefined values.
+
+### `values`
+
+-   Type: `Object`
+-   Required: No
+-   Description: Object containing the current spacing values for each side.

package/src/components/spacing-sizes-control/index.js

@@ -12,11 +12,11 @@ import { _x, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import useSpacingSizes from './hooks/use-spacing-sizes';
 import AxialInputControls from './input-controls/axial';
 import SeparatedInputControls from './input-controls/separated';
 import SingleInputControl from './input-controls/single';
 import LinkedButton from './linked-button';
-import useSpacingSizes from './hooks/use-spacing-sizes';
 import {
 	ALL_SIDES,
 	DEFAULT_VALUES,
@@ -25,6 +25,49 @@ import {
 	getInitialView,
 } from './utils';
 
+/**
+ * A flexible control for managing spacing values in the block editor. Supports single, axial,
+ * and separated input controls for different spacing configurations with automatic view selection
+ * based on current values and available sides.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/spacing-sizes-control/README.md
+ *
+ * @example
+ * ```jsx
+ * import { __experimentalSpacingSizesControl as SpacingSizesControl } from '@wordpress/block-editor';
+ * import { useState } from '@wordpress/element';
+ *
+ * function Example() {
+ *   const [ sides, setSides ] = useState( {
+ *     top: '0px',
+ *     right: '0px',
+ *     bottom: '0px',
+ *     left: '0px',
+ *   } );
+ *
+ *   return (
+ *     <SpacingSizesControl
+ *       values={ sides }
+ *       onChange={ setSides }
+ *       label="Sides"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param {Object}   props                    Component props.
+ * @param {Object}   props.inputProps         Additional props for input controls.
+ * @param {string}   props.label              Label for the control.
+ * @param {number}   props.minimumCustomValue Minimum value for custom input.
+ * @param {Function} props.onChange           Called when spacing values change.
+ * @param {Function} props.onMouseOut         Called when mouse leaves the control.
+ * @param {Function} props.onMouseOver        Called when mouse enters the control.
+ * @param {boolean}  props.showSideInLabel    Show side in control label.
+ * @param {Array}    props.sides              Available sides for control.
+ * @param {boolean}  props.useSelect          Use select control for predefined values.
+ * @param {Object}   props.values             Current spacing values.
+ * @return {Element}                         Spacing sizes control component.
+ */
 export default function SpacingSizesControl( {
 	inputProps,
 	label: labelProp,

package/src/components/spacing-sizes-control/linked-button.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button, Tooltip } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { link, linkOff } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -9,14 +9,12 @@ export default function LinkedButton( { isLinked, ...props } ) {
 	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
 	return (
-		<Tooltip text={ label }>
-			<Button
-				{ ...props }
-				size="small"
-				icon={ isLinked ? link : linkOff }
-				iconSize={ 24 }
-				aria-label={ label }
-			/>
-		</Tooltip>
+		<Button
+			{ ...props }
+			size="small"
+			icon={ isLinked ? link : linkOff }
+			iconSize={ 24 }
+			label={ label }
+		/>
 	);
 }