[#148] Dialog block

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"
+  }
+}

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;
+	}
+}

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
+}

wp-content/themes/wp-starter/blocks/dialog/render.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Block: Dialog
+ *
+ * @global array $block
+ *
+ * @package WPStarter
+ */
+
+$cbx_id      = uniqid();
+$button_text = get_field( 'button_text' );
+?>
+<?php if ( is_admin() ) : ?>
+	<input type="checkbox" id="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-checkbox">
+	<label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-label"><?php esc_html_e( 'Toggle Dialog', 'wp-site-starter' ); ?></label>
+<?php endif; ?>
+
+<div
+<?php if ( ! is_admin() ) : ?>
+	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()
+	}
+	}"
+<?php endif; ?>
+>
+
+	<dialog
+		<?php block_attrs( $block ); ?>
+		<?php if ( ! is_admin() ) : ?>
+			x-ref="dialogRef"
+			@keydown.escape.prevent="handleDialogClose()"
+			@click="handleDialogClick(event)"
+		<?php endif; ?>
+	>
+		<?php if ( ! is_admin() ) : ?>
+			<button
+				class="acf-dialog-close"
+				@click="handleDialogClose()"
+			>
+				<span class="sr-only"><?php esc_html_e( 'Close', 'wp-site-starter' ); ?></span>
+			</button>
+		<?php endif; ?>
+
+		<div class="inner">
+			<?php if ( is_admin() ) : ?>
+				<label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-close">
+					<span class="sr-only"><?php esc_html_e( 'Close', 'wp-site-starter' ); ?></span>
+				</label>
+			<?php endif; ?>
+			<?php inner_blocks(); ?>
+		</div>
+	</dialog>
+
+	<button
+		class="btn-default"
+		<?php if ( ! is_admin() ) : ?>
+			@click="$refs.dialogRef.showModal(), openDialog = true"
+		<?php endif; ?>
+	>
+		<?php esc_html_e( $button_text ? $button_text : 'Open', 'wp-site-starter' ); ?>
+	</button>
+</div>

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 %}
+	<input type="checkbox" id="{{ cbx_id }}" class="acfbt-dialog-checkbox">
+	<label for="{{ cbx_id }}" class="acfbt-dialog-label">Toggle Dialog</label>
+{% endif %}
+
+<div
+{% if function('is_admin') == false %}
+	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()
+	}
+	}"
+{% endif %}
+>
+
+	<dialog
+		{{ block_attrs( block ) }}
+		{% if function('is_admin') == false %}
+			x-ref="dialogRef"
+			@keydown.escape.prevent="handleDialogClose()"
+			@click="handleDialogClick(event)"
+		{% endif %}
+	>
+		{% if function('is_admin') == false %}
+			<button
+				class="acf-dialog-close"
+				@click="handleDialogClose()"
+			>
+				<span class="sr-only">Close</span>
+			</button>
+		{% endif %}
+
+		<div class="inner">
+			{% if function('is_admin') == true %}
+				<label for="{{ cbx_id }}" class="acfbt-dialog-close">
+					<span class="sr-only">Close</span>
+				</label>
+			{% endif %}
+			{{ inner_blocks() }}
+		</div>
+	</dialog>
+
+
+	<button
+		class="btn-default"
+		{% if function('is_admin') == false %}
+			@click="$refs.dialogRef.showModal(), openDialog = true"
+		{% endif %}
+	>
+		{{ button_text ? button_text : 'Open' }}
+	</button>
+</div>

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;
+		}
+	}
+}