-
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
Update: Make changing order an action on the ellipsis menu. #62189
Update: Make changing order an action on the ellipsis menu. #62189
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. |
34b4555
to
a9732b1
Compare
Size Change: +156 B (+0.01%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
4b08c57
to
8616147
Compare
Flaky tests detected in 34b1b2d. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9352601268
|
Thanks @jorgefilipecosta. I feel this better manages the prominence of this relatively obscure attribute. In the future it would be good to hide it altogether in favor of more intuitive experiences. One small tweak; can we use the |
Hey @jorgefilipecosta |
9a44348
to
34b1b2d
Compare
Hi @jameskoster, thank you for reviewing this change, the small variant size was applied, let me know it it looks as expected. |
Hi @paaljoachim, the before image was added. |
34b1b2d
to
9798852
Compare
Ahhh. That means that a shift has happened between what I see in the screenshot that I shared and the above example Jorge shared. Moving the Reorder into the ellipsis menu seems like a good way to shorten down the long list of information seen. |
Hi @jameskoster, can you have another look and see if it already matches what is expected? |
It's super obscure, and not helpful for most implementations of WordPress (any time you have a custom menu). 😅 |
/> | ||
<div> | ||
{ __( | ||
'This attribute determines the order of pages in the Pages List block.' |
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.
It's the "Page List" block.
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.
Let's just make this one paragraph, with the following:
"Determines the order of pages in the Page List block. Pages with the same order value are sorted alphabetically. Negative order values are supported."
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.
Hi @richtabor your feedback was applied, let me know if it is ok to merge this change.
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.
Yes, this reads better.
215bae1
to
143d127
Compare
143d127
to
5ae2661
Compare
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.
I have made some suggestions, but I would be glad to hear @richtabor's feedback again regarding the text changes.
style={ { | ||
// editor styles are not loaded in dataviews so we use an inline style here. | ||
maxWidth: 384 - 32 - 32 - 6 - 6, | ||
} } |
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.
Is this style necessary? It seems to make the content width 372px
instead of the expected 384px ($modal-width-small)
.
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.
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.
/> | ||
<div> | ||
{ __( | ||
'This attribute determines the order of pages in the Pages List block.' |
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.
Yes, this reads better.
a398945
to
4c0b0d7
Compare
Hi @richtabor, |
4c0b0d7
to
5d80bb2
Compare
I'm worried that this specification may cause accessibility problems.
The video below shows how with NDVA enabled, the screen reader loses focus when the order number is reset to zero on the keyboard. d6a2984e3f78a5febe942dbd0ebb5f12.mp4cc @richtabor |
Order is such an obscure attribute, and so rarely used, I don't know that we ever need to display it directly in the sidebar. If you're familiar with the feature, you'll understand that any non-zero value = customized. |
In my opinion, there are two possible approaches to get around this problem:
Do you have any good ideas? |
I guess we can go for "Move the Order action to the elipsis menu and NOT display it in the summary panel". @richtabor @WordPress/gutenberg-design would that change be ok? |
That approach would get my vote :) |
I suppose that's the better of the two options. |
5d80bb2
to
a5898f0
Compare
Thank you all for the insights I rebased the PR and applied the recommended path. I think this is ready for a last checkup and merge. cc: @jameskoster |
60bb53d
to
d7765df
Compare
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.
It's working for me, and in terms of design this feels like an improvement on trunk given how seldom this feature is used.
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.
I left some comments at the end but it's working fine for me too.
style={ { | ||
// editor styles are not loaded in dataviews so we use an inline style here. | ||
maxWidth: 384 - 32 - 32 - 6 - 6, | ||
} } |
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.
.editor-action-modal__reorder-pages .components-modal__frame { | ||
max-width: $modal-width-small; | ||
} |
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.
There is no element with this selector and it would be unnecessary.
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.
Good catch it was removed 👍
2e985e8
to
b56cbde
Compare
Co-authored-by: Aki Hamano <[email protected]>
This reverts commit 33d0bbf.
Co-authored-by: Aki Hamano <[email protected]>
…s#62189) Co-authored-by: Aki Hamano <[email protected]>
This PR implements a pending change suggested by @jameskoster at #61918 (comment) to make "reorder" an action on the ellipsis menu instead of an item on the page summary.
Screenshots
Before:
After:
Testing Instructions
Verified I could correctly reorder a page on the post editor, site editor, and pages list on dataviews.