Skip to content

Commit 2c37bff

Browse files
youknowriadSirLouen
youknowriad
and
SirLouen
authored
Block Inspector: Update the design of the style variation to use ToolsPanel (#74224)
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: SirLouen <sirlouen@git.wordpress.org>
1 parent deb874d commit 2c37bff

5 files changed

Lines changed: 100 additions & 71 deletions

File tree

‎packages/block-editor/src/components/block-inspector/index.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
getUnregisteredTypeHandlerName,
88
store as blocksStore,
99
} from '@wordpress/blocks';
10-
import { PanelBody, __unstableMotion as motion } from '@wordpress/components';
10+
import { __unstableMotion as motion } from '@wordpress/components';
1111
import { useSelect } from '@wordpress/data';
1212

1313
/**
@@ -31,14 +31,6 @@ import { useBorderPanelLabel } from '../../hooks/border';
3131
import ContentTab from '../inspector-controls-tabs/content-tab';
3232
import { unlock } from '../../lock-unlock';
3333

34-
function BlockStylesPanel( { clientId } ) {
35-
return (
36-
<PanelBody title={ __( 'Styles' ) }>
37-
<BlockStyles clientId={ clientId } />
38-
</PanelBody>
39-
);
40-
}
41-
4234
function StyleInspectorSlots( {
4335
blockName,
4436
showAdvancedControls = true,
@@ -379,7 +371,7 @@ const BlockInspectorSingleBlock = ( {
379371
{ ! shouldShowTabs && (
380372
<>
381373
{ hasBlockStyles && (
382-
<BlockStylesPanel clientId={ renderedBlockClientId } />
374+
<BlockStyles clientId={ renderedBlockClientId } />
383375
) }
384376
<ContentTab
385377
rootClientId={ renderedBlockClientId }

‎packages/block-editor/src/components/block-styles/index.js‎

Lines changed: 92 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,18 @@ import {
1212
Button,
1313
__experimentalTruncate as Truncate,
1414
Popover,
15+
__experimentalToolsPanel as ToolsPanel,
16+
__experimentalToolsPanelItem as ToolsPanelItem,
1517
} from '@wordpress/components';
18+
import { __ } from '@wordpress/i18n';
1619

1720
/**
1821
* Internal dependencies
1922
*/
2023
import BlockStylesPreviewPanel from './preview-panel';
2124
import useStylesForBlocks from './use-styles-for-block';
25+
import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
26+
import { getDefaultStyle } from './utils';
2227

2328
const noop = () => {};
2429

@@ -36,6 +41,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
3641
} );
3742
const [ hoveredStyle, setHoveredStyle ] = useState( null );
3843
const isMobileViewport = useViewportMatch( 'medium', '<' );
44+
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
3945

4046
if ( ! stylesToRender || stylesToRender.length === 0 ) {
4147
return null;
@@ -59,62 +65,96 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
5965
onHoverClassName( item?.name ?? null );
6066
};
6167

68+
const defaultStyle = getDefaultStyle( stylesToRender );
69+
70+
const hasValue = () => {
71+
return activeStyle?.name !== defaultStyle?.name;
72+
};
73+
74+
const onDeselect = () => {
75+
onSelectStylePreview( defaultStyle );
76+
};
77+
6278
return (
63-
<div className="block-editor-block-styles">
64-
<div className="block-editor-block-styles__variants">
65-
{ stylesToRender.map( ( style ) => {
66-
const buttonText = style.label || style.name;
79+
<ToolsPanel
80+
label={ __( 'Styles' ) }
81+
resetAll={ onDeselect }
82+
panelId={ clientId }
83+
hasInnerWrapper
84+
dropdownMenuProps={ dropdownMenuProps }
85+
>
86+
<ToolsPanelItem
87+
hasValue={ hasValue }
88+
label={ __( 'Variation' ) }
89+
onDeselect={ onDeselect }
90+
isShownByDefault
91+
panelId={ clientId }
92+
>
93+
<div className="block-editor-block-styles">
94+
<div className="block-editor-block-styles__variants">
95+
{ stylesToRender.map( ( style ) => {
96+
const buttonText = style.label || style.name;
6797

68-
return (
69-
<Button
70-
__next40pxDefaultSize
71-
className={ clsx(
72-
'block-editor-block-styles__item',
73-
{
74-
'is-active':
75-
activeStyle.name === style.name,
76-
}
77-
) }
78-
key={ style.name }
79-
variant="secondary"
80-
label={ buttonText }
81-
onMouseEnter={ () => styleItemHandler( style ) }
82-
onFocus={ () => styleItemHandler( style ) }
83-
onMouseLeave={ () => styleItemHandler( null ) }
84-
onBlur={ () => styleItemHandler( null ) }
85-
onClick={ () => onSelectStylePreview( style ) }
86-
aria-current={ activeStyle.name === style.name }
98+
return (
99+
<Button
100+
__next40pxDefaultSize
101+
className={ clsx(
102+
'block-editor-block-styles__item',
103+
{
104+
'is-active':
105+
activeStyle.name === style.name,
106+
}
107+
) }
108+
key={ style.name }
109+
variant="secondary"
110+
label={ buttonText }
111+
onMouseEnter={ () =>
112+
styleItemHandler( style )
113+
}
114+
onFocus={ () => styleItemHandler( style ) }
115+
onMouseLeave={ () =>
116+
styleItemHandler( null )
117+
}
118+
onBlur={ () => styleItemHandler( null ) }
119+
onClick={ () =>
120+
onSelectStylePreview( style )
121+
}
122+
aria-current={
123+
activeStyle.name === style.name
124+
}
125+
>
126+
<Truncate
127+
numberOfLines={ 1 }
128+
className="block-editor-block-styles__item-text"
129+
>
130+
{ buttonText }
131+
</Truncate>
132+
</Button>
133+
);
134+
} ) }
135+
</div>
136+
{ hoveredStyle && ! isMobileViewport && (
137+
<Popover
138+
placement="left-start"
139+
offset={ 34 }
140+
focusOnMount={ false }
87141
>
88-
<Truncate
89-
numberOfLines={ 1 }
90-
className="block-editor-block-styles__item-text"
142+
<div
143+
className="block-editor-block-styles__preview-panel"
144+
onMouseLeave={ () => styleItemHandler( null ) }
91145
>
92-
{ buttonText }
93-
</Truncate>
94-
</Button>
95-
);
96-
} ) }
97-
</div>
98-
{ hoveredStyle && ! isMobileViewport && (
99-
<Popover
100-
placement="left-start"
101-
offset={ 34 }
102-
focusOnMount={ false }
103-
>
104-
<div
105-
className="block-editor-block-styles__preview-panel"
106-
onMouseLeave={ () => styleItemHandler( null ) }
107-
>
108-
<BlockStylesPreviewPanel
109-
activeStyle={ activeStyle }
110-
className={ previewClassName }
111-
genericPreviewBlock={ genericPreviewBlock }
112-
style={ hoveredStyle }
113-
/>
114-
</div>
115-
</Popover>
116-
) }
117-
</div>
146+
<BlockStylesPreviewPanel
147+
activeStyle={ activeStyle }
148+
className={ previewClassName }
149+
genericPreviewBlock={ genericPreviewBlock }
150+
style={ hoveredStyle }
151+
/>
152+
</div>
153+
</Popover>
154+
) }
155+
</div>
156+
</ToolsPanelItem>
157+
</ToolsPanel>
118158
);
119159
}
120160

‎packages/block-editor/src/components/block-styles/style.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
}
1919
}
2020

21+
.block-editor-block-styles {
22+
grid-column: 1 / -1;
23+
}
24+
2125
.block-editor-block-styles__variants {
2226
display: flex;
2327
flex-wrap: wrap;

‎packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { PanelBody } from '@wordpress/components';
54
import { __ } from '@wordpress/i18n';
65
import { useDispatch, useSelect } from '@wordpress/data';
76

@@ -71,13 +70,7 @@ const StylesTab = ( {
7170

7271
return (
7372
<>
74-
{ hasBlockStyles && (
75-
<div>
76-
<PanelBody title={ __( 'Styles' ) }>
77-
<BlockStyles clientId={ clientId } />
78-
</PanelBody>
79-
</div>
80-
) }
73+
{ hasBlockStyles && <BlockStyles clientId={ clientId } /> }
8174
{ isSectionBlock &&
8275
window?.__experimentalContentOnlyPatternInsertion && (
8376
<SectionBlockColorControls

‎test/e2e/specs/editor/various/patterns.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -619,7 +619,7 @@ test.describe( 'Synced pattern', () => {
619619
await expect(
620620
page
621621
.getByRole( 'region', { name: 'Editor settings' } )
622-
.getByRole( 'button', { name: 'Styles', exact: true } )
622+
.getByRole( 'heading', { name: 'Styles', exact: true } )
623623
).toBeVisible();
624624

625625
await editor.clickBlockOptionsMenuItem( 'Create pattern' );

0 commit comments

Comments
 (0)