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.
- Upload and activate the plugin. WordPress 7.1 or later is required.
- In the Site Editor, create a template part in the Dialog Surface area and
pick a starting design.
- Insert a Dialog Button Group, set a button's Action to open a Dialog
Surface, and choose the part.
The buttons work with any block theme and carry their own fallbacks. Dialog
surfaces read the Material 3 colour, shape and motion tokens that Axismundi
Theme provides; on another theme, define those
--md-sys-* tokens or the
surfaces render without their colours, corners and motion.
0.3.1
- Distribution: Fill now fills on the page. The group widened each button's
slot, but the button kept its own width at the start of it, so a filled
group looked scattered on the front end while it looked right in the editor.
- Remove a development file (
package-lock.json) that the 0.3.0 package on
WordPress.org included by mistake, doubling the plugin's installed size.
Earlier releases are listed in changelog.txt.