Axismundi Dialogs
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
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.
