@wordpress/block-editor 14.9.0 → 14.10.0

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: false },
 	},
 };
 
-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/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/hooks/background.js

@@ -177,6 +177,11 @@ export function BackgroundImagePanel( {
 		},
 	};
 
+	const defaultControls = getBlockSupport( name, [
+		BACKGROUND_SUPPORT_KEY,
+		'defaultControls',
+	] );
+
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedValue }
@@ -185,6 +190,7 @@ export function BackgroundImagePanel( {
 			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
+			defaultControls={ defaultControls }
 			value={ style }
 		/>
 	);

package/src/hooks/block-bindings.js

@@ -26,12 +26,12 @@ import { useViewportMatch } from '@wordpress/compose';
 import {
 	canBindAttribute,
 	getBindableAttributes,
-} from '../hooks/use-bindings-attributes';
+	useBlockBindingsUtils,
+} from '../utils/block-bindings';
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
 import { useBlockEditContext } from '../components/block-edit';
-import { useBlockBindingsUtils } from '../utils/block-bindings';
 import { store as blockEditorStore } from '../store';
 
 const { Menu } = unlock( componentsPrivateApis );
@@ -51,7 +51,7 @@ const useToolsPanelDropdownMenuProps = () => {
 		: {};
 };
 
-function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
+function BlockBindingsPanelMenuContent( { fieldsList, attribute, binding } ) {
 	const { clientId } = useBlockEditContext();
 	const registeredSources = getBlockBindingsSources();
 	const { updateBlockBindings } = useBlockBindingsUtils();
@@ -179,22 +179,21 @@ function EditableBlockBindingsPanelItems( {
 							placement={
 								isMobile ? 'bottom-start' : 'left-start'
 							}
-							gutter={ isMobile ? 8 : 36 }
-							trigger={
-								<Item>
-									<BlockBindingsAttribute
-										attribute={ attribute }
-										binding={ binding }
-										fieldsList={ fieldsList }
-									/>
-								</Item>
-							}
 						>
-							<BlockBindingsPanelDropdown
-								fieldsList={ fieldsList }
-								attribute={ attribute }
-								binding={ binding }
-							/>
+							<Menu.TriggerButton render={ <Item /> }>
+								<BlockBindingsAttribute
+									attribute={ attribute }
+									binding={ binding }
+									fieldsList={ fieldsList }
+								/>
+							</Menu.TriggerButton>
+							<Menu.Popover gutter={ isMobile ? 8 : 36 }>
+								<BlockBindingsPanelMenuContent
+									fieldsList={ fieldsList }
+									attribute={ attribute }
+									binding={ binding }
+								/>
+							</Menu.Popover>
 						</Menu>
 					</ToolsPanelItem>
 				);

package/src/hooks/border.js

@@ -31,7 +31,7 @@ import {
 import { store as blockEditorStore } from '../store';
 import { __ } from '@wordpress/i18n';
 
-export const BORDER_SUPPORT_KEY = 'border';
+export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 export const SHADOW_SUPPORT_KEY = 'shadow';
 
 const getColorByProperty = ( colors, property, value ) => {
@@ -161,8 +161,14 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 	}
 
 	const defaultControls = {
-		...getBlockSupport( name, [ BORDER_SUPPORT_KEY, 'defaultControls' ] ),
-		...getBlockSupport( name, [ SHADOW_SUPPORT_KEY, 'defaultControls' ] ),
+		...getBlockSupport( name, [
+			BORDER_SUPPORT_KEY,
+			'__experimentalDefaultControls',
+		] ),
+		...getBlockSupport( name, [
+			SHADOW_SUPPORT_KEY,
+			'__experimentalDefaultControls',
+		] ),
 	};
 
 	return (

package/src/hooks/color.js

@@ -290,7 +290,7 @@ export function ColorEdit( { clientId, name, setAttributes, settings } ) {
 
 	const defaultControls = getBlockSupport( name, [
 		COLOR_SUPPORT_KEY,
-		'defaultControls',
+		'__experimentalDefaultControls',
 	] );
 
 	const enableContrastChecking =

package/src/hooks/dimensions.js

@@ -88,11 +88,11 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 
 	const defaultDimensionsControls = getBlockSupport( name, [
 		DIMENSIONS_SUPPORT_KEY,
-		'defaultControls',
+		'__experimentalDefaultControls',
 	] );
 	const defaultSpacingControls = getBlockSupport( name, [
 		SPACING_SUPPORT_KEY,
-		'defaultControls',
+		'__experimentalDefaultControls',
 	] );
 	const defaultControls = {
 		...defaultDimensionsControls,

package/src/hooks/font-family.js

@@ -13,7 +13,7 @@ import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import { unlock } from '../lock-unlock';
 
-export const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
+export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 const { kebabCase } = unlock( componentsPrivateApis );
 
 /**

package/src/hooks/gap.js

@@ -8,7 +8,7 @@ import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/util
  * The string check is for backwards compatibility before Gutenberg supported
  * split gap values (row and column) and the value was a string n + unit.
  *
- * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
+ * @param {?string | ?Object} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
  * @return {Object|null}                    A value to pass to the BoxControl component.
  */
 export function getGapBoxControlValueFromStyle( blockGapValue ) {
@@ -26,7 +26,7 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
 /**
  * Returns a CSS value for the `gap` property from a given blockGap style.
  *
- * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
+ * @param {?string | ?Object} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
  * @param {?string}           defaultValue  A default gap value.
  * @return {string|null}                    The concatenated gap value (row and column).
  */

package/src/hooks/index.js

@@ -32,7 +32,6 @@ import './metadata';
 import blockHooks from './block-hooks';
 import blockBindingsPanel from './block-bindings';
 import './block-renaming';
-import './use-bindings-attributes';
 import './grid-visualizer';
 
 createBlockEditFilter(

package/src/hooks/index.native.js

@@ -33,3 +33,4 @@ export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useEditorWrapperStyles } from './use-editor-wrapper-styles';
+export { getTypographyClassesAndStyles } from './use-typography-props';

package/src/hooks/style.js

@@ -98,16 +98,22 @@ function addAttribute( settings ) {
  * @type {Record<string, string[]>}
  */
 const skipSerializationPathsEdit = {
-	[ `${ BORDER_SUPPORT_KEY }.skipSerialization` ]: [ 'border' ],
-	[ `${ COLOR_SUPPORT_KEY }.skipSerialization` ]: [ COLOR_SUPPORT_KEY ],
-	[ `${ TYPOGRAPHY_SUPPORT_KEY }.skipSerialization` ]: [
+	[ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ],
+	[ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+		COLOR_SUPPORT_KEY,
+	],
+	[ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		TYPOGRAPHY_SUPPORT_KEY,
 	],
-	[ `${ DIMENSIONS_SUPPORT_KEY }.skipSerialization` ]: [
+	[ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		DIMENSIONS_SUPPORT_KEY,
 	],
-	[ `${ SPACING_SUPPORT_KEY }.skipSerialization` ]: [ SPACING_SUPPORT_KEY ],
-	[ `${ SHADOW_SUPPORT_KEY }.skipSerialization` ]: [ SHADOW_SUPPORT_KEY ],
+	[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+		SPACING_SUPPORT_KEY,
+	],
+	[ `${ SHADOW_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+		SHADOW_SUPPORT_KEY,
+	],
 };
 
 /**
@@ -245,7 +251,7 @@ export function omitStyle( style, paths, preserveReference = false ) {
 
 	let newStyle = style;
 	if ( ! preserveReference ) {
-		newStyle = structuredClone( style );
+		newStyle = JSON.parse( JSON.stringify( style ) );
 	}
 
 	if ( ! Array.isArray( paths ) ) {