@wordpress/block-editor 14.5.0 → 14.7.0

package/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js

@@ -1,65 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
-
-/**
- * Allows Zoom Out mode to be exited by double clicking in the selected block.
- */
-export function useZoomOutModeExit() {
-	const { getSettings, isZoomOut, __unstableGetEditorMode } = unlock(
-		useSelect( blockEditorStore )
-	);
-
-	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
-		useDispatch( blockEditorStore )
-	);
-
-	return useRefEffect(
-		( node ) => {
-			function onDoubleClick( event ) {
-				// In "compose" mode.
-				const composeMode =
-					__unstableGetEditorMode() === 'zoom-out' && isZoomOut();
-
-				if ( ! composeMode ) {
-					return;
-				}
-
-				if ( ! event.defaultPrevented ) {
-					event.preventDefault();
-
-					const { __experimentalSetIsInserterOpened } = getSettings();
-
-					if (
-						typeof __experimentalSetIsInserterOpened === 'function'
-					) {
-						__experimentalSetIsInserterOpened( false );
-					}
-					__unstableSetEditorMode( 'edit' );
-					resetZoomLevel();
-				}
-			}
-
-			node.addEventListener( 'dblclick', onDoubleClick );
-
-			return () => {
-				node.removeEventListener( 'dblclick', onDoubleClick );
-			};
-		},
-		[
-			getSettings,
-			__unstableSetEditorMode,
-			__unstableGetEditorMode,
-			isZoomOut,
-			resetZoomLevel,
-		]
-	);
-}

package/src/components/block-toolbar/shuffle.js

@@ -1,111 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { shuffle } from '@wordpress/icons';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-const EMPTY_ARRAY = [];
-
-function Container( props ) {
-	return (
-		<ToolbarGroup>
-			<ToolbarButton { ...props } />
-		</ToolbarGroup>
-	);
-}
-
-export default function Shuffle( { clientId, as = Container } ) {
-	const { categories, patterns, patternName } = useSelect(
-		( select ) => {
-			const {
-				getBlockAttributes,
-				getBlockRootClientId,
-				__experimentalGetAllowedPatterns,
-			} = select( blockEditorStore );
-			const attributes = getBlockAttributes( clientId );
-			const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
-			const _patternName = attributes?.metadata?.patternName;
-			const rootBlock = getBlockRootClientId( clientId );
-
-			// Calling `__experimentalGetAllowedPatterns` is expensive.
-			// Checking if the block can be shuffled prevents unnecessary selector calls.
-			// See: https://github.com/WordPress/gutenberg/pull/64736.
-			const _patterns =
-				_categories.length > 0
-					? __experimentalGetAllowedPatterns( rootBlock )
-					: EMPTY_ARRAY;
-			return {
-				categories: _categories,
-				patterns: _patterns,
-				patternName: _patternName,
-			};
-		},
-		[ clientId ]
-	);
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const sameCategoryPatternsWithSingleWrapper = useMemo( () => {
-		if ( categories.length === 0 || ! patterns || patterns.length === 0 ) {
-			return EMPTY_ARRAY;
-		}
-		return patterns.filter( ( pattern ) => {
-			const isCorePattern =
-				pattern.source === 'core' ||
-				( pattern.source?.startsWith( 'pattern-directory' ) &&
-					pattern.source !== 'pattern-directory/theme' );
-			return (
-				// Check if the pattern has only one top level block,
-				// otherwise we may shuffle to pattern that will not allow to continue shuffling.
-				pattern.blocks.length === 1 &&
-				// We exclude the core patterns and pattern directory patterns that are not theme patterns.
-				! isCorePattern &&
-				pattern.categories?.some( ( category ) => {
-					return categories.includes( category );
-				} ) &&
-				// Check if the pattern is not a synced pattern.
-				( pattern.syncStatus === 'unsynced' || ! pattern.id )
-			);
-		} );
-	}, [ categories, patterns ] );
-
-	if ( sameCategoryPatternsWithSingleWrapper.length < 2 ) {
-		return null;
-	}
-
-	function getNextPattern() {
-		const numberOfPatterns = sameCategoryPatternsWithSingleWrapper.length;
-		const patternIndex = sameCategoryPatternsWithSingleWrapper.findIndex(
-			( { name } ) => name === patternName
-		);
-		const nextPatternIndex =
-			patternIndex + 1 < numberOfPatterns ? patternIndex + 1 : 0;
-		return sameCategoryPatternsWithSingleWrapper[ nextPatternIndex ];
-	}
-
-	const ComponentToUse = as;
-	return (
-		<ComponentToUse
-			label={ __( 'Shuffle' ) }
-			icon={ shuffle }
-			className="block-editor-block-toolbar-shuffle"
-			onClick={ () => {
-				const nextPattern = getNextPattern();
-				nextPattern.blocks[ 0 ].attributes = {
-					...nextPattern.blocks[ 0 ].attributes,
-					metadata: {
-						...nextPattern.blocks[ 0 ].attributes.metadata,
-						categories,
-					},
-				};
-				replaceBlocks( clientId, nextPattern.blocks );
-			} }
-		/>
-	);
-}

package/src/components/block-tools/zoom-out-popover.js

@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * Internal dependencies
- */
-import { PrivateBlockPopover as BlockPopover } from '../block-popover';
-import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
-import useSelectedBlockToolProps from './use-selected-block-tool-props';
-import ZoomOutToolbar from './zoom-out-toolbar';
-
-export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
-	const { capturingClientId, isInsertionPointVisible, lastClientId } =
-		useSelectedBlockToolProps( clientId );
-
-	const popoverProps = useBlockToolbarPopoverProps( {
-		contentElement: __unstableContentRef?.current,
-		clientId,
-	} );
-
-	// Override some of the popover props for the zoom-out toolbar.
-	const props = {
-		...popoverProps,
-		placement: 'left-start',
-		flip: false,
-		shift: true,
-	};
-
-	return (
-		<BlockPopover
-			__unstableContentRef={ __unstableContentRef }
-			clientId={ capturingClientId || clientId }
-			bottomClientId={ lastClientId }
-			className={ clsx( 'zoom-out-toolbar-popover', {
-				'is-insertion-point-visible': isInsertionPointVisible,
-			} ) }
-			resize={ false }
-			{ ...props }
-		>
-			<ZoomOutToolbar
-				__unstableContentRef={ __unstableContentRef }
-				clientId={ clientId }
-			/>
-		</BlockPopover>
-	);
-}

package/src/components/block-tools/zoom-out-toolbar.js

@@ -1,135 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { dragHandle, trash } from '@wordpress/icons';
-import { Button, ToolbarButton } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import BlockDraggable from '../block-draggable';
-import BlockMover from '../block-mover';
-import Shuffle from '../block-toolbar/shuffle';
-import NavigableToolbar from '../navigable-toolbar';
-
-export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
-	const selected = useSelect(
-		( select ) => {
-			const {
-				getBlock,
-				getNextBlockClientId,
-				getPreviousBlockClientId,
-				canRemoveBlock,
-				canMoveBlock,
-				getSettings,
-			} = select( blockEditorStore );
-
-			const { __experimentalSetIsInserterOpened: setIsInserterOpened } =
-				getSettings();
-
-			const { getBlockType } = select( blocksStore );
-			const { name } = getBlock( clientId );
-			const blockType = getBlockType( name );
-			const isBlockTemplatePart =
-				blockType?.name === 'core/template-part';
-
-			let isNextBlockTemplatePart = false;
-			const nextClientId = getNextBlockClientId();
-			if ( nextClientId ) {
-				const { name: nextName } = getBlock( nextClientId );
-				const nextBlockType = getBlockType( nextName );
-				isNextBlockTemplatePart =
-					nextBlockType?.name === 'core/template-part';
-			}
-
-			let isPrevBlockTemplatePart = false;
-			const prevClientId = getPreviousBlockClientId();
-			if ( prevClientId ) {
-				const { name: prevName } = getBlock( prevClientId );
-				const prevBlockType = getBlockType( prevName );
-				isPrevBlockTemplatePart =
-					prevBlockType?.name === 'core/template-part';
-			}
-
-			return {
-				isBlockTemplatePart,
-				isNextBlockTemplatePart,
-				isPrevBlockTemplatePart,
-				canRemove: canRemoveBlock( clientId ),
-				canMove: canMoveBlock( clientId ),
-				setIsInserterOpened,
-			};
-		},
-		[ clientId ]
-	);
-
-	const {
-		isBlockTemplatePart,
-		isNextBlockTemplatePart,
-		isPrevBlockTemplatePart,
-		canRemove,
-		canMove,
-	} = selected;
-
-	const { removeBlock } = useDispatch( blockEditorStore );
-
-	const showBlockDraggable = canMove && ! isBlockTemplatePart;
-
-	return (
-		<NavigableToolbar
-			className="zoom-out-toolbar"
-			/* translators: accessibility text for the block toolbar */
-			aria-label={ __( 'Block tools' ) }
-			// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
-			variant="unstyled"
-			orientation="vertical"
-		>
-			{ showBlockDraggable && (
-				<BlockDraggable clientIds={ [ clientId ] }>
-					{ ( draggableProps ) => (
-						<Button
-							icon={ dragHandle }
-							className="block-selection-button_drag-handle zoom-out-toolbar-button"
-							label={ __( 'Drag' ) }
-							iconSize={ 24 }
-							size="compact"
-							// Should not be able to tab to drag handle as this
-							// button can only be used with a pointer device.
-							tabIndex="-1"
-							{ ...draggableProps }
-						/>
-					) }
-				</BlockDraggable>
-			) }
-			{ ! isBlockTemplatePart && (
-				<BlockMover
-					clientIds={ [ clientId ] }
-					hideDragHandle
-					isBlockMoverUpButtonDisabled={ isPrevBlockTemplatePart }
-					isBlockMoverDownButtonDisabled={ isNextBlockTemplatePart }
-					iconSize={ 24 }
-					size="compact"
-				/>
-			) }
-			{ canMove && canRemove && (
-				<Shuffle clientId={ clientId } as={ ToolbarButton } />
-			) }
-
-			{ canRemove && ! isBlockTemplatePart && (
-				<ToolbarButton
-					className="zoom-out-toolbar-button"
-					icon={ trash }
-					label={ __( 'Delete' ) }
-					onClick={ () => {
-						removeBlock( clientId );
-						__unstableContentRef.current?.focus();
-					} }
-				/>
-			) }
-		</NavigableToolbar>
-	);
-}

package/src/components/block-vertical-alignment-control/icons.js

@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-export const alignBottom = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M15 4H9v11h6V4zM4 18.5V20h16v-1.5H4z" />
-	</SVG>
-);
-
-export const alignCenter = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z" />
-	</SVG>
-);
-
-export const alignTop = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z" />
-	</SVG>
-);
-
-export const alignStretch = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M4 4L20 4L20 5.5L4 5.5L4 4ZM10 7L14 7L14 17L10 17L10 7ZM20 18.5L4 18.5L4 20L20 20L20 18.5Z" />
-	</SVG>
-);
-
-export const spaceBetween = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M7 4H17V8L7 8V4ZM7 16L17 16V20L7 20V16ZM20 11.25H4V12.75H20V11.25Z" />
-	</SVG>
-);