-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Feedback: regarding the blurred background surrounding the modal. #42724
Comments
Disagree here. The example shown for reusable block illustrates how confusing it can be to still be able to read text on the screen when the focus should be placed on the action at hand. This also follows how modals operate with keyboard navigation since they constrain focus within the modal. It's also much closer to how it'd work on mobile. If there's a need for extra context it should be present within the modal, not rely on being able to read through the backdrop. |
I agree. |
Most of what I do is based on a feeling. (As well as experience.)
Bottom line is that we should explore various ways that might work even better than smaller modals for accomplishing a specific action. |
We could explore a small preview of the block that is being converted in the modal, emulating how it's going to show in the inserter preview once created. Probably worth exploring in a separate issue! |
Hi @mtias Matias. |
Alright, but please do open one with suggestions on the reusable block context |
Here is a first version: |
What problem does this address?
For Gutenberg plugin 13.7 a blurred background was added to the modal design through this PR:
#40781
The problem with the blurred background is that it loses all connection with the surrounding areas.
Some examples.
Welcome guide
Before Gutenberg plugin 13.7 update.
![Screenshot 2022-07-27 at 08 21 15](https://user-images.githubusercontent.com/5323259/181175768-4e743e0a-b468-4a6c-8b85-bee720ca7b23.jpg)
Welcome to the block editor modal is associated with the block editor as we see various user interface areas.
User can shift focus between reading the words and seeing the block editor interface in the background.
After 13.7 Gutenberg plugin update.
Welcome to the block editor modal loses association with the block editor. It stands by itself. The user can not connect the guide with what is seen in the background.
Preferences
Before Gutenberg plugin 13.7 update.
Block-editor-preferences.mp4
One can see the adjustments in the background as one turns options on or off.
After 13.7 Gutenberg plugin update.
Block-editor-preferences-blurred-background.mp4
It is hard to see what actually happens in the background as one turns options on or off. One has to select an option close Preferences to see the change. Open Preferences and try another option. Close. Look at the result. Having Preferences open and see what each option does by looking at the change in the background is a huge time saver and makes it a lot easier going through each option.
Creating a Reusable block
Before Gutenberg plugin 13.7 update.
Here I am able to see which blocks I decided to add into a Reusable block.
After 13.7 Gutenberg plugin update.
![Screenshot 2022-07-27 at 08 36 58](https://user-images.githubusercontent.com/5323259/181178789-9e1a8373-72d4-4e80-8b68-ec983d2698cf.jpg)
Here I lose connection with the blocks I selected to add into a Reusable block.
Example from Mac OSX.
EDIT 29 July
I also want to mention that a blurred background adds a huge contrast and it can become more exhausting on the eyes with all the blurred background as one shifts through various areas to accomplish specific tasks.
What is your proposed solution?
Revert and remove the blurred background as it takes away the association between the modal and the user interface in the Block editor. Go back to using something similar to what we had earlier.
A new suggestion.
If someone tries to click outside the modal then we could perhaps use a horisontal CSS shake mechanism having the modal softly shake to guide the user to an action that needs to be taken in the modal.
A user interface is so much about how we can softly guide the user to where we want them to go. Help them make decisions along the way.
@jameskoster
@WordPress/gutenberg-design
The text was updated successfully, but these errors were encountered: