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

Fix the block variations transforms labeling and improve UI clarity #59916

Open
wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

Fix the block variations transforms labeling and improve UI clarity #59916

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9c1b38f
Fix labeling of block variations ToggleGroupControl.
afercia Mar 15, 2024
9574586
Fix labeling of block variations VariationsButtons.
afercia Mar 15, 2024
768a10f
Remove tooltip from VariationsDropdown toggle button.
afercia Mar 15, 2024
f248901
Make VariationsToggleGroupControl and VariationsButtons visual label …
afercia Mar 15, 2024
2b9101c
Visually separate variations from block card and make dropdown menu m…
afercia Mar 15, 2024
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
109 changes: 48 additions & 61 deletions packages/block-editor/src/components/block-variation-transforms/index.js
View file
Open in desktop
Expand Up @@ -2,15 +2,15 @@
* WordPress dependencies
*/
import { store as blocksStore } from '@wordpress/blocks';
import { __, sprintf } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import {
Button,
DropdownMenu,
MenuGroup,
MenuItemsChoice,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
VisuallyHidden,
BaseControl,
} from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { useMemo } from '@wordpress/element';
Expand All @@ -29,30 +29,26 @@ function VariationsButtons( {
variations,
} ) {
return (
<fieldset className={ className }>
<VisuallyHidden as="legend">
{ __( 'Transform to variation' ) }
</VisuallyHidden>
{ variations.map( ( variation ) => (
<Button
key={ variation.name }
icon={ <BlockIcon icon={ variation.icon } showColors /> }
isPressed={ selectedValue === variation.name }
label={
selectedValue === variation.name
? variation.title
: sprintf(
/* translators: %s: Name of the block variation */
__( 'Transform to %s' ),
variation.title
)
}
onClick={ () => onSelectVariation( variation.name ) }
aria-label={ variation.title }
showTooltip
/>
) ) }
</fieldset>
<div className={ className }>
<fieldset>
<legend>
<BaseControl.VisualLabel>
{ __( 'Transform to variation' ) }
</BaseControl.VisualLabel>
</legend>
{ variations.map( ( variation ) => (
<Button
key={ variation.name }
icon={
<BlockIcon icon={ variation.icon } showColors />
}
isPressed={ selectedValue === variation.name }
label={ variation.title }
onClick={ () => onSelectVariation( variation.name ) }
/>
) ) }
</fieldset>
</div>
);
}

Expand All @@ -71,29 +67,29 @@ function VariationsDropdown( {
);

return (
<DropdownMenu
className={ className }
label={ __( 'Transform to variation' ) }
text={ __( 'Transform to variation' ) }
popoverProps={ {
position: 'bottom center',
className: `${ className }__popover`,
} }
icon={ chevronDown }
toggleProps={ { iconPosition: 'right' } }
>
{ () => (
<div className={ `${ className }__container` }>
<MenuGroup>
<MenuItemsChoice
choices={ selectOptions }
value={ selectedValue }
onSelect={ onSelectVariation }
/>
</MenuGroup>
</div>
) }
</DropdownMenu>
<div className={ className }>
<DropdownMenu
text={ __( 'Transform to variation' ) }
popoverProps={ {
position: 'bottom center',
className: `${ className }__popover`,
} }
icon={ chevronDown }
toggleProps={ { iconPosition: 'right' } }
>
{ () => (
<div className={ `${ className }__container` }>
<MenuGroup>
<MenuItemsChoice
choices={ selectOptions }
value={ selectedValue }
onSelect={ onSelectVariation }
/>
</MenuGroup>
</div>
) }
</DropdownMenu>
</div>
);
}

Expand All @@ -108,7 +104,6 @@ function VariationsToggleGroupControl( {
<ToggleGroupControl
label={ __( 'Transform to variation' ) }
value={ selectedValue }
hideLabelFromVision
onChange={ onSelectVariation }
__next40pxDefaultSize
__nextHasNoMarginBottom
Expand All @@ -118,15 +113,7 @@ function VariationsToggleGroupControl( {
key={ variation.name }
icon={ variation.icon }
value={ variation.name }
label={
selectedValue === variation.name
? variation.title
: sprintf(
/* translators: %s: Name of the block variation */
__( 'Transform to %s' ),
variation.title
)
}
label={ variation.title }
/>
) ) }
</ToggleGroupControl>
Expand Down Expand Up @@ -182,8 +169,8 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {

const baseClass = 'block-editor-block-variation-transforms';

// Show buttons if there are more than 5 variations because the ToggleGroupControl does not wrap
const showButtons = variations.length > 5;
// Show buttons if there are more than 6 variations because the ToggleGroupControl does not wrap
const showButtons = variations.length > 6;

const ButtonComponent = showButtons
? VariationsButtons
Expand Down
14 changes: 12 additions & 2 deletions packages/block-editor/src/components/block-variation-transforms/style.scss
View file
Open in desktop
@@ -1,6 +1,16 @@
.block-editor-block-variation-transforms {
padding: 0 $grid-unit-20 $grid-unit-20 52px;
width: 100%;
padding: $grid-unit-20;
border-top: $border-width solid $gray-200;

legend {
padding: 0;
// Makes the inline label be the correct height, equivalent to setting line-height: 0
display: flex;
}

.components-dropdown-menu {
width: 100%;
}

.components-dropdown-menu__toggle {
border: 1px solid $gray-700;
Expand Down