[Component] Modal

[nathan-schmidt-viget]

Modal / Dialog Component

• Blueprint: https://staging.blueprint.viget.com/elements/dialog/compound-component/
• Whimsical: N/A
• Figma: N/A

Short Description

Modal/Dialog block that works completely within the editor. The user should not have to go to another screen to create the modal content. Everything should be in the editor using core blocks or customizable sub-components whenever possible.

Custom Sub Components

• Trigger/Toggle Button: User-editable Core button element - This triggers the modal on the front-end.
• Content: Modal contents (mostly consists of inner_blocks().
• Close Button: Closes the modal, also customizable by the user (Color, Text?, Position?)

Notes

• When the component is added in the Editor, the dialog should be open by default.
  • It should feel just like a modal as a user would see on the front-end.
• When the modal is visible:
  • The Modal Content element width can be adjusted using standard WordPress block layout settings such as alignwide, alignfull, and background color.
  • Clicking the close button should hide the modal so the rest of the page is editable without the modal content visible.
• When the modal is not visible:
  • The user should see the modal trigger button that has a custom icon/style attached identifying it as a modal component (similar to the responsive icon in Viget Blocks Toolkit)
  • There should be a custom Admin control that can be used to toggle the modal to open again. This control is separate from the customizable Button/Trigger and should not render on the front-end.
• The user should be able to assign a custom ID (anchor) to the modal component, but is not required. Setting any button's href to the anchor should trigger the modal (#my-modal). If an ID has not been manually assigned, one will be automatically generated for them (potentially using the blockId feature in Viget Blocks Toolkit).

Design

N/A