[#127] Updating alert banner

vigetlabs · Jul 30, 2024 · 39741e0 · 39741e0
1 parent edf6d6e
commit 39741e0
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 58 deletions.
diff --git a/wp-content/themes/wp-starter/blocks/alert-banner/block.json b/wp-content/themes/wp-starter/blocks/alert-banner/block.json
@@ -15,21 +15,25 @@
     "dismiss"
   ],
   "attributes": {
+    "block_id": {
+      "type": "string",
+      "default": ""
+    },
     "align": {
       "type": "string",
       "default": "full"
     },
     "backgroundColor": {
       "type": "string",
-      "default": "base-2"
+      "default": "dark-black"
     },
     "style": {
       "type": "object",
       "default": {
         "spacing": {
           "padding": {
-            "top": "var:preset|spacing|20",
-            "bottom": "var:preset|spacing|20",
+            "top": "var:preset|spacing|10",
+            "bottom": "var:preset|spacing|10",
             "left": "var:preset|spacing|20",
             "right": "var:preset|spacing|20"
           }

diff --git a/wp-content/themes/wp-starter/blocks/alert-banner/block.php b/wp-content/themes/wp-starter/blocks/alert-banner/block.php
@@ -26,7 +26,7 @@ function () {
  * @return void
  */
 function alert_banner_dismiss_button( string $id ): void {
-	$dismiss_button = sprintf(
+	$dismiss_button  = sprintf(
 		'<button class="dismiss" aria-label="%1$s" title="%2$s" @click="%3$s = !%3$s">',
 		esc_attr__( 'Dismiss alert banner', 'wp-starter' ),
 		esc_attr__( 'Dismiss', 'wp-starter' ),

diff --git a/wp-content/themes/wp-starter/blocks/alert-banner/render.php b/wp-content/themes/wp-starter/blocks/alert-banner/render.php
@@ -7,12 +7,19 @@
  * @package WPStarter
  */
 
+$id             = 'alert' . $block['block_id'] ?? $block['id'];
 $block_template = [
 	[
 		'core/paragraph',
-		[
-			'placeholder' => __( 'Enter alert banner message...', 'wp-starter' ),
-		],
+		{
+			'placeholder': 'Enter alert banner message...'
+		},
+	],
+	[
+		'core/button',
+		{
+			'className': 'is-style-outline',
+		},
 	],
 ];
 $allowed        = [
@@ -23,19 +30,16 @@
 	'template'      => $block_template,
 	'allowedBlocks' => $allowed,
 ];
-
-$attrs = [];
+$attrs          = [];
 
 if ( ! is_admin() ) {
-	$attrs['x-data'] = '{ ' . $block['id'] . ': $persist(true) }';
-	$attrs['x-show'] = $block['id'];
+	$attrs['x-data'] = '{ ' . $id . ': $persist(true) }';
+	$attrs['x-show'] = $id;
 }
 ?>
-<section
- 	<?php block_attrs( $block, "gap-24 lg:gap-48", $attrs ); ?>
- >
-	<div class="flex flex-col items-start gap-24 lg:flex-row lg:gap-48 lg:items-center">
+<section <?php block_attrs( $block, '', $attrs ); ?> >
+	<div class="wp-block-alert-banner__inner-container">
 		<?php inner_blocks( $inner ); ?>
 	</div>
-	<?php alert_banner_dismiss_button( $block['id'] ); ?>
+	<?php alert_banner_dismiss_button( $id ); ?>
 </section>
diff --git a/wp-content/themes/wp-starter/blocks/alert-banner/render.twig b/wp-content/themes/wp-starter/blocks/alert-banner/render.twig
@@ -2,14 +2,28 @@
 Block: Alert Banner
 #}
 
+{% set id = 'alert' ~ attributes.id %}
+
+{% if attributes.block_id is not empty %}
+    {% set id = 'alert' ~ attributes.block_id %}
+{% endif %}
+
+
 {% set template = [
 	[
 		'core/paragraph',
 		{
 			'placeholder': 'Enter alert banner message...'
 		}
+	],
+	[
+		'core/button',
+		{
+			'className': 'is-style-outline',
+		}
 	]
 ] %}
+
 {% set allowed = [
 	'core/paragraph',
 	'core/button',
@@ -23,15 +37,15 @@ Block: Alert Banner
 
 {% if function('is_admin') == false %}
 	{% set attrs = {
-		'x-data': '{ ' ~ attributes.id ~ ': $persist(true) }',
-		'x-show': attributes.id
+		'x-data': '{ ' ~ id ~ ': $persist(true) }',
+		'x-show': id
 	} %}
 {% endif %}
-<section
-	{{ block_attrs( attributes, 'gap-24 lg:gap-48', attrs ) }}
->
-	<div class="flex flex-col items-start gap-24 lg:flex-row lg:gap-48 lg:items-center">
+
+<section {{ block_attrs( attributes, '', attrs ) }} >
+	<div class="wp-block-alert-banner__inner-container">
 		{{ inner_blocks( inner ) }}
 	</div>
-	{{ function( 'alert_banner_dismiss_button', attributes.id ) }}
+	{{ function( 'alert_banner_dismiss_button', id ) }}
 </section>
+
diff --git a/wp-content/themes/wp-starter/blocks/alert-banner/style.css b/wp-content/themes/wp-starter/blocks/alert-banner/style.css
@@ -1,17 +1,22 @@
 @layer components {
 	.acf-block-alert-banner {
+		@apply flex gap-24 py-24 lg:gap-48;
+
+		.wp-block-alert-banner__inner-container {
+			@apply m-auto flex w-full flex-col items-start gap-24 text-sm sm:flex-wrap md:flex-row md:items-center md:py-0 lg:items-center lg:gap-48;
+
+			.wp-block-button .wp-block-button__link {
+				@apply border-gray-900 text-sm text-gray-900;
+				@apply hover:bg-gray-900 hover:text-white;
+			}
+		}
+
 		&.is-style-dismissible {
 			@apply relative;
 
 			.dismiss {
-				@apply bg-transparent;
-				@apply border-none;
-				@apply cursor-pointer;
-				@apply z-10;
-
-				&:after {
-					@apply content-['\2715'];
-				}
+				@apply z-10 m-auto size-24 cursor-pointer border border-none border-gray-900 bg-transparent md:inset-y-0 lg:absolute lg:right-16;
+				@apply after:flex after:items-center after:justify-center after:text-gray-900 after:content-['\2715'];
 			}
 		}
 
@@ -24,34 +29,17 @@
 		& p {
 			@apply flex-1;
 		}
-	}
-
-	/* Editor styles */
-	.wp-block-acf-alert-banner .acf-block-alert-banner.is-style-dismissible {
-		&:before {
-			@apply rounded;
-			@apply text-white;
-			@apply text-xs;
-			@apply left-16 -top-10;
-			@apply absolute;
-			@apply pointer-events-none;
-			@apply py-2 px-2.5;
-			@apply z-20;
-		}
-
-		&:not([data-id]):before {
-			@apply bg-red-700;
-			@apply uppercase;
-			@apply content-['ID_Required:_See_Advanced_>_HTML_Anchor'];
-		}
-
-		&[data-id]:before {
-			@apply bg-black;
-			@apply content-['#'_attr(data-id)];
-		}
 
-		.dismiss {
-			@apply cursor-default;
+		[class*='has-dark'],
+		&[class*='has-dark'] {
+			.wp-block-button .wp-block-button__link {
+				@apply border-white text-white;
+				@apply hover:bg-white hover:text-gray-900;
+			}
+			.dismiss {
+				@apply border-white after:text-white;
+				@apply hover:after:bg-white hover:after:text-gray-900;
+			}
 		}
 	}
 }