@wordpress/block-editor 10.5.0 → 11.0.0

package/src/components/inserter/media-tab/utils.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const mediaTypeTag = { image: 'img', video: 'video', audio: 'audio' };
+
+export function getBlockAndPreviewFromMedia( media, mediaType ) {
+	// Add the common attributes between the different media types.
+	const attributes = {
+		id: media.id,
+	};
+	// Some props are named differently between the Media REST API and Media Library API.
+	// For example `source_url` is used in the former and `url` is used in the latter.
+	const mediaSrc = media.source_url || media.url;
+	const alt = media.alt_text || media.alt || undefined;
+	const caption = media.caption?.raw || media.caption;
+	if ( caption && typeof caption === 'string' ) {
+		attributes.caption = caption;
+	}
+	if ( mediaType === 'image' ) {
+		attributes.url = mediaSrc;
+		attributes.alt = alt;
+	} else if ( [ 'video', 'audio' ].includes( mediaType ) ) {
+		attributes.src = mediaSrc;
+	}
+	const PreviewTag = mediaTypeTag[ mediaType ];
+	const preview = (
+		<PreviewTag
+			src={ mediaSrc }
+			alt={ alt }
+			controls={ mediaType === 'audio' ? true : undefined }
+			inert="true"
+		/>
+	);
+	return [ createBlock( `core/${ mediaType }`, attributes ), preview ];
+}

package/src/components/inserter/menu.js

@@ -28,7 +28,9 @@ import BlockPatternsTabs, {
 	BlockPatternsCategoryDialog,
 } from './block-patterns-tab';
 import ReusableBlocksTab from './reusable-blocks-tab';
+import { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab';
 import InserterSearchResults from './search-results';
+import useDebouncedInput from './hooks/use-debounced-input';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
@@ -48,12 +50,13 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const [ filterValue, setFilterValue ] = useState(
-		__experimentalFilterValue
-	);
+	const [ filterValue, setFilterValue, delayedFilterValue ] =
+		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
 	const [ selectedPatternCategory, setSelectedPatternCategory ] =
 		useState( null );
+	const [ selectedMediaCategory, setSelectedMediaCategory ] =
+		useState( null );
 	const [ selectedTab, setSelectedTab ] = useState( null );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
@@ -68,7 +71,6 @@ function InserterMenu(
 		( select ) => {
 			const { __experimentalGetAllowedPatterns, getSettings } =
 				select( blockEditorStore );
-
 			return {
 				showPatterns: !! __experimentalGetAllowedPatterns(
 					destinationRootClientId
@@ -80,6 +82,9 @@ function InserterMenu(
 		[ destinationRootClientId ]
 	);
 
+	const mediaCategories = useMediaCategories( destinationRootClientId );
+	const showMedia = !! mediaCategories.length;
+
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {
 			onInsertBlocks( blocks, meta, shouldForceFocusBlock );
@@ -136,7 +141,7 @@ function InserterMenu(
 			destinationRootClientId,
 			onInsert,
 			onHover,
-			filterValue,
+			delayedFilterValue,
 			showMostUsedBlocks,
 			showInserterHelpPanel,
 		]
@@ -170,16 +175,36 @@ function InserterMenu(
 		[ destinationRootClientId, onInsert, onHover ]
 	);
 
+	const mediaTab = useMemo(
+		() => (
+			<MediaTab
+				rootClientId={ destinationRootClientId }
+				selectedCategory={ selectedMediaCategory }
+				onSelectCategory={ setSelectedMediaCategory }
+				onInsert={ onInsert }
+			/>
+		),
+		[
+			destinationRootClientId,
+			onInsert,
+			selectedMediaCategory,
+			setSelectedMediaCategory,
+		]
+	);
+
 	const getCurrentTab = useCallback(
 		( tab ) => {
 			if ( tab.name === 'blocks' ) {
 				return blocksTab;
 			} else if ( tab.name === 'patterns' ) {
 				return patternsTab;
+			} else if ( tab.name === 'reusable' ) {
+				return reusableBlocksTab;
+			} else if ( tab.name === 'media' ) {
+				return mediaTab;
 			}
-			return reusableBlocksTab;
 		},
-		[ blocksTab, patternsTab, reusableBlocksTab ]
+		[ blocksTab, patternsTab, reusableBlocksTab, mediaTab ]
 	);
 
 	const searchRef = useRef();
@@ -190,9 +215,16 @@ function InserterMenu(
 	} ) );
 
 	const showPatternPanel =
-		selectedTab === 'patterns' && ! filterValue && selectedPatternCategory;
-	const showAsTabs = ! filterValue && ( showPatterns || hasReusableBlocks );
-
+		selectedTab === 'patterns' &&
+		! delayedFilterValue &&
+		selectedPatternCategory;
+	const showAsTabs =
+		! delayedFilterValue &&
+		( showPatterns || hasReusableBlocks || showMedia );
+	const showMediaPanel =
+		selectedTab === 'media' &&
+		! delayedFilterValue &&
+		selectedMediaCategory;
 	return (
 		<div className="block-editor-inserter__menu">
 			<div
@@ -201,6 +233,7 @@ function InserterMenu(
 				} ) }
 			>
 				<SearchControl
+					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					onChange={ ( value ) => {
 						if ( hoveredItem ) setHoveredItem( null );
@@ -211,10 +244,10 @@ function InserterMenu(
 					placeholder={ __( 'Search' ) }
 					ref={ searchRef }
 				/>
-				{ !! filterValue && (
+				{ !! delayedFilterValue && (
 					<div className="block-editor-inserter__no-tab-container">
 						<InserterSearchResults
-							filterValue={ filterValue }
+							filterValue={ delayedFilterValue }
 							onSelect={ onSelect }
 							onHover={ onHover }
 							rootClientId={ rootClientId }
@@ -232,18 +265,26 @@ function InserterMenu(
 					<InserterTabs
 						showPatterns={ showPatterns }
 						showReusableBlocks={ hasReusableBlocks }
+						showMedia={ showMedia }
 						prioritizePatterns={ prioritizePatterns }
 						onSelect={ setSelectedTab }
 					>
 						{ getCurrentTab }
 					</InserterTabs>
 				) }
-				{ ! filterValue && ! showAsTabs && (
+				{ ! delayedFilterValue && ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">
 						{ blocksTab }
 					</div>
 				) }
 			</div>
+			{ showMediaPanel && (
+				<MediaCategoryDialog
+					rootClientId={ destinationRootClientId }
+					onInsert={ onInsert }
+					category={ selectedMediaCategory }
+				/>
+			) }
 			{ showInserterHelpPanel && hoveredItem && (
 				<InserterPreviewPanel item={ hoveredItem } />
 			) }
@@ -252,6 +293,7 @@ function InserterMenu(
 					rootClientId={ destinationRootClientId }
 					onInsert={ onInsertPattern }
 					category={ selectedPatternCategory }
+					showTitlesAsTooltip
 				/>
 			) }
 		</div>

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/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;
+			}
 		}
 	}
 
@@ -279,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;
@@ -314,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;
 	}
 }
 
@@ -474,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-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,
 };