Skip to content

Commit

Permalink
Use new block styles control
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw committed Feb 21, 2024
1 parent ff5c1db commit ea76a86
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 55 deletions.
72 changes: 17 additions & 55 deletions packages/block-editor/src/components/block-styles/index.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,14 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { debounce, useViewportMatch } from '@wordpress/compose';
import {
Button,
__experimentalTruncate as Truncate,
Popover,
} from '@wordpress/components';
import { Popover } from '@wordpress/components';

/**
* Internal dependencies
*/
import BlockStylesControl from './block-styles-control';
import BlockStylesPreviewPanel from './preview-panel';
import useStylesForBlocks from './use-styles-for-block';

Expand All @@ -30,10 +22,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
activeStyle,
genericPreviewBlock,
className: previewClassName,
} = useStylesForBlocks( {
clientId,
onSwitch,
} );
} = useStylesForBlocks( { clientId, onSwitch } );
const [ hoveredStyle, setHoveredStyle ] = useState( null );
const isMobileViewport = useViewportMatch( 'medium', '<' );

Expand All @@ -43,58 +32,31 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {

const debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );

const onSelectStylePreview = ( style ) => {
onSelect( style );
const handleOnChange = ( style ) => {
onSelect( { name: style } );
onHoverClassName( null );
setHoveredStyle( null );
debouncedSetHoveredStyle.cancel();
};

const styleItemHandler = ( item ) => {
if ( hoveredStyle === item ) {
const hoverStyleHandler = ( style ) => {
if ( hoveredStyle === style ) {
debouncedSetHoveredStyle.cancel();
return;
}
debouncedSetHoveredStyle( item );
onHoverClassName( item?.name ?? null );

debouncedSetHoveredStyle( style );
onHoverClassName( style?.name ?? null );
};

return (
<div className="block-editor-block-styles">
<div className="block-editor-block-styles__variants">
{ stylesToRender.map( ( style ) => {
const buttonText = style.label || style.name;

return (
<Button
__next40pxDefaultSize
className={ classnames(
'block-editor-block-styles__item',
{
'is-active':
activeStyle.name === style.name,
}
) }
key={ style.name }
variant="secondary"
label={ buttonText }
onMouseEnter={ () => styleItemHandler( style ) }
onFocus={ () => styleItemHandler( style ) }
onMouseLeave={ () => styleItemHandler( null ) }
onBlur={ () => styleItemHandler( null ) }
onClick={ () => onSelectStylePreview( style ) }
aria-current={ activeStyle.name === style.name }
>
<Truncate
numberOfLines={ 1 }
className="block-editor-block-styles__item-text"
>
{ buttonText }
</Truncate>
</Button>
);
} ) }
</div>
<BlockStylesControl
blockStyles={ stylesToRender }
value={ activeStyle }
onChange={ handleOnChange }
onHover={ hoverStyleHandler }
/>
{ hoveredStyle && ! isMobileViewport && (
<Popover
placement="left-start"
Expand All @@ -103,7 +65,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
>
<div
className="block-editor-block-styles__preview-panel"
onMouseLeave={ () => styleItemHandler( null ) }
onMouseLeave={ () => hoverStyleHandler( null ) }
>
<BlockStylesPreviewPanel
activeStyle={ activeStyle }
Expand Down
4 changes: 4 additions & 0 deletions packages/block-editor/src/components/block-styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
}
}

.block-editor-block-styles__popover {
z-index: z-index(".components-popover");
}

// To prevent overflow in the preview container,
// ensure that block contents' margin and padding
// do not add to the block container's width.
Expand Down

0 comments on commit ea76a86

Please sign in to comment.