Fixes #67313

Alternative to #67327

What?

When the entity saved states component is rendered inside a Modal component, clicking the padding area inside the modal dialog closes the modal unexpectedly.

Basically, this PR seeks to:

• Pass down the renderDialog prop as it is supposed to be used.
• Attach the useDialog props to the component only when it is expected to work with a modal behavior i.e. when renderDialog is true.
• Improve the renderDialog docs.

TL;DR

#59622 made the EntitiesSavedStates component behave like a modal dialog when the new renderDialog prop is true. However, the props from useDialog are always passed unconditionally to the component. As such, the component gets some modal behaviors including the 'close when clicking outside'. This works when the component is rendered in the save panel on the right. I doesn't work well when it is rendered inside a Modal dialog because in this case it's a sort of 'modal behavior' within a 'modal behavior' e.g.: clicking outside the inner component with modal behavior but still inside the outer Modal component closes the modal unexpectedly.

Why?

Modal dialogs should not close unexpectedly.
The useDialog props should be passed conditionally, in the same way role=dialog, aria-labelledby, and aria-describedby are passed conditionally. This makes sure that when the component gets the ARIA attributes related to a modal dialog, it also behaves like a modal dialog. When renderDialog is false, none of the props related to the modal dialog should be set.

How?

• Passes the useDialog props conditionally based on renderDialog.
• Fixes the renderDialog props, please double check this as it seems to me the docs introduced in Documentation: EntitiesSavedStates editor component #62377 aren't accurate.
• Makes sure that the buttons that open the entity saved state panel do have an aria-haspopup="dialog" attribute.

Testing Instructions

• Repeat the testing instructions from Entity saved modal dialog closes unexpectedly #67313
• Observe the modal dialog does not close unexpectedly any longer.
• Make styles changes in the Site editor or preview a block theme in the editor.
• Click the 'Save' or 'activate theme' button at the top right of the screen: the entity saved state component renders in the right sidebar.
• Inspect the source and observe the element with class entities-saved-states__panel does have a role=dialog and correct aria-labelledby and aria-describedby.
• Note: when there are changes, this component may still be rendered in the DOM even when it is closed and it's hidden via CSS.

These are the ARIA properties for the component in the Site editor:

And these are the ones for the theme preview:

• Check that wherever the entity saved state component renders in the right sidebar:
  • It closes when clicking outside of it.
  • It has correct aria role, aria-labelledby and aria-describedby.
• For example, this should be checked also in the Post editor, after editing a template from the post editor and saving, the entity saved state component is used instead of the normal publish panel.

Testing Instructions for Keyboard

Screenshots or screencast