@wordpress/block-editor 7.0.1 → 8.0.0

package/src/components/inner-blocks/index.js

@@ -9,7 +9,11 @@ import classnames from 'classnames';
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
 import { forwardRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { getBlockType, withBlockContentContext } from '@wordpress/blocks';
+import {
+	getBlockType,
+	store as blocksStore,
+	__unstableGetInnerBlocksProps as getInnerBlocksProps,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -38,6 +42,8 @@ function UncontrolledInnerBlocks( props ) {
 	const {
 		clientId,
 		allowedBlocks,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
 		template,
 		templateLock,
 		wrapperRef,
@@ -53,6 +59,8 @@ function UncontrolledInnerBlocks( props ) {
 	useNestedSettingsUpdate(
 		clientId,
 		allowedBlocks,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
 		templateLock,
 		captureToolbars,
 		orientation,
@@ -137,21 +145,34 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
 export function useInnerBlocksProps( props = {}, options = {} ) {
 	const { clientId } = useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
-	const hasOverlay = useSelect(
+	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
 		( select ) => {
+			if ( ! clientId ) {
+				return {};
+			}
+
 			const {
 				getBlockName,
 				isBlockSelected,
 				hasSelectedInnerBlock,
 				isNavigationMode,
 			} = select( blockEditorStore );
+			const blockName = getBlockName( clientId );
 			const enableClickThrough = isNavigationMode() || isSmallScreen;
-			return (
-				getBlockName( clientId ) !== 'core/template' &&
-				! isBlockSelected( clientId ) &&
-				! hasSelectedInnerBlock( clientId, true ) &&
-				enableClickThrough
-			);
+			return {
+				__experimentalCaptureToolbars: select(
+					blocksStore
+				).hasBlockSupport(
+					blockName,
+					'__experimentalExposeControlsToChildren',
+					false
+				),
+				hasOverlay:
+					blockName !== 'core/template' &&
+					! isBlockSelected( clientId ) &&
+					! hasSelectedInnerBlock( clientId, true ) &&
+					enableClickThrough,
+			};
 		},
 		[ clientId, isSmallScreen ]
 	);
@@ -162,11 +183,15 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			rootClientId: clientId,
 		} ),
 	] );
+
+	const innerBlocksProps = {
+		__experimentalCaptureToolbars,
+		...options,
+	};
 	const InnerBlocks =
-		options.value && options.onChange
+		innerBlocksProps.value && innerBlocksProps.onChange
 			? ControlledInnerBlocks
 			: UncontrolledInnerBlocks;
-
 	return {
 		...props,
 		ref,
@@ -177,17 +202,21 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				'has-overlay': hasOverlay,
 			}
 		),
-		children: <InnerBlocks { ...options } clientId={ clientId } />,
+		children: clientId ? (
+			<InnerBlocks { ...innerBlocksProps } clientId={ clientId } />
+		) : (
+			<BlockListItems { ...options } />
+		),
 	};
 }
 
+useInnerBlocksProps.save = getInnerBlocksProps;
+
 // Expose default appender placeholders as components.
 ForwardedInnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 ForwardedInnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
 
-ForwardedInnerBlocks.Content = withBlockContentContext(
-	( { BlockContent } ) => <BlockContent />
-);
+ForwardedInnerBlocks.Content = () => useInnerBlocksProps.save().children;
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md

package/src/components/inner-blocks/index.native.js

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { getBlockType, withBlockContentContext } from '@wordpress/blocks';
+import {
+	getBlockType,
+	__unstableGetInnerBlocksProps as getInnerBlocksProps,
+} from '@wordpress/blocks';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +27,44 @@ import { BlockContextProvider } from '../block-context';
 import { defaultLayout, LayoutProvider } from '../block-list/layout';
 import { store as blockEditorStore } from '../../store';
 
+/**
+ * This hook is used to lightly mark an element as an inner blocks wrapper
+ * element. Call this hook and pass the returned props to the element to mark as
+ * an inner blocks wrapper, automatically rendering inner blocks as children. If
+ * you define a ref for the element, it is important to pass the ref to this
+ * hook, which the hook in turn will pass to the component through the props it
+ * returns. Optionally, you can also pass any other props through this hook, and
+ * they will be merged and returned.
+ *
+ * @param {Object} props   Optional. Props to pass to the element. Must contain
+ *                         the ref if one is defined.
+ * @param {Object} options Optional. Inner blocks options.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md
+ */
+export function useInnerBlocksProps( props = {}, options = {} ) {
+	const fallbackRef = useRef();
+	const { clientId } = useBlockEditContext();
+
+	const ref = props.ref || fallbackRef;
+	const InnerBlocks =
+		options.value && options.onChange
+			? ControlledInnerBlocks
+			: UncontrolledInnerBlocks;
+
+	return {
+		...props,
+		ref,
+		children: (
+			<InnerBlocks
+				{ ...options }
+				clientId={ clientId }
+				wrapperRef={ ref }
+			/>
+		),
+	};
+}
+
 /**
  * InnerBlocks is a component which allows a single block to have multiple blocks
  * as children. The UncontrolledInnerBlocks component is used whenever the inner
@@ -53,6 +95,7 @@ function UncontrolledInnerBlocks( props ) {
 		filterInnerBlocks,
 		blockWidth,
 		__experimentalLayout: layout = defaultLayout,
+		gridProperties,
 	} = props;
 
 	const block = useSelect(
@@ -86,6 +129,7 @@ function UncontrolledInnerBlocks( props ) {
 			onAddBlock={ onAddBlock }
 			onDeleteBlock={ onDeleteBlock }
 			filterInnerBlocks={ filterInnerBlocks }
+			gridProperties={ gridProperties }
 			blockWidth={ blockWidth }
 		/>
 	);
@@ -148,9 +192,9 @@ const InnerBlocks = ( props ) => {
 InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 InnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
 
-InnerBlocks.Content = withBlockContentContext( ( { BlockContent } ) => (
-	<BlockContent />
-) );
+useInnerBlocksProps.save = getInnerBlocksProps;
+
+InnerBlocks.Content = () => useInnerBlocksProps.save().children;
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -18,21 +18,26 @@ import { getLayoutType } from '../../layouts';
  * the block-editor store, then the store is updated with the new settings which
  * came from props.
  *
- * @param {string}   clientId        The client ID of the block to update.
- * @param {string[]} allowedBlocks   An array of block names which are permitted
- *                                   in inner blocks.
- * @param {string}   [templateLock]  The template lock specified for the inner
- *                                   blocks component. (e.g. "all")
- * @param {boolean}  captureToolbars Whether or children toolbars should be shown
- *                                   in the inner blocks component rather than on
- *                                   the child block.
- * @param {string}   orientation     The direction in which the block
- *                                   should face.
- * @param {Object}   layout          The layout object for the block container.
+ * @param {string}            clientId                   The client ID of the block to update.
+ * @param {string[]}          allowedBlocks              An array of block names which are permitted
+ *                                                       in inner blocks.
+ * @param {?Array}            __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ].
+ * @param {?Function|boolean} __experimentalDirectInsert If a default block should be inserted directly by the
+ *                                                       appender.
+ * @param {string}            [templateLock]             The template lock specified for the inner
+ *                                                       blocks component. (e.g. "all")
+ * @param {boolean}           captureToolbars            Whether or children toolbars should be shown
+ *                                                       in the inner blocks component rather than on
+ *                                                       the child block.
+ * @param {string}            orientation                The direction in which the block
+ *                                                       should face.
+ * @param {Object}            layout                     The layout object for the block container.
  */
 export default function useNestedSettingsUpdate(
 	clientId,
 	allowedBlocks,
+	__experimentalDefaultBlock,
+	__experimentalDirectInsert,
 	templateLock,
 	captureToolbars,
 	orientation,
@@ -83,6 +88,14 @@ export default function useNestedSettingsUpdate(
 			newSettings.orientation = layoutType.getOrientation( layout );
 		}
 
+		if ( __experimentalDefaultBlock !== undefined ) {
+			newSettings.__experimentalDefaultBlock = __experimentalDefaultBlock;
+		}
+
+		if ( __experimentalDirectInsert !== undefined ) {
+			newSettings.__experimentalDirectInsert = __experimentalDirectInsert;
+		}
+
 		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
 			updateBlockListSettings( clientId, newSettings );
 		}
@@ -90,6 +103,8 @@ export default function useNestedSettingsUpdate(
 		clientId,
 		blockListSettings,
 		_allowedBlocks,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
 		templateLock,
 		parentLock,
 		captureToolbars,

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PatternExplorerSidebar from './sidebar';
+import PatternList from './patterns-list';
+
+function PatternsExplorer( { initialCategory, patternCategories } ) {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const [ selectedCategory, setSelectedCategory ] = useState(
+		initialCategory?.name
+	);
+	return (
+		<div className="block-editor-block-patterns-explorer">
+			<PatternExplorerSidebar
+				selectedCategory={ selectedCategory }
+				patternCategories={ patternCategories }
+				onClickCategory={ setSelectedCategory }
+				filterValue={ filterValue }
+				setFilterValue={ setFilterValue }
+			/>
+			<PatternList
+				filterValue={ filterValue }
+				selectedCategory={ selectedCategory }
+				patternCategories={ patternCategories }
+			/>
+		</div>
+	);
+}
+
+function PatternsExplorerModal( { onModalClose, ...restProps } ) {
+	return (
+		<Modal
+			title={ __( 'Patterns' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ onModalClose }
+			isFullScreen
+		>
+			<PatternsExplorer { ...restProps } />
+		</Modal>
+	);
+}
+
+export default PatternsExplorerModal;

package/src/components/inserter/block-patterns-explorer/patterns-list.js

@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useEffect } from '@wordpress/element';
+import { _n, sprintf } from '@wordpress/i18n';
+import { useDebounce, useAsyncList } from '@wordpress/compose';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import BlockPatternsList from '../../block-patterns-list';
+import InserterNoResults from '../no-results';
+import useInsertionPoint from '../hooks/use-insertion-point';
+import usePatternsState from '../hooks/use-patterns-state';
+import InserterListbox from '../../inserter-listbox';
+import { searchItems } from '../search-items';
+
+const INITIAL_INSERTER_RESULTS = 2;
+
+function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
+	if ( ! filterValue ) {
+		return null;
+	}
+	return (
+		<Heading
+			level={ 2 }
+			lineHeight={ '48px' }
+			className="block-editor-block-patterns-explorer__search-results-count"
+		>
+			{ sprintf(
+				/* translators: %d: number of patterns. %s: block pattern search query */
+				_n(
+					'%1$d pattern found for "%2$s"',
+					'%1$d patterns found for "%2$s"',
+					filteredBlockPatternsLength
+				),
+				filteredBlockPatternsLength,
+				filterValue
+			) }
+		</Heading>
+	);
+}
+
+function PatternList( { filterValue, selectedCategory, patternCategories } ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
+		shouldFocusBlock: true,
+	} );
+	const [ allPatterns, , onSelectBlockPattern ] = usePatternsState(
+		onInsertBlocks,
+		destinationRootClientId
+	);
+	const registeredPatternCategories = useMemo(
+		() =>
+			patternCategories.map(
+				( patternCategory ) => patternCategory.name
+			),
+		[ patternCategories ]
+	);
+
+	const filteredBlockPatterns = useMemo( () => {
+		if ( ! filterValue ) {
+			return allPatterns.filter( ( pattern ) =>
+				selectedCategory === 'uncategorized'
+					? ! pattern.categories?.length ||
+					  pattern.categories.every(
+							( category ) =>
+								! registeredPatternCategories.includes(
+									category
+								)
+					  )
+					: pattern.categories?.includes( selectedCategory )
+			);
+		}
+		return searchItems( allPatterns, filterValue );
+	}, [ filterValue, selectedCategory, allPatterns ] );
+
+	// Announce search results on change.
+	useEffect( () => {
+		if ( ! filterValue ) {
+			return;
+		}
+		const count = filteredBlockPatterns.length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+	}, [ filterValue, debouncedSpeak ] );
+
+	const currentShownPatterns = useAsyncList( filteredBlockPatterns, {
+		step: INITIAL_INSERTER_RESULTS,
+	} );
+
+	const hasItems = !! filteredBlockPatterns?.length;
+	return (
+		<div className="block-editor-block-patterns-explorer__list">
+			{ hasItems && (
+				<PatternsListHeader
+					filterValue={ filterValue }
+					filteredBlockPatternsLength={ filteredBlockPatterns.length }
+				/>
+			) }
+			<InserterListbox>
+				{ ! hasItems && <InserterNoResults /> }
+				{ hasItems && (
+					<BlockPatternsList
+						shownPatterns={ currentShownPatterns }
+						blockPatterns={ filteredBlockPatterns }
+						onClickPattern={ onSelectBlockPattern }
+						isDraggable={ false }
+					/>
+				) }
+			</InserterListbox>
+		</div>
+	);
+}
+
+export default PatternList;

package/src/components/inserter/block-patterns-explorer/sidebar.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, SearchControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function PatternCategoriesList( {
+	selectedCategory,
+	patternCategories,
+	onClickCategory,
+} ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
+	return (
+		<div className={ `${ baseClassName }__categories-list` }>
+			{ patternCategories.map( ( { name, label } ) => {
+				return (
+					<Button
+						key={ name }
+						label={ label }
+						className={ `${ baseClassName }__categories-list__item` }
+						isPressed={ selectedCategory === name }
+						onClick={ () => {
+							onClickCategory( name );
+						} }
+					>
+						{ label }
+					</Button>
+				);
+			} ) }
+		</div>
+	);
+}
+
+function PatternsExplorerSearch( { filterValue, setFilterValue } ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__search';
+	return (
+		<div className={ baseClassName }>
+			<SearchControl
+				onChange={ setFilterValue }
+				value={ filterValue }
+				label={ __( 'Search for patterns' ) }
+				placeholder={ __( 'Search' ) }
+			/>
+		</div>
+	);
+}
+
+function PatternExplorerSidebar( {
+	selectedCategory,
+	patternCategories,
+	onClickCategory,
+	filterValue,
+	setFilterValue,
+} ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
+	return (
+		<div className={ baseClassName }>
+			<PatternsExplorerSearch
+				filterValue={ filterValue }
+				setFilterValue={ setFilterValue }
+			/>
+			{ ! filterValue && (
+				<PatternCategoriesList
+					selectedCategory={ selectedCategory }
+					patternCategories={ patternCategories }
+					onClickCategory={ onClickCategory }
+				/>
+			) }
+		</div>
+	);
+}
+
+export default PatternExplorerSidebar;