@wordpress/block-editor 10.4.0 → 11.0.0

package/src/components/inserter/mobile-tab-navigation.js

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalHeading as Heading,
+	__experimentalView as View,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+	FlexBlock,
+} from '@wordpress/components';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+
+function ScreenHeader( { title } ) {
+	return (
+		<VStack spacing={ 0 }>
+			<View>
+				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
+					<HStack spacing={ 2 }>
+						<NavigatorBackButton
+							style={
+								// TODO: This style override is also used in ToolsPanelHeader.
+								// It should be supported out-of-the-box by Button.
+								{ minWidth: 24, padding: 0 }
+							}
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							isSmall
+							aria-label={ __( 'Navigate to the previous view' ) }
+						/>
+						<Spacer>
+							<Heading level={ 5 }>{ title }</Heading>
+						</Spacer>
+					</HStack>
+				</Spacer>
+			</View>
+		</VStack>
+	);
+}
+
+export default function MobileTabNavigation( { categories, children } ) {
+	return (
+		<NavigatorProvider
+			initialPath="/"
+			className="block-editor-inserter__mobile-tab-navigation"
+		>
+			<NavigatorScreen path="/">
+				<ItemGroup>
+					{ categories.map( ( category ) => (
+						<NavigatorButton
+							key={ category.name }
+							path={ `/category/${ category.name }` }
+							as={ Item }
+							isAction
+						>
+							<HStack>
+								<FlexBlock>{ category.label }</FlexBlock>
+								<Icon
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
+							</HStack>
+						</NavigatorButton>
+					) ) }
+				</ItemGroup>
+			</NavigatorScreen>
+			{ categories.map( ( category ) => (
+				<NavigatorScreen
+					key={ category.name }
+					path={ `/category/${ category.name }` }
+				>
+					<ScreenHeader title={ __( 'Back' ) } />
+					{ children( category ) }
+				</NavigatorScreen>
+			) ) }
+		</NavigatorProvider>
+	);
+}

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

@@ -99,6 +99,7 @@ export default function QuickInserter( {
 		>
 			{ showSearch && (
 				<SearchControl
+					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					value={ filterValue }
 					onChange={ ( value ) => {

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

@@ -4,6 +4,7 @@
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -59,14 +60,15 @@ export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 				rootClientId={ rootClientId }
 			/>
 			<div className="block-editor-inserter__manage-reusable-blocks-container">
-				<a
+				<Button
 					className="block-editor-inserter__manage-reusable-blocks"
+					variant="secondary"
 					href={ addQueryArgs( 'edit.php', {
 						post_type: 'wp_block',
 					} ) }
 				>
 					{ __( 'Manage Reusable blocks' ) }
-				</a>
+				</Button>
 			</div>
 		</>
 	);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { orderBy, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -25,6 +25,7 @@ import usePatternsState from './hooks/use-patterns-state';
 import useBlockTypesState from './hooks/use-block-types-state';
 import { searchBlockItems, searchItems } from './search-items';
 import InserterListbox from '../inserter-listbox';
+import { orderBy } from '../../utils/sorting';
 
 const INITIAL_INSERTER_RESULTS = 9;
 /**
@@ -91,7 +92,7 @@ function InserterSearchResults( {
 			return [];
 		}
 		const results = searchBlockItems(
-			orderBy( blockTypes, [ 'frecency' ], [ 'desc' ] ),
+			orderBy( blockTypes, 'frecency', 'desc' ),
 			blockTypeCategories,
 			blockTypeCollections,
 			filterValue

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

@@ -3,7 +3,7 @@
  */
 import BlockLibrary from '../library';
 import BlockEditorProvider from '../../provider';
-import { patternCategories, patterns, reusableBlocks } from './fixtures';
+import { patternCategories, patterns, reusableBlocks } from './utils/fixtures';
 import Inserter from '../';
 
 export default { title: 'BlockEditor/Inserter' };

package/src/components/inserter/style.scss

@@ -107,10 +107,6 @@ $block-inserter-tabs-height: 44px;
 	.components-search-control__icon {
 		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5;
 	}
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
 }
 
 .block-editor-inserter__tabs {
@@ -125,6 +121,12 @@ $block-inserter-tabs-height: 44px;
 		.components-tab-panel__tabs-item {
 			flex-grow: 1;
 			margin-bottom: -$border-width;
+			&[id$="reusable"] {
+				flex-grow: inherit;
+				// These are to align the `reusable` icon with the search icon.
+				padding-left: $grid-unit-20;
+				padding-right: $grid-unit-20;
+			}
 		}
 	}
 
@@ -174,9 +176,13 @@ $block-inserter-tabs-height: 44px;
 	text-align: right;
 }
 
+.block-editor-inserter__manage-reusable-blocks-container {
+	margin: auto $grid-unit-20 $grid-unit-20;
+}
+
 .block-editor-inserter__manage-reusable-blocks {
-	display: inline-block;
-	margin: $grid-unit-20;
+	justify-content: center;
+	width: 100%;
 }
 
 .block-editor-inserter__no-results {
@@ -275,13 +281,13 @@ $block-inserter-tabs-height: 44px;
 	padding: $grid-unit-20;
 	overflow-y: auto;
 	height: 100%;
+	// Push the listitem wrapping the "explore" button to the bottom of the panel.
+	div[role="listitem"]:last-child {
+		margin-top: auto;
+	}
 }
 
-.block-editor-inserter__patterns-fill-space {
-	flex-grow: 1;
-}
-
-.block-editor-inserter__patterns-category-panel {
+.block-editor-inserter__patterns-category-dialog {
 	background: $gray-100;
 	border-left: $border-width solid $gray-200;
 	border-right: $border-width solid $gray-200;
@@ -310,9 +316,13 @@ $block-inserter-tabs-height: 44px;
 			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__patterns-category-panel {
+	padding: 0 $grid-unit-20;
+
+	@include break-medium {
+		padding: 0;
 	}
 }
 
@@ -341,10 +351,6 @@ $block-inserter-tabs-height: 44px;
 	position: relative; // prevents overscroll when block library is open
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-	padding: $grid-unit-20;
-}
-
 .block-editor-inserter__quick-inserter {
 	width: 100%;
 
@@ -442,7 +448,8 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	&__list {
-		margin-left: $sidebar-width - $grid-unit-40;
+		margin-left: $sidebar-width;
+		padding: $grid-unit-30 0 $grid-unit-40;
 	}
 
 	.block-editor-block-patterns-list {
@@ -473,3 +480,162 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__patterns-category-panel-title {
 	font-size: calc(1.25 * 13px);
 }
+
+.block-editor-inserter__media-tabs-container {
+	height: 100%;
+
+	nav {
+		height: 100%;
+	}
+
+	.block-editor-inserter__media-library-button {
+		padding: $grid-unit-20;
+		justify-content: center;
+		margin-top: $grid-unit-20;
+		width: 100%;
+	}
+}
+
+.block-editor-inserter__media-tabs {
+	display: flex;
+	flex-direction: column;
+	padding: $grid-unit-20;
+	overflow-y: auto;
+	height: 100%;
+
+	// Push the listitem wrapping the "open media library" button to the bottom of the panel.
+	div[role="listitem"]:last-child {
+		margin-top: auto;
+	}
+
+	&__media-category {
+		&.is-selected {
+			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__media-dialog {
+	background: $gray-100;
+	border-left: $border-width solid $gray-200;
+	border-right: $border-width solid $gray-200;
+	position: absolute;
+	padding: $grid-unit-20 $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-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-inserter__media-panel {
+	height: 100%;
+	padding: 0 $grid-unit-20;
+
+	@include break-medium {
+		padding: 0;
+	}
+
+	.block-editor-inserter__media-panel-spinner {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.block-editor-inserter__media-panel-search {
+		&.components-search-control {
+			input[type="search"].components-search-control__input {
+				background: $white;
+			}
+		}
+	}
+}
+
+.block-editor-inserter__media-list {
+	margin-top: $grid-unit-20;
+	&__list-item {
+		cursor: pointer;
+		margin-bottom: $grid-unit-30;
+
+		&.is-placeholder {
+			min-height: 100px;
+		}
+
+		&[draggable="true"] .block-editor-block-preview__container {
+			cursor: grab;
+		}
+	}
+
+	&__item {
+		height: 100%;
+
+		&-preview {
+			display: flex;
+			align-items: center;
+			overflow: hidden;
+			border-radius: 4px;
+
+			> * {
+				margin: 0 auto;
+				max-width: 100%;
+			}
+		}
+
+		&:hover &-preview {
+			box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+		}
+
+		&:focus &-preview {
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+		}
+	}
+}
+
+
+.block-editor-inserter__mobile-tab-navigation {
+	padding: $grid-unit-20;
+	height: 100%;
+
+	> * {
+		height: 100%;
+	}
+}

package/src/components/inserter/tabs.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { symbol as reusableBlockIcon } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { TabPanel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -19,12 +20,19 @@ const reusableBlocksTab = {
 	name: 'reusable',
 	/* translators: Reusable blocks tab title in the block inserter. */
 	title: __( 'Reusable' ),
+	icon: reusableBlockIcon,
+};
+const mediaTab = {
+	name: 'media',
+	/* translators: Media tab title in the block inserter. */
+	title: __( 'Media' ),
 };
 
 function InserterTabs( {
 	children,
 	showPatterns = false,
 	showReusableBlocks = false,
+	showMedia = false,
 	onSelect,
 	prioritizePatterns,
 } ) {
@@ -37,10 +45,12 @@ function InserterTabs( {
 		if ( ! prioritizePatterns && showPatterns ) {
 			tempTabs.push( patternsTab );
 		}
+		if ( showMedia ) {
+			tempTabs.push( mediaTab );
+		}
 		if ( showReusableBlocks ) {
 			tempTabs.push( reusableBlocksTab );
 		}
-
 		return tempTabs;
 	}, [
 		prioritizePatterns,
@@ -48,6 +58,7 @@ function InserterTabs( {
 		showPatterns,
 		patternsTab,
 		showReusableBlocks,
+		showMedia,
 		reusableBlocksTab,
 	] );
 

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

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -22,35 +21,6 @@ jest.mock( '../hooks/use-block-types-state', () => {
 	return mock;
 } );
 
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
-} );
-
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
-	return {
-		useDispatch: () => ( {} ),
-	};
-} );
-
-const debouncedSpeak = jest.fn();
-
-function InserterBlockList( props ) {
-	return <ReusableBlocksTab debouncedSpeak={ debouncedSpeak } { ...props } />;
-}
-
-const initializeAllClosedMenuState = ( propOverrides ) => {
-	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 container;
-};
-
 describe( 'InserterMenu', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/block', {
@@ -59,19 +29,17 @@ describe( 'InserterMenu', () => {
 			edit: () => {},
 		} );
 	} );
+
 	afterAll( () => {
 		unregisterBlockType( 'core/block' );
 	} );
-	beforeEach( () => {
-		debouncedSpeak.mockClear();
 
+	beforeEach( () => {
 		useBlockTypesState.mockImplementation( () => [
 			items,
 			categories,
 			collections,
 		] );
-
-		useSelect.mockImplementation( () => false );
 	} );
 
 	it( 'should show nothing if there are no items', () => {
@@ -81,36 +49,25 @@ describe( 'InserterMenu', () => {
 			categories,
 			collections,
 		] );
-		const { container } = render(
-			<InserterBlockList filterValue="random" />
-		);
-		const visibleBlocks = container.querySelector(
-			'.block-editor-block-types-list__item'
-		);
 
-		expect( visibleBlocks ).toBe( null );
+		render( <ReusableBlocksTab filterValue="random" /> );
+
+		expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should list reusable blocks', () => {
-		const container = initializeAllClosedMenuState();
-		const blocks = container.querySelectorAll(
-			'.block-editor-block-types-list__item-title'
-		);
+		render( <ReusableBlocksTab /> );
 
-		expect( blocks ).toHaveLength( 1 );
-		expect( blocks[ 0 ] ).toHaveTextContent( 'My reusable block' );
+		expect(
+			screen.getByRole( 'option', { name: 'My reusable block' } )
+		).toBeVisible();
 	} );
 
 	it( 'should trim whitespace of search terms', () => {
-		const { container } = render(
-			<InserterBlockList filterValue=" my reusable" />
-		);
-
-		const blocks = container.querySelectorAll(
-			'.block-editor-block-types-list__item-title'
-		);
+		render( <ReusableBlocksTab filterValue=" my reusable" /> );
 
-		expect( blocks ).toHaveLength( 1 );
-		expect( blocks[ 0 ] ).toHaveTextContent( 'My reusable block' );
+		expect(
+			screen.getByRole( 'option', { name: 'My reusable block' } )
+		).toBeVisible();
 	} );
 } );

package/src/components/inserter-list-item/index.js

@@ -10,6 +10,8 @@ import { useMemo, useRef, memo } from '@wordpress/element';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
+	isReusableBlock,
+	isTemplatePart,
 } from '@wordpress/blocks';
 import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { ENTER, isAppleOS } from '@wordpress/keycodes';
@@ -47,6 +49,8 @@ function InserterListItem( {
 		];
 	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
 
+	const isSynced = isReusableBlock( item ) || isTemplatePart( item );
+
 	return (
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable && ! item.disabled }
@@ -55,7 +59,13 @@ function InserterListItem( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className="block-editor-block-types-list__list-item"
+					className={ classnames(
+						'block-editor-block-types-list__list-item',
+
+						{
+							'is-synced': isSynced,
+						}
+					) }
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
 						isDragging.current = true;

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

@@ -1,8 +1,34 @@
+
 .block-editor-block-types-list__list-item {
 	display: block;
 	width: 33.33%;
 	padding: 0;
 	margin: 0;
+
+	&.is-synced {
+		.components-button.block-editor-block-types-list__item {
+			&:not(:disabled) {
+				.block-editor-block-icon.has-colors {
+					color: var(--wp-block-synced-color);
+				}
+
+				&:hover {
+					.block-editor-block-types-list__item-title {
+						color: var(--wp-block-synced-color) !important;
+						filter: brightness(0.95);
+					}
+
+					svg {
+						color: var(--wp-block-synced-color) !important;
+					}
+				}
+
+				&::after {
+					background: var(--wp-block-synced-color);
+				}
+			}
+		}
+	}
 }
 
 .components-button.block-editor-block-types-list__item {

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

@@ -13,6 +13,7 @@ const InspectorControlsDimensions = createSlotFill(
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
+const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
 
 const groups = {
 	default: InspectorControlsDefault,
@@ -20,6 +21,7 @@ const groups = {
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
+	list: InspectorControlsListView,
 	typography: InspectorControlsTypography,
 };
 

package/src/components/inspector-controls-tabs/advanced-controls-panel.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	default as InspectorControls,
+	InspectorAdvancedControls,
+} from '../inspector-controls';
+
+const AdvancedControls = () => {
+	const fills = useSlotFills( InspectorAdvancedControls.slotName );
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			className="block-editor-block-inspector__advanced"
+			title={ __( 'Advanced' ) }
+			initialOpen={ false }
+		>
+			<InspectorControls.Slot __experimentalGroup="advanced" />
+		</PanelBody>
+	);
+};
+
+export default AdvancedControls;