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

package/src/components/navigable-toolbar/index.js

@@ -19,14 +19,19 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function hasOnlyToolbarItem( elements ) {
 	const dataProp = 'toolbarItem';
 	return ! elements.some( ( element ) => ! ( dataProp in element.dataset ) );
 }
 
-function getAllToolbarItemsIn( container ) {
-	return Array.from( container.querySelectorAll( '[data-toolbar-item]' ) );
+function getAllFocusableToolbarItemsIn( container ) {
+	return Array.from(
+		container.querySelectorAll(
+			'[data-toolbar-item]:not([disabled]):not([aria-disabled="true"])'
+		)
+	);
 }
 
 function hasFocusWithin( container ) {
@@ -141,7 +146,8 @@ function useToolbarFocus( {
 		let raf = 0;
 		if ( ! initialFocusOnMount ) {
 			raf = window.requestAnimationFrame( () => {
-				const items = getAllToolbarItemsIn( navigableToolbarRef );
+				const items =
+					getAllFocusableToolbarItemsIn( navigableToolbarRef );
 				const index = initialIndex || 0;
 				if ( items[ index ] && hasFocusWithin( navigableToolbarRef ) ) {
 					items[ index ].focus( {
@@ -158,18 +164,13 @@ function useToolbarFocus( {
 			if ( ! onIndexChange || ! navigableToolbarRef ) return;
 			// When the toolbar element is unmounted and onIndexChange is passed, we
 			// pass the focused toolbar item index so it can be hydrated later.
-			const items = getAllToolbarItemsIn( navigableToolbarRef );
+			const items = getAllFocusableToolbarItemsIn( navigableToolbarRef );
 			const index = items.findIndex( ( item ) => item.tabIndex === 0 );
 			onIndexChange( index );
 		};
 	}, [ initialIndex, initialFocusOnMount, onIndexChange, toolbarRef ] );
 
-	const { lastFocus } = useSelect( ( select ) => {
-		const { getLastFocus } = select( blockEditorStore );
-		return {
-			lastFocus: getLastFocus(),
-		};
-	}, [] );
+	const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
 	/**
 	 * Handles returning focus to the block editor canvas when pressing escape.
 	 */
@@ -178,6 +179,7 @@ function useToolbarFocus( {
 
 		if ( focusEditorOnEscape ) {
 			const handleKeyDown = ( event ) => {
+				const lastFocus = getLastFocus();
 				if ( event.keyCode === ESCAPE && lastFocus?.current ) {
 					// Focus the last focused element when pressing escape.
 					event.preventDefault();
@@ -192,7 +194,7 @@ function useToolbarFocus( {
 				);
 			};
 		}
-	}, [ focusEditorOnEscape, lastFocus, toolbarRef ] );
+	}, [ focusEditorOnEscape, getLastFocus, toolbarRef ] );
 }
 
 export default function NavigableToolbar( {

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

@@ -7,7 +7,12 @@ import { TextInput, Platform, Dimensions } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { RichText, getPxFromCssUnit } from '@wordpress/block-editor';
+import { getPxFromCssUnit } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import RichText from '../rich-text';
 
 /**
  * Internal dependencies

package/src/components/provider/index.js

@@ -45,7 +45,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		useBlockSync( props );
 
 		return (
-			<SlotFillProvider>
+			<SlotFillProvider passthrough>
 				<KeyboardShortcuts.Register />
 				<BlockRefsProvider>{ children }</BlockRefsProvider>
 			</SlotFillProvider>

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