Improve the EntitiesSavedStates modal dialog design and labeling #67792
Conversation
afercia
added
[Type] Bug
|
Cc @jameskoster @WordPress/gutenberg-core |
|
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: +312 B (+0.02%) Total Size: 1.84 MB
ℹ️ View Unchanged
|
|
I can't comment on the code but appreciate the effort to tidy this up. The modal already looks much better. One drawback I noticed is that when there are many changes (or the viewport is small, or a combination thereof) the buttons disappear until you scroll: 
There's probably a broader question to ask about whether actions should be sticky across all modals, but I mention it here because despite the other improvements this is a slight downgrade in the UX. |
Yes, that's a feature / limitation of the Modal component. A potential change to introduce a sticky footer should be considered at the component's level. |
|
@jameskoster any other style refining you would like to see implemented? |
afercia
force-pushed
the
fix/refine-save-modal-dialog-within-dialog
branch
from
5cc1825 to
fb435f8
Compare
|
Flaky tests detected in 9418d3e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12372390662
|
|
Agree that's a detail to work out at the component level, and I don't suppose it needs to be a blocker, though I'd welcome feedback from @WordPress/gutenberg-design on that detail. There's something about the overall spacing that works less well in this context. I wonder if it would be worth trying the
What do you think? |
It does seem a bit loose on the spacing, but it's unclear that needs to be a blocker. Probably worth getting this into the plugin, and gathering feedback through that channel, and then spacing polish can happen separately at any time, whether locally or component level. |
|
Re: the
It's a one-line change, I'd agree it can happen at any time if need be. |
|
For me the small modal works better, just because it feels more like the UI we're familiar with. Not a blocker though. As long as we use one of the defined modal sizes I'm happy. |
Sure. In the latest commit I made the modal dialog small so that everyone can try it and see how it looks on different viewport sizes. Cc @WordPress/gutenberg-design |
|
I agree with keeping the same spacing approach consistent with its version in the site editor. Regarding follow-up improvements, I see room for improvement in adding an indentation level in the bullet points and reducing the spacing between the checkbox and the bullet list. If I understand this correctly, more checkboxes can show up and placing the bullet list at the control label could improve the text relationship between what users are about to update and what that includes. This suggestion is for both modal and the inspector panel. |
|
Good point about the indentation. I'd like to see the list items text aligned with the checkbox label, with the bullets following the principle of the hanging punctuation:
|
afercia
force-pushed
the
fix/refine-save-modal-dialog-within-dialog
branch
from
38c8ef8 to
6a5e038
Compare
|
Latest commit adjusts the top and left margin of the changes list:
|
afercia
force-pushed
the
fix/refine-save-modal-dialog-within-dialog
branch
from
6a5e038 to
cd71c4b
Compare
|
Since we're discussing refinements, I have two questions:
|
|
The screenshot looks good to me 👍
Wow. TIL there was a word for that alignment. Thanks |
|
Sorry. My previous comment was on this message. It seems we pressed the "comment" button almost at the same time. Regarding your suggestions for font size and text color, I second your rationale and agree with the changes. |
afercia
force-pushed
the
fix/refine-save-modal-dialog-within-dialog
branch
from
cd71c4b to
5a1b633
Compare
|
Latest commit uses the default font size and color for the changes list items:
|
|
Not a strong feeling but I would prefer to consider the size and color of the styles change list in a separate issue/PR. Currently the differences create a sense of hierarchy, where on this PR the panel title and change list blend together. Also because this PR is important an enhancement, so would be good to keep focussed on the original problem. |
I would argue that they are part of the same group so it's good that they 'blend together'. Maybe it makes more sense when viewed together with other groups, see screenshot below:
Noting that in some cases the checkbox labels may wrap unexpectedly because of a |
afercia
force-pushed
the
fix/refine-save-modal-dialog-within-dialog
branch
from
5a1b633 to
9418d3e
Compare
|
Latest commit fixes the labels unexpected wrapping when longer. Screenshot:
|
|
If we're prepared to tweak panel content styling perhaps it would be beneficial to reduce the 
Also, do we really need that "This change will affect pages and posts that use this template." message... Isn't that implied? |
It seems a sensible tweak to me but that's part of the Panel > PanelRow base component, which is used in a few other places, and should be considered at a component level rather than introducing a style override for an ad-hoc adjustment.
OK. |
|
Latest commit reduces the bottom margin of the changes count paragraph. |
|
Looks good to me in terms of design. Let's get a code review :) |
jameskoster
requested review from
a team,
SantosGuillamot and
t-hamano
and removed request for
a team
|
@WordPress/gutenberg-core I'd appreciate a review, when you have a chance. Latest screenshots to illustrate the changes:
|
|
The two spacings in red are not consistent, and perhaps we can make smaller the one applied between the heading ("Templates" and "Global styles") and the content below. 
I can't point out why this happens and if it belongs to the purpose of this PR. |
|
@fcoveram thanks for your feedback. As mentioned earlier, the spacing after "Global styles" can't be changed in this PR because it comes from the Panel / PanelRow base components. Overriding the styling of a base component isn't a best practice. Any change should be considered at the base component level but that's out of the scope of this PR. |
|
I understand. Thanks for the clarification @afercia |
Fixes #49832
Fixes #67354
Note: if this gets merged, please add props to @dhruvang21 for the alternative PR #67473
What?
The modal dialog to save entities reuses the
EntitiesSavedStatescomponent 'as is'. This isn't ideal in terms oc content order, styling, and accessibility because modal dialogs expecte their content in a more meaningful order, with a visible title, specific styling and appropriate labeling and description.Why?
How?
isWithinModalDialogprop toEntitiesSavedStatesand its variant to distinguish when this component is used within a modal dialog.Testing Instructions
Saving your changes will change your active theme from Twenty Twenty-Four to Twenty Twenty-Five.There are 2 site changes waiting to be saved.Are you ready to save?Screenshot to illustrate the labeling / description:
Testing Instructions for Keyboard
Screenshots or screencast