@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

package/src/components/inserter/hooks/use-block-types-state.js

@@ -23,20 +23,18 @@ import { store as blockEditorStore } from '../../../store';
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
 const useBlockTypesState = ( rootClientId, onInsert ) => {
-	const { categories, collections, items } = useSelect(
-		( select ) => {
-			const { getInserterItems } = select( blockEditorStore );
-			const { getCategories, getCollections } = select( blocksStore );
-
-			return {
-				categories: getCategories(),
-				collections: getCollections(),
-				items: getInserterItems( rootClientId ),
-			};
-		},
+	const [ items ] = useSelect(
+		( select ) => [
+			select( blockEditorStore ).getInserterItems( rootClientId ),
+		],
 		[ rootClientId ]
 	);
 
+	const [ categories, collections ] = useSelect( ( select ) => {
+		const { getCategories, getCollections } = select( blocksStore );
+		return [ getCategories(), getCollections() ];
+	}, [] );
+
 	const onSelectItem = useCallback(
 		(
 			{ name, initialAttributes, innerBlocks, syncStatus, content },

package/src/components/inserter/hooks/use-patterns-state.js

@@ -11,7 +11,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
-import { PATTERN_TYPES } from '../block-patterns-tab/utils';
+import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';
 
 /**
  * Retrieves the block patterns inserter state.
@@ -58,7 +58,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
 			const patternBlocks =
-				pattern.type === PATTERN_TYPES.user &&
+				pattern.type === INSERTER_PATTERN_TYPES.user &&
 				pattern.syncStatus !== 'unsynced'
 					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 					: blocks;

package/src/components/inserter/index.js

@@ -186,7 +186,6 @@ class PrivateInserter extends Component {
 				clientId={ clientId }
 				isAppender={ isAppender }
 				showInserterHelpPanel={ showInserterHelpPanel }
-				prioritizePatterns={ prioritizePatterns }
 			/>
 		);
 	}

package/src/components/inserter/library.js

@@ -26,18 +26,13 @@ function InserterLibrary(
 	},
 	ref
 ) {
-	const { destinationRootClientId, prioritizePatterns } = useSelect(
+	const { destinationRootClientId } = useSelect(
 		( select ) => {
-			const { getBlockRootClientId, getSettings } =
-				select( blockEditorStore );
-
+			const { getBlockRootClientId } = select( blockEditorStore );
 			const _rootClientId =
 				rootClientId || getBlockRootClientId( clientId ) || undefined;
 			return {
 				destinationRootClientId: _rootClientId,
-				prioritizePatterns:
-					getSettings().__experimentalPreferPatternsOnRoot &&
-					! _rootClientId,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -54,7 +49,6 @@ function InserterLibrary(
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
 			shouldFocusBlock={ shouldFocusBlock }
-			prioritizePatterns={ prioritizePatterns }
 			ref={ ref }
 		/>
 	);

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

@@ -5,12 +5,12 @@ import { useRef, useEffect } from '@wordpress/element';
 import { Spinner, SearchControl } from '@wordpress/components';
 import { focus } from '@wordpress/dom';
 import { __ } from '@wordpress/i18n';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import MediaList from './media-list';
-import useDebouncedInput from '../hooks/use-debounced-input';
 import { useMediaResults } from './hooks';
 import InserterNoResults from '../no-results';
 

package/src/components/inserter/menu.js

@@ -14,13 +14,15 @@ import {
 	useImperativeHandle,
 	useRef,
 } from '@wordpress/element';
-import { VisuallyHidden, SearchControl } from '@wordpress/components';
+import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
@@ -28,7 +30,6 @@ import BlockPatternsTab from './block-patterns-tab';
 import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-category-preview-panel';
 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';
@@ -44,7 +45,6 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
-		prioritizePatterns,
 	},
 	ref
 ) {
@@ -66,27 +66,18 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { showPatterns, inserterItems } = useSelect(
+	const { showPatterns } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getInserterItems } =
-				select( blockEditorStore );
+			const { hasAllowedPatterns } = unlock( select( blockEditorStore ) );
 			return {
-				showPatterns: !! __experimentalGetAllowedPatterns(
-					destinationRootClientId
-				).length,
-				inserterItems: getInserterItems( destinationRootClientId ),
+				showPatterns: hasAllowedPatterns( destinationRootClientId ),
 			};
 		},
 		[ destinationRootClientId ]
 	);
-	const hasReusableBlocks = useMemo( () => {
-		return inserterItems.some(
-			( { category } ) => category === 'reusable'
-		);
-	}, [ inserterItems ] );
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
-	const showMedia = !! mediaCategories.length;
+	const showMedia = mediaCategories.length > 0;
 
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {
@@ -191,17 +182,13 @@ function InserterMenu(
 		]
 	);
 
-	const getCurrentTab = useCallback(
-		( tab ) => {
-			if ( tab.name === 'blocks' ) {
-				return blocksTab;
-			} else if ( tab.name === 'patterns' ) {
-				return patternsTab;
-			} else if ( tab.name === 'media' ) {
-				return mediaTab;
-			}
-		},
-		[ blocksTab, patternsTab, mediaTab ]
+	const inserterTabsContents = useMemo(
+		() => ( {
+			blocks: blocksTab,
+			patterns: patternsTab,
+			media: mediaTab,
+		} ),
+		[ blocksTab, mediaTab, patternsTab ]
 	);
 
 	const searchRef = useRef();
@@ -215,9 +202,7 @@ function InserterMenu(
 		selectedTab === 'patterns' &&
 		! delayedFilterValue &&
 		selectedPatternCategory;
-	const showAsTabs =
-		! delayedFilterValue &&
-		( showPatterns || hasReusableBlocks || showMedia );
+	const showAsTabs = ! delayedFilterValue && ( showPatterns || showMedia );
 	const showMediaPanel =
 		selectedTab === 'media' &&
 		! delayedFilterValue &&
@@ -271,13 +256,10 @@ function InserterMenu(
 				{ showAsTabs && (
 					<InserterTabs
 						showPatterns={ showPatterns }
-						showReusableBlocks={ hasReusableBlocks }
 						showMedia={ showMedia }
-						prioritizePatterns={ prioritizePatterns }
 						onSelect={ handleSetSelectedTab }
-					>
-						{ getCurrentTab }
-					</InserterTabs>
+						tabsContents={ inserterTabsContents }
+					/>
 				) }
 				{ ! delayedFilterValue && ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">
@@ -293,7 +275,15 @@ function InserterMenu(
 				/>
 			) }
 			{ showInserterHelpPanel && hoveredItem && (
-				<InserterPreviewPanel item={ hoveredItem } />
+				<Popover
+					className="block-editor-inserter__preview-container__popover"
+					placement="right-start"
+					offset={ 16 }
+					focusOnMount={ false }
+					animate={ false }
+				>
+					<InserterPreviewPanel item={ hoveredItem } />
+				</Popover>
 			) }
 			{ showPatternPanel && (
 				<PatternCategoryPreviewPanel

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

@@ -40,13 +40,13 @@ function InserterPreviewPanel( { item } ) {
 							blocks={ blocks }
 							viewportWidth={ example?.viewportWidth ?? 500 }
 							additionalStyles={ [
-								{ css: 'body { padding: 16px; }' },
+								{ css: 'body { padding: 24px; }' },
 							] }
 						/>
 					</div>
 				) : (
 					<div className="block-editor-inserter__preview-content-missing">
-						{ __( 'No Preview Available.' ) }
+						{ __( 'No preview available.' ) }
 					</div>
 				) }
 			</div>

package/src/components/inserter/style.scss

@@ -22,6 +22,8 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	height: 100%;
 	gap: $grid-unit-20;
+	overflow-y: hidden;
+
 	&.show-as-tabs {
 		gap: 0;
 	}
@@ -61,7 +63,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__popover .block-editor-inserter__menu {
 	margin: -$grid-unit-15;
 
-	.block-editor-inserter__tabs .components-tab-panel__tabs {
+	.block-editor-inserter__tabs div[role="tablist"] {
 		top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60 - $grid-unit-15;
 	}
 
@@ -118,10 +120,10 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	overflow: hidden;
 
-	.components-tab-panel__tabs {
+	div[role="tablist"] {
 		border-bottom: $border-width solid $gray-300;
 
-		.components-tab-panel__tabs-item {
+		button[role="tab"] {
 			flex-grow: 1;
 			margin-bottom: -$border-width;
 			&[id$="reusable"] {
@@ -133,7 +135,7 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 
-	.components-tab-panel__tab-content {
+	div[role="tabpanel"] {
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
@@ -214,15 +216,14 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__preview-container__popover {
+	top: $grid-unit-20 !important;
+}
+
 .block-editor-inserter__preview-container {
 	display: none;
-	width: 300px;
-	background: $white;
-	border-radius: $radius-block-ui;
-	border: $border-width solid $gray-300;
-	position: absolute;
-	top: $grid-unit-20;
-	left: calc(100% + #{$grid-unit-20});
+	width: $sidebar-width;
+	padding: $grid-unit-20;
 	max-height: calc(100% - #{$grid-unit-40});
 	overflow-y: hidden;
 
@@ -230,12 +231,14 @@ $block-inserter-tabs-height: 44px;
 		display: block;
 	}
 
-	.block-editor-block-card {
-		padding: $grid-unit-20;
+	.block-editor-block-preview__container {
+		height: 100%;
 	}
 
-	.block-editor-block-card__title {
-		font-size: $default-font-size;
+	.block-editor-block-card {
+		padding-left: 0;
+		padding-right: 0;
+		padding-bottom: $grid-unit-05;
 	}
 }
 
@@ -271,15 +274,11 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__block-patterns-tabs-container,
-.block-editor-block-patterns-explorer__sidebar {
+.block-editor-inserter__block-patterns-tabs-container {
 	height: 100%;
 	nav {
 		height: 100%;
 	}
-	.block-editor-block-patterns__source-filter select.components-select-control__input {
-		height: 40px;
-	}
 }
 
 .block-editor-inserter__block-patterns-tabs {
@@ -366,6 +365,7 @@ $block-inserter-tabs-height: 44px;
 	min-height: $grid-unit-60 * 3;
 	color: $gray-700;
 	background: $gray-100;
+	border-radius: $radius-block-ui;
 }
 
 .block-editor-inserter__tips {
@@ -447,7 +447,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-block-patterns-explorer {
 	&__sidebar {
 		position: absolute;
-		top: $header-height + $grid-unit-20;
+		top: $header-height + $grid-unit-15;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;

package/src/components/inserter/tabs.js

@@ -1,10 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { TabPanel } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
 const blocksTab = {
 	name: 'blocks',
 	/* translators: Blocks tab title in the block inserter. */
@@ -23,35 +29,38 @@ const mediaTab = {
 };
 
 function InserterTabs( {
-	children,
 	showPatterns = false,
 	showMedia = false,
 	onSelect,
-	prioritizePatterns,
+	tabsContents,
 } ) {
-	const tabs = useMemo( () => {
-		const tempTabs = [];
-		if ( prioritizePatterns && showPatterns ) {
-			tempTabs.push( patternsTab );
-		}
-		tempTabs.push( blocksTab );
-		if ( ! prioritizePatterns && showPatterns ) {
-			tempTabs.push( patternsTab );
-		}
-		if ( showMedia ) {
-			tempTabs.push( mediaTab );
-		}
-		return tempTabs;
-	}, [ prioritizePatterns, showPatterns, showMedia ] );
+	const tabs = [
+		blocksTab,
+		showPatterns && patternsTab,
+		showMedia && mediaTab,
+	].filter( Boolean );
 
 	return (
-		<TabPanel
-			className="block-editor-inserter__tabs"
-			tabs={ tabs }
-			onSelect={ onSelect }
-		>
-			{ children }
-		</TabPanel>
+		<div className="block-editor-inserter__tabs">
+			<Tabs onSelect={ onSelect }>
+				<Tabs.TabList>
+					{ tabs.map( ( tab ) => (
+						<Tabs.Tab key={ tab.name } tabId={ tab.name }>
+							{ tab.title }
+						</Tabs.Tab>
+					) ) }
+				</Tabs.TabList>
+				{ tabs.map( ( tab ) => (
+					<Tabs.TabPanel
+						key={ tab.name }
+						tabId={ tab.name }
+						focusable={ false }
+					>
+						{ tabsContents[ tab.name ] }
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
+		</div>
 	);
 }
 

package/src/components/inserter-button/README.md

@@ -0,0 +1,62 @@
+# InserterButton
+
+InserterButton is a type of button component.
+
+## Usage
+
+```jsx
+function render() {
+	return (
+		<View>
+			<Text>Some rendered content here</Text>
+			<InserterButton
+				item={ { title: 'Short Text', icon: <SVG></SVG> } }
+				onSelect={ function ( item ) {
+					console.log( 'selected' );
+				} }
+			/>
+		</View>
+	);
+}
+```
+
+_Note:_
+
+## Props
+
+### `maxWidth`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The max-width of the button.
+
+### `itemWidth`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The button width.
+
+### `onSelect`
+
+-   **Type:** `Function`
+-   **Required** `true`
+
+The function that is called once the InserterButton has been selected.
+
+### `item`
+
+-   **Type:** `Object`
+-   **Required** `true`
+
+The object that gets selected.
+
+## Examples
+
+<InserterButton
+item={ item }
+itemWidth={ itemWidth }
+maxWidth={ maxWidth }
+onSelect={ onSelect }
+/>

package/src/components/inserter-button/index.native.js

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { View, TouchableHighlight, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { BlockIcon } from '../block-icon';
+import styles from './style.scss';
+import sparkles from './sparkles';
+class MenuItem extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onPress = this.onPress.bind( this );
+	}
+
+	onPress() {
+		const { onSelect, item } = this.props;
+		onSelect( item );
+	}
+
+	render() {
+		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
+			this.props;
+
+		const modalIconWrapperStyle = getStylesFromColorScheme(
+			styles.modalIconWrapper,
+			styles.modalIconWrapperDark
+		);
+		const modalIconStyle = styles.modalIcon;
+		const modalItemLabelStyle = getStylesFromColorScheme(
+			styles.modalItemLabel,
+			styles.modalItemLabelDark
+		);
+
+		const clipboardBlockStyles = getStylesFromColorScheme(
+			styles.clipboardBlock,
+			styles.clipboardBlockDark
+		);
+
+		const isClipboardBlock = item.id === 'clipboard';
+		const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
+		const blockIsNew = item.isNew === true;
+		const accessibilityLabelFormat = blockIsNew
+			? // translators: Newly available block name. %s: The localized block name
+			  __( '%s block, newly available' )
+			: // translators: Block name. %s: The localized block name
+			  __( '%s block' );
+		const accessibilityLabel = sprintf(
+			accessibilityLabelFormat,
+			item.title
+		);
+
+		return (
+			<TouchableHighlight
+				style={ [
+					styles.touchableArea,
+					item.isDisabled ? styles.disabled : null,
+				] }
+				underlayColor="transparent"
+				activeOpacity={ 0.5 }
+				accessibilityRole="button"
+				accessibilityLabel={ accessibilityLabel }
+				onPress={ this.onPress }
+				disabled={ item.isDisabled }
+			>
+				<View style={ [ styles.modalItem, { width: maxWidth } ] }>
+					<View
+						style={ [
+							modalIconWrapperStyle,
+							itemWidth && {
+								width: itemWidth,
+							},
+							isClipboardBlock && clipboardBlockStyles,
+						] }
+					>
+						{ blockIsNew && (
+							<Icon
+								icon={ sparkles }
+								style={ styles.newIndicator }
+							/>
+						) }
+						<View style={ modalIconStyle }>
+							<BlockIcon
+								icon={ item.icon }
+								size={ modalIconStyle.width }
+							/>
+						</View>
+					</View>
+					<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
+						{ blockTitle }
+					</Text>
+				</View>
+			</TouchableHighlight>
+		);
+	}
+}
+
+const InserterButton = withPreferredColorScheme( MenuItem );
+
+InserterButton.Styles = {
+	modalItem: styles.modalItem,
+	modalIconWrapper: styles.modalIconWrapper,
+};
+
+export default InserterButton;

package/src/components/inserter-button/sparkles.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+const sparkles = (
+	<SVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M10 11c-1.588-.479-4-.91-4-.91s2-.241 4-.454c1.8-.191 3.365-.502 4-3.181C14.635 3.775 15 1 15 1s.365 2.775 1 5.455c.635 2.679 2 2.969 4 3.181 2 .213 4 .455 4 .455s-2.412.43-4 .909c-1.588.479-3 1-4 4.546-.746 2.643-.893 4.948-1 5.454-.107-.506-.167-2.5-1-5.454C13 12 11.588 11.479 10 11zM7.333 3.5C6.803 3.333 6 3.182 6 3.182s.667-.085 1.333-.16c.6-.066 1.122-.175 1.334-1.113C8.878.971 9 0 9 0s.122.971.333 1.91c.212.937.667 1.038 1.334 1.113.666.074 1.333.159 1.333.159s-.804.15-1.333.318c-.53.167-1 .35-1.334 1.59C9.085 6.017 9.036 6.824 9 7c-.036-.177-.056-.875-.333-1.91-.334-1.24-.804-1.423-1.334-1.59zM2.444 18C1.474 17.713 0 17.454 0 17.454s1.222-.145 2.444-.272c1.1-.115 2.057-.302 2.445-1.91C5.277 13.666 5.5 12 5.5 12s.223 1.665.611 3.273c.388 1.607 1.222 1.781 2.445 1.909 1.222.127 2.444.273 2.444.273s-1.474.258-2.444.545c-.971.287-1.834.6-2.445 2.727-.456 1.586-.546 2.97-.611 3.273-.065-.304-.102-1.5-.611-3.273C4.278 18.6 3.415 18.287 2.444 18z"
+			fill="#F0C930"
+		/>
+	</SVG>
+);
+
+export default sparkles;