@wordpress/block-editor 14.8.1-next.cd6172eb0.0 → 14.10.0

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useReducer } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
@@ -13,30 +13,56 @@ import {
 import ResolutionTool from '..';
 
 export default {
-	title: 'BlockEditor (Private APIs)/ResolutionControl',
+	title: 'BlockEditor/ResolutionControl',
 	component: ResolutionTool,
+	tags: [ 'status-private' ],
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };
 
-export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
-	const [ resolution, setResolution ] = useState( undefined );
-	const resetAll = () => {
-		setResolution( undefined );
+export const Default = ( {
+	label,
+	panelId,
+	onChange: onChangeProp,
+	...props
+} ) => {
+	const [ attributes, setAttributes ] = useReducer(
+		( prevState, nextState ) => ( { ...prevState, ...nextState } ),
+		{}
+	);
+	const { resolution } = attributes;
+	const resetAll = ( resetFilters = [] ) => {
+		let newAttributes = {};
+
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
+		} );
+
+		setAttributes( newAttributes );
 		onChangeProp( undefined );
 	};
 	return (
 		<Panel>
-			<ToolsPanel panelId={ panelId } resetAll={ resetAll }>
+			<ToolsPanel
+				label={ label }
+				panelId={ panelId }
+				resetAll={ resetAll }
+			>
 				<ResolutionTool
 					panelId={ panelId }
 					onChange={ ( newValue ) => {
-						setResolution( newValue );
+						setAttributes( { resolution: newValue } );
 						onChangeProp( newValue );
 					} }
 					value={ resolution }
+					resetAllFilter={ () => ( {
+						resolution: undefined,
+					} ) }
 					{ ...props }
 				/>
 			</ToolsPanel>
@@ -44,5 +70,7 @@ export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
 	);
 };
 Default.args = {
+	label: 'Settings',
+	defaultValue: 'full',
 	panelId: 'panel-id',
 };

package/src/components/responsive-block-control/index.js

@@ -57,7 +57,7 @@ function ResponsiveBlockControl( props ) {
 		);
 
 	const toggleHelpText = __(
-		'Toggle between using the same value for all screen sizes or using a unique value per screen size.'
+		'Choose whether to use the same value for all screen sizes or a unique value for each screen size.'
 	);
 
 	const defaultControl = renderDefaultControl(

package/src/components/rich-text/event-listeners/delete.js

@@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text';
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
-		const { keyCode } = event;
+		const { keyCode, shiftKey } = event;
 
 		if ( event.defaultPrevented ) {
 			return;
@@ -30,6 +30,11 @@ export default ( props ) => ( element ) => {
 				return;
 			}
 
+			// Exclude shift+backspace as they are shortcuts for deleting blocks.
+			if ( shiftKey ) {
+				return;
+			}
+
 			if ( onMerge ) {
 				onMerge( ! isReverse );
 			}

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

@@ -39,7 +39,7 @@ import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
-import { canBindBlock } from '../../hooks/use-bindings-attributes';
+import { canBindBlock } from '../../utils/block-bindings';
 import BlockContext from '../block-context';
 
 export const keyboardShortcutContext = createContext();

package/src/components/spacing-sizes-control/style.scss

@@ -4,40 +4,11 @@
 		margin-bottom: 0;
 	}
 
-	.is-marked {
-		.components-range-control__track {
-			transition: width ease 0.1s;
-			@include reduce-motion("transition");
-		}
-
-		.components-range-control__thumb-wrapper {
-			transition: left ease 0.1s;
-			@include reduce-motion("transition");
-		}
-	}
-
 	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
 		flex: 1;
 		margin-bottom: 0; // Needed for some instances of the range control, such as the Spacer block.
 	}
-
-	.components-range-control__mark {
-		transform: translateX(-50%);
-		height: $grid-unit-05;
-		width: math.div($grid-unit-05, 2);
-		background-color: $white;
-		z-index: 1;
-		top: -#{$grid-unit-05};
-	}
-
-	.components-range-control__marks {
-		margin-top: 17px;
-	}
-
-	.components-range-control__thumb-wrapper {
-		z-index: 3;
-	}
 }
 
 .spacing-sizes-control__header {

package/src/components/text-alignment-control/README.md

@@ -0,0 +1,49 @@
+# TextAlignmentControl
+
+The `TextAlignmentControl` component is responsible for rendering a control element that allows users to select and apply text alignment options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for aligning text with options such as `left`, `center` and `right`.
+
+## Usage
+
+Renders the Text Alignment Component with `left`, `center` and `right` alignment options.
+
+```jsx
+import { TextAlignmentControl } from '@wordpress/block-editor';
+
+const MyTextAlignmentControlComponent = () => (
+	<TextAlignmentControl
+		value={ textAlign }
+		onChange={ ( value ) => {
+			setAttributes( { textAlign: value } );
+		} }
+	/>
+);
+```
+
+## Props
+
+### `value`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+-   **Options:** `left`, `center`, `right`, `justify`
+
+The current value of the text alignment setting. You may only choose from the `Options` listed above.
+
+### `onChange`
+
+-   **Type:** `Function`
+
+A callback function invoked when the text alignment value is changed via an interaction with any of the options. The function is called with the new alignment value (`left`, `center`, `right`) as the only argument.
+
+### `className`
+
+-   **Type:** `String`
+
+Class name to add to the control for custom styling.
+
+### `options`
+
+-   **Type:** `Array`
+-   **Default:** [`left`, `center`, `right`]
+
+An array that determines which alignment options will be available in the control. You can pass an array of alignment values to customize the options.

package/src/components/text-alignment-control/stories/index.story.js

@@ -8,32 +8,70 @@ import { useState } from '@wordpress/element';
  */
 import TextAlignmentControl from '../';
 
-export default {
+const meta = {
 	title: 'BlockEditor/TextAlignmentControl',
 	component: TextAlignmentControl,
+	tags: [ 'status-private' ],
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to facilitate text alignment selections.',
+			},
+		},
+	},
 	argTypes: {
-		onChange: { action: 'onChange' },
-		className: { control: 'text' },
+		value: {
+			control: { type: null },
+			description: 'Currently selected text alignment value.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Handles change in text alignment selection.',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+		},
 		options: {
 			control: 'check',
+			description: 'Array of text alignment options to display.',
 			options: [ 'left', 'center', 'right', 'justify' ],
+			table: {
+				type: { summary: 'array' },
+			},
+		},
+		className: {
+			control: 'text',
+			description: 'Class name to add to the control.',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
-		value: { control: { type: null } },
 	},
 };
 
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<TextAlignmentControl
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setValue( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
+export default meta;
 
-export const Default = Template.bind( {} );
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<TextAlignmentControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};

package/src/components/text-decoration-control/README.md

@@ -28,7 +28,6 @@ Then, you can use the component in your block editor UI:
 ### `value`
 
 -   **Type:** `String`
--   **Default:** `none`
 -   **Options:** `none`, `underline`, `line-through`
 
 The current value of the Text Decoration setting. You may only choose from the `Options` listed above.

package/src/components/text-decoration-control/stories/index.story.js

@@ -8,26 +8,61 @@ import { useState } from '@wordpress/element';
  */
 import TextDecorationControl from '../';
 
-export default {
+const meta = {
 	title: 'BlockEditor/TextDecorationControl',
 	component: TextDecorationControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to facilitate text decoration selections.',
+			},
+		},
+	},
 	argTypes: {
-		onChange: { action: 'onChange' },
+		value: {
+			control: { type: null },
+			description: 'Currently selected text decoration.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Handles change in text decoration selection.',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+		},
+		className: {
+			control: 'text',
+			description: 'Additional class name to apply.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
 	},
 };
 
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<TextDecorationControl
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setValue( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
+export default meta;
 
-export const Default = Template.bind( {} );
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<TextDecorationControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};

package/src/components/text-transform-control/README.md

@@ -1,8 +1,8 @@
 # TextTransformControl
 
 The `TextTransformControl` component is responsible for rendering a control element that allows users to select and apply text transformation options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for changing the text appearance by applying different transformations such as `none`, `uppercase`, `lowercase`, `capitalize`.
- 
-![TextTransformConrol Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true)
+
+![TextTransformControl Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true)
 
 ## Development guidelines
 
@@ -28,7 +28,6 @@ const MyTextTransformControlComponent = () => (
 ### `value`
 
 -   **Type:** `String`
--   **Default:** `none`
 -   **Options:** `none`, `uppercase`, `lowercase`, `capitalize`
 
 The current value of the Text Transform setting. You may only choose from the `Options` listed above.
@@ -37,4 +36,4 @@ The current value of the Text Transform setting. You may only choose from the `O
 
 -   **Type:** `Function`
 
-A callback function invoked when the Text Transform value is changed via an interaction with any of the buttons. Called with the Text Transform value (`none`, `uppercase`, `lowercase`, `capitalize`) as the only argument.
+A callback function invoked when the Text Transform value is changed via an interaction with any of the buttons. Called with the Text Transform value (`none`, `uppercase`, `lowercase`, `capitalize`) as the only argument.

package/src/components/text-transform-control/stories/index.story.js

@@ -8,26 +8,63 @@ import { useState } from '@wordpress/element';
  */
 import TextTransformControl from '../';
 
-export default {
+const meta = {
 	title: 'BlockEditor/TextTransformControl',
 	component: TextTransformControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Control to facilitate text transformation selections.',
+			},
+		},
+	},
 	argTypes: {
-		onChange: { action: 'onChange' },
+		onChange: {
+			action: 'onChange',
+			control: {
+				type: null,
+			},
+			description: 'Handles change in text transform selection.',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+		},
+		className: {
+			control: { type: 'text' },
+			description: 'Class name to add to the control.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		value: {
+			control: { type: null },
+			description: 'Currently selected text transform.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
 	},
 };
 
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<TextTransformControl
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setValue( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
 
-export const Default = Template.bind( {} );
+		return (
+			<TextTransformControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};

package/src/components/use-block-drop-zone/index.js

@@ -456,7 +456,14 @@ export default function useBlockDropZone( {
 				const [ targetIndex, operation, nearestSide ] =
 					dropTargetPosition;
 
-				if ( isZoomOut() && operation !== 'insert' ) {
+				const isTargetIndexEmptyDefaultBlock =
+					blocksData[ targetIndex ]?.isUnmodifiedDefaultBlock;
+
+				if (
+					isZoomOut() &&
+					! isTargetIndexEmptyDefaultBlock &&
+					operation !== 'insert'
+				) {
 					return;
 				}
 

package/src/components/warning/index.js

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Children } from '@wordpress/element';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
@@ -20,10 +19,10 @@ function Warning( { className, actions, children, secondaryActions } ) {
 						{ children }
 					</p>
 
-					{ ( Children.count( actions ) > 0 || secondaryActions ) && (
+					{ ( actions?.length > 0 || secondaryActions ) && (
 						<div className="block-editor-warning__actions">
-							{ Children.count( actions ) > 0 &&
-								Children.map( actions, ( action, i ) => (
+							{ actions?.length > 0 &&
+								actions.map( ( action, i ) => (
 									<span
 										key={ i }
 										className="block-editor-warning__action"

package/src/components/warning/stories/index.story.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Warning from '../';
+
+const meta = {
+	title: 'BlockEditor/Warning',
+	component: Warning,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Displays a warning message with optional action buttons and secondary actions dropdown.',
+			},
+		},
+	},
+	argTypes: {
+		children: {
+			control: 'text',
+			description:
+				'Intended to represent the block to which the warning pertains.',
+			table: {
+				type: { summary: 'string|element' },
+			},
+		},
+		className: {
+			control: 'text',
+			description: 'Classes to pass to element.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		actions: {
+			control: 'object',
+			description:
+				'An array of elements to be rendered as action buttons in the warning element.',
+			table: {
+				type: { summary: 'Element[]' },
+			},
+		},
+		secondaryActions: {
+			control: 'object',
+			description:
+				'An array of { title, onClick } to be rendered as options in a dropdown of secondary actions.',
+			table: {
+				type: { summary: '{ title: string, onClick: Function }[]' },
+			},
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		children: __( 'This block ran into an issue.' ),
+	},
+};
+
+export const WithActions = {
+	args: {
+		...Default.args,
+		actions: [
+			<Button key="fix-issue" __next40pxDefaultSize variant="primary">
+				{ __( 'Fix issue' ) }
+			</Button>,
+		],
+	},
+};
+
+export const WithSecondaryActions = {
+	args: {
+		...Default.args,
+		secondaryActions: [
+			{ title: __( 'Get help' ) },
+			{ title: __( 'Remove block' ) },
+		],
+	},
+};

package/src/components/warning/test/index.js

@@ -18,7 +18,9 @@ describe( 'Warning', () => {
 
 	it( 'should show primary actions', () => {
 		render(
-			<Warning actions={ <button>Click me</button> }>Message</Warning>
+			<Warning actions={ [ <button key="test">Click me</button> ] }>
+				Message
+			</Warning>
 		);
 
 		expect(

package/src/components/writing-mode-control/stories/index.story.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import WritingModeControl from '../';
+
+const meta = {
+	title: 'BlockEditor/WritingModeControl',
+	component: WritingModeControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to facilitate writing mode selections.',
+			},
+		},
+	},
+	argTypes: {
+		value: {
+			control: { type: null },
+			description: 'Currently selected writing mode.',
+		},
+		className: {
+			control: 'text',
+			description: 'Class name to add to the control.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Handles change in the writing mode selection.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+
+		return (
+			<WritingModeControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};