Feedback: regarding the blurred background surrounding the modal.

[paaljoachim]

What problem does this address?

For Gutenberg plugin 13.7 a blurred background was added to the modal design through this PR: https://github.com/WordPress/gutenberg/pull/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. 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.

https://user-images.githubusercontent.com/5323259/181177409-3424328b-a879-46a0-808c-22f1fe8936d7.mp4

One can see the adjustments in the background as one turns options on or off.

After 13.7 Gutenberg plugin update.

https://user-images.githubusercontent.com/5323259/181177561-47bbe2ce-1b68-4496-a830-1440f99abe2e.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.

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

[mtias]

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.

[paaljoachim]

Yes in concept I agree that all the information should be contained within a modal, but it helps to have a connection with the new Reusable block and the background. For instance looking over again at the information that is written inside a block that becomes a Reusable block. As one is about to create a Reusable block it is helpful to take a quick look at what is outside the modal to get the last confirmation.

Removing the 3 dot drop down to show the information being added to the Reusable block would be nice. As it does feel messy seeing the 3 dot dropdown partly on top of the blocks one is planning of adding into a Reusable block.

Anyhow the above is only one of three examples from the Block editor I added in my initial comment.

[richtabor]

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.

[paaljoachim]

Most of what I do is based on a feeling. (As well as experience.) In regards to modals in general. It seems that is can easily become a quick default when other methods should also be explored. For instance looking at when creating a Reusable block/Pattern. What if we explored other ways to add/save this kind of block? Some brain storming thoughts...

• Using a much bigger modal (Patterns size) showing the selected blocks one plans on adding to a pattern/reusable block. Clicking save or cancel to exit the bigger modal that covers more of the screen. Full focus on the bigger modal.
• Using the sidebar settings. Having the sidebar automatically come up showing more information about the planned action. With a cancel/save etc buttons.
• Using the Toolbar to save a planned action.
• Other methods.

Bottom line is that we should explore various ways that might work even better than smaller modals for accomplishing a specific action.

[mtias]

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!

[paaljoachim]

Hi @mtias Matias. I changed the title of the issue as it has more focus on feedback than adjustments. As I find the blurred contrast taxing on the eyes. It would be fair to leave the issue open to see if other comments show up. I can myself close the issue at a later date.

[mtias]

Alright, but please do open one with suggestions on the reusable block context

[paaljoachim]

Here is a first version: Add Reusable block/Pattern creation process - Bigger modal. https://github.com/WordPress/gutenberg/issues/42838