@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

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

@@ -2,13 +2,23 @@
  * External dependencies
  */
 import { Dimensions } from 'react-native';
-import { getEditorHtml, render, initializeEditor } from 'test/helpers';
+import {
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	render,
+	screen,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
 import { select } from '@wordpress/data';
-import { store as richTextStore } from '@wordpress/rich-text';
+import {
+	store as richTextStore,
+	RichTextData,
+	__unstableCreateElement,
+} from '@wordpress/rich-text';
 import { coreBlocks } from '@wordpress/block-library';
 import {
 	getBlockTypes,
@@ -78,7 +88,64 @@ describe( '<RichText/>', () => {
 		} );
 	} );
 
-	describe( 'Font Size', () => {
+	describe( 'when the value changes', () => {
+		it( 'should avoid updating attributes when values are equal', async () => {
+			const handleChange = jest.fn();
+			const defaultEmptyValue = RichTextData.empty();
+			render(
+				<RichText
+					onChange={ handleChange }
+					value={ defaultEmptyValue }
+				/>
+			);
+
+			// Simulate an empty string from Aztec
+			fireEvent( screen.getByLabelText( 'Text input. Empty' ), 'change', {
+				nativeEvent: { text: '' },
+			} );
+
+			expect( handleChange ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should preserve non-breaking space HTML entity', () => {
+			const onChange = jest.fn();
+			const onSelectionChange = jest.fn();
+			// The initial value is created using an HTML element to preserve
+			// the HTML entity.
+			const initialValue = RichTextData.fromHTMLElement(
+				__unstableCreateElement( document, '&nbsp;' )
+			);
+			render(
+				<RichText
+					onChange={ onChange }
+					onSelectionChange={ onSelectionChange }
+					value={ initialValue }
+					__unstableIsSelected
+				/>
+			);
+
+			// Trigger selection event with same text value as initial.
+			fireEvent(
+				screen.getByLabelText( /Text input/ ),
+				'onSelectionChange',
+				0,
+				0,
+				initialValue.toString(),
+				{
+					nativeEvent: {
+						eventCount: 0,
+						target: undefined,
+						text: initialValue.toString(),
+					},
+				}
+			);
+
+			expect( onChange ).not.toHaveBeenCalled();
+			expect( onSelectionChange ).toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'when applying the font size', () => {
 		it( 'should display rich text at the DEFAULT font size.', () => {
 			// Arrange.
 			const expectedFontSize = 16;
@@ -234,7 +301,7 @@ describe( '<RichText/>', () => {
 			const fontSize = '10';
 			const style = { fontSize: '12' };
 			// Act.
-			const screen = render( <RichText fontSize={ fontSize } /> );
+			render( <RichText fontSize={ fontSize } /> );
 			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
 			// Assert.
 			expect( screen.toJSON() ).toMatchSnapshot();
@@ -256,7 +323,7 @@ describe( '<RichText/>', () => {
 			const fontSize = '10';
 			const style = { fontSize: '12.56px' };
 			// Act.
-			const screen = render( <RichText fontSize={ fontSize } /> );
+			render( <RichText fontSize={ fontSize } /> );
 			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
 			// Assert.
 			expect( screen.toJSON() ).toMatchSnapshot();

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

@@ -28,7 +28,12 @@ function findSelection( blocks ) {
 		if ( attributeKey ) {
 			blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
 				attributeKey
-			].replace( START_OF_SELECTED_AREA, '' );
+			]
+				// To do: refactor this to use rich text's selection instead, so
+				// we no longer have to use on this hack inserting a special
+				// character.
+				.toString()
+				.replace( START_OF_SELECTED_AREA, '' );
 			return [ blocks[ i ].clientId, attributeKey, 0, 0 ];
 		}
 
@@ -137,8 +142,8 @@ export function useInputRules( props ) {
 				return;
 			}
 
-			if ( __unstableAllowPrefixTransformations && inputRule ) {
-				if ( inputRule() ) return;
+			if ( __unstableAllowPrefixTransformations && inputRule() ) {
+				return;
 			}
 
 			const value = getValue();

package/src/components/rich-text/use-mark-persistent.js

@@ -11,8 +11,7 @@ import { store as blockEditorStore } from '../../store';
 
 export function useMarkPersistent( { html, value } ) {
 	const previousText = useRef();
-	const hasActiveFormats =
-		value.activeFormats && !! value.activeFormats.length;
+	const hasActiveFormats = !! value.activeFormats?.length;
 	const { __unstableMarkLastChangeAsPersistent } =
 		useDispatch( blockEditorStore );
 

package/src/components/rich-text/with-deprecations.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { children as childrenSource } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
+import { __unstableCreateElement } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import RichTextMultiline from './multiline';
+
+export function withDeprecations( Component ) {
+	return forwardRef( ( props, ref ) => {
+		let value = props.value;
+		let onChange = props.onChange;
+
+		// Handle deprecated format.
+		if ( Array.isArray( value ) ) {
+			deprecated( 'wp.blockEditor.RichText value prop as children type', {
+				since: '6.1',
+				version: '6.3',
+				alternative: 'value prop as string',
+				link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+			} );
+
+			value = childrenSource.toHTML( props.value );
+			onChange = ( newValue ) =>
+				props.onChange(
+					childrenSource.fromDOM(
+						__unstableCreateElement( document, newValue ).childNodes
+					)
+				);
+		}
+
+		const NewComponent = props.multiline ? RichTextMultiline : Component;
+		const instanceId = useInstanceId( NewComponent );
+
+		return (
+			<NewComponent
+				{ ...props }
+				identifier={ props.identifier || instanceId }
+				value={ value }
+				onChange={ onChange }
+				ref={ ref }
+			/>
+		);
+	} );
+}

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

@@ -317,7 +317,7 @@ export default function SpacingInputControl( {
 						setShowCustomValueControl( ! showCustomValueControl );
 					} }
 					isPressed={ showCustomValueControl }
-					isSmall
+					size="small"
 					className="spacing-sizes-control__custom-toggle"
 					iconSize={ 24 }
 				/>

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

@@ -0,0 +1,40 @@
+# TextDecorationControl
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+<br />
+
+![TextDecorationControl Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-decoration-component.png?raw=true)
+
+
+## Usage
+
+```jsx
+import { __experimentalTextDecorationControl as TextDecorationControl } from '@wordpress/block-editor';
+```
+
+Then, you can use the component in your block editor UI:
+
+```jsx
+<TextDecorationControl
+  value={textDecorationValue}
+  onChange={(newValue) => setAttributes({ textDecoration: newValue })}
+/>
+```
+
+### Props
+
+### `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.
+
+### `onChange`
+
+-   **Type:** `Function`
+
+A callback function invoked when the Text Decoration value is changed via an interaction with any of the buttons. Called with the Text Decoration value (`none`, `underline`, `line-through`) as the only argument.

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

@@ -4,10 +4,6 @@ The `TextTransformControl` component is responsible for rendering a control elem
  
 ![TextTransformConrol Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-
 ## Development guidelines
 
 ### Usage

package/src/components/ungroup-button/README.md

@@ -6,11 +6,6 @@ This only happens in the mobile WordPress apps.
 
 ![Ungroup button icon](https://user-images.githubusercontent.com/21242757/65593577-11006000-df91-11e9-8460-1179e9ef46d2.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -15,10 +15,6 @@ UnitControl component allows the user to set a value as well as a unit (e.g. `px
 }
 ```
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-
 ## Developer guidelines
 
 ### Usage

package/src/components/url-input/index.js

@@ -66,7 +66,6 @@ class URLInput extends Component {
 		this.state = {
 			suggestions: [],
 			showSuggestions: false,
-			isUpdatingSuggestions: false,
 			suggestionsValue: null,
 			selectedSuggestion: null,
 			suggestionsListboxId: '',
@@ -102,11 +101,7 @@ class URLInput extends Component {
 		}
 
 		// Update suggestions when the value changes.
-		if (
-			prevProps.value !== value &&
-			! this.props.disableSuggestions &&
-			! this.state.isUpdatingSuggestions
-		) {
+		if ( prevProps.value !== value && ! this.props.disableSuggestions ) {
 			if ( value?.length ) {
 				// If the new value is not empty we need to update with suggestions for it.
 				this.updateSuggestions( value );
@@ -183,7 +178,6 @@ class URLInput extends Component {
 		}
 
 		this.setState( {
-			isUpdatingSuggestions: true,
 			selectedSuggestion: null,
 			loading: true,
 		} );
@@ -203,7 +197,6 @@ class URLInput extends Component {
 
 				this.setState( {
 					suggestions,
-					isUpdatingSuggestions: false,
 					suggestionsValue: value,
 					loading: false,
 					showSuggestions: !! suggestions.length,
@@ -235,9 +228,15 @@ class URLInput extends Component {
 				}
 
 				this.setState( {
-					isUpdatingSuggestions: false,
 					loading: false,
 				} );
+			} )
+			.finally( () => {
+				// If this is the current promise then reset the reference
+				// to allow for checking if a new request is made.
+				if ( this.suggestionsRequest === request ) {
+					this.suggestionsRequest = null;
+				}
 			} );
 
 		// Note that this assignment is handled *before* the async search request
@@ -255,11 +254,12 @@ class URLInput extends Component {
 
 		// When opening the link editor, if there's a value present, we want to load the suggestions pane with the results for this input search value
 		// Don't re-run the suggestions on focus if there are already suggestions present (prevents searching again when tabbing between the input and buttons)
+		// or there is already a request in progress.
 		if (
 			value &&
 			! disableSuggestions &&
-			! this.state.isUpdatingSuggestions &&
-			! ( suggestions && suggestions.length )
+			! ( suggestions && suggestions.length ) &&
+			this.suggestionsRequest === null
 		) {
 			// Ensure the suggestions are updated with the current input value.
 			this.updateSuggestions( value );

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

@@ -26,40 +26,37 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 export const useTransformCommands = () => {
-	const { clientIds } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds } = select( blockEditorStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-
-		return {
-			clientIds: selectedBlockClientIds,
-		};
-	}, [] );
-	const blocks = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlocksByClientId( clientIds ),
-		[ clientIds ]
-	);
 	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
-	const { possibleBlockTransformations, canRemove } = useSelect(
-		( select ) => {
+	const { blocks, clientIds, canRemove, possibleBlockTransformations } =
+		useSelect( ( select ) => {
 			const {
 				getBlockRootClientId,
 				getBlockTransformItems,
+				getSelectedBlockClientIds,
+				getBlocksByClientId,
 				canRemoveBlocks,
 			} = select( blockEditorStore );
+
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const selectedBlocks = getBlocksByClientId(
+				selectedBlockClientIds
+			);
 			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
+				selectedBlockClientIds[ 0 ]
 			);
 			return {
+				blocks: selectedBlocks,
+				clientIds: selectedBlockClientIds,
 				possibleBlockTransformations: getBlockTransformItems(
-					blocks,
+					selectedBlocks,
+					rootClientId
+				),
+				canRemove: canRemoveBlocks(
+					selectedBlockClientIds,
 					rootClientId
 				),
-				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 			};
-		},
-		[ clientIds, blocks ]
-	);
+		}, [] );
 
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );