@wordpress/block-editor 14.10.0 → 14.11.0

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/tabbed-sidebar/README.md

@@ -1,21 +1,19 @@
-# Tabbed Panel
+# TabbedSidebar
 
-The `TabbedPanel` component is used to create the secondary panels in the editor.
+The `TabbedSidebar` component is used to create secondary panels in the editor with tabbed navigation.
 
 ## Development guidelines
 
-This acts as a wrapper for the `Tabs` component, but adding conventions that can be shared between all secondary panels, for example:
+This acts as a wrapper for the `Tabs` component, adding conventions that can be shared between all secondary panels, including:
 
 -   A close button
 -   Tabs that fill the panel
--   Custom scollbars
+-   Custom scrollbars
 
 ### Usage
 
-Renders a block alignment toolbar with alignments options.
-
 ```jsx
-import { TabbedSidebar } from '@wordpress/components';
+import { TabbedSidebar } from '@wordpress/block-editor';
 
 const MyTabbedSidebar = () => (
 	<TabbedSidebar
@@ -23,7 +21,7 @@ const MyTabbedSidebar = () => (
 			{
 				name: 'slug-1',
 				title: _x( 'Title 1', 'context' ),
-				panel: <PanelContents>,
+				panel: <PanelContents />,
 				panelRef: useRef('an-optional-ref'),
 			},
 			{
@@ -35,6 +33,8 @@ const MyTabbedSidebar = () => (
 		onClose={ onClickCloseButton }
 		onSelect={ onSelectTab }
 		defaultTabId="slug-1"
+		selectedTab="slug-1"
+		closeButtonLabel="Close sidebar"
 		ref={ tabsRef }
 	/>
 );
@@ -47,30 +47,41 @@ const MyTabbedSidebar = () => (
 -   **Type:** `String`
 -   **Default:** `undefined`
 
-This is passed to the `Tabs` component so it can handle the tab to select by default when it component renders.
+The ID of the tab to be selected by default when the component renders.
 
 ### `onClose`
 
 -   **Type:** `Function`
 
-The function that is called when the close button is clicked.
+Function called when the close button is clicked.
 
 ### `onSelect`
 
 -   **Type:** `Function`
 
-This is passed to the `Tabs` component - it will be called when a tab has been selected. It is passed the selected tab's ID as an argument.
+Function called when a tab is selected. Receives the selected tab's ID as an argument.
 
 ### `selectedTab`
 
 -   **Type:** `String`
 -   **Default:** `undefined`
 
-This is passed to the `Tabs` component - it will display this tab as selected.
+The ID of the currently selected tab.
 
 ### `tabs`
 
 -   **Type:** `Array`
 -   **Default:** `undefined`
 
-An array of tabs which will be rendered as `TabList` and `TabPanel` components.
+Array of tab objects. Each tab should have:
+
+- `name` (string): Unique identifier for the tab
+- `title` (string): Display title for the tab
+- `panel` (React.Node): Content to display in the tab panel
+- `panelRef` (React.Ref, optional): Reference to the tab panel element
+
+#### `closeButtonLabel`
+
+-   **Type:** `String`
+
+Accessibility label for the close button.

package/src/components/tabbed-sidebar/index.js

@@ -15,6 +15,44 @@ import { unlock } from '../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
+/**
+ * A component that creates a tabbed sidebar with a close button.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/tabbed-sidebar/README.md
+ *
+ * @example
+ * ```jsx
+ * function MyTabbedSidebar() {
+ *   return (
+ *     <TabbedSidebar
+ *       tabs={ [
+ *         {
+ *           name: 'tab1',
+ *           title: 'Settings',
+ *           panel: <PanelContents />,
+ *         }
+ *       ] }
+ *       onClose={ () => {} }
+ *       onSelect={ () => {} }
+ *       defaultTabId="tab1"
+ *       selectedTab="tab1"
+ *       closeButtonLabel="Close sidebar"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param {Object}   props                  Component props.
+ * @param {string}   [props.defaultTabId]   The ID of the tab to be selected by default when the component renders.
+ * @param {Function} props.onClose          Function called when the close button is clicked.
+ * @param {Function} props.onSelect         Function called when a tab is selected. Receives the selected tab's ID as an argument.
+ * @param {string}   props.selectedTab      The ID of the currently selected tab.
+ * @param {Array}    props.tabs             Array of tab objects. Each tab should have: name (string), title (string),
+ *                                          panel (React.Node), and optionally panelRef (React.Ref).
+ * @param {string}   props.closeButtonLabel Accessibility label for the close button.
+ * @param {Object}   ref                    Forward ref to the tabs list element.
+ * @return {Element} The tabbed sidebar component.
+ */
 function TabbedSidebar(
 	{ defaultTabId, onClose, onSelect, selectedTab, tabs, closeButtonLabel },
 	ref

package/src/components/tabbed-sidebar/stories/index.story.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TabbedSidebar from '../';
+
+const meta = {
+	title: 'BlockEditor/TabbedSidebar',
+	component: TabbedSidebar,
+	tags: [ 'status-private' ],
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'A component that creates a tabbed sidebar with a close button.',
+			},
+		},
+	},
+	argTypes: {
+		defaultTabId: {
+			control: { type: null },
+			table: {
+				type: { summary: 'string' },
+			},
+			description:
+				'The ID of the tab to be selected by default when the component renders.',
+		},
+		onClose: {
+			action: 'onClose',
+			control: { type: null },
+			table: {
+				type: { summary: 'function' },
+			},
+			description: 'Function called when the close button is clicked.',
+		},
+		onSelect: {
+			action: 'onSelect',
+			control: { type: null },
+			table: {
+				type: { summary: 'function' },
+			},
+			description:
+				"Function called when a tab is selected. Receives the selected tab's ID as an argument.",
+		},
+		selectedTab: {
+			control: { type: null },
+			table: {
+				type: { summary: 'string' },
+			},
+			description: 'The ID of the currently selected tab.',
+		},
+		tabs: {
+			control: { type: 'array' },
+			table: {
+				type: { summary: 'array' },
+			},
+			description:
+				'Array of tab objects. Each tab should have: name (string), title (string), panel (React.Node), and optionally panelRef (React.Ref).',
+		},
+		closeButtonLabel: {
+			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+			},
+			description: 'Accessibility label for the close button.',
+		},
+	},
+};
+
+export default meta;
+
+const DEMO_TABS = [
+	{ name: 'tab1', title: 'Settings' },
+	{ name: 'tab2', title: 'Styles' },
+	{ name: 'tab3', title: 'Advanced' },
+];
+
+export const Default = {
+	render: function Template( { onSelect, onClose, ...args } ) {
+		const [ selectedTab, setSelectedTab ] = useState();
+
+		return (
+			<TabbedSidebar
+				{ ...args }
+				selectedTab={ selectedTab }
+				onSelect={ ( ...changeArgs ) => {
+					onSelect( ...changeArgs );
+					setSelectedTab( ...changeArgs );
+				} }
+				onClose={ onClose }
+			/>
+		);
+	},
+	args: {
+		tabs: DEMO_TABS,
+		defaultTabId: 'tab1',
+		closeButtonLabel: 'Close Sidebar',
+	},
+};

package/src/components/typewriter/index.js

@@ -193,7 +193,7 @@ export function useTypewriter() {
 			}
 
 			/**
-			 * Checks if the current situation is elegible for scroll:
+			 * Checks if the current situation is eligible for scroll:
 			 * - There should be one and only one block selected.
 			 * - The component must contain the selection.
 			 * - The active element must be contenteditable.

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

@@ -34,7 +34,7 @@ const Example = () => {
 
 ### Props
 
-#### disabledUnits
+#### disableUnits
 
 If true, the unit `<select>` is hidden.
 

package/src/components/unit-control/stories/index.story.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import UnitControl from '../';
+
+const meta = {
+	title: 'BlockEditor/UnitControl',
+	component: UnitControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'UnitControl allows the user to set a numeric quantity as well as a unit.',
+			},
+		},
+	},
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+			description: 'Callback function when the value changes.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		onUnitChange: {
+			action: 'onUnitChange',
+			description: 'Callback function when the unit changes.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		labelPosition: {
+			control: 'radio',
+			options: [ 'top', 'side', 'bottom', 'edge' ],
+			description: 'The position of the label.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		label: {
+			control: 'text',
+			description: 'The label for the control.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		value: {
+			control: { type: null },
+			description: 'The value of the control.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		size: {
+			control: 'radio',
+			options: [ 'default', 'small' ],
+			description: 'The size of the control.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'default' },
+			},
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'Whether the control is disabled.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		disableUnits: {
+			control: 'boolean',
+			description: 'If true, the unit select is hidden.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		isPressEnterToChange: {
+			control: 'boolean',
+			description:
+				'If true, the ENTER key press is required to trigger onChange. Change is also triggered on blur.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		isUnitSelectTabbable: {
+			control: 'boolean',
+			description: 'Determines if the unit select is tabbable.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: true },
+			},
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<UnitControl
+				{ ...args }
+				value={ value }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+			/>
+		);
+	},
+	args: {
+		label: 'Label',
+	},
+};

package/src/components/url-popover/image-url-input-ui.js

@@ -265,14 +265,14 @@ const ImageURLInputUI = ( {
 				<div className="block-editor-url-popover__expand-on-click">
 					<Icon icon={ fullscreen } />
 					<div className="text">
-						<p>{ __( 'Expand on click' ) }</p>
+						<p>{ __( 'Enlarge on click' ) }</p>
 						<p className="description">
 							{ __( 'Scales the image with a lightbox effect' ) }
 						</p>
 					</div>
 					<Button
 						icon={ linkOff }
-						label={ __( 'Disable expand on click' ) }
+						label={ __( 'Disable enlarge on click' ) }
 						onClick={ () => {
 							onSetLightbox?.( false );
 						} }
@@ -372,7 +372,7 @@ const ImageURLInputUI = ( {
 											stopEditLink();
 										} }
 									>
-										{ __( 'Expand on click' ) }
+										{ __( 'Enlarge on click' ) }
 									</MenuItem>
 								) }
 							</NavigableMenu>

package/src/components/use-block-commands/index.js

@@ -89,7 +89,7 @@ const getTransformCommands = () =>
 			}
 		}
 
-		// Simple block tranformation based on the `Block Transforms` API.
+		// Simple block transformation based on the `Block Transforms` API.
 		function onBlockTransform( name ) {
 			const newBlocks = switchToBlockType( blocks, name );
 			replaceBlocks( clientIds, newBlocks );

package/src/components/use-moving-animation/index.js

@@ -96,7 +96,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 		// motion, if the user is typing (insertion by Enter), or if the block
 		// count exceeds the threshold (insertion caused all the blocks that
 		// follow to animate).
-		// To do: consider enableing the _moving_ animation even for large
+		// To do: consider enabling the _moving_ animation even for large
 		// posts, while only disabling the _insertion_ animation?
 		const disableAnimation =
 			window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ||