Entity saved modal dialog closes unexpectedly

[afercia]

Description

When clicking the 'padding area' of the Entity saved modal dialog, the modal dialog closes unexpectedly.

Animated GIF to illustrate:

Turns out this modal dialog content, the EntitiesSavedStatesExtensible component, uses the useDialog hook to attach modal behaviors to the content. It is then used inside a Modal dialog. Basically, from a functional perspective, this is a Modal within a Modal.

That explains why clicking outside the 'inner modal' (the content) closes the modal. In fact, clicking outside the area highlighted in the screenshot below but still inside the 'outer modal' closes the modal.

Step-by-step reproduction instructions

• Go to the Site editor.
• Make a simple change to a global style, e.g. change a color.
• Reopen the Navigation panel by clicking 'Open Navigation' at the top left of the screen.
• Click any item in the navigation other than 'Styles' e.g. click 'Pages' or 'Templates'.
• At this point, a blue button at the bottom of the Navigation panel appears, labeled 'Review 1 change...'

• Click the button: the modal dialog to save entities opens.
• Click the padding area of the modal dialog.
• Observe the modal dialog closes.
• Alternatively preview a block theme from the WP admin > Appearance > any block theme > Live Preview.
• Click the blue button labeled 'Activate {theme name}' at the bottom of hte Navigation panel: the modal dialog to save entities opens.
• Click the padding area of the modal dialog.
• Observe the modal dialog closes.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[afercia]

I guess the reason why EntitiesSavedStatesExtensible gets the modal props via useDialog ie because this component is also rendered in the right panel when saving entities:

In this case, EntitiesSavedStatesExtensible is not inside a Modal dialog. The 'close when clicking outside' behavior may make sense in this case. However, this is inconsistent with other similar panels. For example, the pre-publish checks panel doesn't close when clicking outside of it.

What is the reason why the entities saved panel should close when clicking outside? I'm not sure this behavior adds value from an user experience perspective. It just introduces an inconsistent behavior. As an user, I would be confused and prefer this panel to stay open untile I close it.

Cc @WordPress/gutenberg-design any objection to remove the 'close on click outside' behavior from the entities saved panel?

[afercia]

Relevant previous change: #59622

[Mayank-Tripathi32]

Hey @afercia,

What do you think about adding a flag in useDialog to disable the behavior for specific places as needed? I’ve tried a simple approach and will open a sample PR for you to review.

Looking forward to your feedback!