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

Add block transforms preview #27861

Merged
merged 1 commit into from Dec 23, 2020
Merged

Add block transforms preview #27861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
29 changes: 25 additions & 4 deletions packages/block-editor/src/components/block-switcher/block-styles-menu.js
View file
Open in desktop
Expand Up @@ -4,28 +4,49 @@
import { __ } from '@wordpress/i18n';
import { MenuGroup } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { cloneBlock, getBlockFromExample } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import BlockStyles from '../block-styles';
import PreviewBlockPopover from './preview-block-popover';

export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
export default function BlockStylesMenu( {
hoveredBlock: { name, clientId },
onSwitch,
} ) {
const [ hoveredClassName, setHoveredClassName ] = useState();
const blockType = useSelect(
( select ) => select( 'core/blocks' ).getBlockType( name ),
[ name ]
);

return (
<MenuGroup
label={ __( 'Styles' ) }
className="block-editor-block-switcher__styles__menugroup"
>
{ hoveredClassName && (
<PreviewBlockPopover
hoveredBlock={ hoveredBlock }
hoveredClassName={ hoveredClassName }
blocks={
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Block styles can be applied only when a single block is selected. It's only changing the CSS class name applied so it feels like blockType.example shouldn't be needed here. However, it looks like some sort of design decision from the past. Maybe to account for the case when a block has not enough or too much content 🤷🏻‍♂️

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I didn't look into it deeper for now, but it looks like it's been like this for the reason you mentioned (existing content..)

blockType.example
? getBlockFromExample( blockType.name, {
attributes: {
...blockType.example.attributes,
className: hoveredClassName,
},
innerBlocks: blockType.example.innerBlocks,
} )
: cloneBlock( blockType, {
className: hoveredClassName,
} )
}
/>
) }
<BlockStyles
clientId={ hoveredBlock.clientId }
clientId={ clientId }
onSwitch={ onSwitch }
onHoverClassName={ setHoveredClassName }
itemRole="menuitem"
Expand Down
26 changes: 25 additions & 1 deletion packages/block-editor/src/components/block-switcher/block-transformations-menu.js
View file
Open in desktop
Expand Up @@ -3,20 +3,38 @@
*/
import { __ } from '@wordpress/i18n';
import { MenuGroup, MenuItem } from '@wordpress/components';
import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
import {
getBlockMenuDefaultClassName,
switchToBlockType,
} from '@wordpress/blocks';
import { useState } from '@wordpress/element';

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

const BlockTransformationsMenu = ( {
className,
possibleBlockTransformations,
onSelect,
blocks,
} ) => {
const [
hoveredTransformItemName,
setHoveredTransformItemName,
] = useState();
return (
<MenuGroup label={ __( 'Transform to' ) } className={ className }>
{ hoveredTransformItemName && (
<PreviewBlockPopover
blocks={ switchToBlockType(
blocks,
hoveredTransformItemName
) }
/>
) }
{ possibleBlockTransformations.map( ( item ) => {
const { name, icon, title, isDisabled } = item;
return (
Expand All @@ -28,6 +46,12 @@ const BlockTransformationsMenu = ( {
onSelect( name );
} }
disabled={ isDisabled }
onMouseLeave={ () =>
setHoveredTransformItemName( null )
}
onMouseEnter={ () =>
setHoveredTransformItemName( name )
}
>
<BlockIcon icon={ icon } showColors />
{ title }
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-switcher/index.js
View file
Open in desktop
Expand Up @@ -129,6 +129,7 @@ const BlockSwitcher = ( { clientIds } ) => {
possibleBlockTransformations={
possibleBlockTransformations
}
blocks={ blocks }
onSelect={ ( name ) => {
onTransform( name );
onClose();
Expand Down
32 changes: 3 additions & 29 deletions packages/block-editor/src/components/block-switcher/preview-block-popover.js
View file
Open in desktop
Expand Up @@ -3,21 +3,13 @@
*/
import { __ } from '@wordpress/i18n';
import { Popover } from '@wordpress/components';
import {
getBlockType,
cloneBlock,
getBlockFromExample,
} from '@wordpress/blocks';

/**
* Internal dependencies
*/
import BlockPreview from '../block-preview';

export default function PreviewBlockPopover( {
hoveredBlock,
hoveredClassName,
} ) {
const hoveredBlockType = getBlockType( hoveredBlock.name );
export default function PreviewBlockPopover( { blocks } ) {
return (
<div className="block-editor-block-switcher__popover__preview__parent">
<div className="block-editor-block-switcher__popover__preview__container">
Expand All @@ -30,25 +22,7 @@ export default function PreviewBlockPopover( {
<div className="block-editor-block-switcher__preview-title">
{ __( 'Preview' ) }
</div>
<BlockPreview
viewportWidth={ 500 }
blocks={
hoveredBlockType.example
? getBlockFromExample( hoveredBlock.name, {
attributes: {
...hoveredBlockType.example
.attributes,
className: hoveredClassName,
},
innerBlocks:
hoveredBlockType.example
.innerBlocks,
} )
: cloneBlock( hoveredBlock, {
className: hoveredClassName,
} )
}
/>
<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
</div>
</Popover>
</div>
Expand Down