@wordpress/block-editor 10.3.0 → 10.5.0

package/src/components/inserter/hooks/use-insertion-point.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -118,14 +113,11 @@ function useInsertionPoint( {
 					meta
 				);
 			}
+			const blockLength = Array.isArray( blocks ) ? blocks.length : 1;
 			const message = sprintf(
 				// translators: %d: the name of the block that has been added
-				_n(
-					'%d block added.',
-					'%d blocks added.',
-					castArray( blocks ).length
-				),
-				castArray( blocks ).length
+				_n( '%d block added.', '%d blocks added.', blockLength ),
+				blockLength
 			);
 			speak( message );
 

package/src/components/inserter/reusable-blocks-tab.js

@@ -4,6 +4,7 @@
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -59,14 +60,15 @@ export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 				rootClientId={ rootClientId }
 			/>
 			<div className="block-editor-inserter__manage-reusable-blocks-container">
-				<a
+				<Button
 					className="block-editor-inserter__manage-reusable-blocks"
+					variant="secondary"
 					href={ addQueryArgs( 'edit.php', {
 						post_type: 'wp_block',
 					} ) }
 				>
 					{ __( 'Manage Reusable blocks' ) }
-				</a>
+				</Button>
 			</div>
 		</>
 	);

package/src/components/inserter/search-items.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
-import { find, words } from 'lodash';
+import { find } from 'lodash';
+import { noCase } from 'change-case';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -12,6 +13,25 @@ const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultGetCategory = ( item ) => item.category;
 const defaultGetCollection = () => null;
 
+/**
+ * Extracts words from an input string.
+ *
+ * @param {string} input The input string.
+ *
+ * @return {Array} Words, extracted from the input string.
+ */
+function extractWords( input = '' ) {
+	return noCase( input, {
+		splitRegexp: [
+			/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
+			/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
+		],
+		stripRegexp: /(\p{C}|\p{P}|\p{S})+/giu, // Anything that's not a punctuation, symbol or control/format character.
+	} )
+		.split( ' ' )
+		.filter( Boolean );
+}
+
 /**
  * Sanitizes the search input string.
  *
@@ -43,7 +63,7 @@ function normalizeSearchInput( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	return words( normalizeSearchInput( input ) );
+	return extractWords( normalizeSearchInput( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -150,7 +170,7 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 			category,
 			collection,
 		].join( ' ' );
-		const normalizedSearchTerms = words( normalizedSearchInput );
+		const normalizedSearchTerms = extractWords( normalizedSearchInput );
 		const unmatchedTerms = removeMatchingTerms(
 			normalizedSearchTerms,
 			terms

package/src/components/inserter/style.scss

@@ -174,9 +174,13 @@ $block-inserter-tabs-height: 44px;
 	text-align: right;
 }
 
+.block-editor-inserter__manage-reusable-blocks-container {
+	margin: auto $grid-unit-20 $grid-unit-20;
+}
+
 .block-editor-inserter__manage-reusable-blocks {
-	display: inline-block;
-	margin: $grid-unit-20;
+	justify-content: center;
+	width: 100%;
 }
 
 .block-editor-inserter__no-results {
@@ -341,10 +345,6 @@ $block-inserter-tabs-height: 44px;
 	position: relative; // prevents overscroll when block library is open
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-	padding: $grid-unit-20;
-}
-
 .block-editor-inserter__quick-inserter {
 	width: 100%;
 
@@ -442,7 +442,8 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	&__list {
-		margin-left: $sidebar-width - $grid-unit-40;
+		margin-left: $sidebar-width;
+		padding: $grid-unit-30 0 $grid-unit-40;
 	}
 
 	.block-editor-block-patterns-list {

package/src/components/inserter/test/reusable-blocks-tab.js

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -22,35 +21,6 @@ jest.mock( '../hooks/use-block-types-state', () => {
 	return mock;
 } );
 
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
-} );
-
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
-	return {
-		useDispatch: () => ( {} ),
-	};
-} );
-
-const debouncedSpeak = jest.fn();
-
-function InserterBlockList( props ) {
-	return <ReusableBlocksTab debouncedSpeak={ debouncedSpeak } { ...props } />;
-}
-
-const initializeAllClosedMenuState = ( propOverrides ) => {
-	const { container } = render( <InserterBlockList { ...propOverrides } /> );
-	const activeTabs = container.querySelectorAll(
-		'.components-panel__body.is-opened button.components-panel__body-toggle'
-	);
-	activeTabs.forEach( ( tab ) => {
-		fireEvent.click( tab );
-	} );
-	return container;
-};
-
 describe( 'InserterMenu', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/block', {
@@ -59,19 +29,17 @@ describe( 'InserterMenu', () => {
 			edit: () => {},
 		} );
 	} );
+
 	afterAll( () => {
 		unregisterBlockType( 'core/block' );
 	} );
-	beforeEach( () => {
-		debouncedSpeak.mockClear();
 
+	beforeEach( () => {
 		useBlockTypesState.mockImplementation( () => [
 			items,
 			categories,
 			collections,
 		] );
-
-		useSelect.mockImplementation( () => false );
 	} );
 
 	it( 'should show nothing if there are no items', () => {
@@ -81,36 +49,25 @@ describe( 'InserterMenu', () => {
 			categories,
 			collections,
 		] );
-		const { container } = render(
-			<InserterBlockList filterValue="random" />
-		);
-		const visibleBlocks = container.querySelector(
-			'.block-editor-block-types-list__item'
-		);
 
-		expect( visibleBlocks ).toBe( null );
+		render( <ReusableBlocksTab filterValue="random" /> );
+
+		expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should list reusable blocks', () => {
-		const container = initializeAllClosedMenuState();
-		const blocks = container.querySelectorAll(
-			'.block-editor-block-types-list__item-title'
-		);
+		render( <ReusableBlocksTab /> );
 
-		expect( blocks ).toHaveLength( 1 );
-		expect( blocks[ 0 ] ).toHaveTextContent( 'My reusable block' );
+		expect(
+			screen.getByRole( 'option', { name: 'My reusable block' } )
+		).toBeVisible();
 	} );
 
 	it( 'should trim whitespace of search terms', () => {
-		const { container } = render(
-			<InserterBlockList filterValue=" my reusable" />
-		);
-
-		const blocks = container.querySelectorAll(
-			'.block-editor-block-types-list__item-title'
-		);
+		render( <ReusableBlocksTab filterValue=" my reusable" /> );
 
-		expect( blocks ).toHaveLength( 1 );
-		expect( blocks[ 0 ] ).toHaveTextContent( 'My reusable block' );
+		expect(
+			screen.getByRole( 'option', { name: 'My reusable block' } )
+		).toBeVisible();
 	} );
 } );

package/src/components/inserter/test/search-items.js

@@ -45,6 +45,12 @@ describe( 'getNormalizedSearchTerms', () => {
 
 	it( 'should support non-latin letters', () => {
 		expect( getNormalizedSearchTerms( 'მედია' ) ).toEqual( [ 'მედია' ] );
+		expect(
+			getNormalizedSearchTerms( '师父领进门，修行在个人。' )
+		).toEqual( [ '师父领进门', '修行在个人' ] );
+		expect(
+			getNormalizedSearchTerms( 'Бързата работа – срам за майстора.' )
+		).toEqual( [ 'бързата', 'работа', 'срам', 'за', 'майстора' ] );
 	} );
 } );
 

package/src/components/inserter-list-item/style.scss

@@ -49,6 +49,8 @@
 				border-radius: $radius-block-ui;
 				opacity: 0.04;
 				background: var(--wp-admin-theme-color);
+				// This fixes drag-and-drop in Firefox.
+				pointer-events: none;
 			}
 		}
 

package/src/components/letter-spacing-control/README.md

@@ -0,0 +1,55 @@
+# Letter spacing control
+
+The `LetterSpacingControl` component renders a [`UnitControl`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/unit-control/README.md) that lets the user enter a numeric value and select a unit, for example px or rem.
+
+This component is used for blocks that display text, commonly inside a 
+[`ToolsPanelItem`](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/tools-panel/tools-panel-item/README.md).
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Renders a letter spacing control.
+
+```jsx
+import { LetterSpacingControl } from '@wordpress/block-editor';
+
+const MyLetterSpacingControl = () => (
+	<LetterSpacingControl
+		value={ value }
+		onChange={ onChange }
+		__unstableInputWidth="auto"
+	/>
+);
+```
+
+### Props
+
+### `value`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The current value of the letter spacing setting.
+
+### `onChange`
+
+-   **Type:** `Function`
+
+A callback function invoked when the value is changed.
+
+### `_unstableInputWidth`
+
+-   **Type:** `string|number|undefined`
+-   **Default:** `undefined`
+
+Input width to pass through to inner UnitControl. Should be a valid CSS value.
+
+## Related components
+
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/line-height-control/index.js

@@ -99,6 +99,7 @@ const LineHeightControl = ( {
 				step={ STEP }
 				value={ value }
 				min={ 0 }
+				spinControls="custom"
 			/>
 		</div>
 	);

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

@@ -192,7 +192,7 @@ A `suggestion` should have the following shape:
 	)}
 />
 ```
-### renderControlBottom 
+### renderControlBottom
 
 -   Type: `Function`
 -   Required: No
@@ -338,7 +338,7 @@ See the [createSuggestion](#createSuggestion) section of this file to learn more
 <LinkControlSearchInput
     renderSuggestions={( { suggestions } ) => {
         return (
-            <Popover focusOnMount={ false } position="bottom">
+            <Popover focusOnMount={ false } placement="bottom">
                 <ul>
                     { suggestions.map( () => ( <li key={ `${ suggestion.id }-${ suggestion.type }` }>{ suggestion.title }</li> ) ) }
                 </ul>
@@ -352,7 +352,7 @@ See the [createSuggestion](#createSuggestion) section of this file to learn more
 <LinkControlSearchInput
     renderSuggestions={( suggestionsProps ) => {
         return (
-            <Popover focusOnMount={ false } position="bottom">
+            <Popover focusOnMount={ false } placement="bottom">
                 <LinkControlSearchResults { ...suggestionsProps } />
             </Popover>
         );

package/src/components/link-control/index.js

@@ -20,6 +20,7 @@ import LinkControlSettingsDrawer from './settings-drawer';
 import LinkControlSearchInput from './search-input';
 import LinkPreview from './link-preview';
 import useCreatePage from './use-create-page';
+import useInternalInputValue from './use-internal-input-value';
 import { ViewerFill } from './viewer-slot';
 import { DEFAULT_LINK_SETTINGS } from './constants';
 
@@ -132,22 +133,19 @@ function LinkControl( {
 	const isMounting = useRef( true );
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
+	const isEndingEditWithFocus = useRef( false );
+
+	const [ internalUrlInputValue, setInternalUrlInputValue ] =
+		useInternalInputValue( value?.url || '' );
+
+	const [ internalTextInputValue, setInternalTextInputValue ] =
+		useInternalInputValue( value?.title || '' );
 
-	const [ internalInputValue, setInternalInputValue ] = useState(
-		value?.url || ''
-	);
-	const [ internalTextValue, setInternalTextValue ] = useState(
-		value?.title || ''
-	);
-	const currentInputValue = propInputValue || internalInputValue;
 	const [ isEditingLink, setIsEditingLink ] = useState(
 		forceIsEditingLink !== undefined
 			? forceIsEditingLink
 			: ! value || ! value.url
 	);
-	const isEndingEditWithFocus = useRef( false );
-
-	const currentInputIsEmpty = ! currentInputValue?.trim()?.length;
 
 	const { createPage, isCreatingPage, errorMessage } =
 		useCreatePage( createSuggestion );
@@ -191,53 +189,35 @@ function LinkControl( {
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
-	useEffect( () => {
-		/**
-		 * If the value's `text` property changes then sync this
-		 * back up with state.
-		 */
-		if ( value?.title && value.title !== internalTextValue ) {
-			setInternalTextValue( value.title );
-		}
-
-		/**
-		 * Update the state value internalInputValue if the url value changes
-		 * for example when clicking on another anchor
-		 */
-		if ( value?.url ) {
-			setInternalInputValue( value.url );
-		}
-	}, [ value ] );
-
 	/**
 	 * Cancels editing state and marks that focus may need to be restored after
 	 * the next render, if focus was within the wrapper when editing finished.
 	 */
-	function stopEditing() {
+	const stopEditing = () => {
 		isEndingEditWithFocus.current = !! wrapperNode.current?.contains(
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
 		setIsEditingLink( false );
-	}
+	};
 
 	const handleSelectSuggestion = ( updatedValue ) => {
 		onChange( {
 			...updatedValue,
-			title: internalTextValue || updatedValue?.title,
+			title: internalTextInputValue || updatedValue?.title,
 		} );
 		stopEditing();
 	};
 
 	const handleSubmit = () => {
 		if (
-			currentInputValue !== value?.url ||
-			internalTextValue !== value?.title
+			currentUrlInputValue !== value?.url ||
+			internalTextInputValue !== value?.title
 		) {
 			onChange( {
 				...value,
-				url: currentInputValue,
-				title: internalTextValue,
+				url: currentUrlInputValue,
+				title: internalTextInputValue,
 			} );
 		}
 		stopEditing();
@@ -254,6 +234,10 @@ function LinkControl( {
 		}
 	};
 
+	const currentUrlInputValue = propInputValue || internalUrlInputValue;
+
+	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
+
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
@@ -289,8 +273,8 @@ function LinkControl( {
 								ref={ textInputRef }
 								className="block-editor-link-control__field block-editor-link-control__text-content"
 								label="Text"
-								value={ internalTextValue }
-								onChange={ setInternalTextValue }
+								value={ internalTextInputValue }
+								onChange={ setInternalTextInputValue }
 								onKeyDown={ handleSubmitWithEnter }
 							/>
 						) }
@@ -299,10 +283,10 @@ function LinkControl( {
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
 							placeholder={ searchInputPlaceholder }
-							value={ currentInputValue }
+							value={ currentUrlInputValue }
 							withCreateSuggestion={ withCreateSuggestion }
 							onCreateSuggestion={ createPage }
-							onChange={ setInternalInputValue }
+							onChange={ setInternalUrlInputValue }
 							onSelect={ handleSelectSuggestion }
 							showInitialSuggestions={ showInitialSuggestions }
 							allowDirectEntry={ ! noDirectEntry }

package/src/components/link-control/search-input.js

@@ -111,7 +111,7 @@ const LinkControlSearchInput = forwardRef(
 				allowDirectEntry ||
 				( suggestion && Object.keys( suggestion ).length >= 1 )
 			) {
-				const { id, url, ...restLinkProps } = currentLink;
+				const { id, url, ...restLinkProps } = currentLink ?? {};
 				onSelect(
 					// Some direct entries don't have types or IDs, and we still need to clear the previous ones.
 					{ ...restLinkProps, ...suggestion },