@wordpress/block-editor 9.1.0 → 9.4.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { deburr, differenceWith, find, words } from 'lodash';
+import { deburr, find, words } from 'lodash';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -47,11 +47,11 @@ export const getNormalizedSearchTerms = ( input = '' ) => {
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
-	return differenceWith(
-		unmatchedTerms,
-		getNormalizedSearchTerms( unprocessedTerms ),
-		( unmatchedTerm, unprocessedTerm ) =>
-			unprocessedTerm.includes( unmatchedTerm )
+	return unmatchedTerms.filter(
+		( term ) =>
+			! getNormalizedSearchTerms( unprocessedTerms ).some(
+				( unprocessedTerm ) => unprocessedTerm.includes( term )
+			)
 	);
 };
 

package/src/components/inserter/search-results.native.js

@@ -22,9 +22,8 @@ function InserterSearchResults( {
 } ) {
 	const { blockTypes } = useSelect(
 		( select ) => {
-			const allItems = select( blockEditorStore ).getInserterItems(
-				rootClientId
-			);
+			const allItems =
+				select( blockEditorStore ).getInserterItems( rootClientId );
 
 			const availableItems = filterInserterItems( allItems, {
 				allowReusable: true,
@@ -36,9 +35,8 @@ function InserterSearchResults( {
 		[ rootClientId, filterValue ]
 	);
 
-	const { items, trackBlockTypeSelected } = useBlockTypeImpressions(
-		blockTypes
-	);
+	const { items, trackBlockTypeSelected } =
+		useBlockTypeImpressions( blockTypes );
 
 	if ( ! items || items?.length === 0 ) {
 		return <InserterNoResults />;

package/src/components/inspector-popover-header/README.md

@@ -0,0 +1,76 @@
+# `InspectorPopoverHeader`
+
+`<InspectorPopoverHeader />` renders a header that is suitable for use in an
+inspector sidebar popover. For example, it is used to implement the Visibility,
+Publish, Author, etc. popovers in the post sidebar. It displays a title,
+optional action buttons, an optional close button, and optional help text.
+
+## Usage
+
+```jsx
+const MyPostDatePopover = () => {
+	return (
+		<Dropdown
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+				>
+					Select post date
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<>
+					<InspectorPopoverHeader
+						title="Post date"
+						actions={ [
+							{
+								label: 'Reset',
+								onClick: () => {},
+							},
+						] }
+						onClose={ onClose }
+					/>
+					Place form for editing post date here
+				</>
+			) }
+		/>
+	);
+};
+```
+
+## Props
+
+### title
+
+Title to display in the header.
+
+- Type: `String`
+- Required: Yes
+
+### actions
+
+Array of actions to display in the header as a row of buttons. Each item in the
+array must be an object and contains:
+
+- `label`: String. Required. The action button's label.
+- `icon`: Element. Optional. If specified, an icon button will be shown.
+- `onClick`: Function. Optional. Called when the action button is clicked.
+
+- Type: `Array`
+- Required: No
+
+### onClose
+
+Called when the user presses the close button. If not provided, no close button
+will appear.
+
+- Type: `Function`
+- Required: No
+
+## help
+
+Help text to display at the bottom of the header.
+
+- Type: `String`
+- Required: No

package/src/components/inspector-popover-header/index.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+	Button,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { closeSmall } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+export default function InspectorPopoverHeader( {
+	title,
+	help,
+	actions = [],
+	onClose,
+} ) {
+	return (
+		<VStack className="block-editor-inspector-popover-header" spacing={ 4 }>
+			<HStack alignment="center">
+				<Heading
+					className="block-editor-inspector-popover-header__heading"
+					level={ 2 }
+					size={ 13 }
+				>
+					{ title }
+				</Heading>
+				<Spacer />
+				{ actions.map( ( { label, icon, onClick } ) => (
+					<Button
+						key={ label }
+						className="block-editor-inspector-popover-header__action"
+						label={ label }
+						icon={ icon }
+						variant={ ! icon && 'tertiary' }
+						onClick={ onClick }
+					>
+						{ ! icon && label }
+					</Button>
+				) ) }
+				{ onClose && (
+					<Button
+						className="block-editor-inspector-popover-header__action"
+						label={ __( 'Close' ) }
+						icon={ closeSmall }
+						onClick={ onClose }
+					/>
+				) }
+			</HStack>
+			{ help && <Text>{ help }</Text> }
+		</VStack>
+	);
+}

package/src/components/inspector-popover-header/style.scss

@@ -0,0 +1,16 @@
+.block-editor-inspector-popover-header {
+	margin-bottom: $grid-unit-20;
+}
+
+[class].block-editor-inspector-popover-header__action {
+	height: $icon-size;
+
+	&.has-icon {
+		min-width: $icon-size;
+		padding: 0;
+	}
+
+	&:not(.has-icon) {
+		text-decoration: underline;
+	}
+}

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

@@ -75,8 +75,7 @@ const LineHeightControl = ( {
 			{
 				since: '6.0',
 				version: '6.4',
-				hint:
-					'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
 			}
 		);
 	}

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -97,6 +96,8 @@ import { DEFAULT_LINK_SETTINGS } from './constants';
  * @property {Function}                   renderControlBottom        Optional controls to be rendered at the bottom of the component.
  */
 
+const noop = () => {};
+
 /**
  * Renders a link control. A link control is a controlled input which maintains
  * a value associated with a link (HTML anchor element) and relevant settings
@@ -148,9 +149,8 @@ function LinkControl( {
 
 	const currentInputIsEmpty = ! currentInputValue?.trim()?.length;
 
-	const { createPage, isCreatingPage, errorMessage } = useCreatePage(
-		createSuggestion
-	);
+	const { createPage, isCreatingPage, errorMessage } =
+		useCreatePage( createSuggestion );
 
 	useEffect( () => {
 		if (

package/src/components/link-control/search-create-button.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isFunction } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -25,7 +24,10 @@ export const LinkControlSearchCreate = ( {
 
 	let text;
 	if ( buttonText ) {
-		text = isFunction( buttonText ) ? buttonText( searchTerm ) : buttonText;
+		text =
+			typeof buttonText === 'function'
+				? buttonText( searchTerm )
+				: buttonText;
 	} else {
 		text = createInterpolateElement(
 			sprintf(

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { noop, omit } from 'lodash';
+import { omit } from 'lodash';
 import classnames from 'classnames';
 /**
  * WordPress dependencies
@@ -23,6 +23,8 @@ import useSearchHandler from './use-search-handler';
 // which will cause an unintended http request.
 const noopSearchHandler = () => Promise.resolve( [] );
 
+const noop = () => {};
+
 const LinkControlSearchInput = forwardRef(
 	(
 		{

package/src/components/link-control/settings-drawer.js

@@ -1,14 +1,11 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { ToggleControl, VisuallyHidden } from '@wordpress/components';
 
+const noop = () => {};
+
 const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => {
 	if ( ! settings || ! settings.length ) {
 		return null;

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

@@ -1,7 +1,6 @@
-/**
- * External dependencies
- */
-import { uniqueId, take } from 'lodash';
+let uniqueIdCounter = 1;
+
+export const uniqueId = () => uniqueIdCounter++;
 
 export const fauxEntitySuggestions = [
 	{
@@ -27,8 +26,7 @@ export const fauxEntitySuggestions = [
 	},
 	{
 		id: uniqueId(),
-		title:
-			'This is another Post with a much longer title just to be really annoying and to try and break the UI',
+		title: 'This is another Post with a much longer title just to be really annoying and to try and break the UI',
 		type: 'post',
 		info: '1 month ago',
 		url: `?p=${ uniqueId() }`,
@@ -41,7 +39,7 @@ export const fetchFauxEntitySuggestions = (
 	{ isInitialSuggestions } = {}
 ) => {
 	const suggestions = isInitialSuggestions
-		? take( fauxEntitySuggestions, 3 )
+		? fauxEntitySuggestions.slice( 0, 3 )
 		: fauxEntitySuggestions;
 	return Promise.resolve( suggestions );
 };