unify the media and pattern behavior and implementation

WordPress · May 10, 2024 · 38b100c · 38b100c
1 parent 6fcc8f0
commit 38b100c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 118 deletions.
diff --git a/...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
@@ -131,10 +131,7 @@ export function PatternCategoryPreviews( {
 
 	return (
 		<>
-			<VStack
-				spacing={ 2 }
-				className="block-editor-inserter__patterns-category-panel-header"
-			>
+			<VStack className="block-editor-inserter__patterns-category-panel-header">
 				<HStack>
 					<NavigatorBackButton
 						style={
@@ -168,24 +165,23 @@ export function PatternCategoryPreviews( {
 						{ __( 'No results found' ) }
 					</Text>
 				) }
+				{ currentCategoryPatterns.length > 0 && (
+					<BlockPatternsList
+						ref={ scrollContainerRef }
+						shownPatterns={ pagingProps.categoryPatternsAsyncList }
+						blockPatterns={ pagingProps.categoryPatterns }
+						onClickPattern={ onClickPattern }
+						onHover={ onHover }
+						label={ category.label }
+						orientation="vertical"
+						category={ category.name }
+						isDraggable
+						showTitlesAsTooltip={ showTitlesAsTooltip }
+						patternFilter={ patternSourceFilter }
+						pagingProps={ pagingProps }
+					/>
+				) }
 			</VStack>
-
-			{ currentCategoryPatterns.length > 0 && (
-				<BlockPatternsList
-					ref={ scrollContainerRef }
-					shownPatterns={ pagingProps.categoryPatternsAsyncList }
-					blockPatterns={ pagingProps.categoryPatterns }
-					onClickPattern={ onClickPattern }
-					onHover={ onHover }
-					label={ category.label }
-					orientation="vertical"
-					category={ category.name }
-					isDraggable
-					showTitlesAsTooltip={ showTitlesAsTooltip }
-					patternFilter={ patternSourceFilter }
-					pagingProps={ pagingProps }
-				/>
-			) }
 		</>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-panel.js b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
@@ -1,9 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { Spinner, SearchControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import {
+	Spinner,
+	SearchControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	FlexBlock,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+} from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -23,7 +32,24 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	const baseCssClass = 'block-editor-inserter__media-panel';
 	const searchLabel = category.labels.search_items || __( 'Search' );
 	return (
-		<div className={ baseCssClass }>
+		<VStack className={ baseCssClass }>
+			<HStack>
+				<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 }
+					size="small"
+					label={ __( 'Back' ) }
+				/>
+				<FlexBlock>
+					<Heading level={ 4 } as="div">
+						{ category.label }
+					</Heading>
+				</FlexBlock>
+			</HStack>
 			<SearchControl
 				className={ `${ baseCssClass }-search` }
 				onChange={ setSearch }
@@ -45,6 +71,6 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 					category={ category }
 				/>
 			) }
-		</div>
+		</VStack>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-tab.js b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
@@ -1,45 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
-import { Button } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { MediaCategoryPanel } from './media-panel';
-import MediaUploadCheck from '../../media-upload/check';
-import MediaUpload from '../../media-upload';
 import { useMediaCategories } from './hooks';
-import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
-import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
 
-const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
-
-function MediaTab( {
-	rootClientId,
-	selectedCategory,
-	onSelectCategory,
-	onInsert,
-	children,
-} ) {
+function MediaTab( { rootClientId, onInsert } ) {
 	const mediaCategories = useMediaCategories( rootClientId );
-	const isMobile = useViewportMatch( 'medium', '<' );
-	const baseCssClass = 'block-editor-inserter__media-tabs';
-	const onSelectMedia = useCallback(
-		( media ) => {
-			if ( ! media?.url ) {
-				return;
-			}
-			const [ block ] = getBlockAndPreviewFromMedia( media, media.type );
-			onInsert( block );
-		},
-		[ onInsert ]
-	);
 	const categories = useMemo(
 		() =>
 			mediaCategories.map( ( mediaCategory ) => ( {
@@ -54,56 +27,15 @@ function MediaTab( {
 	}
 
 	return (
-		<>
-			{ ! isMobile && (
-				<div className={ `${ baseCssClass }-container` }>
-					<CategoryTabs
-						categories={ categories }
-						selectedCategory={ selectedCategory }
-						onSelectCategory={ onSelectCategory }
-					>
-						{ children }
-					</CategoryTabs>
-					<MediaUploadCheck>
-						<MediaUpload
-							multiple={ false }
-							onSelect={ onSelectMedia }
-							allowedTypes={ ALLOWED_MEDIA_TYPES }
-							render={ ( { open } ) => (
-								<Button
-									onClick={ ( event ) => {
-										// Safari doesn't emit a focus event on button elements when
-										// clicked and we need to manually focus the button here.
-										// The reason is that core's Media Library modal explicitly triggers a
-										// focus event and therefore a `blur` event is triggered on a different
-										// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`
-										// attribute making the Inserter dialog to close.
-										event.target.focus();
-										open();
-									} }
-									className="block-editor-inserter__media-library-button"
-									variant="secondary"
-									data-unstable-ignore-focus-outside-for-relatedtarget=".media-modal"
-								>
-									{ __( 'Open Media Library' ) }
-								</Button>
-							) }
-						/>
-					</MediaUploadCheck>
-				</div>
-			) }
-			{ isMobile && (
-				<MobileTabNavigation categories={ categories }>
-					{ ( category ) => (
-						<MediaCategoryPanel
-							onInsert={ onInsert }
-							rootClientId={ rootClientId }
-							category={ category }
-						/>
-					) }
-				</MobileTabNavigation>
+		<MobileTabNavigation categories={ categories }>
+			{ ( category ) => (
+				<MediaCategoryPanel
+					onInsert={ onInsert }
+					rootClientId={ rootClientId }
+					category={ category }
+				/>
 			) }
-		</>
+		</MobileTabNavigation>
 	);
 }
 

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -316,13 +316,9 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__category-panel {
 	height: 100%;
 	width: 100%;
+	padding: 0 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
-
-	@include break-medium {
-		padding: 0;
-		left: 100%;
-	}
 }
 
 .block-editor-inserter__patterns-category-panel-header {
@@ -514,18 +510,9 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__media-panel {
 	min-height: 100%;
+	padding: $grid-unit-20 $grid-unit-20 0;
 	display: flex;
 	flex-direction: column;
-	position: absolute;
-	top: 0;
-	left: $block-inserter-width;
-	height: 100%;
-	width: 300px;
-	padding: 0;
-	overflow: hidden;
-	background: $gray-100;
-	border-left: $border-width solid $gray-200;
-	border-right: $border-width solid $gray-200;
 
 	.block-editor-inserter__media-panel-spinner {
 		height: 100%;