@wordpress/block-editor 15.20.0 → 15.21.1

package/src/components/block-toolbar/block-toolbar-menu.native.js

@@ -1,477 +0,0 @@
-/**
- * External dependencies
- */
-import { Platform, findNodeHandle } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	getClipboard,
-	setClipboard,
-	ToolbarGroup,
-	ToolbarButton,
-	Picker,
-} from '@wordpress/components';
-import {
-	getBlockType,
-	getDefaultBlockName,
-	hasBlockSupport,
-	serialize,
-	rawHandler,
-	createBlock,
-	isUnmodifiedDefaultBlock,
-	isReusableBlock,
-} from '@wordpress/blocks';
-import { __, sprintf } from '@wordpress/i18n';
-import { withDispatch, withSelect, useSelect } from '@wordpress/data';
-import { withInstanceId, compose } from '@wordpress/compose';
-import { moreHorizontal } from '@wordpress/icons';
-import { useRef, useState } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-// Disable Reason: Needs to be refactored.
-// eslint-disable-next-line no-restricted-imports
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { getMoversSetup } from '../block-mover/mover-description';
-import { store as blockEditorStore } from '../../store';
-import BlockTransformationsMenu from '../block-switcher/block-transformations-menu';
-import {
-	useConvertToGroupButtons,
-	useConvertToGroupButtonProps,
-} from '../convert-to-group-buttons';
-
-const BlockActionsMenu = ( {
-	// Select.
-	blockTitle,
-	canInsertBlockType,
-	getBlocksByClientId,
-	isEmptyDefaultBlock,
-	isLocked,
-	canDuplicate,
-	isFirst,
-	isLast,
-	isReusableBlockType,
-	reusableBlock,
-	rootClientId,
-	selectedBlockClientId,
-	selectedBlockPossibleTransformations,
-	// Dispatch.
-	createSuccessNotice,
-	convertToRegularBlocks,
-	duplicateBlock,
-	onMoveDown,
-	onMoveUp,
-	openGeneralSidebar,
-	pasteBlock,
-	removeBlocks,
-	// Passed in.
-	anchorNodeRef,
-	isStackedHorizontally,
-	onDelete,
-	wrapBlockMover,
-	wrapBlockSettings,
-} ) => {
-	const [ clipboard, setCurrentClipboard ] = useState( getClipboard() );
-	const blockActionsMenuPickerRef = useRef();
-	const blockTransformationMenuPickerRef = useRef();
-	const moversOptions = { keys: [ 'icon', 'actionTitle' ] };
-	const clipboardBlock = clipboard && rawHandler( { HTML: clipboard } )[ 0 ];
-	const isPasteEnabled =
-		clipboardBlock &&
-		canInsertBlockType( clipboardBlock.name, rootClientId );
-
-	const innerBlockCount = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockCount( selectedBlockClientId ),
-		[ selectedBlockClientId ]
-	);
-
-	const {
-		actionTitle: {
-			backward: backwardButtonTitle,
-			forward: forwardButtonTitle,
-		},
-	} = getMoversSetup( isStackedHorizontally, moversOptions );
-
-	// Check if selected block is Groupable and/or Ungroupable.
-	const convertToGroupButtonProps = useConvertToGroupButtonProps(
-		// `selectedBlockClientId` can be undefined in some cases where this
-		// component gets re-rendered right after the block is removed.
-		selectedBlockClientId ? [ selectedBlockClientId ] : []
-	);
-	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
-	const showConvertToGroupButton = isGroupable || isUngroupable;
-	const convertToGroupButtons = useConvertToGroupButtons( {
-		...convertToGroupButtonProps,
-	} );
-
-	const allOptions = {
-		settings: {
-			id: 'settingsOption',
-			label: __( 'Block settings' ),
-			value: 'settingsOption',
-			onSelect: openGeneralSidebar,
-		},
-		backwardButton: {
-			id: 'backwardButtonOption',
-			label: backwardButtonTitle,
-			value: 'backwardButtonOption',
-			disabled: isFirst,
-			onSelect: onMoveUp,
-		},
-		forwardButton: {
-			id: 'forwardButtonOption',
-			label: forwardButtonTitle,
-			value: 'forwardButtonOption',
-			disabled: isLast,
-			onSelect: onMoveDown,
-		},
-		delete: {
-			id: 'deleteOption',
-			label: __( 'Remove block' ),
-			value: 'deleteOption',
-			separated: true,
-			disabled: isEmptyDefaultBlock,
-			onSelect: () => {
-				onDelete();
-				createSuccessNotice(
-					// translators: displayed right after the block is removed.
-					__( 'Block removed' )
-				);
-			},
-		},
-		transformButton: {
-			id: 'transformButtonOption',
-			label: __( 'Transform block…' ),
-			value: 'transformButtonOption',
-			onSelect: () => {
-				if ( blockTransformationMenuPickerRef.current ) {
-					blockTransformationMenuPickerRef.current.presentPicker();
-				}
-			},
-		},
-		copyButton: {
-			id: 'copyButtonOption',
-			label: __( 'Copy' ),
-			value: 'copyButtonOption',
-			onSelect: () => {
-				const serializedBlock = serialize(
-					getBlocksByClientId( selectedBlockClientId )
-				);
-				setCurrentClipboard( serializedBlock );
-				setClipboard( serializedBlock );
-				createSuccessNotice(
-					// translators: displayed right after the block is copied.
-					__( 'Block copied' )
-				);
-			},
-		},
-		cutButton: {
-			id: 'cutButtonOption',
-			label: __( 'Cut block' ),
-			value: 'cutButtonOption',
-			onSelect: () => {
-				setClipboard(
-					serialize( getBlocksByClientId( selectedBlockClientId ) )
-				);
-				removeBlocks( selectedBlockClientId );
-				createSuccessNotice(
-					// translators: displayed right after the block is cut.
-					__( 'Block cut' )
-				);
-			},
-		},
-		pasteButton: {
-			id: 'pasteButtonOption',
-			label: __( 'Paste block after' ),
-			value: 'pasteButtonOption',
-			onSelect: () => {
-				onPasteBlock();
-				createSuccessNotice(
-					// translators: displayed right after the block is pasted.
-					__( 'Block pasted' )
-				);
-			},
-		},
-		duplicateButton: {
-			id: 'duplicateButtonOption',
-			label: __( 'Duplicate block' ),
-			value: 'duplicateButtonOption',
-			onSelect: () => {
-				duplicateBlock();
-				createSuccessNotice(
-					// translators: displayed right after the block is duplicated.
-					__( 'Block duplicated' )
-				);
-			},
-		},
-		convertToRegularBlocks: {
-			id: 'convertToRegularBlocksOption',
-			label: __( 'Detach' ),
-			value: 'convertToRegularBlocksOption',
-			onSelect: () => {
-				/* translators: %s: name of the synced block */
-				const successNotice = __( '%s detached' );
-				createSuccessNotice(
-					sprintf(
-						successNotice,
-						reusableBlock?.title?.raw || blockTitle
-					)
-				);
-				convertToRegularBlocks();
-			},
-		},
-	};
-
-	const options = [
-		wrapBlockMover && allOptions.backwardButton,
-		wrapBlockMover && allOptions.forwardButton,
-		wrapBlockSettings && allOptions.settings,
-		! isLocked &&
-			selectedBlockPossibleTransformations.length &&
-			allOptions.transformButton,
-		canDuplicate && allOptions.copyButton,
-		canDuplicate && allOptions.cutButton,
-		canDuplicate && isPasteEnabled && allOptions.pasteButton,
-		canDuplicate && allOptions.duplicateButton,
-		showConvertToGroupButton && isGroupable && convertToGroupButtons.group,
-		showConvertToGroupButton &&
-			isUngroupable &&
-			convertToGroupButtons.ungroup,
-		isReusableBlockType &&
-			innerBlockCount > 0 &&
-			allOptions.convertToRegularBlocks,
-		! isLocked && allOptions.delete,
-	].filter( Boolean );
-
-	// End early if there are no options to show.
-	if ( ! options.length ) {
-		return (
-			<ToolbarGroup>
-				<ToolbarButton
-					title={ __( 'Open Block Actions Menu' ) }
-					icon={ moreHorizontal }
-					disabled
-				/>
-			</ToolbarGroup>
-		);
-	}
-
-	function onPasteBlock() {
-		if ( ! clipboard ) {
-			return;
-		}
-
-		pasteBlock( rawHandler( { HTML: clipboard } )[ 0 ] );
-	}
-
-	function onPickerSelect( value ) {
-		const selectedItem = options.find( ( item ) => item.value === value );
-		selectedItem.onSelect();
-	}
-
-	function onPickerPresent() {
-		if ( blockActionsMenuPickerRef.current ) {
-			blockActionsMenuPickerRef.current.presentPicker();
-		}
-	}
-
-	const disabledButtonIndices = options
-		.map( ( option, index ) => option.disabled && index + 1 )
-		.filter( Boolean );
-
-	const accessibilityHint =
-		Platform.OS === 'ios'
-			? __( 'Double tap to open Action Sheet with available options' )
-			: __( 'Double tap to open Bottom Sheet with available options' );
-
-	const getAnchor = () =>
-		anchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;
-
-	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				title={ __( 'Open Block Actions Menu' ) }
-				onClick={ onPickerPresent }
-				icon={ moreHorizontal }
-				extraProps={ {
-					hint: accessibilityHint,
-				} }
-			/>
-			<Picker
-				testID="block-actions-menu"
-				ref={ blockActionsMenuPickerRef }
-				options={ options }
-				onChange={ onPickerSelect }
-				destructiveButtonIndex={ options.length }
-				disabledButtonIndices={ disabledButtonIndices }
-				hideCancelButton={ Platform.OS !== 'ios' }
-				leftAlign
-				getAnchor={ getAnchor }
-				// translators: %s: block title e.g: "Paragraph".
-				title={ sprintf( __( '%s block options' ), blockTitle ) }
-			/>
-			<BlockTransformationsMenu
-				anchorNodeRef={ anchorNodeRef }
-				blockTitle={ blockTitle }
-				pickerRef={ blockTransformationMenuPickerRef }
-				possibleTransformations={ selectedBlockPossibleTransformations }
-				selectedBlock={ getBlocksByClientId( selectedBlockClientId ) }
-				selectedBlockClientId={ selectedBlockClientId }
-			/>
-		</ToolbarGroup>
-	);
-};
-
-const EMPTY_BLOCK_LIST = [];
-
-export default compose(
-	withSelect( ( select, { clientId } ) => {
-		const {
-			getBlockIndex,
-			getBlockRootClientId,
-			getBlockOrder,
-			getBlockName,
-			getBlockTransformItems,
-			getBlock,
-			getBlocksByClientId,
-			getSelectedBlockClientIds,
-			canInsertBlockType,
-			getTemplateLock,
-		} = select( blockEditorStore );
-		const block = getBlock( clientId );
-		const blockName = getBlockName( clientId );
-		const blockType = getBlockType( blockName );
-		const blockTitle = blockType?.title;
-		const rootClientId = getBlockRootClientId( clientId );
-		const blockOrder = getBlockOrder( rootClientId );
-
-		const currentBlockIndex = getBlockIndex( clientId );
-		const isFirst = currentBlockIndex === 0;
-		const isLast = currentBlockIndex === blockOrder.length - 1;
-
-		const innerBlocks = getBlocksByClientId( clientId );
-
-		const canDuplicate = innerBlocks.every( ( innerBlock ) => {
-			return (
-				!! innerBlock &&
-				hasBlockSupport( innerBlock.name, 'multiple', true ) &&
-				canInsertBlockType( innerBlock.name, rootClientId )
-			);
-		} );
-
-		const isDefaultBlock = blockName === getDefaultBlockName();
-		const isEmptyContent = block?.attributes.content === '';
-		const isExactlyOneBlock = blockOrder.length === 1;
-		const isEmptyDefaultBlock =
-			isExactlyOneBlock && isDefaultBlock && isEmptyContent;
-		const isLocked = !! getTemplateLock( rootClientId );
-
-		const selectedBlockClientId = getSelectedBlockClientIds()[ 0 ];
-		const selectedBlock = selectedBlockClientId
-			? getBlocksByClientId( selectedBlockClientId )[ 0 ]
-			: undefined;
-		const selectedBlockPossibleTransformations = selectedBlock
-			? getBlockTransformItems( selectedBlock, rootClientId )
-			: EMPTY_BLOCK_LIST;
-
-		const isReusableBlockType = block ? isReusableBlock( block ) : false;
-		const reusableBlock = isReusableBlockType
-			? select( coreStore ).getEntityRecord(
-					'postType',
-					'wp_block',
-					block?.attributes.ref
-			  )
-			: undefined;
-
-		return {
-			blockTitle,
-			canInsertBlockType,
-			currentIndex: currentBlockIndex,
-			getBlocksByClientId,
-			isEmptyDefaultBlock,
-			isLocked,
-			canDuplicate,
-			isFirst,
-			isLast,
-			isReusableBlockType,
-			reusableBlock,
-			rootClientId,
-			selectedBlockClientId,
-			selectedBlockPossibleTransformations,
-		};
-	} ),
-	withDispatch(
-		(
-			dispatch,
-			{ clientId, rootClientId, currentIndex, selectedBlockClientId },
-			{ select }
-		) => {
-			const {
-				moveBlocksDown,
-				moveBlocksUp,
-				duplicateBlocks,
-				removeBlocks,
-				insertBlock,
-				replaceBlock,
-				clearSelectedBlock,
-			} = dispatch( blockEditorStore );
-			const { openGeneralSidebar } = dispatch( 'core/edit-post' );
-			const { getBlockSelectionEnd, getBlock } =
-				select( blockEditorStore );
-			const { createSuccessNotice } = dispatch( noticesStore );
-
-			const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
-				dispatch( reusableBlocksStore );
-
-			return {
-				createSuccessNotice,
-				convertToRegularBlocks() {
-					clearSelectedBlock();
-					// Convert action is executed at the end of the current JavaScript execution block
-					// to prevent issues related to undo/redo actions.
-					setImmediate( () =>
-						convertBlockToStatic( selectedBlockClientId )
-					);
-				},
-				duplicateBlock() {
-					return duplicateBlocks( [ clientId ] );
-				},
-				onMoveDown: ( ...args ) =>
-					moveBlocksDown( [ clientId ], rootClientId, ...args ),
-				onMoveUp: ( ...args ) =>
-					moveBlocksUp( [ clientId ], rootClientId, ...args ),
-				openGeneralSidebar: () =>
-					openGeneralSidebar( 'edit-post/block' ),
-				pasteBlock: ( clipboardBlock ) => {
-					const canReplaceBlock = isUnmodifiedDefaultBlock(
-						getBlock( getBlockSelectionEnd() )
-					);
-
-					if ( ! canReplaceBlock ) {
-						const insertedBlock = createBlock(
-							clipboardBlock.name,
-							clipboardBlock.attributes,
-							clipboardBlock.innerBlocks
-						);
-
-						insertBlock(
-							insertedBlock,
-							currentIndex + 1,
-							rootClientId
-						);
-					} else {
-						replaceBlock( clientId, clipboardBlock );
-					}
-				},
-				removeBlocks,
-			};
-		}
-	),
-	withInstanceId
-)( BlockActionsMenu );

package/src/components/block-toolbar/index.native.js

@@ -1,126 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockActionsMenu from './block-toolbar-menu';
-import BlockControls from '../block-controls';
-import BlockMover from '../block-mover';
-import UngroupButton from '../ungroup-button';
-import { BlockSettingsButton } from '../block-settings';
-import { store as blockEditorStore } from '../../store';
-
-const REMOVE_EMPTY_PARENT_BLOCKS = [
-	'core/buttons',
-	'core/columns',
-	'core/social-links',
-];
-
-export default function BlockToolbar( { anchorNodeRef } ) {
-	const {
-		rootClientId,
-		blockClientId,
-		isSelected,
-		isValidAndVisual,
-		isStackedHorizontally,
-		parentBlockName,
-		parentNumberOfInnerBlocks,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockListSettings,
-			getBlockMode,
-			getBlockName,
-			getBlockCount,
-			getBlockRootClientId,
-			getSelectedBlockClientIds,
-			isBlockValid,
-		} = select( blockEditorStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
-		const blockListSettings = getBlockListSettings( blockRootClientId );
-		const orientation = blockListSettings?.orientation;
-		const isBlockStackedHorizontally = orientation === 'horizontal';
-		const parentName = getBlockName( blockRootClientId );
-		const numberOfInnerBlocks = getBlockCount( blockRootClientId );
-
-		return {
-			rootClientId: blockRootClientId,
-			blockClientId: selectedBlockClientId,
-			isSelected: selectedBlockClientIds.length > 0,
-			isStackedHorizontally: isBlockStackedHorizontally,
-			parentBlockName: parentName,
-			parentNumberOfInnerBlocks: numberOfInnerBlocks,
-			isValidAndVisual:
-				selectedBlockClientIds.length === 1
-					? isBlockValid( selectedBlockClientIds[ 0 ] ) &&
-					  getBlockMode( selectedBlockClientIds[ 0 ] ) === 'visual'
-					: false,
-		};
-	}, [] );
-
-	const { removeBlock } = useDispatch( blockEditorStore );
-	const onRemove = useCallback( () => {
-		// Temp: remove parent block for specific cases where they don't
-		// have inner blocks, ideally we should match the behavior as in
-		// the Web editor and show a placeholder instead of removing the parent.
-		if (
-			REMOVE_EMPTY_PARENT_BLOCKS.includes( parentBlockName ) &&
-			parentNumberOfInnerBlocks === 1
-		) {
-			removeBlock( rootClientId );
-			return;
-		}
-
-		removeBlock( blockClientId );
-	}, [
-		blockClientId,
-		parentBlockName,
-		parentNumberOfInnerBlocks,
-		removeBlock,
-		rootClientId,
-	] );
-
-	if ( ! isSelected ) {
-		return null;
-	}
-
-	return (
-		<>
-			{ isValidAndVisual && (
-				<>
-					<BlockSettingsButton.Slot>
-						{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }
-						{ ( fills = [ null ] ) => {
-							if ( ! fills?.length > 0 ) {
-								return null;
-							}
-							return fills[ 0 ];
-						} }
-					</BlockSettingsButton.Slot>
-					<BlockControls.Slot group="block" />
-					<BlockControls.Slot />
-					<BlockControls.Slot group="inline" />
-					<BlockControls.Slot group="other" />
-					<UngroupButton />
-
-					<BlockMover
-						clientIds={ [ blockClientId ] }
-						isStackedHorizontally={ isStackedHorizontally }
-					/>
-
-					<BlockActionsMenu
-						clientId={ blockClientId }
-						isStackedHorizontally={ isStackedHorizontally }
-						onDelete={ onRemove }
-						anchorNodeRef={ anchorNodeRef }
-					/>
-				</>
-			) }
-		</>
-	);
-}