@wordpress/block-editor 9.6.0 → 9.8.0

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

@@ -5,11 +5,6 @@ import { getProtocol, prependHTTP } from '@wordpress/url';
 import { useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
-/**
- * External dependencies
- */
-import { startsWith } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -38,7 +33,7 @@ export const handleDirectEntry = ( val ) => {
 		type = TEL_TYPE;
 	}
 
-	if ( startsWith( val, '#' ) ) {
+	if ( val?.startsWith( '#' ) ) {
 		type = INTERNAL_TYPE;
 	}
 

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

@@ -90,8 +90,13 @@ function ListViewBlockSelectButton(
 						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
 					</span>
 					{ blockInformation?.anchor && (
-						<span className="block-editor-list-view-block-select-button__anchor">
-							{ 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"
+							>
+								{ blockInformation.anchor }
+							</Truncate>
 						</span>
 					) }
 					{ isLocked && (

package/src/components/list-view/expander.js

@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { chevronRightSmall, Icon } from '@wordpress/icons';
+import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
+import { isRTL } from '@wordpress/i18n';
+
 export default function ListViewExpander( { onClick } ) {
 	return (
 		// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js
@@ -18,7 +20,7 @@ export default function ListViewExpander( { onClick } ) {
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
 			aria-hidden="true"
 		>
-			<Icon icon={ chevronRightSmall } />
+			<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />
 		</span>
 	);
 }

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

@@ -312,14 +312,21 @@
 		}
 	}
 
+	.block-editor-list-view-block-select-button__anchor-wrapper {
+		position: relative;
+		max-width: min(110px, 40%);
+		width: 100%;
+	}
+
 	.block-editor-list-view-block-select-button__anchor {
+		position: absolute;
+		right: 0;
+		transform: translateY(-50%);
 		background: rgba($black, 0.1);
 		border-radius: $radius-block-ui;
-		display: inline-block;
 		padding: 2px 6px;
-		max-width: min(100px, 40%);
-		overflow: hidden;
-		text-overflow: ellipsis;
+		max-width: 100%;
+		box-sizing: border-box;
 	}
 
 	&.is-selected .block-editor-list-view-block-select-button__anchor {

package/src/components/list-view/use-block-selection.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { difference } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -126,9 +121,8 @@ export default function useBlockSelection() {
 				return;
 			}
 
-			const selectionDiff = difference(
-				selectedBlocks,
-				updatedSelectedBlocks
+			const selectionDiff = selectedBlocks.filter(
+				( blockId ) => ! updatedSelectedBlocks.includes( blockId )
 			);
 
 			let label;

package/src/components/media-replace-flow/style.scss

@@ -27,6 +27,7 @@
 
 		.block-editor-url-input {
 			padding: 0; // Cancel unnecessary default 1px padding in this case.
+			margin: 0; // Reset default LinkControl margins.
 		}
 
 		.components-base-control .components-base-control__field {

package/src/components/media-upload/index.native.js

@@ -3,8 +3,6 @@
  */
 import { Platform } from 'react-native';
 
-import { delay } from 'lodash';
-
 import prompt from 'react-native-prompt-android';
 
 /**
@@ -46,6 +44,8 @@ const URL_MEDIA_SOURCE = 'URL';
 const PICKER_OPENING_DELAY = 200;
 
 export class MediaUpload extends Component {
+	pickerTimeout;
+
 	constructor( props ) {
 		super( props );
 		this.onPickerPresent = this.onPickerPresent.bind( this );
@@ -78,6 +78,10 @@ export class MediaUpload extends Component {
 		}
 	}
 
+	componentWillUnmount() {
+		clearTimeout( this.pickerTimeout );
+	}
+
 	getAllSources() {
 		const { onSelectURL } = this.props;
 
@@ -189,7 +193,7 @@ export class MediaUpload extends Component {
 			// the delay below is required because on iOS this action sheet gets dismissed by the close event of the Inserter
 			// so this delay allows the Inserter to be closed fully before presenting action sheet.
 			if ( autoOpen && isIOS ) {
-				delay(
+				this.pickerTimeout = setTimeout(
 					() => this.picker.presentPicker(),
 					PICKER_OPENING_DELAY
 				);

package/src/components/preview-options/index.js

@@ -33,10 +33,10 @@ export default function PreviewOptions( {
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
 		/* translators: button label text should, if possible, be under 16 characters. */
-		children: __( 'Preview' ),
+		children: __( 'View' ),
 	};
 	const menuProps = {
-		'aria-label': __( 'Preview options' ),
+		'aria-label': __( 'View options' ),
 	};
 	return (
 		<DropdownMenu

package/src/components/{use-no-recursive-renders → recursion-provider}/index.js

@@ -1,12 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useMemo,
-} from '@wordpress/element';
+import { createContext, useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -37,37 +32,53 @@ function addToBlockType( renderedBlocks, blockName, uniqueId ) {
 }
 
 /**
- * A React hook for keeping track of blocks previously rendered up in the block
- * tree. Blocks susceptible to recursion can use this hook in their `Edit`
- * function to prevent said recursion.
+ * A React context provider for use with the `useHasRecursion` hook to prevent recursive
+ * renders.
  *
- * @param {*}      uniqueId  Any value that acts as a unique identifier for a block instance.
- * @param {string} blockName Optional block name.
+ * Wrap block content with this provider and provide the same `uniqueId` prop as used
+ * with `useHasRecursion`.
+ *
+ * @param {Object}      props
+ * @param {*}           props.uniqueId  Any value that acts as a unique identifier for a block instance.
+ * @param {string}      props.blockName Optional block name.
+ * @param {JSX.Element} props.children  React children.
  *
- * @return {[boolean, Function]} A tuple of:
- *                               - a boolean describing whether the provided id
- *                                 has already been rendered;
- *                               - a React context provider to be used to wrap
- *                                 other elements.
+ * @return {JSX.Element} A React element.
  */
-export default function useNoRecursiveRenders( uniqueId, blockName = '' ) {
+export function RecursionProvider( { children, uniqueId, blockName = '' } ) {
 	const previouslyRenderedBlocks = useContext( RenderedRefsContext );
 	const { name } = useBlockEditContext();
+
 	blockName = blockName || name;
-	const hasAlreadyRendered = Boolean(
-		previouslyRenderedBlocks[ blockName ]?.has( uniqueId )
-	);
+
 	const newRenderedBlocks = useMemo(
 		() => addToBlockType( previouslyRenderedBlocks, blockName, uniqueId ),
 		[ previouslyRenderedBlocks, blockName, uniqueId ]
 	);
-	const Provider = useCallback(
-		( { children } ) => (
-			<RenderedRefsContext.Provider value={ newRenderedBlocks }>
-				{ children }
-			</RenderedRefsContext.Provider>
-		),
-		[ newRenderedBlocks ]
+
+	return (
+		<RenderedRefsContext.Provider value={ newRenderedBlocks }>
+			{ children }
+		</RenderedRefsContext.Provider>
 	);
-	return [ hasAlreadyRendered, Provider ];
+}
+
+/**
+ * A React hook for keeping track of blocks previously rendered up in the block
+ * tree. Blocks susceptible to recursion can use this hook in their `Edit`
+ * function to prevent said recursion.
+ *
+ * Use this with the `RecursionProvider` component, using the same `uniqueId` value
+ * for both the hook and the provider.
+ *
+ * @param {*}      uniqueId  Any value that acts as a unique identifier for a block instance.
+ * @param {string} blockName Optional block name.
+ *
+ * @return {boolean} A boolean describing whether the provided id has already been rendered.
+ */
+export function useHasRecursion( uniqueId, blockName = '' ) {
+	const previouslyRenderedBlocks = useContext( RenderedRefsContext );
+	const { name } = useBlockEditContext();
+	blockName = blockName || name;
+	return Boolean( previouslyRenderedBlocks[ blockName ]?.has( uniqueId ) );
 }

package/src/components/{use-no-recursive-renders/test/use-no-recursive-renders.js → recursion-provider/test/index.js}

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import useNoRecursiveRenders from '../';
+import { useHasRecursion, RecursionProvider } from '..';
 import {
 	BlockEditContextProvider,
 	useBlockEditContext,
@@ -16,15 +16,14 @@ import {
 // of calling itself depending on its `uniqueId` attribute.
 function Edit( { attributes: { uniqueId } } ) {
 	const { name } = useBlockEditContext();
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( uniqueId );
+	const hasRecursion = useHasRecursion( uniqueId );
 
-	if ( hasAlreadyRendered ) {
+	if ( hasRecursion ) {
 		return <div className={ `wp-block__${ name }--halted` }>Halt</div>;
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ uniqueId }>
 			<div className={ `wp-block__${ name }` }>
 				{ uniqueId === 'SIMPLE' && <p>Done</p> }
 				{ uniqueId === 'SINGLY-RECURSIVE' && (
@@ -48,7 +47,7 @@ function Edit( { attributes: { uniqueId } } ) {
 	);
 }
 
-describe( 'useNoRecursiveRenders', () => {
+describe( 'useHasRecursion/RecursionProvider', () => {
 	const context = { name: 'reusable-block' };
 
 	it( 'allows a single block to render', () => {

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

@@ -43,7 +43,19 @@ _Optional._ Called when the block can be removed. `forward` is true when the sel
 
 ### `allowedFormats: Array`
 
-_Optional._ By default, all registered formats are allowed. This setting can be used to fine-tune the allowed formats. Example: `[ 'core/bold', 'core/link' ]`.
+_Optional._ By default, all registered formats are allowed. This setting can be used to fine-tune the allowed formats. If you want to limit the formats allowed, you can specify using allowedFormats property in your code. If you want to allow only bold and italic settings, then you need to pass it in array. Example: `[ 'core/bold', 'core/link' ]`.
+
+{% ESNext %}
+
+```js
+<RichText
+	tagName="h2"
+	value={ attributes.content }
+	allowedFormats={ [ 'core/bold', 'core/italic' ] } // Allow the content to be made bold or italic, but do not allow othe formatting options
+	onChange={ ( content ) => setAttributes( { content } ) }
+	placeholder={ __( 'Heading...' ) }
+/>
+```
 
 ### `withoutInteractiveFormatting: Boolean`
 

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

@@ -38,6 +38,7 @@ import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
 import { useMarkPersistent } from './use-mark-persistent';
 import { usePasteHandler } from './use-paste-handler';
+import { useBeforeInputRules } from './use-before-input-rules';
 import { useInputRules } from './use-input-rules';
 import { useEnter } from './use-enter';
 import { useFormatTypes } from './use-format-types';
@@ -359,6 +360,7 @@ function RichTextWrapper(
 					autocompleteProps.ref,
 					props.ref,
 					richTextRef,
+					useBeforeInputRules( { value, onChange } ),
 					useInputRules( {
 						value,
 						onChange,

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

@@ -113,6 +113,7 @@ function RichTextWrapper(
 		setRef,
 		disableSuggestions,
 		disableAutocorrection,
+		containerWidth,
 		...props
 	},
 	forwardedRef
@@ -639,6 +640,7 @@ function RichTextWrapper(
 			setRef={ setRef }
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
+			containerWidth={ containerWidth }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.

package/src/components/rich-text/use-before-input-rules.js

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { insert, isCollapsed } from '@wordpress/rich-text';
+import { useDispatch } from '@wordpress/data';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * When typing over a selection, the selection will we wrapped by a matching
+ * character pair. The second character is optional, it defaults to the first
+ * character.
+ *
+ * @type {string[]} Array of character pairs.
+ */
+const wrapSelectionSettings = [ '`', '"', "'", '“”', '‘’' ];
+
+export function useBeforeInputRules( props ) {
+	const {
+		__unstableMarkLastChangeAsPersistent,
+		__unstableMarkAutomaticChange,
+	} = useDispatch( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onInput( event ) {
+			const { inputType, data } = event;
+			const { value, onChange } = propsRef.current;
+
+			// Only run the rules when inserting text.
+			if ( inputType !== 'insertText' ) {
+				return;
+			}
+
+			if ( isCollapsed( value ) ) {
+				return;
+			}
+
+			const pair = applyFilters(
+				'blockEditor.wrapSelectionSettings',
+				wrapSelectionSettings
+			).find(
+				( [ startChar, endChar ] ) =>
+					startChar === data || endChar === data
+			);
+
+			if ( ! pair ) {
+				return;
+			}
+
+			const [ startChar, endChar = startChar ] = pair;
+			const start = value.start;
+			const end = value.end + startChar.length;
+
+			let newValue = insert( value, startChar, start, start );
+			newValue = insert( newValue, endChar, end, end );
+
+			__unstableMarkLastChangeAsPersistent();
+			onChange( newValue );
+			__unstableMarkAutomaticChange();
+
+			const init = {};
+
+			for ( const key in event ) {
+				init[ key ] = event[ key ];
+			}
+
+			init.data = endChar;
+
+			const { ownerDocument } = element;
+			const { defaultView } = ownerDocument;
+			const newEvent = new defaultView.InputEvent( 'input', init );
+
+			// Dispatch an input event with the new data. This will trigger the
+			// input rules.
+			event.target.dispatchEvent( newEvent );
+			event.preventDefault();
+		}
+
+		element.addEventListener( 'beforeinput', onInput );
+		return () => {
+			element.removeEventListener( 'beforeinput', onInput );
+		};
+	}, [] );
+}

package/src/components/rich-text/use-enter.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 /**
  * WordPress dependencies
  */

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapKeys } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -35,7 +30,12 @@ const interactiveContentTags = new Set( [
 
 function prefixSelectKeys( selected, prefix ) {
 	if ( typeof selected !== 'object' ) return { [ prefix ]: selected };
-	return mapKeys( selected, ( value, key ) => `${ prefix }.${ key }` );
+	return Object.fromEntries(
+		Object.entries( selected ).map( ( [ key, value ] ) => [
+			`${ prefix }.${ key }`,
+			value,
+		] )
+	);
 }
 
 function getPrefixedSelectKeys( selected, prefix ) {

package/src/components/spacing-sizes-control/all-input-control.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalApplyValueToSides as applyValueToSides } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { getAllRawValue, isValuesMixed, isValuesDefined } from './utils';
+
+export default function AllInputControl( {
+	onChange,
+	values,
+	sides,
+	spacingSizes,
+	type,
+	minimumCustomValue,
+} ) {
+	const allValue = getAllRawValue( values );
+	const hasValues = isValuesDefined( values );
+	const isMixed = hasValues && isValuesMixed( values, sides );
+
+	const handleOnChange = ( next ) => {
+		const nextValues = applyValueToSides( values, next, sides );
+		onChange( nextValues );
+	};
+
+	return (
+		<SpacingInputControl
+			value={ allValue }
+			onChange={ handleOnChange }
+			side={ 'all' }
+			spacingSizes={ spacingSizes }
+			isMixed={ isMixed }
+			type={ type }
+			minimumCustomValue={ minimumCustomValue }
+		/>
+	);
+}

package/src/components/spacing-sizes-control/axial-input-controls.js

@@ -0,0 +1,62 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { LABELS } from './utils';
+
+const groupedSides = [ 'vertical', 'horizontal' ];
+
+export default function AxialInputControls( {
+	onChange,
+	values,
+	sides,
+	spacingSizes,
+	type,
+	minimumCustomValue,
+} ) {
+	const createHandleOnChange = ( side ) => ( next ) => {
+		if ( ! onChange ) {
+			return;
+		}
+		const nextValues = { ...values };
+
+		if ( side === 'vertical' ) {
+			nextValues.top = next;
+			nextValues.bottom = next;
+		}
+
+		if ( side === 'horizontal' ) {
+			nextValues.left = next;
+			nextValues.right = next;
+		}
+
+		onChange( nextValues );
+	};
+
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? groupedSides.filter( ( side ) => sides.includes( side ) )
+		: groupedSides;
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				const axisValue =
+					side === 'vertical' ? values.top : values.left;
+				return (
+					<SpacingInputControl
+						value={ axisValue }
+						onChange={ createHandleOnChange( side ) }
+						label={ LABELS[ side ] }
+						key={ `spacing-sizes-control-${ side }` }
+						withInputField={ false }
+						side={ side }
+						spacingSizes={ spacingSizes }
+						type={ type }
+						minimumCustomValue={ minimumCustomValue }
+					/>
+				);
+			} ) }
+		</>
+	);
+}

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

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { __experimentalText as Text } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AllInputControl from './all-input-control';
+import InputControls from './input-controls';
+import AxialInputControls from './axial-input-controls';
+import LinkedButton from './linked-button';
+import { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils';
+import useSetting from '../use-setting';
+
+export default function SpacingSizesControl( {
+	inputProps,
+	onChange,
+	label = __( 'Spacing Control' ),
+	values,
+	sides,
+	splitOnAxis = false,
+	useSelect,
+	minimumCustomValue = 0,
+} ) {
+	const spacingSizes = [
+		{ name: 0, slug: '0', size: 0 },
+		...( useSetting( 'spacing.spacingSizes' ) || [] ),
+	];
+
+	if ( spacingSizes.length > 8 ) {
+		spacingSizes.unshift( {
+			name: __( 'Default' ),
+			slug: 'default',
+			size: undefined,
+		} );
+	}
+
+	const inputValues = values || DEFAULT_VALUES;
+	const hasInitialValue = isValuesDefined( values );
+	const hasOneSide = sides?.length === 1;
+
+	const [ isLinked, setIsLinked ] = useState(
+		! hasInitialValue || ! isValuesMixed( inputValues, sides ) || hasOneSide
+	);
+
+	const toggleLinked = () => {
+		setIsLinked( ! isLinked );
+	};
+
+	const handleOnChange = ( nextValue ) => {
+		const newValues = { ...values, ...nextValue };
+		onChange( newValues );
+	};
+
+	const inputControlProps = {
+		...inputProps,
+		onChange: handleOnChange,
+		isLinked,
+		sides,
+		values: inputValues,
+		spacingSizes,
+		useSelect,
+		type: label,
+		minimumCustomValue,
+	};
+
+	return (
+		<fieldset role="region" className="component-spacing-sizes-control">
+			<Text as="legend">{ label }</Text>
+			{ ! hasOneSide && (
+				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
+			) }
+			{ isLinked && (
+				<AllInputControl
+					aria-label={ label }
+					{ ...inputControlProps }
+				/>
+			) }
+
+			{ ! isLinked && splitOnAxis && (
+				<AxialInputControls { ...inputControlProps } />
+			) }
+			{ ! isLinked && ! splitOnAxis && (
+				<InputControls { ...inputControlProps } />
+			) }
+		</fieldset>
+	);
+}