ska-theme includes a custom Alpine.js component for handling HTML dialog elements.
The module abstracts away calling the native .showModal(), .close() functions, adds x-transition to the dialog and enables closing of the modal by clicking away from the modal.
export interface DialogConfig {
// No options
}Creating a dialog
Adding x-data="skaDialog" do an element will locate a button and a dialog from its’ contents and automatically assign x-bind="trigger" and x-bind="dialog" attributes to them to handle opening and closing the dialog.
<div x-data="skaDialog">
<button>Open dialog</button>
<dialog>Dialog content</dialog>
</div>In the block editor the <dialog> element is rendered as <div> so it can be visible and editable. Since this content is usually designed to be rendered in an overlay use the Advanced -> Hide in editor option to hide this block in the editor unless it is selected, so that the dialog content doesn’t consume space in the editor unless you’re editing it.
Styling a dialog
ska-theme comes with a Dialog preset that can be applied to the <dialog> element to give it consistent styles. The preset is designed to utilize elements with .header and .content classes to style it and styles the ::backdrop as well.
<dialog class="ska-preset--ska-theme--dialog">
<div class="header">Dialog title</div>
<div class="content">Dialog content</div>
</dialog>Basic styled dialog
<!-- wp:ska/element {"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaDialog"}}} -->
<div x-data="skaDialog" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocks":{"p":[{"id":"ska-theme\u002d\u002dbutton","isStatic":true},{"id":"ska-theme\u002d\u002dprimary-button","isStatic":true}],"t":1740957313}} -->
<button class="wp-block-ska-text ska-text">Open dialog</button>
<!-- /wp:ska/text -->
<!-- wp:ska/element {"skaBlocks":{"p":[{"id":"ska-theme\u002d\u002ddialog","isStatic":true}],"t":1740957313},"skaBlocksAppender":{"type":"hidden"},"skaBlocksAs":{"element":"custom","customElement":"dialog"},"skaBlocksRender":{"editorNoRender":true}} -->
<dialog class="wp-block-ska-element"><!-- wp:ska/element {"skaBlocks":{"cx":"","css":"","t":1740957313},"skaBlocksAppender":{"type":"hidden"},"className":"header"} -->
<div class="wp-block-ska-element header"><!-- wp:paragraph -->
<p>Dialog header</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocks":{"cx":"","css":"","t":1740957313},"className":"content"} -->
<div class="wp-block-ska-element content"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dapibus malesuada tristique. Sed elit sapien, imperdiet at orci in, consectetur aliquam ligula. In vulputate at lorem ac vehicula. Ut hendrerit nulla nisl, vel ornare nisl molestie in. Aliquam sit amet nibh libero. Suspendisse vitae massa ac ex tincidunt iaculis blandit sit amet sapien.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></dialog>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->The dialog closes when clicking on outside area. For a custom close button add an element with x-on:click="close" attribute.
<div class="header flex flex-row justify-between items-center">
<p class="m-0">Dialog title</p>
<button x-on:click="close" aria-label="Close dialog">
<svg .../>
</button>
</div>Styled dialog with a close button
<!-- wp:ska/element {"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaDialog"}}} -->
<div x-data="skaDialog" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocks":{"p":[{"id":"ska-theme\u002d\u002dbutton","isStatic":true},{"id":"ska-theme\u002d\u002dprimary-button","isStatic":true}],"t":1740957313}} -->
<button class="wp-block-ska-text ska-text">Open dialog</button>
<!-- /wp:ska/text -->
<!-- wp:ska/element {"skaBlocks":{"p":[{"id":"ska-theme\u002d\u002ddialog","isStatic":true}],"t":1740957313},"skaBlocksAppender":{"type":"hidden"},"skaBlocksAs":{"element":"custom","customElement":"dialog"},"skaBlocksRender":{"editorNoRender":true}} -->
<dialog class="wp-block-ska-element"><!-- wp:ska/element {"skaBlocks":{"cx":"","css":"","t":1740957313},"skaBlocksAppender":{"type":"hidden"},"className":"header"} -->
<div class="wp-block-ska-element header"><!-- wp:paragraph {"skaBlocks":{"cx":"m-0","css":".m-0{margin:var(\u002d\u002dspacing-0)}","t":1740957313},"skaBlocksMargin":{"v":{"$":{"@":"0"}}}} -->
<p class="m-0">Dialog header</p>
<!-- /wp:paragraph -->
<!-- wp:ska/element {"skaBlocks":{"cx":"hover:text-link","css":"@media (hover:hover){.hover\\:text-link:hover{color:var(\u002d\u002dcolor-link)}}","t":1740957313},"skaBlocksAppender":{"type":"hidden"},"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-on:click":"close","aria-label":"Close dialog"}},"skaBlocksTextColor":{"v":{"$":{"@":""},"hover":{"@":"link"}}}} -->
<button x-on:click="close" aria-label="Close dialog" class="hover:text-link wp-block-ska-element"><!-- wp:ska/image {"mode":"svg","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\t\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L12 10.9393L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L13.0607 12L18.5303 17.4697C18.8232 17.7626 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L12 13.0607L6.53033 18.5303C6.23744 18.8232 5.76256 18.8232 5.46967 18.5303C5.17678 18.2374 5.17678 17.7626 5.46967 17.4697L10.9393 12L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z\u0022 fill=\u0022currentColor\u0022 /\u003e\n\u003c/svg\u003e","collection":"heroicons","icon":"24/solid/x-mark","wrap":false,"sanitize":false,"skaBlocks":{"cx":"w-6 h-auto text-current","css":".w-6{width:var(\u002d\u002dspacing-6)}.h-auto{height:auto}.text-current{color:currentColor}","t":1740957313},"skaBlocksWidth":{"v":{"$":{"@":"6"}}},"skaBlocksHeight":{"v":{"$":{"@":"auto"}}},"skaBlocksTextColor":{"v":{"$":{"@":"current"}}}} -->
<svg aria-hidden="true" class="w-6 h-auto text-current wp-block-ska-image" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L12 10.9393L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L13.0607 12L18.5303 17.4697C18.8232 17.7626 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L12 13.0607L6.53033 18.5303C6.23744 18.8232 5.76256 18.8232 5.46967 18.5303C5.17678 18.2374 5.17678 17.7626 5.46967 17.4697L10.9393 12L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z" fill="currentColor"></path>
</svg>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocks":{"cx":"","css":"","t":1740957313},"className":"content"} -->
<div class="wp-block-ska-element content"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dapibus malesuada tristique. Sed elit sapien, imperdiet at orci in, consectetur aliquam ligula. In vulputate at lorem ac vehicula. Ut hendrerit nulla nisl, vel ornare nisl molestie in. Aliquam sit amet nibh libero. Suspendisse vitae massa ac ex tincidunt iaculis blandit sit amet sapien.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></dialog>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->