-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
Make usage of the settings icon more consistent #63020
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Size Change: +4.68 kB (+0.27%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
@@ -36,36 +36,4 @@ test.describe( 'isTyping', () => { | |||
// Toolbar Popover is hidden again | |||
await expect( blockToolbarPopover ).toBeHidden(); | |||
} ); | |||
|
|||
test( 'should not close the dropdown when typing in it', async ( { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ellatrix do you think we should update this test to something like typing in the link
dialog or something instead of removing it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This test should be kept for sure now, that you have reverted the Query Loop changes..
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PR! Code wise this looks good. It would be good to have some design input though, especially about the moved controls in inspector controls. --cc @WordPress/gutenberg-design
Additionally, if the change of icon in DataViews requires more discussion for some reason, we can always split this PR and land the Query Loop changes first.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moves the Query Loop block 'Display settings' to the inspector.
Refactoring the Query Loop block controls feels like a secondary effort to avoid using icons.
#58207 has already been submitted for refactoring the Query Loop block controls, so can we just discuss the DataViews icon in this PR?
+1. I actually have it on my list to update the view options icon in data views (also to split the layout controls into a separate menu, but that's another story). The cog is what I had in mind, so this works well for me 👍 |
+1 to this too. I'd rather see that previous PR picked up again to ensure it aligns design wise. |
Thanks for pointing me at #58207 One of th problems in this project is PRs without an associated issue (which is required accordingly to the contributign guidelines) don't help contributors to follow all the fast-moving parts in this project. On the specifics od the design proposed in #58207 I will comment on that PR but I'm not sure I like hte idea of burying down into an ellispis menu such important controls. |
I perceived this comment on the issue as a green light to use the |
I agree for the most part, but there are some exceptional cases where a simple PR following up on another one shouldn't need an extra task; that would actually prevent the project from moving fast and create noise. I would be happy to update the contributing guidelines to reflect this point. |
Actually, this is not required, as the guidelines specify that only |
I know. That's why I stated that creating an issue is required accordingly to the contributing guidelines of this project (for non-trivial changes). A while ago I also researched the history of the project to read the conversation and arguments made when the guidelines were introduced in the documentation and I'd totally agree with those argumentations.
Sure, in that case the PR could just have a short notation 'Follow up to' with a link to the relevant issue. |
I reverted the changes to the Query loop block and fixed the typo I'll try to help #58207 move on. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We need to add back the removed test and this looks good to land. Thanks!
Oh yes thanks. I also forgot to remove the unnecessary |
* Move Query block Display settings from block toolbar to inspector. * Replace dataviews View options icon with the cog icon. * Remove no longer necessary test. * Revert changes to the Query loop block. * Fix typo. * Add back test. * Remove unnecessary BaseControl and fix aria-describedby. Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: priethor <priethor@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: mtias <matveb@git.wordpress.org>
Fixes #62873
What?
This PR only aims to make the usage of the
settings
icon more consistent in the editor UI. This icon should only be used to switch a control to an alternative version, see for example the various margin, padding, spacing controls.Instead, it was used inconsistently in at least 3 other cases:
Screenshot of the icon, for reference:
Work on this PR surfaced other issues. Most notably, the Query loop block had the 'Display settings' placed in the toolbar, while it makes more sense to have them in the Inspector together with other similar settings.
Other findings will be tracked in new issues.
Why?
Icons should uniquely identify specific features or, at least, similar features.
There is already an icon for the concept of 'settings': the
cog
icon is commonly used for this purpose. It makes sense to reuse popular conventions to make the editor UI more intuitive and less disorienting.How?
BaseControl
s that were wrapping theNumberControl
s. Not sure why these wrappingBaseControl
s were used in teh first place but they seem unnecessary. Also, the description of the 'Max pages to show' setting was incorrectly set to the wrappingBaseControl
instead of the actualNumberControl
.icon to use the
cog` icon.Testing Instructions
Old testing instructions
aria-describedby
and ID attributes.cog
icon.New testing instructions
cog
icon.Testing Instructions for Keyboard
Screenshots or screencast
The Query loop block settings moved to the Inspector:
The new cog icon in the data views: