Axismundi Dialogs builds Material Design 3 dialogs and sheets, and the buttons
that open them, from native HTML and WordPress blocks.
Dialog surfaces
A dialog or sheet is not a block placed in a post. It is a template part in the
Dialog Surface area, managed in the Site Editor the way core manages a
Navigation Overlay: a button in a post or template names the part, and the part
is rendered once, at the end of the page.
The part’s root is the Dialog block, a native <dialog> element. Its
presentation is a choice of four:
- Dialog – Basic – a centred dialog.
- Dialog – Full screen – fills the window on compact screens and becomes a
basic dialog from 600px up. - Sheets – Bottom – a bottom sheet with an optional drag handle. The handle
moves the sheet between its initial and expanded heights by click, keyboard,
drag or fling. - Sheets – Side – a side sheet on the start or end edge.
Sheets can be modal or standard. A standard side sheet stays open beside the
page and either resizes or moves the page to make room; on compact screens it
opens as a modal. Content goes in Header, Content and Actions groups, and only
Content scrolls.
Opening and closing are animated with Material 3 motion, and respect reduced
motion. The native dialog supplies the top layer, scrim, focus containment and
focus restoration; Escape and scrim dismissal follow the dialog’s settings.
When a part is created in the Dialog Surface area, the Site Editor offers seven
starting designs: basic dialog, basic dialog with icon, list dialog, full-screen
dialog, bottom sheet, modal side sheet and standard side sheet. The pattern is
only a start; the part made from it is yours to edit.
Buttons
A Dialog Button Group holds Dialog Button and Dialog Icon Button
blocks: a Material 3 standard button group. The group sets size, shape,
distribution and selection; each button carries its icon, toggle and disabled
state. The buttons render as WordPress buttons, so a theme’s button styles apply
to them, and they convert to and from core/button.
Each button’s Action decides what it does, and the markup and ARIA follow
from that choice: a command, a form submit or reset, opening or closing a
Dialog Surface, or opening or closing a Navigation Overlay template part.
A toggle, or a button whose surface is open, can swap to a selected icon, fill
a variable icon font, and move between the two with a fade, rotation or scale.
Preview on hover shows that state under the pointer and keyboard focus.
The Dialog Icon block draws an icon from the theme’s icon font or the
WordPress Icon Registry; the same renderer paints the icons inside the buttons.
Per-page hubs
Object Media Dialog and Post Quick View are single dialogs placed once
per page. Blocks in a feed open them with the selected item, so a feed never
renders one hidden dialog per post. Post Quick View fetches the post on demand
from this site’s REST API; its trigger currently links to the post’s comments.