From 2c9dda9b29591ab10d9d13e4a3f8368bca051593 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 8 Nov 2023 16:53:42 +0200 Subject: [PATCH 1/3] Highlight priority transforms on multi-select --- .../block-transformations-menu.js | 2 +- .../src/components/block-switcher/index.js | 57 ++++++++++++++++++- .../src/components/block-toolbar/index.js | 10 +++- .../block-library/src/heading/transforms.js | 1 - 4 files changed, 66 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/block-transformations-menu.js b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js index 033201d7facadb..b7b535583b3373 100644 --- a/packages/block-editor/src/components/block-switcher/block-transformations-menu.js +++ b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js @@ -26,7 +26,7 @@ import BlockVariationTransformations from './block-variation-transformations'; * @param {Object[]} possibleBlockTransformations The available block transformations. * @return {Record} The grouped block transformations. */ -function useGroupedTransforms( possibleBlockTransformations ) { +export function useGroupedTransforms( possibleBlockTransformations ) { const priorityContentTranformationBlocks = { 'core/paragraph': 1, 'core/heading': 2, diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 0960dc87eaa499..e046d4e1de1118 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -23,7 +23,10 @@ import { copy } from '@wordpress/icons'; import { store as blockEditorStore } from '../../store'; import useBlockDisplayInformation from '../use-block-display-information'; import BlockIcon from '../block-icon'; -import BlockTransformationsMenu from './block-transformations-menu'; +import { + useGroupedTransforms, + default as BlockTransformationsMenu, +} from './block-transformations-menu'; import { useBlockVariationTransforms } from './block-variation-transformations'; import BlockStylesMenu from './block-styles-menu'; import PatternTransformationsMenu from './pattern-transformations-menu'; @@ -289,4 +292,56 @@ export const BlockSwitcher = ( { clientIds } ) => { ); }; +export function BlockPriorityTransforms( { clientIds } ) { + const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore ); + const { possibleBlockTransformations, blocks } = useSelect( + ( select ) => { + const { + getBlockRootClientId, + getBlockTransformItems, + getBlocksByClientId, + } = select( blockEditorStore ); + const rootClientId = getBlockRootClientId( + Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds + ); + const _blocks = getBlocksByClientId( clientIds ); + return { + possibleBlockTransformations: getBlockTransformItems( + _blocks, + rootClientId + ), + blocks: _blocks, + }; + }, + [ clientIds ] + ); + const { priorityTextTransformations } = useGroupedTransforms( + possibleBlockTransformations + ); + function selectForMultipleBlocks( insertedBlocks ) { + if ( insertedBlocks.length > 1 ) { + multiSelect( + insertedBlocks[ 0 ].clientId, + insertedBlocks[ insertedBlocks.length - 1 ].clientId + ); + } + } + function onBlockTransform( name ) { + const newBlocks = switchToBlockType( blocks, name ); + replaceBlocks( clientIds, newBlocks ); + selectForMultipleBlocks( newBlocks ); + } + return priorityTextTransformations.map( ( item ) => ( + } + onClick={ ( event ) => { + event.preventDefault(); + onBlockTransform( item.name ); + } } + /> + ) ); +} + export default BlockSwitcher; diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 963cd8a475328a..6f698050cb941f 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -22,7 +22,10 @@ import { ToolbarGroup } from '@wordpress/components'; */ import BlockMover from '../block-mover'; import BlockParentSelector from '../block-parent-selector'; -import BlockSwitcher from '../block-switcher'; +import { + default as BlockSwitcher, + BlockPriorityTransforms, +} from '../block-switcher'; import BlockControls from '../block-controls'; import __unstableBlockToolbarLastItem from './block-toolbar-last-item'; import BlockSettingsMenu from '../block-settings-menu'; @@ -118,6 +121,11 @@ const BlockToolbar = ( { hideDragHandle } ) => { ) } + { isMultiToolbar && ( + + + + ) } { shouldShowVisualToolbar && isMultiToolbar && ( ) } diff --git a/packages/block-library/src/heading/transforms.js b/packages/block-library/src/heading/transforms.js index a4db7884620963..8892e5cd619f2c 100644 --- a/packages/block-library/src/heading/transforms.js +++ b/packages/block-library/src/heading/transforms.js @@ -12,7 +12,6 @@ const transforms = { from: [ { type: 'block', - isMultiBlock: true, blocks: [ 'core/paragraph' ], transform: ( attributes ) => attributes.map( ( { content, anchor, align: textAlign } ) => From baca66da6e6e97bed7c5e5172580cd74435369c7 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 8 Nov 2023 17:04:26 +0200 Subject: [PATCH 2/3] Remove group if empty --- .../src/components/block-switcher/index.js | 31 ++++++++++++------- .../src/components/block-toolbar/index.js | 4 +-- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index e046d4e1de1118..bade12b2168cf9 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -331,17 +331,26 @@ export function BlockPriorityTransforms( { clientIds } ) { replaceBlocks( clientIds, newBlocks ); selectForMultipleBlocks( newBlocks ); } - return priorityTextTransformations.map( ( item ) => ( - } - onClick={ ( event ) => { - event.preventDefault(); - onBlockTransform( item.name ); - } } - /> - ) ); + + if ( ! priorityTextTransformations.length ) { + return null; + } + + return ( + + { priorityTextTransformations.map( ( item ) => ( + } + onClick={ ( event ) => { + event.preventDefault(); + onBlockTransform( item.name ); + } } + /> + ) ) } + + ); } export default BlockSwitcher; diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 6f698050cb941f..440571b215d45d 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -122,9 +122,7 @@ const BlockToolbar = ( { hideDragHandle } ) => { ) } { isMultiToolbar && ( - - - + ) } { shouldShowVisualToolbar && isMultiToolbar && ( From b1db9d6bd055d51615bbb6702ee8d31a501e341d Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 8 Nov 2023 17:09:12 +0200 Subject: [PATCH 3/3] Only add for same type selection --- packages/block-editor/src/components/block-switcher/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index bade12b2168cf9..1a09f6ea44be6f 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -336,6 +336,11 @@ export function BlockPriorityTransforms( { clientIds } ) { return null; } + // Only show the priority transforms if all blocks are of the same type. + if ( new Set( blocks.map( ( { name } ) => name ) ).size !== 1 ) { + return; + } + return ( { priorityTextTransformations.map( ( item ) => (