@wordpress/block-editor 9.2.0 → 9.3.0

package/src/components/inserter/index.native.js

@@ -282,9 +282,8 @@ export class Inserter extends Component {
 			this.setState(
 				{
 					destinationRootClientId: this.props.destinationRootClientId,
-					shouldReplaceBlock: this.shouldReplaceBlock(
-						insertionType
-					),
+					shouldReplaceBlock:
+						this.shouldReplaceBlock( insertionType ),
 					insertionIndex: this.getInsertionIndex( insertionType ),
 				},
 				onToggle
@@ -324,11 +323,8 @@ export class Inserter extends Component {
 	 */
 	renderContent( { onClose, isOpen } ) {
 		const { clientId, isAppender } = this.props;
-		const {
-			destinationRootClientId,
-			shouldReplaceBlock,
-			insertionIndex,
-		} = this.state;
+		const { destinationRootClientId, shouldReplaceBlock, insertionIndex } =
+			this.state;
 		return (
 			<InserterMenu
 				isOpen={ isOpen }
@@ -385,9 +381,8 @@ export default compose( [
 			: undefined;
 
 		function getDefaultInsertionIndex() {
-			const {
-				__experimentalShouldInsertAtTheTop: shouldInsertAtTheTop,
-			} = getBlockEditorSettings();
+			const { __experimentalShouldInsertAtTheTop: shouldInsertAtTheTop } =
+				getBlockEditorSettings();
 
 			// If post title is selected insert as first block.
 			if ( shouldInsertAtTheTop ) {

package/src/components/inserter/library.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -15,6 +10,8 @@ import { forwardRef } from '@wordpress/element';
 import InserterMenu from './menu';
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 function InserterLibrary(
 	{
 		rootClientId,

package/src/components/inserter/menu.js

@@ -44,33 +44,28 @@ function InserterMenu(
 		__experimentalFilterValue
 	);
 	const [ hoveredItem, setHoveredItem ] = useState( null );
-	const [ selectedPatternCategory, setSelectedPatternCategory ] = useState(
-		null
-	);
+	const [ selectedPatternCategory, setSelectedPatternCategory ] =
+		useState( null );
 
-	const [
-		destinationRootClientId,
-		onInsertBlocks,
-		onToggleInsertionPoint,
-	] = useInsertionPoint( {
-		rootClientId,
-		clientId,
-		isAppender,
-		insertionIndex: __experimentalInsertionIndex,
-		shouldFocusBlock,
-	} );
+	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
+		useInsertionPoint( {
+			rootClientId,
+			clientId,
+			isAppender,
+			insertionIndex: __experimentalInsertionIndex,
+			shouldFocusBlock,
+		} );
 	const { showPatterns, hasReusableBlocks } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } = select(
-				blockEditorStore
-			);
+			const { __experimentalGetAllowedPatterns, getSettings } =
+				select( blockEditorStore );
 
 			return {
 				showPatterns: !! __experimentalGetAllowedPatterns(
 					destinationRootClientId
 				).length,
-				hasReusableBlocks: !! getSettings().__experimentalReusableBlocks
-					?.length,
+				hasReusableBlocks:
+					!! getSettings().__experimentalReusableBlocks?.length,
 			};
 		},
 		[ destinationRootClientId ]

package/src/components/inserter/menu.native.js

@@ -162,13 +162,15 @@ function InserterMenu( {
 		[ setFilterValue ]
 	);
 
-	const onKeyboardShow = useCallback( () => setShowTabs( false ), [
-		setShowTabs,
-	] );
+	const onKeyboardShow = useCallback(
+		() => setShowTabs( false ),
+		[ setShowTabs ]
+	);
 
-	const onKeyboardHide = useCallback( () => setShowTabs( true ), [
-		setShowTabs,
-	] );
+	const onKeyboardHide = useCallback(
+		() => setShowTabs( true ),
+		[ setShowTabs ]
+	);
 
 	const showSearchForm = items.length > MIN_ITEMS_FOR_SEARCH;
 	const isFullScreen = ! isIOS && showSearchForm;

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

@@ -20,7 +20,8 @@ function InserterNoResults() {
 		'inserter-search-no-results__text-primary': textPrimaryBaseStyle,
 		'inserter-search-no-results__text-primary--dark': textPrimaryDarkStyle,
 		'inserter-search-no-results__text-secondary': textSecondaryBaseStyle,
-		'inserter-search-no-results__text-secondary--dark': textSecondaryDarkStyle,
+		'inserter-search-no-results__text-secondary--dark':
+			textSecondaryDarkStyle,
 	} = styles;
 	const textPrimaryStyle = usePreferredColorSchemeStyle(
 		textPrimaryBaseStyle,

package/src/components/inserter/quick-inserter.js

@@ -51,9 +51,8 @@ export default function QuickInserter( {
 
 	const { setInserterIsOpened, insertionIndex } = useSelect(
 		( select ) => {
-			const { getSettings, getBlockIndex, getBlockCount } = select(
-				blockEditorStore
-			);
+			const { getSettings, getBlockIndex, getBlockCount } =
+				select( blockEditorStore );
 			const settings = getSettings();
 			const index = getBlockIndex( clientId );
 			const blockCount = getBlockCount();

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,7 @@
 /**
  * External dependencies
  */
-import { uniqueId, take } from 'lodash';
+import { uniqueId } from 'lodash';
 
 export const fauxEntitySuggestions = [
 	{
@@ -27,8 +27,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 +40,7 @@ export const fetchFauxEntitySuggestions = (
 	{ isInitialSuggestions } = {}
 ) => {
 	const suggestions = isInitialSuggestions
-		? take( fauxEntitySuggestions, 3 )
+		? fauxEntitySuggestions.slice( 0, 3 )
 		: fauxEntitySuggestions;
 	return Promise.resolve( suggestions );
 };

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

@@ -377,8 +377,8 @@ describe( 'Searching for a link', () => {
 
 		const searchResultElements = getSearchResults();
 
-		const firstSearchResultItemHTML = first( searchResultElements )
-			.innerHTML;
+		const firstSearchResultItemHTML =
+			first( searchResultElements ).innerHTML;
 		const lastSearchResultItemHTML = last( searchResultElements ).innerHTML;
 
 		expect( searchResultElements ).toHaveLength(
@@ -501,8 +501,8 @@ describe( 'Searching for a link', () => {
 
 			const searchResultElements = getSearchResults();
 
-			const lastSearchResultItemHTML = last( searchResultElements )
-				.innerHTML;
+			const lastSearchResultItemHTML =
+				last( searchResultElements ).innerHTML;
 			const additionalDefaultFallbackURLSuggestionLength = 1;
 
 			// We should see a search result for each of the expect search suggestions
@@ -758,12 +758,10 @@ describe( 'Default search suggestions', () => {
 		// Search Input UI.
 		const searchInput = getURLInput();
 
-		const searchResultsWrapper = container.querySelector(
-			'[role="listbox"]'
-		);
-		const initialSearchResultElements = searchResultsWrapper.querySelectorAll(
-			'[role="option"]'
-		);
+		const searchResultsWrapper =
+			container.querySelector( '[role="listbox"]' );
+		const initialSearchResultElements =
+			searchResultsWrapper.querySelectorAll( '[role="option"]' );
 
 		const searchResultsLabel = container.querySelector(
 			`#${ searchResultsWrapper.getAttribute( 'aria-labelledby' ) }`
@@ -1690,9 +1688,8 @@ describe( 'Selecting links', () => {
 
 			await eventLoopTick();
 
-			const searchResultsWrapper = container.querySelector(
-				'[role="listbox"]'
-			);
+			const searchResultsWrapper =
+				container.querySelector( '[role="listbox"]' );
 
 			const searchResultsLabel = container.querySelector(
 				`#${ searchResultsWrapper.getAttribute( 'aria-labelledby' ) }`
@@ -1784,9 +1781,8 @@ describe( 'Addition Settings UI', () => {
 
 		expect( newTabSettingLabel ).not.toBeUndefined(); // find() returns "undefined" if not found.
 
-		const newTabSettingLabelForAttr = newTabSettingLabel.getAttribute(
-			'for'
-		);
+		const newTabSettingLabelForAttr =
+			newTabSettingLabel.getAttribute( 'for' );
 		const newTabSettingInput = container.querySelector(
 			`#${ newTabSettingLabelForAttr }`
 		);
@@ -1951,8 +1947,7 @@ describe( 'Rich link previews', () => {
 	it( 'should not fetch or display rich previews by default', async () => {
 		mockFetchRichUrlData.mockImplementation( () =>
 			Promise.resolve( {
-				title:
-					'Blog Tool, Publishing Platform, and CMS \u2014 WordPress.org',
+				title: 'Blog Tool, Publishing Platform, and CMS \u2014 WordPress.org',
 				icon: 'https://s.w.org/favicon.ico?2',
 				description:
 					'Open source software which you can use to easily create a beautiful website, blog, or app.',
@@ -1982,8 +1977,7 @@ describe( 'Rich link previews', () => {
 	it( 'should display a rich preview when data is available', async () => {
 		mockFetchRichUrlData.mockImplementation( () =>
 			Promise.resolve( {
-				title:
-					'Blog Tool, Publishing Platform, and CMS \u2014 WordPress.org',
+				title: 'Blog Tool, Publishing Platform, and CMS \u2014 WordPress.org',
 				icon: 'https://s.w.org/favicon.ico?2',
 				description:
 					'Open source software which you can use to easily create a beautiful website, blog, or app.',
@@ -2093,8 +2087,7 @@ describe( 'Rich link previews', () => {
 	it( 'should display a fallback when icon is missing from rich data', async () => {
 		mockFetchRichUrlData.mockImplementation( () =>
 			Promise.resolve( {
-				title:
-					'Blog Tool, Publishing Platform, and CMS \u2014 WordPress.org',
+				title: 'Blog Tool, Publishing Platform, and CMS \u2014 WordPress.org',
 				description:
 					'Open source software which you can use to easily create a beautiful website, blog, or app.',
 				image: 'https://s.w.org/images/home/screen-themes.png?3',
@@ -2136,8 +2129,7 @@ describe( 'Rich link previews', () => {
 		async ( dataItem ) => {
 			mockFetchRichUrlData.mockImplementation( () => {
 				const data = {
-					title:
-						'Blog Tool, Publishing Platform, and CMS \u2014 WordPress.org',
+					title: 'Blog Tool, Publishing Platform, and CMS \u2014 WordPress.org',
 					icon: 'https://s.w.org/favicon.ico?2',
 					description:
 						'Open source software which you can use to easily create a beautiful website, blog, or app.',
@@ -2163,9 +2155,8 @@ describe( 'Rich link previews', () => {
 				"[aria-label='Currently selected']"
 			);
 
-			const isRichLinkPreview = linkPreview.classList.contains(
-				'is-rich'
-			);
+			const isRichLinkPreview =
+				linkPreview.classList.contains( 'is-rich' );
 			expect( isRichLinkPreview ).toBe( true );
 
 			const missingDataItem = linkPreview.querySelector(
@@ -2202,9 +2193,8 @@ describe( 'Rich link previews', () => {
 				"[aria-label='Currently selected']"
 			);
 
-			const isRichLinkPreview = linkPreview.classList.contains(
-				'is-rich'
-			);
+			const isRichLinkPreview =
+				linkPreview.classList.contains( 'is-rich' );
 
 			expect( isRichLinkPreview ).toBe( false );
 		}
@@ -2231,9 +2221,8 @@ describe( 'Rich link previews', () => {
 			"[aria-label='Currently selected']"
 		);
 
-		const isFetchingRichPreview = linkPreview.classList.contains(
-			'is-fetching'
-		);
+		const isFetchingRichPreview =
+			linkPreview.classList.contains( 'is-fetching' );
 		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
 
 		expect( isFetchingRichPreview ).toBe( true );
@@ -2261,9 +2250,8 @@ describe( 'Rich link previews', () => {
 			"[aria-label='Currently selected']"
 		);
 
-		const isFetchingRichPreview = linkPreview.classList.contains(
-			'is-fetching'
-		);
+		const isFetchingRichPreview =
+			linkPreview.classList.contains( 'is-fetching' );
 
 		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
 

package/src/components/link-control/use-search-handler.js

@@ -138,8 +138,8 @@ export default function useSearchHandler(
 
 		return {
 			pageOnFront: getSettings().pageOnFront,
-			fetchSearchSuggestions: getSettings()
-				.__experimentalFetchLinkSuggestions,
+			fetchSearchSuggestions:
+				getSettings().__experimentalFetchLinkSuggestions,
 		};
 	}, [] );
 

package/src/components/list-view/block-contents.js

@@ -36,10 +36,8 @@ const ListViewBlockContents = forwardRef(
 
 		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
 			( select ) => {
-				const {
-					hasBlockMovingClientId,
-					getSelectedBlockClientId,
-				} = select( blockEditorStore );
+				const { hasBlockMovingClientId, getSelectedBlockClientId } =
+					select( blockEditorStore );
 				return {
 					blockMovingClientId: hasBlockMovingClientId(),
 					selectedBlockInBlockEditor: getSelectedBlockClientId(),