@wordpress/block-editor 15.21.0 → 15.22.1-next.v.202606191442.0

package/src/components/inserter/menu.native.js

@@ -1,237 +0,0 @@
-/**
- * External dependencies
- */
-import { AccessibilityInfo, TouchableHighlight, Platform } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useState, useCallback } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
-import {
-	BottomSheet,
-	BottomSheetConsumer,
-	SearchControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import InserterSearchResults from './search-results';
-import { store as blockEditorStore } from '../../store';
-import InserterTabs from './tabs';
-import styles from './style.scss';
-import { filterInserterItems } from './utils';
-
-const MIN_ITEMS_FOR_SEARCH = 2;
-function InserterMenu( {
-	onSelect,
-	onDismiss,
-	rootClientId,
-	clientId,
-	isAppender,
-	shouldReplaceBlock,
-	insertionIndex,
-} ) {
-	const [ filterValue, setFilterValue ] = useState( '' );
-	const [ showTabs, setShowTabs ] = useState( true );
-	const [ tabIndex, setTabIndex ] = useState( 0 );
-
-	const isIOS = Platform.OS === 'ios';
-
-	const {
-		showInsertionPoint,
-		hideInsertionPoint,
-		clearSelectedBlock,
-		insertBlock,
-		removeBlock,
-		resetBlocks,
-		insertDefaultBlock,
-	} = useDispatch( blockEditorStore );
-
-	const { items, destinationRootClientId, showReusableBlocks } = useSelect(
-		( select ) => {
-			const {
-				getInserterItems,
-				getBlockRootClientId,
-				getBlockSelectionEnd,
-			} = select( blockEditorStore );
-
-			let targetRootClientId = rootClientId;
-			if ( ! targetRootClientId && ! clientId && ! isAppender ) {
-				const end = getBlockSelectionEnd();
-				if ( end ) {
-					targetRootClientId =
-						getBlockRootClientId( end ) || undefined;
-				}
-			}
-
-			const allItems = getInserterItems( targetRootClientId );
-			const reusableBlockItems = filterInserterItems( allItems, {
-				onlyReusable: true,
-			} );
-
-			return {
-				items: allItems,
-				destinationRootClientId: targetRootClientId,
-				showReusableBlocks: !! reusableBlockItems.length,
-			};
-		}
-	);
-
-	const { getBlockOrder, getBlockCount } = useSelect( blockEditorStore );
-
-	useEffect( () => {
-		// Show/Hide insertion point on Mount/Dismount
-		if ( shouldReplaceBlock ) {
-			const count = getBlockCount();
-			// Check if there is a rootClientId because that means it is a nested replaceable block
-			// and we don't want to clear/reset all blocks.
-			if ( count === 1 && ! rootClientId ) {
-				// Removing the last block is not possilble with `removeBlock` action.
-				// It always inserts a default block if the last of the blocks have been removed.
-				clearSelectedBlock();
-				resetBlocks( [] );
-			} else {
-				const blockToReplace = getBlockOrder( destinationRootClientId )[
-					insertionIndex
-				];
-				removeBlock( blockToReplace, false );
-			}
-		}
-		showInsertionPoint( destinationRootClientId, insertionIndex );
-
-		return hideInsertionPoint;
-	}, [] );
-
-	const onClose = useCallback( () => {
-		// If should replace but didn't insert any block
-		// re-insert default block.
-		if ( shouldReplaceBlock ) {
-			insertDefaultBlock( {}, destinationRootClientId, insertionIndex );
-		}
-		onDismiss();
-	}, [ shouldReplaceBlock, destinationRootClientId, insertionIndex ] );
-
-	const onInsert = useCallback(
-		( item ) => {
-			const { name, initialAttributes, innerBlocks } = item;
-
-			const newBlock = createBlock(
-				name,
-				initialAttributes,
-				innerBlocks
-			);
-
-			insertBlock(
-				newBlock,
-				insertionIndex,
-				destinationRootClientId,
-				true,
-				0,
-				{ source: 'inserter_menu' }
-			);
-		},
-		[ insertBlock, destinationRootClientId, insertionIndex ]
-	);
-
-	const onSelectItem = useCallback(
-		( item ) => {
-			// Avoid a focus loop, see https://github.com/WordPress/gutenberg/issues/30562
-			if ( Platform.OS === 'ios' ) {
-				AccessibilityInfo.isScreenReaderEnabled().then( ( enabled ) => {
-					// In testing, the bug focus loop needed a longer timeout when VoiceOver was enabled.
-					const timeout = enabled ? 200 : 100;
-					// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
-					setTimeout( () => {
-						onInsert( item );
-					}, timeout );
-				} );
-			} else {
-				onInsert( item );
-			}
-			onSelect( item );
-		},
-		[ onInsert, onSelect ]
-	);
-
-	const onChangeSearch = useCallback(
-		( value ) => {
-			setFilterValue( value );
-		},
-		[ setFilterValue ]
-	);
-
-	const onKeyboardShow = useCallback(
-		() => setShowTabs( false ),
-		[ setShowTabs ]
-	);
-
-	const onKeyboardHide = useCallback(
-		() => setShowTabs( true ),
-		[ setShowTabs ]
-	);
-
-	const showSearchForm = items.length > MIN_ITEMS_FOR_SEARCH;
-	const isFullScreen = ! isIOS && showSearchForm;
-
-	return (
-		<BottomSheet
-			isVisible
-			onClose={ onClose }
-			onKeyboardShow={ onKeyboardShow }
-			onKeyboardHide={ onKeyboardHide }
-			header={
-				<>
-					{ showSearchForm && (
-						<SearchControl
-							onChange={ onChangeSearch }
-							value={ filterValue }
-						/>
-					) }
-					{ showTabs && ! filterValue && (
-						<InserterTabs.Control
-							onChangeTab={ setTabIndex }
-							showReusableBlocks={ showReusableBlocks }
-						/>
-					) }
-				</>
-			}
-			hasNavigation
-			setMinHeightToMaxHeight
-			contentStyle={ styles[ 'inserter-menu__list' ] }
-			isFullScreen={ isFullScreen }
-			allowDragIndicator
-		>
-			<BottomSheetConsumer>
-				{ ( { listProps } ) => (
-					<TouchableHighlight
-						accessible={ false }
-						style={ styles[ 'inserter-menu__list-wrapper' ] }
-					>
-						{ ! showTabs || filterValue ? (
-							<InserterSearchResults
-								rootClientId={ rootClientId }
-								filterValue={ filterValue }
-								onSelect={ onSelectItem }
-								listProps={ listProps }
-								isFullScreen={ isFullScreen }
-							/>
-						) : (
-							<InserterTabs
-								rootClientId={ rootClientId }
-								listProps={ listProps }
-								tabIndex={ tabIndex }
-								onSelect={ onSelectItem }
-								showReusableBlocks={ showReusableBlocks }
-							/>
-						) }
-					</TouchableHighlight>
-				) }
-			</BottomSheetConsumer>
-		</BottomSheet>
-	);
-}
-
-export default InserterMenu;

package/src/components/inserter/no-results.native.js

@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-function InserterNoResults() {
-	const {
-		'inserter-search-no-results__container': containerStyle,
-		'inserter-search-no-results__text-primary': textPrimaryBaseStyle,
-		'inserter-search-no-results__text-primary--dark': textPrimaryDarkStyle,
-		'inserter-search-no-results__text-secondary': textSecondaryBaseStyle,
-		'inserter-search-no-results__text-secondary--dark':
-			textSecondaryDarkStyle,
-	} = styles;
-	const textPrimaryStyle = usePreferredColorSchemeStyle(
-		textPrimaryBaseStyle,
-		textPrimaryDarkStyle
-	);
-	const textSecondaryStyle = usePreferredColorSchemeStyle(
-		textSecondaryBaseStyle,
-		textSecondaryDarkStyle
-	);
-
-	return (
-		<View>
-			<View style={ containerStyle }>
-				<Text style={ textPrimaryStyle }>
-					{ __( 'No blocks found' ) }
-				</Text>
-				<Text style={ textSecondaryStyle }>
-					{ __( 'Try another search term' ) }
-				</Text>
-			</View>
-		</View>
-	);
-}
-
-export default InserterNoResults;

package/src/components/inserter/reusable-blocks-tab.native.js

@@ -1,45 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockTypesList from '../block-types-list';
-import { store as blockEditorStore } from '../../store';
-import { createInserterSection, filterInserterItems } from './utils';
-
-function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
-	const { inserterItems } = useSelect(
-		( select ) => {
-			const { getInserterItems } = select( blockEditorStore );
-			const allItems = getInserterItems( rootClientId );
-
-			return {
-				inserterItems: allItems,
-			};
-		},
-		[ rootClientId ]
-	);
-
-	const items = useMemo( () => {
-		return filterInserterItems( inserterItems, { onlyReusable: true } );
-	}, [ inserterItems ] );
-
-	const sections = [ createInserterSection( { key: 'reusable', items } ) ];
-
-	return (
-		<BlockTypesList
-			name="SyncedPatterns"
-			sections={ sections }
-			onSelect={ onSelect }
-			listProps={ listProps }
-			label={ __( 'Synced patterns' ) }
-		/>
-	);
-}
-
-export default ReusableBlocksTab;

package/src/components/inserter/search-results.native.js

@@ -1,67 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { searchItems } from './search-items';
-import BlockTypesList from '../block-types-list';
-import InserterNoResults from './no-results';
-import { store as blockEditorStore } from '../../store';
-import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-import { createInserterSection, filterInserterItems } from './utils';
-
-function InserterSearchResults( {
-	filterValue,
-	onSelect,
-	listProps,
-	rootClientId,
-	isFullScreen,
-} ) {
-	const { inserterItems } = useSelect(
-		( select ) => {
-			const items =
-				select( blockEditorStore ).getInserterItems( rootClientId );
-
-			return { inserterItems: items };
-		},
-		[ rootClientId ]
-	);
-
-	const blockTypes = useMemo( () => {
-		const availableItems = filterInserterItems( inserterItems, {
-			allowReusable: true,
-		} );
-
-		return searchItems( availableItems, filterValue );
-	}, [ inserterItems, filterValue ] );
-
-	const { items, trackBlockTypeSelected } =
-		useBlockTypeImpressions( blockTypes );
-
-	if ( ! items || items?.length === 0 ) {
-		return <InserterNoResults />;
-	}
-
-	const handleSelect = ( ...args ) => {
-		trackBlockTypeSelected( ...args );
-		onSelect( ...args );
-	};
-
-	return (
-		<BlockTypesList
-			name="Blocks"
-			initialNumToRender={ isFullScreen ? 10 : 3 }
-			sections={ [ createInserterSection( { key: 'search', items } ) ] }
-			onSelect={ handleSelect }
-			listProps={ listProps }
-			label={ __( 'Blocks' ) }
-		/>
-	);
-}
-
-export default InserterSearchResults;

package/src/components/inserter/style.native.scss

@@ -1,83 +0,0 @@
-/** @format */
-.inserter-menu__add-block-button {
-	border-radius: 2px;
-	background-color: $black;
-	margin: 9px $grid-unit-20 10px $grid-unit-20;
-	padding: 0;
-}
-
-.inserter-menu__add-block-button--dark {
-	background-color: $white;
-}
-
-.inserter-menu__add-block-button-icon {
-	color: $white;
-}
-
-.inserter-menu__add-block-button-icon--dark {
-	color: $black;
-}
-
-.inserter-menu__add-block-button-text {
-	color: $white;
-	font-weight: 500;
-	align-self: center;
-	text-transform: capitalize;
-}
-
-.inserter-menu__list-wrapper {
-	flex: 1;
-}
-
-.inserter-menu__list {
-	padding-bottom: 20;
-	padding-top: 8;
-}
-
-.inserter-search-results__column {
-	padding: $grid-unit-20;
-}
-
-.inserter-search-results__row-separator {
-	height: 12px;
-}
-
-.inserter-search-results__list {
-	padding-bottom: 20px;
-	padding-top: 8px;
-}
-
-.inserter-search-no-results__container {
-	margin-top: 60px;
-	align-items: center;
-}
-
-.inserter-search-no-results__text-primary {
-	font-size: 16px;
-	color: $light-primary;
-}
-
-.inserter-search-no-results__text-primary--dark {
-	color: $dark-primary;
-}
-
-.inserter-search-no-results__text-secondary {
-	font-size: 14px;
-	color: $light-secondary;
-}
-
-.inserter-search-no-results__text-secondary--dark {
-	color: $dark-secondary;
-}
-
-.inserter-tabs__wrapper {
-	overflow: hidden;
-	flex: 1;
-}
-
-.inserter-tabs__container {
-	height: 100%;
-	width: 100%;
-	flex: 1;
-	flex-direction: row;
-}

package/src/components/inserter/tabs.native.js

@@ -1,152 +0,0 @@
-/**
- * External dependencies
- */
-import { Animated, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { SegmentedControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import BlockTypesTab from './block-types-tab';
-import ReusableBlocksTab from './reusable-blocks-tab';
-import styles from './style.scss';
-
-const TAB_ANIMATION_DURATION = 250;
-
-function InserterTabs( {
-	listProps,
-	onSelect,
-	rootClientId,
-	showReusableBlocks,
-	tabIndex,
-} ) {
-	const tabAnimation = useRef( new Animated.Value( 0 ) ).current;
-	const lastScrollEvents = useRef( [] ).current;
-	const [ wrapperWidth, setWrapperWidth ] = useState( 0 );
-
-	function onScroll( event ) {
-		lastScrollEvents[ tabIndex ] = event.nativeEvent;
-		listProps.onScroll( event );
-	}
-
-	const onWrapperLayout = useCallback(
-		( { nativeEvent } ) => {
-			setWrapperWidth( nativeEvent.layout.width );
-		},
-		[ setWrapperWidth ]
-	);
-
-	useEffect( () => {
-		Animated.timing( tabAnimation, {
-			duration: TAB_ANIMATION_DURATION,
-			toValue: tabIndex,
-			useNativeDriver: true,
-		} ).start();
-
-		// Notify upstream with the last scroll event of the current tab.
-		const lastScrollEvent = lastScrollEvents[ tabIndex ];
-		if ( lastScrollEvent ) {
-			listProps.onScroll( { nativeEvent: lastScrollEvent } );
-		}
-	}, [ tabIndex ] );
-
-	const { tabs, tabKeys } = useMemo( () => {
-		const filteredTabs = InserterTabs.getTabs().filter(
-			( { name } ) => showReusableBlocks || name !== 'reusable'
-		);
-		return {
-			tabs: filteredTabs,
-			tabKeys: [ ...filteredTabs.keys() ],
-		};
-	}, [ showReusableBlocks ] );
-
-	const translateX = useMemo(
-		() =>
-			tabKeys.length > 1
-				? tabAnimation.interpolate( {
-						inputRange: tabKeys,
-						outputRange: tabKeys.map(
-							( key ) => key * -wrapperWidth
-						),
-				  } )
-				: tabAnimation,
-		[ tabAnimation, tabKeys, wrapperWidth ]
-	);
-
-	const containerStyle = [
-		styles[ 'inserter-tabs__container' ],
-		{
-			width: wrapperWidth * tabKeys.length,
-			transform: [ { translateX } ],
-		},
-	];
-
-	return (
-		<View
-			style={ styles[ 'inserter-tabs__wrapper' ] }
-			onLayout={ onWrapperLayout }
-		>
-			<Animated.View style={ containerStyle }>
-				{ tabs.map( ( { component: TabComponent }, index ) => (
-					<View key={ `tab-${ index }` }>
-						<TabComponent
-							rootClientId={ rootClientId }
-							onSelect={ onSelect }
-							listProps={ { ...listProps, onScroll } }
-						/>
-					</View>
-				) ) }
-			</Animated.View>
-		</View>
-	);
-}
-
-function TabsControl( { onChangeTab, showReusableBlocks } ) {
-	const tabs = InserterTabs.getTabs();
-	const segments = useMemo( () => {
-		const filteredTabs = tabs.filter(
-			( { name } ) => showReusableBlocks || name !== 'reusable'
-		);
-		return filteredTabs.map( ( { title } ) => title );
-	}, [ showReusableBlocks ] );
-
-	const segmentHandler = useCallback(
-		( selectedTab ) => {
-			const tabTitles = tabs.map( ( { title } ) => title );
-			onChangeTab( tabTitles.indexOf( selectedTab ) );
-		},
-		[ onChangeTab ]
-	);
-
-	return segments.length > 1 ? (
-		<SegmentedControl
-			segments={ segments }
-			segmentHandler={ segmentHandler }
-		/>
-	) : null;
-}
-
-InserterTabs.Control = TabsControl;
-
-InserterTabs.getTabs = () => [
-	{ name: 'blocks', title: __( 'Blocks' ), component: BlockTypesTab },
-	{
-		name: 'reusable',
-		title: __( 'Synced patterns' ),
-		component: ReusableBlocksTab,
-	},
-];
-
-export default InserterTabs;