@wordpress/block-editor 10.1.1-next.4d3b314fd5.0 → 10.3.0

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

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import { noCase } from 'change-case';
 import removeAccents from 'remove-accents';
-import { find } from 'lodash';
+import { find, words } from 'lodash';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -36,17 +35,6 @@ function normalizeSearchInput( input = '' ) {
 	return input;
 }
 
-/**
- * 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 ).split( ' ' ).filter( Boolean );
-}
-
 /**
  * Converts the search term into a list of normalized terms.
  *
@@ -55,7 +43,7 @@ function extractWords( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	return extractWords( normalizeSearchInput( input ) );
+	return words( normalizeSearchInput( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -162,7 +150,7 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 			category,
 			collection,
 		].join( ' ' );
-		const normalizedSearchTerms = extractWords( normalizedSearchInput );
+		const normalizedSearchTerms = words( 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

@@ -42,6 +42,10 @@ describe( 'getNormalizedSearchTerms', () => {
 			getNormalizedSearchTerms( '  Média  &   Text Tag-Cloud > 123' )
 		).toEqual( [ 'media', 'text', 'tag', 'cloud', '123' ] );
 	} );
+
+	it( 'should support non-latin letters', () => {
+		expect( getNormalizedSearchTerms( 'მედია' ) ).toEqual( [ 'მედია' ] );
+	} );
 } );
 
 describe( 'getItemSearchRank', () => {

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,26 @@
 
 	&: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);
+			}
 		}
 
 		&:focus {

package/src/components/inspector-controls/slot.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUseSlot as useSlot } from '@wordpress/components';
+import {
+	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
 import warning from '@wordpress/warning';
 
 /**
@@ -18,12 +21,13 @@ export default function InspectorControlsSlot( {
 } ) {
 	const Slot = groups[ group ]?.Slot;
 	const slot = useSlot( Slot?.__unstableName );
+	const fills = useSlotFills( Slot?.__unstableName );
 	if ( ! Slot || ! slot ) {
 		warning( `Unknown InspectorControl group "${ group }" provided.` );
 		return null;
 	}
 
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const hasFills = Boolean( fills && fills.length );
 	if ( ! hasFills ) {
 		return null;
 	}

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

@@ -31,7 +31,7 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should render a color panel if at least one setting supports custom colors', async () => {
@@ -55,7 +55,7 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 	} );
 
 	it( 'should render a color panel if at least one setting specifies some colors to choose', async () => {
@@ -85,7 +85,7 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything if none of the setting panels has colors to choose', async () => {
@@ -112,6 +112,6 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 	} );
 } );

package/src/components/preview-options/index.js

@@ -13,6 +13,7 @@ import { check } from '@wordpress/icons';
 
 export default function PreviewOptions( {
 	children,
+	viewLabel,
 	className,
 	isEnabled = true,
 	deviceType,
@@ -32,8 +33,7 @@ export default function PreviewOptions( {
 		variant: 'tertiary',
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
-		/* translators: button label text should, if possible, be under 16 characters. */
-		children: __( 'View' ),
+		children: viewLabel,
 	};
 	const menuProps = {
 		'aria-label': __( 'View options' ),

package/src/components/preview-options/style.scss

@@ -28,7 +28,7 @@
 }
 
 .edit-post-header__settings,
-.edit-site-header__actions {
+.edit-site-header-edit-mode__actions {
 	@include break-small () {
 		.editor-post-preview {
 			display: none;