[#148] Updating css to the new classes

Author: nathan-schmidt-viget

wp-content/themes/wp-starter/blocks/dialog/editor.css

@@ -1,8 +1,8 @@
 @layer components {
-	.acf-block-dialog {
+	.wp-block-acf-dialog {
 		@apply relative !border !border-black;
 		.inner {
-			@apply relative p-24;
+			@apply !relative p-24;
 		}
 
 		.acfbt-dialog-close {

wp-content/themes/wp-starter/blocks/dialog/group_672e7d812d248.json

@@ -18,19 +18,19 @@
 <div
 <?php if ( ! is_admin() ) : ?>
 	x-data="{
-	openDialog: false,
+		openDialog: false,
 
-	// Close the dialog when the user clicks backdrop
-	handleDialogClick(event) {
-		(event.target === $refs.dialogRef) && this.handleDialogClose()
-	},
+		// 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()
-	}
+		// Delay close to allow for animation
+		handleDialogClose() {
+			if (!this.openDialog) return;
+			this.openDialog = false;
+			$refs.dialogRef.close();
+		}
 	}"
 <?php endif; ?>
 >

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

@@ -13,19 +13,19 @@
 <div
 {% if function('is_admin') == false %}
 	x-data="{
-	openDialog: false,
+		openDialog: false,
 
-	// Close the dialog when the user clicks backdrop
-	handleDialogClick(event) {
-		(event.target === $refs.dialogRef) && this.handleDialogClose()
-	},
+		// 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()
-	}
+		// Delay close to allow for animation
+		handleDialogClose() {
+			if (!this.openDialog) return;
+			this.openDialog = false;
+			$refs.dialogRef.close();
+		}
 	}"
 {% endif %}
 >

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

@@ -5,14 +5,14 @@
 	}
 
 	.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;
+		@apply top-0 right-0 bottom-0 left-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 absolute top-12 right-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;
 		}