Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Block Editor]: Better block transforms organization #44072

Merged
merged 3 commits into from
Sep 12, 2022
Merged

[Block Editor]: Better block transforms organization #44072

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
54d4f63
[Block Editor]: Better block transforms organization
ntsekouras Sep 12, 2022
c2e1718
add different MenuGroup if both content transforms exist
ntsekouras Sep 12, 2022
330397a
preserve same menu group css class
ntsekouras Sep 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 127 additions & 33 deletions packages/block-editor/src/components/block-switcher/block-transformations-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,61 @@ import {
getBlockMenuDefaultClassName,
switchToBlockType,
} from '@wordpress/blocks';
import { useState } from '@wordpress/element';
import { useState, useMemo } from '@wordpress/element';

/**
* Internal dependencies
*/
import BlockIcon from '../block-icon';
import PreviewBlockPopover from './preview-block-popover';

/**
* Helper hook to group transformations to display them in a specific order in the UI.
* For now we group only priority content driven transformations(ex. paragraph -> heading).
*
* Later on we could also group 'layout' transformations(ex. paragraph -> group) and
* display them in different sections.
*
* @param {Object[]} possibleBlockTransformations The available block transformations.
* @return {Record<string, Object[]>} The grouped block transformations.
*/
function useGroupedTransforms( possibleBlockTransformations ) {
const priorityContentTranformationBlocks = {
'core/paragraph': 1,
'core/heading': 2,
'core/list': 3,
'core/quote': 4,
};
const transformations = useMemo( () => {
const priorityTextTranformsNames = Object.keys(
priorityContentTranformationBlocks
);
return possibleBlockTransformations.reduce(
( accumulator, item ) => {
const { name } = item;
if ( priorityTextTranformsNames.includes( name ) ) {
accumulator.priorityTextTransformations.push( item );
} else {
accumulator.restTransformations.push( item );
}
return accumulator;
},
{ priorityTextTransformations: [], restTransformations: [] }
);
}, [ possibleBlockTransformations ] );

// Order the priority text transformations.
transformations.priorityTextTransformations.sort(
( { name: currentName }, { name: nextName } ) => {
return priorityContentTranformationBlocks[ currentName ] <
priorityContentTranformationBlocks[ nextName ]
? -1
: 1;
}
);
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
return transformations;
}

const BlockTransformationsMenu = ( {
className,
possibleBlockTransformations,
Expand All @@ -23,41 +70,88 @@ const BlockTransformationsMenu = ( {
} ) => {
const [ hoveredTransformItemName, setHoveredTransformItemName ] =
useState();

const { priorityTextTransformations, restTransformations } =
useGroupedTransforms( possibleBlockTransformations );
// We have to check if both content transformations(priority and rest) are set
// in order to create a separate MenuGroup for them.
const hasBothContentTransformations =
priorityTextTransformations.length && restTransformations.length;
const restTransformItems = !! restTransformations.length && (
<RestTransformationItems
restTransformations={ restTransformations }
onSelect={ onSelect }
setHoveredTransformItemName={ setHoveredTransformItemName }
/>
);
return (
<MenuGroup label={ __( 'Transform to' ) } className={ className }>
{ hoveredTransformItemName && (
<PreviewBlockPopover
blocks={ switchToBlockType(
blocks,
hoveredTransformItemName
) }
/>
) }
{ possibleBlockTransformations.map( ( item ) => {
const { name, icon, title, isDisabled } = item;
return (
<MenuItem
key={ name }
className={ getBlockMenuDefaultClassName( name ) }
onClick={ ( event ) => {
event.preventDefault();
onSelect( name );
} }
disabled={ isDisabled }
onMouseLeave={ () =>
setHoveredTransformItemName( null )
<>
<MenuGroup label={ __( 'Transform to' ) } className={ className }>
{ hoveredTransformItemName && (
<PreviewBlockPopover
blocks={ switchToBlockType(
blocks,
hoveredTransformItemName
) }
/>
) }
{ priorityTextTransformations.map( ( item ) => (
<BlockTranformationItem
key={ item.name }
item={ item }
onSelect={ onSelect }
setHoveredTransformItemName={
setHoveredTransformItemName
}
onMouseEnter={ () =>
setHoveredTransformItemName( name )
}
>
<BlockIcon icon={ icon } showColors />
{ title }
</MenuItem>
);
} ) }
</MenuGroup>
/>
) ) }
{ ! hasBothContentTransformations && restTransformItems }
</MenuGroup>
{ !! hasBothContentTransformations && (
<MenuGroup className={ className }>
{ restTransformItems }
</MenuGroup>
) }
</>
);
};

function RestTransformationItems( {
restTransformations,
onSelect,
setHoveredTransformItemName,
} ) {
return restTransformations.map( ( item ) => (
<BlockTranformationItem
key={ item.name }
item={ item }
onSelect={ onSelect }
setHoveredTransformItemName={ setHoveredTransformItemName }
/>
) );
}

function BlockTranformationItem( {
item,
onSelect,
setHoveredTransformItemName,
} ) {
const { name, icon, title, isDisabled } = item;
return (
<MenuItem
className={ getBlockMenuDefaultClassName( name ) }
onClick={ ( event ) => {
event.preventDefault();
onSelect( name );
} }
disabled={ isDisabled }
onMouseLeave={ () => setHoveredTransformItemName( null ) }
onMouseEnter={ () => setHoveredTransformItemName( name ) }
>
<BlockIcon icon={ icon } showColors />
{ title }
</MenuItem>
);
}

export default BlockTransformationsMenu;