@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

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

@@ -63,7 +63,7 @@ function InserterTabs( {
 	}, [ tabIndex ] );
 
 	const { tabs, tabKeys } = useMemo( () => {
-		const filteredTabs = InserterTabs.TABS.filter(
+		const filteredTabs = InserterTabs.getTabs().filter(
 			( { name } ) => showReusableBlocks || name !== 'reusable'
 		);
 		return {
@@ -114,8 +114,9 @@ function InserterTabs( {
 }
 
 function TabsControl( { onChangeTab, showReusableBlocks } ) {
+	const tabs = InserterTabs.getTabs();
 	const segments = useMemo( () => {
-		const filteredTabs = InserterTabs.TABS.filter(
+		const filteredTabs = tabs.filter(
 			( { name } ) => showReusableBlocks || name !== 'reusable'
 		);
 		return filteredTabs.map( ( { title } ) => title );
@@ -123,7 +124,7 @@ function TabsControl( { onChangeTab, showReusableBlocks } ) {
 
 	const segmentHandler = useCallback(
 		( selectedTab ) => {
-			const tabTitles = InserterTabs.TABS.map( ( { title } ) => title );
+			const tabTitles = tabs.map( ( { title } ) => title );
 			onChangeTab( tabTitles.indexOf( selectedTab ) );
 		},
 		[ onChangeTab ]
@@ -139,7 +140,7 @@ function TabsControl( { onChangeTab, showReusableBlocks } ) {
 
 InserterTabs.Control = TabsControl;
 
-InserterTabs.TABS = [
+InserterTabs.getTabs = () => [
 	{ name: 'blocks', title: __( 'Blocks' ), component: BlockTypesTab },
 	{ name: 'reusable', title: __( 'Reusable' ), component: ReusableBlocksTab },
 ];

package/src/components/inserter/test/block-types-tab.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from 'test/helpers';
 
 /**
  * WordPress dependencies
@@ -13,9 +13,7 @@ import { useSelect } from '@wordpress/data';
  */
 import items from './fixtures';
 import BlockTypesTab from '../block-types-tab';
-import BlockTypesList from '../../block-types-list';
 
-jest.mock( '../../block-types-list' );
 jest.mock( '../hooks/use-clipboard-block' );
 jest.mock( '@wordpress/data/src/components/use-select' );
 
@@ -35,11 +33,11 @@ describe( 'BlockTypesTab component', () => {
 	} );
 
 	it( 'renders without crashing', () => {
-		const component = shallow(
+		const component = render(
 			<BlockTypesTab
 				rootClientId={ 0 }
 				onSelect={ jest.fn() }
-				listProps={ {} }
+				listProps={ { contentContainerStyle: {} } }
 			/>
 		);
 		expect( component ).toBeTruthy();
@@ -52,15 +50,16 @@ describe( 'BlockTypesTab component', () => {
 			( { id, category } ) =>
 				category !== 'reusable' && id !== 'core-embed/a-paragraph-embed'
 		);
-		const component = shallow(
+		const component = render(
 			<BlockTypesTab
 				rootClientId={ 0 }
 				onSelect={ jest.fn() }
-				listProps={ {} }
+				listProps={ { contentContainerStyle: {} } }
 			/>
 		);
-		expect( component.find( BlockTypesList ).prop( 'items' ) ).toEqual(
-			blockItems
-		);
+
+		blockItems.forEach( ( item ) => {
+			expect( component.getByText( item.title ) ).toBeTruthy();
+		} );
 	} );
 } );

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

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
+import { render } from 'test/helpers';
 
 /**
  * Internal dependencies
  */
 import { Inserter } from '../index';
-import '../../..'; // Ensure store dependencies are imported via root.
 
 const getStylesFromColorScheme = () => {
 	return { color: 'white' };
@@ -15,13 +14,10 @@ const getStylesFromColorScheme = () => {
 
 describe( 'Inserter', () => {
 	it( 'button contains the testID "add-block-button"', () => {
-		const testRenderer = renderer.create(
+		const screen = render(
 			<Inserter getStylesFromColorScheme={ getStylesFromColorScheme } />
 		);
-		const testInstance = testRenderer.root;
 
-		expect( () => {
-			testInstance.findByProps( { testID: 'add-block-button' } );
-		} ).not.toThrow();
+		expect( screen.getByTestId( 'add-block-button' ) ).toBeTruthy();
 	} );
 } );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from 'test/helpers';
 
 /**
  * WordPress dependencies
@@ -13,9 +13,7 @@ import { useSelect } from '@wordpress/data';
  */
 import items from './fixtures';
 import ReusableBlocksTab from '../reusable-blocks-tab';
-import BlockTypesList from '../../block-types-list';
 
-jest.mock( '../../block-types-list' );
 jest.mock( '@wordpress/data/src/components/use-select' );
 
 const fetchReusableBlocks = jest.fn();
@@ -34,11 +32,11 @@ describe( 'ReusableBlocksTab component', () => {
 	} );
 
 	it( 'renders without crashing', () => {
-		const component = shallow(
+		const component = render(
 			<ReusableBlocksTab
 				rootClientId={ 0 }
 				onSelect={ jest.fn() }
-				listProps={ {} }
+				listProps={ { contentContainerStyle: {} } }
 			/>
 		);
 		expect( component ).toBeTruthy();
@@ -50,15 +48,15 @@ describe( 'ReusableBlocksTab component', () => {
 		const reusableBlockItems = items.filter(
 			( { category } ) => category === 'reusable'
 		);
-		const component = shallow(
+		const component = render(
 			<ReusableBlocksTab
 				rootClientId={ 0 }
 				onSelect={ jest.fn() }
-				listProps={ {} }
+				listProps={ { contentContainerStyle: {} } }
 			/>
 		);
-		expect( component.find( BlockTypesList ).prop( 'items' ) ).toEqual(
-			reusableBlockItems
-		);
+		reusableBlockItems.forEach( ( { title } ) => {
+			expect( component.getByText( title ) ).toBeTruthy();
+		} );
 	} );
 } );

package/src/components/inspector-controls/block-support-slot-container.js

@@ -6,5 +6,7 @@ import { useContext } from '@wordpress/element';
 
 export default function BlockSupportSlotContainer( { Slot, ...props } ) {
 	const toolsPanelContext = useContext( ToolsPanelContext );
-	return <Slot { ...props } fillProps={ toolsPanelContext } />;
+	return (
+		<Slot { ...props } fillProps={ toolsPanelContext } bubblesVirtually />
+	);
 }

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -3,6 +3,7 @@
  */
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,74 +12,54 @@ import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
 
 export default function BlockSupportToolsPanel( { children, group, label } ) {
-	const { attributes, clientIds, panelId } = useSelect( ( select ) => {
-		const {
-			getBlockAttributes,
-			getMultiSelectedBlockClientIds,
-			getSelectedBlockClientId,
-			hasMultiSelection,
-		} = select( blockEditorStore );
-
-		// When we currently have a multi-selection, the value returned from
-		// `getSelectedBlockClientId()` is `null`. When a `null` value is used
-		// for the `panelId`, a `ToolsPanel` will still allow panel items to
-		// register themselves despite their panelIds not matching.
-		const selectedBlockClientId = getSelectedBlockClientId();
-
-		if ( hasMultiSelection() ) {
-			const selectedBlockClientIds = getMultiSelectedBlockClientIds();
-			const selectedBlockAttributes = selectedBlockClientIds.reduce(
-				( blockAttributes, blockId ) => {
-					blockAttributes[ blockId ] = getBlockAttributes( blockId );
-					return blockAttributes;
-				},
-				{}
-			);
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const {
+		getBlockAttributes,
+		getMultiSelectedBlockClientIds,
+		getSelectedBlockClientId,
+		hasMultiSelection,
+	} = useSelect( blockEditorStore );
 
-			return {
-				panelId: selectedBlockClientId,
-				clientIds: selectedBlockClientIds,
-				attributes: selectedBlockAttributes,
-			};
-		}
+	const panelId = getSelectedBlockClientId();
+	const resetAll = useCallback(
+		( resetFilters = [] ) => {
+			const newAttributes = {};
 
-		return {
-			panelId: selectedBlockClientId,
-			clientIds: [ selectedBlockClientId ],
-			attributes: {
-				[ selectedBlockClientId ]: getBlockAttributes(
-					selectedBlockClientId
-				),
-			},
-		};
-	}, [] );
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+			const clientIds = hasMultiSelection()
+				? getMultiSelectedBlockClientIds()
+				: [ panelId ];
 
-	const resetAll = ( resetFilters = [] ) => {
-		const newAttributes = {};
+			clientIds.forEach( ( clientId ) => {
+				const { style } = getBlockAttributes( clientId );
+				let newBlockAttributes = { style };
 
-		clientIds.forEach( ( clientId ) => {
-			const { style } = attributes[ clientId ];
-			let newBlockAttributes = { style };
+				resetFilters.forEach( ( resetFilter ) => {
+					newBlockAttributes = {
+						...newBlockAttributes,
+						...resetFilter( newBlockAttributes ),
+					};
+				} );
 
-			resetFilters.forEach( ( resetFilter ) => {
+				// Enforce a cleaned style object.
 				newBlockAttributes = {
 					...newBlockAttributes,
-					...resetFilter( newBlockAttributes ),
+					style: cleanEmptyObject( newBlockAttributes.style ),
 				};
-			} );
-
-			// Enforce a cleaned style object.
-			newBlockAttributes = {
-				...newBlockAttributes,
-				style: cleanEmptyObject( newBlockAttributes.style ),
-			};
 
-			newAttributes[ clientId ] = newBlockAttributes;
-		} );
+				newAttributes[ clientId ] = newBlockAttributes;
+			} );
 
-		updateBlockAttributes( clientIds, newAttributes, true );
-	};
+			updateBlockAttributes( clientIds, newAttributes, true );
+		},
+		[
+			cleanEmptyObject,
+			getBlockAttributes,
+			getMultiSelectedBlockClientIds,
+			hasMultiSelection,
+			panelId,
+			updateBlockAttributes,
+		]
+	);
 
 	return (
 		<ToolsPanel
@@ -89,6 +70,8 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			panelId={ panelId }
 			hasInnerWrapper={ true }
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
+			__experimentalFirstVisibleItemClass="first"
+			__experimentalLastVisibleItemClass="last"
 		>
 			{ children }
 		</ToolsPanel>

package/src/components/inspector-controls/fill.native.js

@@ -14,7 +14,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import groups from './groups';
-import { useBlockEditContext } from '../block-edit/context';
+import useDisplayBlockControls from '../use-display-block-controls';
 import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
@@ -22,13 +22,14 @@ export default function InspectorControlsFill( {
 	__experimentalGroup: group = 'default',
 	...props
 } ) {
-	const { isSelected } = useBlockEditContext();
+	const isDisplayed = useDisplayBlockControls();
+
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControl group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isSelected ) {
+	if ( ! isDisplayed ) {
 		return null;
 	}
 

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

@@ -5,6 +5,8 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
+const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -15,6 +17,8 @@ const InspectorControlsTypography = createSlotFill(
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
+	border: InspectorControlsBorder,
+	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
 	typography: InspectorControlsTypography,
 };

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

@@ -13,7 +13,6 @@ import groups from './groups';
 
 export default function InspectorControlsSlot( {
 	__experimentalGroup: group = 'default',
-	bubblesVirtually = true,
 	label,
 	...props
 } ) {
@@ -32,14 +31,10 @@ export default function InspectorControlsSlot( {
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>
-				<BlockSupportSlotContainer
-					{ ...props }
-					bubblesVirtually={ bubblesVirtually }
-					Slot={ Slot }
-				/>
+				<BlockSupportSlotContainer { ...props } Slot={ Slot } />
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;
+	return <Slot { ...props } bubblesVirtually />;
 }

package/src/components/letter-spacing-control/index.js

@@ -15,12 +15,12 @@ import useSetting from '../../components/use-setting';
 /**
  * Control for letter-spacing.
  *
- * @param {Object}   props                      Component props.
- * @param {string}   props.value                Currently selected letter-spacing.
- * @param {Function} props.onChange             Handles change in letter-spacing selection.
- * @param {boolean}  props.__unstableInputWidth Input width to pass through to inner UnitControl.
+ * @param {Object}                  props                      Component props.
+ * @param {string}                  props.value                Currently selected letter-spacing.
+ * @param {Function}                props.onChange             Handles change in letter-spacing selection.
+ * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
  *
- * @return {WPElement}                          Letter-spacing control.
+ * @return {WPElement} Letter-spacing control.
  */
 export default function LetterSpacingControl( {
 	value,
@@ -33,7 +33,7 @@ export default function LetterSpacingControl( {
 	} );
 	return (
 		<UnitControl
-			label={ __( 'Letter-spacing' ) }
+			label={ __( 'Letter spacing' ) }
 			value={ value }
 			__unstableInputWidth={ __unstableInputWidth }
 			units={ units }

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

@@ -14,7 +14,8 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
 	return (
 		<UnitControl
 			label={ __( 'Line Height' ) }
-			min={ 0 }
+			// Set minimun value of 1 since lower values break on Android
+			min={ 1 }
 			max={ 5 }
 			step={ STEP }
 			value={ value }

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

@@ -114,7 +114,7 @@ Controls the query parameters used to search for suggestions. For example, to li
 
 ```jsx
 <LinkControl
-	suggestionQuery={ {
+	suggestionsQuery={ {
 		type: 'post',
 		subtype: 'page',
 	} }

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

@@ -99,7 +99,7 @@ export default function LinkPreview( {
 							</>
 						) : (
 							<span className="block-editor-link-control__search-item-error-notice">
-								Link is empty
+								{ __( 'Link is empty' ) }
 							</span>
 						) }
 					</span>

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

@@ -36,6 +36,7 @@ export const LinkControlSearchItem = ( {
 					icon={ globe }
 				/>
 			) }
+
 			<span className="block-editor-link-control__search-item-header">
 				<span className="block-editor-link-control__search-item-title">
 					<TextHighlight
@@ -57,12 +58,20 @@ export const LinkControlSearchItem = ( {
 			</span>
 			{ shouldShowType && suggestion.type && (
 				<span className="block-editor-link-control__search-item-type">
-					{ /* Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label. */ }
-					{ suggestion.type === 'post_tag' ? 'tag' : suggestion.type }
+					{ getVisualTypeName( suggestion ) }
 				</span>
 			) }
 		</Button>
 	);
 };
 
+function getVisualTypeName( suggestion ) {
+	if ( suggestion.isFrontPage ) {
+		return 'front page';
+	}
+
+	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.
+	return suggestion.type === 'post_tag' ? 'tag' : suggestion.type;
+}
+
 export default LinkControlSearchItem;

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

@@ -132,6 +132,7 @@ export default function LinkControlSearchResults( {
 							) }
 							searchTerm={ currentInputValue }
 							shouldShowType={ shouldShowSuggestionsTypes }
+							isFrontPage={ suggestion?.isFrontPage }
 						/>
 					);
 				} ) }

package/src/components/link-control/style.scss

@@ -61,7 +61,7 @@ $preview-image-height: 140px;
 	// Specificity overide of URLInput defaults.
 	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
 		@include input-control;
-		width: calc(100% - #{$grid-unit-20*2});
+		width: calc(100% - #{$grid-unit-20 * 2});
 		display: block;
 		padding: 11px $grid-unit-20;
 		padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
@@ -287,6 +287,7 @@ $preview-image-height: 140px;
 		font-size: 0.9em;
 		background-color: $gray-100;
 		border-radius: 2px;
+		white-space: nowrap; // tags shouldn't go over two lines.
 	}
 
 	.block-editor-link-control__search-item-description {
@@ -482,16 +483,10 @@ $preview-image-height: 140px;
 		 * Position spinner to the left of the actions.
 		 *
 		 * Compensate for:
-		 *  - Input margin ($grid-unit-20)
-		 *  - Border (1px)
-		 *  - Vertically, for the difference in height between the input (40px)
-		 *    and the spinner.
-		 *  - Horizontally, adjust for the width occupied by the icon buttons,
-		 *    then artificially create spacing that mimics as if the spinner
-		 *    were center-padded to the same width as an icon button.
+		 *  - Input padding right ($button-size)
 		 */
-		top: $grid-unit-20 + 1px + ( ( 40px - $spinner-size ) * 0.5 );
-		right: $grid-unit-20 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) * 0.5 );
+		top: calc(50% - #{$spinner-size} / 2);
+		right: $button-size;
 	}
 }
 

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

@@ -51,6 +51,8 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
 } ) );
 
+jest.useRealTimers();
+
 /**
  * Wait for next tick of event loop. This is required
  * because the `fetchSearchSuggestions` Promise will
@@ -1634,6 +1636,7 @@ describe( 'Selecting links', () => {
 					);
 
 					// We should have highlighted the first item using the keyboard
+					// eslint-disable-next-line jest/no-conditional-expect
 					expect( selectedSearchResultElement ).toEqual(
 						secondSearchSuggestion
 					);
@@ -1648,6 +1651,7 @@ describe( 'Selecting links', () => {
 					);
 
 					// We should be back to highlighting the first search result again
+					// eslint-disable-next-line jest/no-conditional-expect
 					expect( selectedSearchResultElement ).toEqual(
 						firstSearchSuggestion
 					);

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

@@ -52,21 +52,39 @@ const handleEntitySearch = async (
 	fetchSearchSuggestions,
 	directEntryHandler,
 	withCreateSuggestion,
-	withURLSuggestion
+	withURLSuggestion,
+	pageOnFront
 ) => {
 	const { isInitialSuggestions } = suggestionsQuery;
+	let resultsIncludeFrontPage = false;
 
 	let results = await Promise.all( [
 		fetchSearchSuggestions( val, suggestionsQuery ),
 		directEntryHandler( val ),
 	] );
 
+	// Identify front page and update type to match.
+	results[ 0 ] = results[ 0 ].map( ( result ) => {
+		if ( Number( result.id ) === pageOnFront ) {
+			resultsIncludeFrontPage = true;
+			result.isFrontPage = true;
+			return result;
+		}
+
+		return result;
+	} );
+
 	const couldBeURL = ! val.includes( ' ' );
 
 	// If it's potentially a URL search then concat on a URL search suggestion
 	// just for good measure. That way once the actual results run out we always
 	// have a URL option to fallback on.
-	if ( couldBeURL && withURLSuggestion && ! isInitialSuggestions ) {
+	if (
+		! resultsIncludeFrontPage &&
+		couldBeURL &&
+		withURLSuggestion &&
+		! isInitialSuggestions
+	) {
 		results = results[ 0 ].concat( results[ 1 ] );
 	} else {
 		results = results[ 0 ];
@@ -109,9 +127,11 @@ export default function useSearchHandler(
 	withCreateSuggestion,
 	withURLSuggestion
 ) {
-	const { fetchSearchSuggestions } = useSelect( ( select ) => {
+	const { fetchSearchSuggestions, pageOnFront } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
+
 		return {
+			pageOnFront: getSettings().pageOnFront,
 			fetchSearchSuggestions: getSettings()
 				.__experimentalFetchLinkSuggestions,
 		};
@@ -131,7 +151,8 @@ export default function useSearchHandler(
 						fetchSearchSuggestions,
 						directEntryHandler,
 						withCreateSuggestion,
-						withURLSuggestion
+						withURLSuggestion,
+						pageOnFront
 				  );
 		},
 		[ directEntryHandler, fetchSearchSuggestions, withCreateSuggestion ]

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

@@ -26,6 +26,7 @@ const ListViewBlockContents = forwardRef(
 			position,
 			siblingBlockCount,
 			level,
+			isExpanded,
 			...props
 		},
 		ref
@@ -71,6 +72,7 @@ const ListViewBlockContents = forwardRef(
 						draggable={ draggable }
 						onDragStart={ onDragStart }
 						onDragEnd={ onDragEnd }
+						isExpanded={ isExpanded }
 						{ ...props }
 					/>
 				) }