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