Skip to content

Make the Settings panel toggle button show its keyboard shortcut in its tooltip #65322

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
afercia merged 2 commits into from
Sep 19, 2024
Merged

Make the Settings panel toggle button show its keyboard shortcut in its tooltip #65322

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
85a7cac
Make the Settings panel toggle button show its keyboard shortcut in i…
afercia Sep 13, 2024
869ec36
Do not pass shortcut prop to PluginSidebar and simplify.
afercia Sep 18, 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
9 changes: 9 additions & 0 deletions packages/interface/src/components/complementary-area-toggle/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ function ComplementaryAreaToggle( {
icon,
selectedIcon,
name,
shortcut,
...props
} ) {
const ComponentToUse = as;
Expand All @@ -26,8 +27,15 @@ function ComplementaryAreaToggle( {
identifier,
[ identifier, scope ]
);

const { enableComplementaryArea, disableComplementaryArea } =
useDispatch( interfaceStore );

const isPostEditorComplementaryArea = [
'edit-post/document',
'edit-post/block',
].includes( identifier );
Copy link
Contributor

@youknowriad youknowriad Sep 17, 2024

Choose a reason for hiding this comment

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

Why should this be limited to these areas only?

Copy link
Contributor Author

@afercia afercia Sep 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@youknowriad to my understanding, the shortcut itself is meant to work only for these areas. It doesn't open the Styles panel, it doesn't open the Plugins panel. As such, the keyboard shortcut should only be shown in the Settings toggle button tooltip. Otherwise, it will show up also in the Styles toggle or any Plugin toggle button.

Copy link
Contributor

@youknowriad youknowriad Sep 17, 2024

Choose a reason for hiding this comment

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

It's not the case in my testing for styles at least. The shortcut is passed by the usage of <ComplementaryArea toggleShortcut={ something } /> So if I don't pass it explicitly in my own plugin, it's not rendered and it's not effective. So I think we can probably remove this hardcoded checks.

Copy link
Contributor Author

@afercia afercia Sep 18, 2024

Choose a reason for hiding this comment

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

@youknowriad I already tested it. And I tested it again now. Here's what happens when removing that condition:

Screenshot 2024-09-18 at 08 59 53

As you can see, the shortcut is shown also in the Jetpack and Yoast SEO button tooltips. I stand corrected that it does not happen for the Styles button.

Copy link
Contributor

@youknowriad youknowriad Sep 18, 2024

Choose a reason for hiding this comment

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

For me, this means that we have a bug here

gutenberg/packages/editor/src/components/plugin-sidebar/index.js

Line 94 in 5f77458

toggleShortcut={ shortcut }

The shortcut shouldn't be associated with the complementary area at all if it's not meant to be used for it. So basically I think we should just remove that line/prop.

Copy link
Contributor Author

@afercia afercia Sep 18, 2024

Choose a reason for hiding this comment

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

Ok. The only context I found about the plugin sidebar using the shortcut prop is in this comment #20698 (comment) but I'm not sure I fully understand it Cc @jorgefilipecosta when you have a chance coukd you please share some context?
For now, I just removed the prop from PluginSidebar.


return (
<ComponentToUse
icon={ selectedIcon && isSelected ? selectedIcon : icon }
Expand All @@ -39,6 +47,7 @@ function ComplementaryAreaToggle( {
enableComplementaryArea( scope, identifier );
}
} }
shortcut={ isPostEditorComplementaryArea ? shortcut : undefined }
{ ...props }
/>
);
Expand Down
1 change: 1 addition & 0 deletions packages/interface/src/components/complementary-area/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,7 @@ function ComplementaryArea( {
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
shortcut={ toggleShortcut }
/>
) }
</PinnedItems>
Expand Down