Merge branch 'trunk' into fix-68550/add-cut-block-action

yogeshbhutkar · Jan 9, 2025 · be5b4c5 · be5b4c5
2 parents 16440f1 + f91339e
commit be5b4c5
Show file tree

Hide file tree

Showing 20 changed files with 238 additions and 132 deletions.
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
@@ -11,7 +11,6 @@ import {
 /**
  * Internal dependencies
  */
-import { useNotifyCopy } from '../../utils/use-notify-copy';
 import usePasteStyles from '../use-paste-styles';
 import { store as blockEditorStore } from '../../store';
 
@@ -20,9 +19,6 @@ export default function BlockActions( {
 	children,
 	__experimentalUpdateSelection: updateSelection,
 } ) {
-	const notifyCopy = useNotifyCopy();
-	const pasteStyles = usePasteStyles();
-
 	const { getDefaultBlockName, getGroupingBlockName } =
 		useSelect( blocksStore );
 	const selected = useSelect(
@@ -79,6 +75,8 @@ export default function BlockActions( {
 		flashBlock,
 	} = useDispatch( blockEditorStore );
 
+	const pasteStyles = usePasteStyles();
+
 	return children( {
 		canCopyStyles,
 		canDuplicate,
@@ -130,14 +128,6 @@ export default function BlockActions( {
 			if ( clientIds.length === 1 ) {
 				flashBlock( clientIds[ 0 ] );
 			}
-			notifyCopy( 'copy', clientIds );
-		},
-		onCut() {
-			if ( clientIds.length === 1 ) {
-				flashBlock( clientIds[ 0 ] );
-			}
-			notifyCopy( 'cut', clientIds );
-			removeBlocks( clientIds, updateSelection );
 		},
 		async onPasteStyles() {
 			await pasteStyles( getBlocksByClientId( clientIds ) );

diff --git a/packages/block-editor/src/components/block-icon/stories/index.story.js b/packages/block-editor/src/components/block-icon/stories/index.story.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { box, button, cog, paragraph } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../';
+
+const meta = {
+	title: 'BlockEditor/BlockIcon',
+	component: BlockIcon,
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'The `BlockIcon` component allows to display an icon for a block.',
+			},
+			canvas: { sourceState: 'shown' },
+		},
+	},
+	argTypes: {
+		icon: {
+			control: 'select',
+			options: [ 'paragraph', 'cog', 'box', 'button' ],
+			mapping: {
+				paragraph,
+				cog,
+				box,
+				button,
+			},
+			description:
+				'The icon of the block. This can be any of [WordPress Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.',
+			table: {
+				type: { summary: 'string | object' },
+			},
+		},
+		showColors: {
+			control: 'boolean',
+			description: 'Whether to show background and foreground colors.',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		className: {
+			control: 'text',
+			description: 'Additional CSS class for the icon.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		context: {
+			control: 'text',
+			description: 'Context where the icon is being used.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		icon: 'paragraph',
+	},
+};
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -26,17 +26,40 @@ import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import BlockParentSelectorMenuItem from './block-parent-selector-menu-item';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	placement: 'bottom-start',
 };
 
-function CopyMenuItem( { clientIds, onCopy, label, shortcut } ) {
+function CopyMenuItem( {
+	clientIds,
+	onEvent,
+	label,
+	shortcut,
+	eventType = 'copy',
+	__experimentalUpdateSelection: updateSelection = false,
+} ) {
 	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const { removeBlocks } = useDispatch( blockEditorStore );
+	const notifyCopy = useNotifyCopy();
 	const ref = useCopyToClipboard(
 		() => serialize( getBlocksByClientId( clientIds ) ),
-		onCopy
+		() => {
+			switch ( eventType ) {
+				case 'copy':
+				case 'cut':
+					onEvent?.();
+					notifyCopy( eventType, clientIds );
+					if ( eventType === 'cut' ) {
+						removeBlocks( clientIds, updateSelection );
+					}
+					break;
+				default:
+					notifyCopy( eventType, clientIds );
+			}
+		}
 	);
 	const copyMenuItemLabel = label ? label : __( 'Copy' );
 	return (
@@ -46,20 +69,6 @@ function CopyMenuItem( { clientIds, onCopy, label, shortcut } ) {
 	);
 }
 
-function CutMenuItem( { clientIds, onCut, label, shortcut } ) {
-	const { getBlocksByClientId } = useSelect( blockEditorStore );
-	const ref = useCopyToClipboard(
-		() => serialize( getBlocksByClientId( clientIds ) ),
-		onCut
-	);
-	const cutMenuItemLabel = label ? label : __( 'Cut' );
-	return (
-		<MenuItem ref={ ref } shortcut={ shortcut }>
-			{ cutMenuItemLabel }
-		</MenuItem>
-	);
-}
-
 export function BlockSettingsDropdown( {
 	block,
 	clientIds,
@@ -218,7 +227,6 @@ export function BlockSettingsDropdown( {
 				onInsertBefore,
 				onRemove,
 				onCopy,
-				onCut,
 				onPasteStyles,
 			} ) => {
 				// It is possible that some plugins register fills for this menu
@@ -267,17 +275,22 @@ export function BlockSettingsDropdown( {
 									) }
 									<CopyMenuItem
 										clientIds={ clientIds }
-										onCopy={ onCopy }
+										onEvent={ onCopy }
 										shortcut={ displayShortcut.primary(
 											'c'
 										) }
 									/>
-									<CutMenuItem
+									<CopyMenuItem
 										clientIds={ clientIds }
-										onCut={ onCut }
+										onEvent={ onCopy }
+										label={ __( 'Cut' ) }
+										eventType="cut"
 										shortcut={ displayShortcut.primary(
 											'x'
 										) }
+										__experimentalUpdateSelection={
+											! __experimentalSelectBlock
+										}
 									/>
 									{ canDuplicate && (
 										<MenuItem
@@ -325,8 +338,9 @@ export function BlockSettingsDropdown( {
 									<MenuGroup>
 										<CopyMenuItem
 											clientIds={ clientIds }
-											onCopy={ onCopy }
+											onEvent={ onCopy }
 											label={ __( 'Copy styles' ) }
+											eventType="copyStyles"
 										/>
 										<MenuItem onClick={ onPasteStyles }>
 											{ __( 'Paste styles' ) }

diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js
@@ -61,14 +61,14 @@ export default function ImageSettingsPanel( {
 					// "RESET" button ONLY when the user has explicitly set a value in the
 					// Global Styles.
 					hasValue={ () => !! value?.lightbox }
-					label={ __( 'Expand on click' ) }
+					label={ __( 'Enlarge on click' ) }
 					onDeselect={ resetLightbox }
 					isShownByDefault
 					panelId={ panelId }
 				>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Expand on click' ) }
+						label={ __( 'Enlarge on click' ) }
 						checked={ lightboxChecked }
 						onChange={ onChangeLightbox }
 					/>

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -47,6 +47,7 @@ const InsertFromURLPopover = ( {
 			<InputControl
 				__next40pxDefaultSize
 				label={ __( 'URL' ) }
+				type="url"
 				hideLabelFromVision
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }

diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -265,14 +265,14 @@ const ImageURLInputUI = ( {
 				<div className="block-editor-url-popover__expand-on-click">
 					<Icon icon={ fullscreen } />
 					<div className="text">
-						<p>{ __( 'Expand on click' ) }</p>
+						<p>{ __( 'Enlarge on click' ) }</p>
 						<p className="description">
 							{ __( 'Scales the image with a lightbox effect' ) }
 						</p>
 					</div>
 					<Button
 						icon={ linkOff }
-						label={ __( 'Disable expand on click' ) }
+						label={ __( 'Disable enlarge on click' ) }
 						onClick={ () => {
 							onSetLightbox?.( false );
 						} }
@@ -372,7 +372,7 @@ const ImageURLInputUI = ( {
 											stopEditLink();
 										} }
 									>
-										{ __( 'Expand on click' ) }
+										{ __( 'Enlarge on click' ) }
 									</MenuItem>
 								) }
 							</NavigableMenu>

diff --git a/packages/block-editor/src/utils/use-notify-copy.js b/packages/block-editor/src/utils/use-notify-copy.js
@@ -17,47 +17,55 @@ export function useNotifyCopy() {
 	const { getBlockType } = useSelect( blocksStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
-	return useCallback( ( eventType, selectedBlockClientIds ) => {
-		let notice = '';
-		if ( selectedBlockClientIds.length === 1 ) {
-			const clientId = selectedBlockClientIds[ 0 ];
-			const title = getBlockType( getBlockName( clientId ) )?.title;
-			notice =
-				eventType === 'copy'
-					? sprintf(
-							// Translators: Name of the block being copied, e.g. "Paragraph".
-							__( 'Copied "%s" to clipboard.' ),
-							title
-					  )
-					: sprintf(
-							// Translators: Name of the block being cut, e.g. "Paragraph".
-							__( 'Moved "%s" to clipboard.' ),
-							title
-					  );
-		} else {
-			notice =
-				eventType === 'copy'
-					? sprintf(
-							// Translators: %d: Number of blocks being copied.
-							_n(
-								'Copied %d block to clipboard.',
-								'Copied %d blocks to clipboard.',
-								selectedBlockClientIds.length
-							),
-							selectedBlockClientIds.length
-					  )
-					: sprintf(
-							// Translators: %d: Number of blocks being cut.
-							_n(
-								'Moved %d block to clipboard.',
-								'Moved %d blocks to clipboard.',
-								selectedBlockClientIds.length
-							),
-							selectedBlockClientIds.length
-					  );
-		}
-		createSuccessNotice( notice, {
-			type: 'snackbar',
-		} );
-	}, [] );
+	return useCallback(
+		( eventType, selectedBlockClientIds ) => {
+			let notice = '';
+
+			if ( eventType === 'copyStyles' ) {
+				notice = __( 'Styles copied to clipboard.' );
+			} else if ( selectedBlockClientIds.length === 1 ) {
+				const clientId = selectedBlockClientIds[ 0 ];
+				const title = getBlockType( getBlockName( clientId ) )?.title;
+
+				if ( eventType === 'copy' ) {
+					notice = sprintf(
+						// Translators: Name of the block being copied, e.g. "Paragraph".
+						__( 'Copied "%s" to clipboard.' ),
+						title
+					);
+				} else {
+					notice = sprintf(
+						// Translators: Name of the block being cut, e.g. "Paragraph".
+						__( 'Moved "%s" to clipboard.' ),
+						title
+					);
+				}
+			} else if ( eventType === 'copy' ) {
+				notice = sprintf(
+					// Translators: %d: Number of blocks being copied.
+					_n(
+						'Copied %d block to clipboard.',
+						'Copied %d blocks to clipboard.',
+						selectedBlockClientIds.length
+					),
+					selectedBlockClientIds.length
+				);
+			} else {
+				notice = sprintf(
+					// Translators: %d: Number of blocks being moved.
+					_n(
+						'Moved %d block to clipboard.',
+						'Moved %d blocks to clipboard.',
+						selectedBlockClientIds.length
+					),
+					selectedBlockClientIds.length
+				);
+			}
+
+			createSuccessNotice( notice, {
+				type: 'snackbar',
+			} );
+		},
+		[ createSuccessNotice, getBlockName, getBlockType ]
+	);
 }
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -255,11 +255,12 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			<div { ...blockProps }>
 				{ displayPreviewInEditor && (
 					<ResizableBox
-						size={ { height: previewHeight } }
+						size={ { height: previewHeight, width: '100%' } }
 						minHeight={ MIN_PREVIEW_HEIGHT }
 						maxHeight={ MAX_PREVIEW_HEIGHT }
-						minWidth="100%"
-						grid={ [ 10, 10 ] }
+						// The horizontal grid value must be 1 or else the width may snap during a
+						// resize even though only vertical resizing is enabled.
+						grid={ [ 1, 10 ] }
 						enable={ {
 							top: false,
 							right: false,