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

Block Editor: Use the tooltip from a button in 'ButtonBlockAppender' #65113

Merged
merged 2 commits into from
Sep 6, 2024
Merged

Block Editor: Use the tooltip from a button in 'ButtonBlockAppender' #65113

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0feeda3
Block Editor: Use the tooltip from a button in 'ButtonBlockAppender'
Mamaduka Sep 6, 2024
53f8635
Remove visually hidden element
Mamaduka Sep 6, 2024
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
41 changes: 16 additions & 25 deletions packages/block-editor/src/components/button-block-appender/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { Button, Tooltip, VisuallyHidden } from '@wordpress/components';
import { Button } from '@wordpress/components';
import { forwardRef, useRef } from '@wordpress/element';
import { _x, sprintf } from '@wordpress/i18n';
import { Icon, plus } from '@wordpress/icons';
Expand Down Expand Up @@ -43,22 +43,22 @@ function ButtonBlockAppender(
blockTitle,
hasSingleBlockType,
} ) => {
let label;
if ( hasSingleBlockType ) {
label = sprintf(
// translators: %s: the name of the block when there is only one
_x( 'Add %s', 'directly add the only allowed block' ),
blockTitle
);
} else {
label = _x(
'Add block',
'Generic label for block inserter button'
);
}
const isToggleButton = ! hasSingleBlockType;
const label = hasSingleBlockType
? sprintf(
// translators: %s: the name of the block when there is only one
_x(
'Add %s',
'directly add the only allowed block'
),
blockTitle
)
: _x(
'Add block',
'Generic label for block inserter button'
);

let inserterButton = (
return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
Expand All @@ -76,20 +76,11 @@ function ButtonBlockAppender(
// eslint-disable-next-line no-restricted-syntax
disabled={ disabled }
label={ label }
showTooltip
Copy link
Member Author

Choose a reason for hiding this comment

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

The isToggleButton || hasSingleBlockType condition was always true.

>
{ ! hasSingleBlockType && (
<VisuallyHidden as="span">{ label }</VisuallyHidden>
) }
Comment on lines -80 to -82
Copy link
Member Author

Choose a reason for hiding this comment

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

I think this was a leftover when the button appender had a visual label. The button has an aria-label, so visually hidden text shouldn't be necessary for a11y.

cc @afercia

<Icon icon={ plus } />
</Button>
);

if ( isToggleButton || hasSingleBlockType ) {
inserterButton = (
<Tooltip text={ label }>{ inserterButton }</Tooltip>
);
}
return inserterButton;
} }
isAppender
/>
Expand Down
Loading