@wordpress/block-editor 7.0.4 → 8.0.3

package/src/components/inserter/block-patterns-tab.js

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import { fromPairs } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { useMemo, useCallback, useEffect } from '@wordpress/element';
+import { useMemo, useState, useCallback } from '@wordpress/element';
 import { _x } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 
@@ -16,66 +11,30 @@ import { useAsyncList } from '@wordpress/compose';
 import PatternInserterPanel from './pattern-panel';
 import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
+import PatternsExplorerModal from './block-patterns-explorer/explorer';
 
 function BlockPatternsCategory( {
 	rootClientId,
 	onInsert,
 	selectedCategory,
-	onClickCategory,
+	populatedCategories,
 } ) {
-	const [ allPatterns, allCategories, onClick ] = usePatternsState(
+	const [ allPatterns, , onClick ] = usePatternsState(
 		onInsert,
 		rootClientId
 	);
 
-	// Remove any empty categories
-	const populatedCategories = useMemo(
-		() =>
-			allCategories
-				.filter( ( category ) =>
-					allPatterns.some( ( pattern ) =>
-						pattern.categories?.includes( category.name )
-					)
-				)
-				.sort( ( { name: currentName }, { name: nextName } ) => {
-					if ( ! [ currentName, nextName ].includes( 'featured' ) ) {
-						return 0;
-					}
-					return currentName === 'featured' ? -1 : 1;
-				} ),
-		[ allPatterns, allCategories ]
-	);
-
-	const patternCategory = selectedCategory
-		? selectedCategory
-		: populatedCategories[ 0 ];
-
-	useEffect( () => {
-		if (
-			allPatterns.some(
-				( pattern ) => getPatternIndex( pattern ) === Infinity
-			) &&
-			! populatedCategories.find(
-				( category ) => category.name === 'uncategorized'
-			)
-		) {
-			populatedCategories.push( {
-				name: 'uncategorized',
-				label: _x( 'Uncategorized' ),
-			} );
-		}
-	}, [ populatedCategories, allPatterns ] );
-
 	const getPatternIndex = useCallback(
 		( pattern ) => {
-			if ( ! pattern.categories || ! pattern.categories.length ) {
+			if ( ! pattern.categories?.length ) {
 				return Infinity;
 			}
-			const indexedCategories = fromPairs(
-				populatedCategories.map( ( { name }, index ) => [
-					name,
-					index,
-				] )
+			const indexedCategories = populatedCategories.reduce(
+				( accumulator, { name }, index ) => {
+					accumulator[ name ] = index;
+					return accumulator;
+				},
+				{}
 			);
 			return Math.min(
 				...pattern.categories.map( ( cat ) =>
@@ -91,12 +50,11 @@ function BlockPatternsCategory( {
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) =>
-				patternCategory.name === 'uncategorized'
+				selectedCategory.name === 'uncategorized'
 					? getPatternIndex( pattern ) === Infinity
-					: pattern.categories &&
-					  pattern.categories.includes( patternCategory.name )
+					: pattern.categories?.includes( selectedCategory.name )
 			),
-		[ allPatterns, patternCategory ]
+		[ allPatterns, selectedCategory ]
 	);
 
 	// Ordering the patterns is important for the async rendering.
@@ -108,25 +66,21 @@ function BlockPatternsCategory( {
 
 	const currentShownPatterns = useAsyncList( orderedPatterns );
 
+	if ( ! currentCategoryPatterns.length ) {
+		return null;
+	}
+
 	return (
-		<>
-			{ !! currentCategoryPatterns.length && (
-				<PatternInserterPanel
-					selectedCategory={ patternCategory }
-					patternCategories={ populatedCategories }
-					onClickCategory={ onClickCategory }
-				>
-					<BlockPatternList
-						shownPatterns={ currentShownPatterns }
-						blockPatterns={ currentCategoryPatterns }
-						onClickPattern={ onClick }
-						label={ patternCategory.label }
-						orientation="vertical"
-						isDraggable
-					/>
-				</PatternInserterPanel>
-			) }
-		</>
+		<div className="block-editor-inserter__panel-content">
+			<BlockPatternList
+				shownPatterns={ currentShownPatterns }
+				blockPatterns={ currentCategoryPatterns }
+				onClickPattern={ onClick }
+				label={ selectedCategory.label }
+				orientation="vertical"
+				isDraggable
+			/>
+		</div>
 	);
 }
 
@@ -136,13 +90,86 @@ function BlockPatternsTabs( {
 	onClickCategory,
 	selectedCategory,
 } ) {
+	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
+	const [ allPatterns, allCategories ] = usePatternsState();
+
+	const hasRegisteredCategory = useCallback(
+		( pattern ) => {
+			if ( ! pattern.categories || ! pattern.categories.length ) {
+				return false;
+			}
+
+			return pattern.categories.some( ( cat ) =>
+				allCategories.some( ( category ) => category.name === cat )
+			);
+		},
+		[ allCategories ]
+	);
+
+	// Remove any empty categories
+	const populatedCategories = useMemo( () => {
+		const categories = allCategories
+			.filter( ( category ) =>
+				allPatterns.some( ( pattern ) =>
+					pattern.categories?.includes( category.name )
+				)
+			)
+			.sort( ( { name: currentName }, { name: nextName } ) => {
+				if ( ! [ currentName, nextName ].includes( 'featured' ) ) {
+					return 0;
+				}
+				return currentName === 'featured' ? -1 : 1;
+			} );
+
+		if (
+			allPatterns.some(
+				( pattern ) => ! hasRegisteredCategory( pattern )
+			) &&
+			! categories.find(
+				( category ) => category.name === 'uncategorized'
+			)
+		) {
+			categories.push( {
+				name: 'uncategorized',
+				label: _x( 'Uncategorized' ),
+			} );
+		}
+
+		return categories;
+	}, [ allPatterns, allCategories ] );
+
+	const patternCategory = selectedCategory
+		? selectedCategory
+		: populatedCategories[ 0 ];
+
 	return (
-		<BlockPatternsCategory
-			rootClientId={ rootClientId }
-			selectedCategory={ selectedCategory }
-			onInsert={ onInsert }
-			onClickCategory={ onClickCategory }
-		/>
+		<>
+			{ ! showPatternsExplorer && (
+				<>
+					<PatternInserterPanel
+						selectedCategory={ patternCategory }
+						patternCategories={ populatedCategories }
+						onClickCategory={ onClickCategory }
+						openPatternExplorer={ () =>
+							setShowPatternsExplorer( true )
+						}
+					/>
+					<BlockPatternsCategory
+						rootClientId={ rootClientId }
+						onInsert={ onInsert }
+						selectedCategory={ patternCategory }
+						populatedCategories={ populatedCategories }
+					/>
+				</>
+			) }
+			{ showPatternsExplorer && (
+				<PatternsExplorerModal
+					initialCategory={ patternCategory }
+					patternCategories={ populatedCategories }
+					onModalClose={ () => setShowPatternsExplorer( false ) }
+				/>
+			) }
+		</>
 	);
 }
 

package/src/components/inserter/hooks/use-block-type-impressions.native.js

@@ -10,29 +10,22 @@ import { setBlockTypeImpressions } from '@wordpress/react-native-bridge';
 import { store as blockEditorStore } from '../../../store';
 
 function useBlockTypeImpressions( blockTypes ) {
-	const { blockTypeImpressions, enableEditorOnboarding } = useSelect(
-		( select ) => {
-			const { getSettings: getBlockEditorSettings } = select(
-				blockEditorStore
-			);
-			const { editorOnboarding, impressions } = getBlockEditorSettings();
-
-			return {
-				blockTypeImpressions: impressions,
-				enableEditorOnboarding: editorOnboarding,
-			};
-		},
-		[]
-	);
+	const { blockTypeImpressions } = useSelect( ( select ) => {
+		const { getSettings: getBlockEditorSettings } = select(
+			blockEditorStore
+		);
+		const { impressions } = getBlockEditorSettings();
+
+		return {
+			blockTypeImpressions: impressions,
+		};
+	}, [] );
 	const { updateSettings } = useDispatch( blockEditorStore );
 
-	const items = enableEditorOnboarding
-		? blockTypes.map( ( blockType ) => ( {
-				...blockType,
-				isNew: blockTypeImpressions[ blockType.name ] > 0,
-		  } ) )
-		: blockTypes;
-
+	const items = blockTypes.map( ( blockType ) => ( {
+		...blockType,
+		isNew: blockTypeImpressions[ blockType.name ] > 0,
+	} ) );
 	const trackBlockTypeSelected = ( { name } ) => {
 		if ( blockTypeImpressions[ name ] > 0 ) {
 			const updatedBlockTypeImpressions = {

package/src/components/inserter/pattern-panel.js

@@ -6,15 +6,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { Flex, FlexItem, SelectControl, Button } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
 
 function PatternInserterPanel( {
 	selectedCategory,
 	patternCategories,
 	onClickCategory,
-	children,
+	openPatternExplorer,
 } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
 	const categoryOptions = () => {
 		const options = [];
 
@@ -36,12 +38,10 @@ function PatternInserterPanel( {
 		);
 	};
 
-	const getPanelHeaderClassName = () => {
-		return classnames(
-			'block-editor-inserter__panel-header',
-			'block-editor-inserter__panel-header-patterns'
-		);
-	};
+	const className = classnames(
+		'block-editor-inserter__panel-header',
+		'block-editor-inserter__panel-header-patterns'
+	);
 
 	// In iOS-based mobile devices, the onBlur will fire when selecting an option
 	// from a Select element. To prevent closing the useDialog on iOS devices, we
@@ -54,8 +54,13 @@ function PatternInserterPanel( {
 	};
 
 	return (
-		<>
-			<div className={ getPanelHeaderClassName() }>
+		<Flex
+			justify="space-between"
+			align="start"
+			gap="4"
+			className={ className }
+		>
+			<FlexItem isBlock>
 				<SelectControl
 					className="block-editor-inserter__panel-dropdown"
 					label={ __( 'Filter patterns' ) }
@@ -65,11 +70,23 @@ function PatternInserterPanel( {
 					onBlur={ onBlur }
 					options={ categoryOptions() }
 				/>
-			</div>
-			<div className="block-editor-inserter__panel-content">
-				{ children }
-			</div>
-		</>
+			</FlexItem>
+			{ ! isMobile && (
+				<FlexItem>
+					<Button
+						variant="secondary"
+						className="block-editor-inserter__patterns-explorer-expand"
+						label={ __( 'Explore all patterns' ) }
+						onClick={ () => openPatternExplorer() }
+					>
+						{ _x(
+							'Explore',
+							'Label for showing all block patterns'
+						) }
+					</Button>
+				</FlexItem>
+			) }
+		</Flex>
 	);
 }
 

package/src/components/inserter/style.scss

@@ -166,7 +166,8 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
-	line-height: 1.2;
+	height: 36px;
+	line-height: 36px;
 }
 
 .block-editor-inserter__panel-dropdown select {
@@ -296,6 +297,12 @@ $block-inserter-tabs-height: 44px;
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		grid-gap: $grid-unit-10;
+		.block-editor-block-patterns-list__list-item {
+			margin-bottom: 0;
+		}
+		.block-editor-block-preview__container {
+			min-height: 100px;
+		}
 	}
 }
 
@@ -330,3 +337,59 @@ $block-inserter-tabs-height: 44px;
 		border-color: var(--wp-admin-theme-color);
 	}
 }
+
+.block-editor-block-patterns-explorer {
+	&__sidebar {
+		position: absolute;
+		top: $header-height;
+		left: 0;
+		bottom: 0;
+		width: $sidebar-width;
+		padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
+		overflow-x: visible;
+		overflow-y: scroll;
+
+		&__categories-list__item {
+			display: block;
+			width: 100%;
+			height: 48px;
+			text-align: left;
+		}
+	}
+
+	&__search {
+		margin-bottom: $grid-unit-40;
+	}
+
+	&__search-results-count {
+		padding-bottom: $grid-unit-40;
+	}
+
+	&__list {
+		margin-left: $sidebar-width - $grid-unit-40;
+	}
+
+	.block-editor-block-patterns-list {
+		display: grid;
+		grid-gap: $grid-unit-40;
+		grid-template-columns: repeat(1, 1fr);
+
+		@include break-xlarge() {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		@include break-huge() {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		.block-editor-block-patterns-list__list-item {
+			min-height: 240px;
+		}
+
+		.block-editor-block-preview__container {
+			height: inherit;
+			min-height: 100px;
+			max-height: 800px;
+		}
+	}
+}

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

@@ -24,7 +24,7 @@ const selectMock = {
 	canInsertBlockType: jest.fn(),
 	getBlockType: jest.fn(),
 	getClipboard: jest.fn(),
-	getSettings: jest.fn( () => ( {} ) ),
+	getSettings: jest.fn( () => ( { impressions: {} } ) ),
 };
 
 describe( 'BlockTypesTab component', () => {

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

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import fixtures from './index.js';
+
+export * from './index';
+
+export default fixtures.map( ( filteredItems ) => ( {
+	...filteredItems,
+	// Set `isNew` property expected from block type impressions
+	isNew: false,
+} ) );

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

@@ -8,11 +8,15 @@ const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
+const InspectorControlsTypography = createSlotFill(
+	'InspectorControlsTypography'
+);
 
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
 	dimensions: InspectorControlsDimensions,
+	typography: InspectorControlsTypography,
 };
 
 export default groups;

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

@@ -15,12 +15,18 @@ 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.
- * @return {WPElement}                      Letter-spacing control.
+ * @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.
+ *
+ * @return {WPElement}                          Letter-spacing control.
  */
-export default function LetterSpacingControl( { value, onChange } ) {
+export default function LetterSpacingControl( {
+	value,
+	onChange,
+	__unstableInputWidth = '60px',
+} ) {
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 		defaultValues: { px: '2', em: '.2', rem: '.2' },
@@ -29,7 +35,7 @@ export default function LetterSpacingControl( { value, onChange } ) {
 		<UnitControl
 			label={ __( 'Letter-spacing' ) }
 			value={ value }
-			__unstableInputWidth="60px"
+			__unstableInputWidth={ __unstableInputWidth }
 			units={ units }
 			onChange={ onChange }
 		/>

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

@@ -192,6 +192,13 @@ A `suggestion` should have the following shape:
 	)}
 />
 ```
+### renderControlBottom 
+
+-   Type: `Function`
+-   Required: No
+-   Default: null
+
+A render prop that can be used to pass optional controls to be rendered at the bottom of the component.
 
 # LinkControlSearchInput