diff --git a/wp-content/themes/wp-starter/blocks/dialog/block.json b/wp-content/themes/wp-starter/blocks/dialog/block.json new file mode 100644 index 00000000..e3198f40 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/block.json @@ -0,0 +1,40 @@ +{ + "name": "dialog", + "title": "Dialog", + "description": "Displays a Dialog/Modal Component.", + "icon": "cover-image", + "category": "components", + "textdomain": "wp-starter", + "keywords": ["popup", "overlay", "cta", "section", "dialog"], + "attributes": { + "align": { + "type": "string", + "default": "wide" + } + }, + "supports": { + "jsx": true, + "mode": false, + "alignWide": true, + "color": { + "background": true + }, + "background": { + "backgroundImage": true, + "backgroundSize": true + }, + "layout": { + "default": { + "type": "constrained", + "justifyContent": "center" + }, + "allowOrientation": false, + "allowCustomContentAndWideSize": false + } + }, + "viewStyle": "file:./view.css", + "editorStyle": "file:./editor.css", + "acf": { + "mode": "preview" + } +} diff --git a/wp-content/themes/wp-starter/blocks/dialog/editor.css b/wp-content/themes/wp-starter/blocks/dialog/editor.css new file mode 100644 index 00000000..f4dca1c2 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/editor.css @@ -0,0 +1,29 @@ +@layer components { + .acf-block-dialog { + @apply relative !border !border-black; + .inner { + @apply relative p-24; + } + + .acfbt-dialog-close { + @apply absolute right-12 top-12 z-50 m-auto size-32 cursor-pointer border border-none border-black bg-transparent hover:bg-black; + @apply after:flex after:items-center after:justify-center after:text-black after:content-['\2715'] hover:after:text-white; + } + } + + .acfbt-dialog-label { + @apply mb-24 block cursor-pointer; + } + + .acfbt-dialog-checkbox { + @apply sr-only; + } + + input:checked + label + div .acf-block-dialog { + @apply block w-2/3; + } + + .is-root-container:has(.acf-block-dialog) { + @apply relative; + } +} diff --git a/wp-content/themes/wp-starter/blocks/dialog/group_672e7d812d248.json b/wp-content/themes/wp-starter/blocks/dialog/group_672e7d812d248.json new file mode 100644 index 00000000..5a2b1540 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/group_672e7d812d248.json @@ -0,0 +1,54 @@ +{ + "key": "group_672e7d812d248", + "title": "Dialog Block", + "fields": [ + { + "key": "field_672e7d81d71ee", + "label": "Button Text", + "name": "button_text", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "Open", + "maxlength": "", + "allow_in_bindings": 0, + "placeholder": "", + "prepend": "", + "append": "", + "show_in_graphql": 1, + "graphql_description": "", + "graphql_field_name": "buttonText", + "graphql_non_null": 0 + } + ], + "location": [ + [ + { + "param": "block", + "operator": "==", + "value": "acf\/dialog" + } + ] + ], + "menu_order": 0, + "position": "normal", + "style": "default", + "label_placement": "top", + "instruction_placement": "label", + "hide_on_screen": "", + "active": true, + "description": "", + "show_in_rest": 0, + "show_in_graphql": 1, + "graphql_field_name": "dialogBlock", + "map_graphql_types_from_location_rules": 0, + "graphql_types": "", + "modified": 1731100092 +} diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.php b/wp-content/themes/wp-starter/blocks/dialog/render.php new file mode 100644 index 00000000..f0d1ddc0 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/render.php @@ -0,0 +1,73 @@ + + + + + + +
+ x-data="{ + openDialog: false, + + // Close the dialog when the user clicks backdrop + handleDialogClick(event) { + (event.target === $refs.dialogRef) && this.handleDialogClose() + }, + + // Delay close to allow for animation + handleDialogClose() { + if (!this.openDialog) return + this.openDialog = false + $refs.dialogRef.close() + } + }" + +> + + + + x-ref="dialogRef" + @keydown.escape.prevent="handleDialogClose()" + @click="handleDialogClick(event)" + + > + + + + +
+ + + + +
+ + + +
diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.twig b/wp-content/themes/wp-starter/blocks/dialog/render.twig new file mode 100644 index 00000000..3ce5f580 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/render.twig @@ -0,0 +1,69 @@ +{# + Block: Dialog +#} + +{% set cbx_id = 'dialog-' ~ random() %} +{% set button_text = block.data['button_text'] %} + +{% if function('is_admin') == true %} + + +{% endif %} + +
+ + + {% if function('is_admin') == false %} + + {% endif %} + +
+ {% if function('is_admin') == true %} + + {% endif %} + {{ inner_blocks() }} +
+ + + + +
diff --git a/wp-content/themes/wp-starter/blocks/dialog/view.css b/wp-content/themes/wp-starter/blocks/dialog/view.css new file mode 100644 index 00000000..32279c65 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/view.css @@ -0,0 +1,23 @@ +@layer components { + html:has(.acf-block-dialog[open]), + body:has(.acf-block-dialog[open]) { + @apply overflow-hidden; + } + + .acf-block-dialog { + @apply bottom-0 left-0 right-0 top-0 !m-auto h-1/2 w-1/2 rounded border-none bg-white; + + &::backdrop { + @apply bg-black/70; + } + + .acf-dialog-close { + @apply absolute right-12 top-12 z-10 m-auto size-32 cursor-pointer border border-none border-black bg-transparent hover:bg-black; + @apply after:flex after:items-center after:justify-center after:text-black after:content-['\2715'] hover:after:text-white; + } + + > .inner { + @apply flex flex-col p-24; + } + } +}