diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js index 3c72030dafaf35..30038522df0edb 100644 --- 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 new file mode 100644 index 00000000000000..e30a347005d774 --- /dev/null +++ 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 index a66b1a4de81ad2..9e26943e22ea7c 100644 --- 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 ( - - { cutMenuItemLabel } - - ); -} - 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( { ) } - { canDuplicate && ( { __( '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 index 4ebc20ab201983..e6fa7a4414f6c8 100644 --- 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 } > diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index b19411893b86ca..e19e350f959b26 100644 --- 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 = ( {
-

{ __( 'Expand on click' ) }

+

{ __( 'Enlarge on click' ) }

{ __( 'Scales the image with a lightbox effect' ) }