Skip to content

Make inspector style transform previews consistent with toolbar transforms #75989

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

Merged
tellthemachines merged 2 commits into from
Mar 2, 2026
Merged

Make inspector style transform previews consistent with toolbar transforms #75989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee9618a
Make inspector style transform previews consistent with toolbar trans…
tellthemachines Feb 27, 2026
73353f8
delete unused component and styles
tellthemachines Feb 27, 2026
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
59 changes: 35 additions & 24 deletions packages/block-editor/src/components/block-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,11 @@ import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { debounce, useViewportMatch } from '@wordpress/compose';
import { useState, useMemo } from '@wordpress/element';
import { debounce } from '@wordpress/compose';
import {
Button,
__experimentalTruncate as Truncate,
Popover,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
Expand All @@ -20,10 +19,10 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import BlockStylesPreviewPanel from './preview-panel';

@ramonjd ramonjd Feb 27, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think this file is now no longer used and can be deleted, possibly the accompanying styles in .block-editor-block-styles__preview-panel

@tellthemachines tellthemachines Feb 27, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yeah this should be safe to delete because it's not exported outside of the block styles component, well spotted!

import PreviewBlockPopover from '../block-switcher/preview-block-popover';
import useStylesForBlocks from './use-styles-for-block';
import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
import { getDefaultStyle } from './utils';
import { getDefaultStyle, replaceActiveStyle } from './utils';

const noop = () => {};

Expand All @@ -34,15 +33,35 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
stylesToRender,
activeStyle,
genericPreviewBlock,
className: previewClassName,
className,
} = useStylesForBlocks( {
clientId,
onSwitch,
} );
const [ hoveredStyle, setHoveredStyle ] = useState( null );
const isMobileViewport = useViewportMatch( 'medium', '<' );
const [ blockStylesAnchor, setBlockStylesAnchor ] = useState( null );
const dropdownMenuProps = useToolsPanelDropdownMenuProps();

const previewBlocks = useMemo( () => {
if ( ! hoveredStyle || ! genericPreviewBlock ) {
return null;
}
const previewClassName = replaceActiveStyle(
className,
activeStyle,
hoveredStyle
);
return [
{
...genericPreviewBlock,
attributes: {
...( genericPreviewBlock.attributes || {} ),
className: previewClassName,
},
},
];
}, [ hoveredStyle, genericPreviewBlock, className, activeStyle ] );
Comment on lines +45 to +63

@ramonjd ramonjd Feb 27, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Non-blocking comment. https://github.com/WordPress/gutenberg/blob/try/consistent-transform-previews/packages/block-editor/src/components/block-switcher/block-styles-menu.js#L29-L47 has the same code block.

Could be a candidate for extraction into a small hook

@tellthemachines tellthemachines Feb 27, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yeah I wondered whether it would be worth a hook or a wrapper for PreviewBlockPopover and ended up not doing so because I couldn't decide on the best approach 😄
my go-to strategy is usually extract once there are more than 2 instances, so I just left it alone


if ( ! stylesToRender || stylesToRender.length === 0 ) {
return null;
}
Expand Down Expand Up @@ -90,7 +109,10 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
isShownByDefault
panelId={ clientId }
>
<div className="block-editor-block-styles">
<div
ref={ setBlockStylesAnchor }
className="block-editor-block-styles"
>
<div className="block-editor-block-styles__variants">
{ stylesToRender.map( ( style ) => {
const buttonText = style.label || style.name;
Expand Down Expand Up @@ -133,24 +155,13 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
);
} ) }
</div>
{ hoveredStyle && ! isMobileViewport && (
<Popover
{ previewBlocks && (
<PreviewBlockPopover
blocks={ previewBlocks }
placement="left-start"
offset={ 34 }
focusOnMount={ false }
>
<div
className="block-editor-block-styles__preview-panel"
onMouseLeave={ () => styleItemHandler( null ) }
>
<BlockStylesPreviewPanel
activeStyle={ activeStyle }
className={ previewClassName }
genericPreviewBlock={ genericPreviewBlock }
style={ hoveredStyle }
/>
</div>
</Popover>
anchor={ blockStylesAnchor }
/>
) }
</div>
</ToolsPanelItem>
Expand Down
35 changes: 0 additions & 35 deletions packages/block-editor/src/components/block-styles/preview-panel.js
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions packages/block-editor/src/components/block-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,3 @@
}
}

// 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;
}
16 changes: 9 additions & 7 deletions packages/block-editor/src/components/block-switcher/preview-block-popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Popover } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';

Expand All @@ -10,7 +9,12 @@ import { useViewportMatch } from '@wordpress/compose';
*/
import BlockPreview from '../block-preview';

export default function PreviewBlockPopover( { blocks } ) {
export default function PreviewBlockPopover( {
blocks,
placement = 'right-start',
offset = 16,
anchor,
} ) {
const isMobile = useViewportMatch( 'medium', '<' );

if ( isMobile ) {
Expand All @@ -21,14 +25,12 @@ export default function PreviewBlockPopover( { blocks } ) {
<div className="block-editor-block-switcher__popover-preview-container">
<Popover
className="block-editor-block-switcher__popover-preview"
placement="right-start"
placement={ placement }
focusOnMount={ false }
offset={ 16 }
offset={ offset }
anchor={ anchor }
>
<div className="block-editor-block-switcher__preview">
<div className="block-editor-block-switcher__preview-title">
{ __( 'Preview' ) }
</div>
{ /* 600px is the value of $break-small in base-styles/_breakpoints.scss.
We set the viewport width to 601px to make sure that the media-text
block which uses this breakpoint has the correct padding. */ }
Expand Down
8 changes: 0 additions & 8 deletions packages/block-editor/src/components/block-switcher/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,6 @@
}
}

.block-editor-block-switcher__preview-title {
margin-bottom: $grid-unit-15;
color: $gray-700;
text-transform: uppercase;
font-size: 11px;
font-weight: $font-weight-medium;
}

.block-editor-block-switcher__preview-patterns-container {
padding-bottom: $grid-unit-20;

Expand Down
Loading