@wordpress/block-editor 10.2.0 → 10.4.0

package/src/components/inserter/menu.js

@@ -24,7 +24,9 @@ import { useSelect } from '@wordpress/data';
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
-import BlockPatternsTabs from './block-patterns-tab';
+import BlockPatternsTabs, {
+	BlockPatternsCategoryDialog,
+} from './block-patterns-tab';
 import ReusableBlocksTab from './reusable-blocks-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
@@ -52,6 +54,7 @@ function InserterMenu(
 	const [ hoveredItem, setHoveredItem ] = useState( null );
 	const [ selectedPatternCategory, setSelectedPatternCategory ] =
 		useState( null );
+	const [ selectedTab, setSelectedTab ] = useState( null );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -144,7 +147,7 @@ function InserterMenu(
 			<BlockPatternsTabs
 				rootClientId={ destinationRootClientId }
 				onInsert={ onInsertPattern }
-				onClickCategory={ onClickPatternCategory }
+				onSelectCategory={ onClickPatternCategory }
 				selectedCategory={ selectedPatternCategory }
 			/>
 		),
@@ -186,6 +189,8 @@ function InserterMenu(
 		},
 	} ) );
 
+	const showPatternPanel =
+		selectedTab === 'patterns' && ! filterValue && selectedPatternCategory;
 	const showAsTabs = ! filterValue && ( showPatterns || hasReusableBlocks );
 
 	return (
@@ -228,6 +233,7 @@ function InserterMenu(
 						showPatterns={ showPatterns }
 						showReusableBlocks={ hasReusableBlocks }
 						prioritizePatterns={ prioritizePatterns }
+						onSelect={ setSelectedTab }
 					>
 						{ getCurrentTab }
 					</InserterTabs>
@@ -241,6 +247,13 @@ function InserterMenu(
 			{ showInserterHelpPanel && hoveredItem && (
 				<InserterPreviewPanel item={ hoveredItem } />
 			) }
+			{ showPatternPanel && (
+				<BlockPatternsCategoryDialog
+					rootClientId={ destinationRootClientId }
+					onInsert={ onInsertPattern }
+					category={ selectedPatternCategory }
+				/>
+			) }
 		</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

@@ -22,14 +22,13 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	height: 100%;
 	gap: $grid-unit-20;
-	width: auto;
-	@include break-medium {
-		width: $block-inserter-width;
-	}
-
 	&.show-as-tabs {
 		gap: 0;
 	}
+
+	@include break-medium {
+		width: $block-inserter-width;
+	}
 }
 
 .block-editor-inserter__popover.is-quick {
@@ -148,10 +147,6 @@ $block-inserter-tabs-height: 44px;
 	padding: $grid-unit-20 $grid-unit-20 0;
 }
 
-.block-editor-inserter__panel-header-patterns {
-	padding: $grid-unit-20 $grid-unit-20 0;
-}
-
 .block-editor-inserter__panel-content {
 	padding: $grid-unit-20;
 }
@@ -235,6 +230,92 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__patterns-explore-button.components-button {
+	padding: $grid-unit-20;
+	justify-content: center;
+	margin-top: $grid-unit-20;
+	width: 100%;
+}
+
+.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category {
+	color: var(--wp-admin-theme-color);
+	position: relative;
+
+	.components-flex-item {
+		filter: brightness(0.95);
+	}
+
+	svg {
+		fill: var(--wp-admin-theme-color);
+	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		border-radius: $radius-block-ui;
+		opacity: 0.04;
+		background: var(--wp-admin-theme-color);
+	}
+}
+
+.block-editor-inserter__block-patterns-tabs-container {
+	height: 100%;
+	nav {
+		height: 100%;
+	}
+}
+
+.block-editor-inserter__block-patterns-tabs {
+	display: flex;
+	flex-direction: column;
+	padding: $grid-unit-20;
+	overflow-y: auto;
+	height: 100%;
+}
+
+.block-editor-inserter__patterns-fill-space {
+	flex-grow: 1;
+}
+
+.block-editor-inserter__patterns-category-panel {
+	background: $gray-100;
+	border-left: $border-width solid $gray-200;
+	border-right: $border-width solid $gray-200;
+	position: absolute;
+	padding: $grid-unit-40 $grid-unit-30;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	overflow-y: auto;
+	scrollbar-gutter: stable both-edges;
+
+	@include break-medium {
+		left: 100%;
+		display: block;
+		width: 300px;
+	}
+
+	.block-editor-block-patterns-list {
+		margin-top: $grid-unit-30;
+	}
+
+	.block-editor-block-preview__container {
+		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
+		&:hover {
+			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+		}
+	}
+
+	.block-editor-block-patterns-list__item-title {
+		display: none;
+	}
+}
+
 .block-editor-inserter__preview-content {
 	min-height: $grid-unit-60 * 3;
 	background: $gray-100;
@@ -388,3 +469,7 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 }
+
+.block-editor-inserter__patterns-category-panel-title {
+	font-size: calc(1.25 * 13px);
+}

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

@@ -41,14 +41,14 @@ function InserterBlockList( props ) {
 }
 
 const initializeAllClosedMenuState = ( propOverrides ) => {
-	const result = render( <InserterBlockList { ...propOverrides } /> );
-	const activeTabs = result.container.querySelectorAll(
+	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 result;
+	return container;
 };
 
 describe( 'InserterMenu', () => {
@@ -92,13 +92,13 @@ describe( 'InserterMenu', () => {
 	} );
 
 	it( 'should list reusable blocks', () => {
-		const { container } = initializeAllClosedMenuState();
+		const container = initializeAllClosedMenuState();
 		const blocks = container.querySelectorAll(
 			'.block-editor-block-types-list__item-title'
 		);
 
 		expect( blocks ).toHaveLength( 1 );
-		expect( blocks[ 0 ].textContent ).toBe( 'My reusable block' );
+		expect( blocks[ 0 ] ).toHaveTextContent( 'My reusable block' );
 	} );
 
 	it( 'should trim whitespace of search terms', () => {
@@ -111,6 +111,6 @@ describe( 'InserterMenu', () => {
 		);
 
 		expect( blocks ).toHaveLength( 1 );
-		expect( blocks[ 0 ].textContent ).toBe( 'My reusable block' );
+		expect( blocks[ 0 ] ).toHaveTextContent( 'My reusable block' );
 	} );
 } );

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-draggable-blocks/index.js

@@ -7,7 +7,13 @@ import { Draggable } from '@wordpress/components';
  */
 import BlockDraggableChip from '../block-draggable/draggable-chip';
 
-const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => {
+const InserterDraggableBlocks = ( {
+	isEnabled,
+	blocks,
+	icon,
+	children,
+	isPattern,
+} ) => {
 	const transferData = {
 		type: 'inserter',
 		blocks,
@@ -18,7 +24,11 @@ const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			__experimentalDragComponent={
-				<BlockDraggableChip count={ blocks.length } icon={ icon } />
+				<BlockDraggableChip
+					count={ blocks.length }
+					icon={ icon }
+					isPattern={ isPattern }
+				/>
 			}
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {

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

@@ -30,7 +30,28 @@
 
 	&:not(:disabled) {
 		&:hover {
-			color: var(--wp-admin-theme-color) !important;
+			.block-editor-block-types-list__item-title {
+				color: var(--wp-admin-theme-color) !important;
+				filter: brightness(0.95);
+			}
+
+			svg {
+				color: var(--wp-admin-theme-color) !important;
+			}
+
+			&::after {
+				content: "";
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				border-radius: $radius-block-ui;
+				opacity: 0.04;
+				background: var(--wp-admin-theme-color);
+				// This fixes drag-and-drop in Firefox.
+				pointer-events: none;
+			}
 		}
 
 		&:focus {

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/test/index.js

@@ -392,7 +392,7 @@ describe( 'Searching for a link', () => {
 			fauxEntitySuggestions.length
 		);
 
-		expect( searchInput.getAttribute( 'aria-expanded' ) ).toBe( 'true' );
+		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
 
 		// Sanity check that a search suggestion shows up corresponding to the data.
 		expect( searchResultElements[ 0 ] ).toHaveTextContent(

package/src/components/list-view/drop-indicator.js

@@ -115,6 +115,7 @@ export default function ListViewDropIndicator( {
 			anchor={ popoverAnchor }
 			focusOnMount={ false }
 			className="block-editor-list-view-drop-indicator"
+			variant="unstyled"
 		>
 			<div
 				style={ style }

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

@@ -249,39 +249,12 @@
 			}
 		}
 
-		// Don't show the focus inherited by the Button component.
-		&:focus:enabled {
-			box-shadow: none;
-			outline: none;
-		}
-
-		// Focus style.
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
-
-		&:focus::before {
-			@include block-toolbar-button-style__focus();
-		}
-
-		// Focus and toggle pseudo elements.
+		// Tweak size and position of focus ring.
 		&::before {
-			content: "";
-			position: absolute;
-			display: block;
-			border-radius: $radius-block-ui;
 			height: 16px;
 			min-width: 100%;
-
-			// Position the focus rectangle.
 			left: 0;
 			right: 0;
-
-			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
 		}
 	}
 
@@ -416,14 +389,6 @@ $block-navigation-max-indent: 8;
 	}
 }
 
-// Reset some popover defaults for the drop indicator.
-.block-editor-list-view-drop-indicator > .components-popover__content {
-	margin-left: 0;
-	border: none;
-	box-shadow: none;
-	outline: none;
-}
-
 .block-editor-list-view-placeholder {
 	padding: 0;
 	margin: 0;

package/src/components/list-view/use-list-view-drop-zone.js

@@ -11,7 +11,10 @@ import {
 /**
  * Internal dependencies
  */
-import { getDistanceToNearestEdge } from '../../utils/math';
+import {
+	getDistanceToNearestEdge,
+	isPointContainedByRect,
+} from '../../utils/math';
 import useOnBlockDrop from '../use-on-block-drop';
 import { store as blockEditorStore } from '../../store';
 
@@ -48,23 +51,6 @@ import { store as blockEditorStore } from '../../store';
  *                                                  'inside' refers to nesting as an inner block.
  */
 
-/**
- * Is the point contained by the rectangle.
- *
- * @param {WPPoint} point The point.
- * @param {DOMRect} rect  The rectangle.
- *
- * @return {boolean} True if the point is contained by the rectangle, false otherwise.
- */
-function isPointContainedByRect( point, rect ) {
-	return (
-		rect.left <= point.x &&
-		rect.right >= point.x &&
-		rect.top <= point.y &&
-		rect.bottom >= point.y
-	);
-}
-
 /**
  * Determines whether the user positioning the dragged block to nest as an
  * inner block.

package/src/components/media-replace-flow/index.js

@@ -131,7 +131,7 @@ const MediaReplaceFlow = ( {
 	const gallery = multiple && onlyAllowsImages();
 
 	const POPOVER_PROPS = {
-		isAlternate: true,
+		variant: 'toolbar',
 	};
 
 	return (