diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js index 951c6d13c52f4..8531bc5addef9 100644 --- a/packages/block-editor/src/components/block-styles/index.js +++ b/packages/block-editor/src/components/block-styles/index.js @@ -6,59 +6,29 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; -import { debounce, useViewportMatch } from '@wordpress/compose'; import { Button, __experimentalTruncate as Truncate, - Popover, } from '@wordpress/components'; /** * Internal dependencies */ -import BlockStylesPreviewPanel from './preview-panel'; import useStylesForBlocks from './use-styles-for-block'; const noop = () => {}; // Block Styles component for the Settings Sidebar. -function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) { - const { - onSelect, - stylesToRender, - activeStyle, - genericPreviewBlock, - className: previewClassName, - } = useStylesForBlocks( { +function BlockStyles( { clientId, onSwitch = noop } ) { + const { onSelect, stylesToRender, activeStyle } = useStylesForBlocks( { clientId, onSwitch, } ); - const [ hoveredStyle, setHoveredStyle ] = useState( null ); - const isMobileViewport = useViewportMatch( 'medium', '<' ); if ( ! stylesToRender || stylesToRender.length === 0 ) { return null; } - const debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 ); - - const onSelectStylePreview = ( style ) => { - onSelect( style ); - onHoverClassName( null ); - setHoveredStyle( null ); - debouncedSetHoveredStyle.cancel(); - }; - - const styleItemHandler = ( item ) => { - if ( hoveredStyle === item ) { - debouncedSetHoveredStyle.cancel(); - return; - } - debouncedSetHoveredStyle( item ); - onHoverClassName( item?.name ?? null ); - }; - return (
@@ -78,11 +48,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) { key={ style.name } variant="secondary" label={ buttonText } - onMouseEnter={ () => styleItemHandler( style ) } - onFocus={ () => styleItemHandler( style ) } - onMouseLeave={ () => styleItemHandler( null ) } - onBlur={ () => styleItemHandler( null ) } - onClick={ () => onSelectStylePreview( style ) } + onClick={ () => onSelect( style ) } aria-current={ activeStyle.name === style.name } > - { hoveredStyle && ! isMobileViewport && ( - -
styleItemHandler( null ) } - > - -
- - ) }
); } diff --git a/packages/block-editor/src/components/block-styles/preview-panel.js b/packages/block-editor/src/components/block-styles/preview-panel.js deleted file mode 100644 index 2693e175ba3fd..0000000000000 --- a/packages/block-editor/src/components/block-styles/preview-panel.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * WordPress dependencies - */ -import { getBlockType } from '@wordpress/blocks'; -import { useMemo } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import InserterPreviewPanel from '../inserter/preview-panel'; -import { replaceActiveStyle } from './utils'; - -export default function BlockStylesPreviewPanel( { - genericPreviewBlock, - style, - className, - activeStyle, -} ) { - const example = getBlockType( genericPreviewBlock.name )?.example; - const styleClassName = replaceActiveStyle( className, activeStyle, style ); - const previewBlocks = useMemo( () => { - return { - ...genericPreviewBlock, - title: style.label || style.name, - description: style.description, - initialAttributes: { - ...genericPreviewBlock.attributes, - className: - styleClassName + - ' block-editor-block-styles__block-preview-container', - }, - example, - }; - }, [ genericPreviewBlock, styleClassName ] ); - - return ; -} diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss index a83adb25c6ae1..971e1da4d23e3 100644 --- a/packages/block-editor/src/components/block-styles/style.scss +++ b/packages/block-editor/src/components/block-styles/style.scss @@ -1,18 +1,3 @@ -.block-editor-block-styles__preview-panel { - display: none; - // Same layer as the sidebar from which it's triggered. - z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}"); - - // Only show in narrow widths. - @include break-medium() { - display: block; - } - - .block-editor-block-icon { - display: none; - } -} - .block-editor-block-styles__variants { display: flex; flex-wrap: wrap; @@ -57,11 +42,3 @@ text-align-last: center; } } - -// To prevent overflow in the preview container, -// ensure that block contents' margin and padding -// do not add to the block container's width. -.block-editor-block-styles__block-preview-container, -.block-editor-block-styles__block-preview-container * { - box-sizing: border-box !important; -} diff --git a/packages/block-editor/src/components/block-styles/use-styles-for-block.js b/packages/block-editor/src/components/block-styles/use-styles-for-block.js index 6d73dca557b05..9844f25f7e263 100644 --- a/packages/block-editor/src/components/block-styles/use-styles-for-block.js +++ b/packages/block-editor/src/components/block-styles/use-styles-for-block.js @@ -2,13 +2,7 @@ * WordPress dependencies */ import { useDispatch, useSelect } from '@wordpress/data'; -import { - cloneBlock, - getBlockType, - getBlockFromExample, - store as blocksStore, -} from '@wordpress/blocks'; -import { useMemo } from '@wordpress/element'; +import { getBlockType, store as blocksStore } from '@wordpress/blocks'; /** * Internal dependencies @@ -16,30 +10,6 @@ import { useMemo } from '@wordpress/element'; import { getActiveStyle, getRenderedStyles, replaceActiveStyle } from './utils'; import { store as blockEditorStore } from '../../store'; -/** - * - * @param {WPBlock} block Block object. - * @param {WPBlockType} type Block type settings. - * @return {WPBlock} A generic block ready for styles preview. - */ -function useGenericPreviewBlock( block, type ) { - return useMemo( () => { - const example = type?.example; - const blockName = type?.name; - - if ( example && blockName ) { - return getBlockFromExample( blockName, { - attributes: example.attributes, - innerBlocks: example.innerBlocks, - } ); - } - - if ( block ) { - return cloneBlock( block ); - } - }, [ type?.example ? block?.name : block, type ] ); -} - /** * @typedef useStylesForBlocksArguments * @property {string} clientId Block client ID. @@ -47,9 +17,13 @@ function useGenericPreviewBlock( block, type ) { */ /** + * Returns the collection of available block styles, the currently active + * block style, as well as an onSelect handler to update block attributes + * with the selected block style's className. * * @param {useStylesForBlocksArguments} useStylesForBlocks arguments. - * @return {Object} Results of the select methods. + * + * @return {Object} Results of the select methods. */ export default function useStylesForBlocks( { clientId, onSwitch } ) { const selector = ( select ) => { @@ -69,13 +43,10 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) { className: block.attributes.className || '', }; }; - const { styles, block, blockType, className } = useSelect( selector, [ - clientId, - ] ); + const { styles, className } = useSelect( selector, [ clientId ] ); const { updateBlockAttributes } = useDispatch( blockEditorStore ); const stylesToRender = getRenderedStyles( styles ); const activeStyle = getActiveStyle( stylesToRender, className ); - const genericPreviewBlock = useGenericPreviewBlock( block, blockType ); const onSelect = ( style ) => { const styleClassName = replaceActiveStyle( @@ -93,7 +64,5 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) { onSelect, stylesToRender, activeStyle, - genericPreviewBlock, - className, }; }