@wordpress/block-editor 12.16.0 → 12.17.0

package/src/components/provider/test/use-block-sync.js

@@ -263,13 +263,13 @@ describe( 'useBlockSync hook', () => {
 
 		expect( onInput ).toHaveBeenCalledWith(
 			[ { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 		expect( onChange ).not.toHaveBeenCalled();
 	} );
@@ -303,13 +303,13 @@ describe( 'useBlockSync hook', () => {
 
 		expect( onChange ).toHaveBeenCalledWith(
 			[ { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 		expect( onInput ).not.toHaveBeenCalled();
 	} );
@@ -406,13 +406,13 @@ describe( 'useBlockSync hook', () => {
 					attributes: { foo: 2 },
 				},
 			],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 		expect( onInput ).not.toHaveBeenCalled();
 	} );
@@ -447,13 +447,16 @@ describe( 'useBlockSync hook', () => {
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 2 } },
 		];
 
-		expect( onChange1 ).toHaveBeenCalledWith( updatedBlocks1, {
-			selection: {
-				initialPosition: null,
-				selectionEnd: {},
-				selectionStart: {},
-			},
-		} );
+		expect( onChange1 ).toHaveBeenCalledWith(
+			updatedBlocks1,
+			expect.objectContaining( {
+				selection: {
+					initialPosition: null,
+					selectionEnd: {},
+					selectionStart: {},
+				},
+			} )
+		);
 
 		const newBlocks = [
 			{ clientId: 'b', innerBlocks: [], attributes: { foo: 1 } },
@@ -485,13 +488,13 @@ describe( 'useBlockSync hook', () => {
 		// The second callback should be called with the new change.
 		expect( onChange2 ).toHaveBeenCalledWith(
 			[ { clientId: 'b', innerBlocks: [], attributes: { foo: 3 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 	} );
 
@@ -544,13 +547,13 @@ describe( 'useBlockSync hook', () => {
 		// Only the new callback should be called.
 		expect( onChange2 ).toHaveBeenCalledWith(
 			[ { clientId: 'b', innerBlocks: [], attributes: { foo: 3 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 	} );
 } );

package/src/components/provider/use-block-sync.js

@@ -9,6 +9,7 @@ import { cloneBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { undoIgnoreBlocks } from '../../store/undo-ignore';
 
 const noop = () => {};
 
@@ -264,6 +265,10 @@ export default function useBlockSync( {
 				const updateParent = isPersistent
 					? onChangeRef.current
 					: onInputRef.current;
+				const undoIgnore = undoIgnoreBlocks.has( blocks );
+				if ( undoIgnore ) {
+					undoIgnoreBlocks.delete( blocks );
+				}
 				updateParent( blocks, {
 					selection: {
 						selectionStart: getSelectionStart(),
@@ -271,6 +276,7 @@ export default function useBlockSync( {
 						initialPosition:
 							getSelectedBlocksInitialCaretPosition(),
 					},
+					undoIgnore,
 				} );
 			}
 			previousAreBlocksDifferent = areBlocksDifferent;

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

@@ -113,8 +113,14 @@ export function RichTextWrapper(
 	props = removeNativeProps( props );
 
 	const anchorRef = useRef();
-	const { clientId } = useBlockEditContext();
+	const { clientId, isSelected: isBlockSelected } = useBlockEditContext();
 	const selector = ( select ) => {
+		// Avoid subscribing to the block editor store if the block is not
+		// selected.
+		if ( ! isBlockSelected ) {
+			return { isSelected: false };
+		}
+
 		const { getSelectionStart, getSelectionEnd } =
 			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
@@ -137,10 +143,12 @@ export function RichTextWrapper(
 			isSelected,
 		};
 	};
-	// This selector must run on every render so the right selection state is
-	// retrieved from the store on merge.
-	// To do: fix this somehow.
-	const { selectionStart, selectionEnd, isSelected } = useSelect( selector );
+	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
+		clientId,
+		identifier,
+		originalIsSelected,
+		isBlockSelected,
+	] );
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -317,10 +325,13 @@ export function RichTextWrapper(
 				{ ...props }
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [
+					// Rich text ref must be first because its focus listener
+					// must be set up before any other ref calls .focus() on
+					// mount.
+					richTextRef,
 					forwardedRef,
 					autocompleteProps.ref,
 					props.ref,
-					richTextRef,
 					useBeforeInputRules( { value, onChange } ),
 					useInputRules( {
 						getValue,
@@ -379,6 +390,7 @@ export function RichTextWrapper(
 				// tabIndex because Safari will focus the element. However,
 				// Safari will correctly ignore nested contentEditable elements.
 				tabIndex={ props.tabIndex === 0 ? null : props.tabIndex }
+				data-wp-block-attribute-key={ identifier }
 			/>
 		</>
 	);

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

@@ -15,7 +15,8 @@ import {
 	showUserSuggestions,
 	showXpostSuggestions,
 } from '@wordpress/react-native-bridge';
-import { BlockFormatControls, getPxFromCssUnit } from '@wordpress/block-editor';
+import { BlockFormatControls } from '@wordpress/block-editor';
+import { getPxFromCssUnit } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import {
 	compose,
@@ -51,10 +52,6 @@ import { getFormatColors } from './get-format-colors';
 import styles from './style.scss';
 import ToolbarButtonWithOptions from './toolbar-button-with-options';
 
-const unescapeSpaces = ( text ) => {
-	return text.replace( / | /gi, ' ' );
-};
-
 // The flattened color palettes array is memoized to ensure that the same array instance is
 // returned for the colors palettes. This value might be used as a prop, so having the same
 // instance will prevent unnecessary re-renders of the RichText component.
@@ -267,7 +264,7 @@ export class RichText extends Component {
 	onCreateUndoLevel() {
 		const { __unstableOnCreateUndoLevel: onCreateUndoLevel } = this.props;
 		// If the content is the same, no level needs to be created.
-		if ( this.lastHistoryValue === this.value ) {
+		if ( this.lastHistoryValue.toString() === this.value.toString() ) {
 			return;
 		}
 
@@ -317,10 +314,10 @@ export class RichText extends Component {
 		}
 
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
-			unescapeSpaces( event.nativeEvent.text )
+			event.nativeEvent.text
 		);
 		// On iOS, onChange can be triggered after selection changes, even though there are no content changes.
-		if ( contentWithoutRootTag === this.value ) {
+		if ( contentWithoutRootTag === this.value.toString() ) {
 			return;
 		}
 		this.lastEventCount = event.nativeEvent.eventCount;
@@ -332,11 +329,11 @@ export class RichText extends Component {
 
 	onTextUpdate( event ) {
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
-			unescapeSpaces( event.nativeEvent.text )
+			event.nativeEvent.text
 		);
 
 		this.debounceCreateUndoLevel();
-		const refresh = this.value !== contentWithoutRootTag;
+		const refresh = this.value.toString() !== contentWithoutRootTag;
 		this.value = contentWithoutRootTag;
 
 		// We don't want to refresh if our goal is just to create a record.
@@ -567,7 +564,7 @@ export class RichText extends Component {
 		// Check if value is up to date with latest state of native AztecView.
 		if (
 			event.nativeEvent.text &&
-			event.nativeEvent.text !== this.props.value
+			event.nativeEvent.text !== this.props.value.toString()
 		) {
 			this.onTextUpdate( event );
 		}
@@ -592,7 +589,7 @@ export class RichText extends Component {
 		// this approach is not perfectly reliable.
 		const isManual =
 			this.lastAztecEventType !== 'input' &&
-			this.props.value === this.value;
+			this.props.value.toString() === this.value.toString();
 		if ( hasChanged && isManual ) {
 			const value = this.createRecord();
 			const activeFormats = getActiveFormats( value );
@@ -659,10 +656,10 @@ export class RichText extends Component {
 
 		// Check and dicsard stray event, where the text and selection is equal to the ones already cached.
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
-			unescapeSpaces( event.nativeEvent.text )
+			event.nativeEvent.text
 		);
 		if (
-			contentWithoutRootTag === this.value &&
+			contentWithoutRootTag === this.value.toString() &&
 			realStart === this.selectionStart &&
 			realEnd === this.selectionEnd
 		) {
@@ -759,7 +756,7 @@ export class RichText extends Component {
 			typeof nextProps.value !== 'undefined' &&
 			typeof this.props.value !== 'undefined' &&
 			( ! this.comesFromAztec || ! this.firedAfterTextChanged ) &&
-			nextProps.value !== this.props.value
+			nextProps.value.toString() !== this.props.value.toString()
 		) {
 			// Gutenberg seems to try to mirror the caret state even on events that only change the content so,
 			//  let's force caret update if state has selection set.
@@ -823,17 +820,11 @@ export class RichText extends Component {
 		}
 	}
 
-	componentWillUnmount() {
-		if ( this._editor.isFocused() ) {
-			this._editor.blur();
-		}
-	}
-
 	componentDidUpdate( prevProps ) {
 		const { style, tagName } = this.props;
 		const { currentFontSize } = this.state;
 
-		if ( this.props.value !== this.value ) {
+		if ( this.props.value.toString() !== this.value.toString() ) {
 			this.value = this.props.value;
 		}
 		const { __unstableIsSelected: prevIsSelected } = prevProps;
@@ -851,7 +842,7 @@ export class RichText extends Component {
 			// Since this is happening when merging blocks, the selection should be at the last character position.
 			// As a fallback the internal selectionEnd value is used.
 			const lastCharacterPosition =
-				this.value?.length ?? this.selectionEnd;
+				this.value?.toString().length ?? this.selectionEnd;
 			this._editor.focus();
 			this.props.onSelectionChange(
 				lastCharacterPosition,
@@ -893,7 +884,8 @@ export class RichText extends Component {
 		// On android if content is empty we need to send no content or else the placeholder will not show.
 		if (
 			! this.isIOS &&
-			( value === '' || value === EMPTY_PARAGRAPH_TAGS )
+			( value.toString() === '' ||
+				value.toString() === EMPTY_PARAGRAPH_TAGS )
 		) {
 			return '';
 		}

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

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RichText/> Font Size renders component with style and font size 1`] = `
+exports[`<RichText/> when applying the font size renders component with style and font size 1`] = `
 "<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
 <p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
 <!-- /wp:paragraph -->"
 `;
 
-exports[`<RichText/> Font Size should update the font size when style prop with font size property is provided 1`] = `
+exports[`<RichText/> when applying the font size should update the font size when style prop with font size property is provided 1`] = `
 <View
   style={
     [
@@ -42,7 +42,7 @@ exports[`<RichText/> Font Size should update the font size when style prop with
 </View>
 `;
 
-exports[`<RichText/> Font Size should update the font size with decimals when style prop with font size property is provided 1`] = `
+exports[`<RichText/> when applying the font size should update the font size with decimals when style prop with font size property is provided 1`] = `
 <View
   style={
     [

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

@@ -142,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/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 );