[#68] Footer Navigation and Navigation Container Tweaks (#87)

* [#68] Footer Navigation and Navigation Container Tweaks

* [#68] Add default background color to new pattern

wp-content/themes/wp-starter/blocks/navigation-container/block.json

@@ -10,10 +10,18 @@
     "group",
     "toggle"
   ],
+  "supports": {
+    "jsx": true,
+    "layout": {
+      "default": {
+        "type": "flex",
+        "justifyContent": "left"
+      },
+      "allowOrientation": true,
+      "allowCustomContentAndWideSize": false
+    }
+  },
   "acf": {
     "mode": "preview"
-  },
-  "supports": {
-    "jsx": true
   }
 }

wp-content/themes/wp-starter/blocks/navigation-container/render.php

@@ -12,6 +12,23 @@
 	'x-trap="menuIsOpen"',
 ];
 
+$allowed = [
+	'core/group',
+	'core/paragraph',
+	'core/button',
+	'core/navigation',
+];
+
+$block_template = [
+	[
+		'core/navigation',
+	],
+];
+$inner          = [
+	'template'      => $block_template,
+	'allowedBlocks' => $allowed,
+];
+
 ?>
 <div <?php block_attrs( $block, 'wp-block-group navigation-container flex flex-col items-end gap-5 md:w-auto w-full', $attrs ); ?>>
 	<button
@@ -52,7 +69,7 @@ class="m-2" xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="curr
 		class="wp-block-group pt-24 md:pt-0 navigation-content md:!block w-full md:w-auto"
 	>
 		<div>
-			<?php inner_blocks(); ?>
+			<?php inner_blocks( $inner ); ?>
 		</div>
 	</div>
 </div>

wp-content/themes/wp-starter/blocks/navigation-container/render.twig

@@ -1,8 +1,13 @@
 {#
 	Block: Navigation Container
 #}
-
+{% set template = [
+	[
+		'core/navigation'
+	]
+] %}
 {% set allowed = [
+	'core/group',
 	'core/paragraph',
 	'core/button',
 	'core/navigation'

wp-content/themes/wp-starter/parts/footer-stacked-navigation.html

@@ -0,0 +1,13 @@
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"gray-100","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
+<div class="wp-block-group has-gray-100-background-color has-background" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)"><!-- wp:site-logo {"shouldSyncIcon":true} /-->
+
+<!-- wp:spacer {"width":"0px","style":{"layout":{"flexSize":"100px","selfStretch":"fixed"}}} -->
+<div style="height:100px;width:0px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:acf/navigation-container {"name":"acf/navigation-container","data":[],"mode":"preview","layout":{"type":"flex","orientation":"horizontal"}} -->
+<!-- wp:navigation {"overlayMenu":"never"} /-->
+
+<!-- wp:navigation {"overlayMenu":"never"} /-->
+<!-- /wp:acf/navigation-container --></div>
+<!-- /wp:group -->

wp-content/themes/wp-starter/parts/footer.html

@@ -1 +1,11 @@
-<!-- wp:pattern {"slug":"wp-starter/footer"} /-->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"gray-100","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group has-gray-100-background-color has-background" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)"><!-- wp:site-logo {"shouldSyncIcon":true} /-->
+
+<!-- wp:spacer {"width":"0px","style":{"layout":{"flexSize":"100px","selfStretch":"fixed"}}} -->
+<div style="height:100px;width:0px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:acf/navigation-container {"name":"acf/navigation-container","data":[],"mode":"preview"} -->
+<!-- wp:navigation {"overlayMenu":"never"} /-->
+<!-- /wp:acf/navigation-container --></div>
+<!-- /wp:group -->

wp-content/themes/wp-starter/patterns/footer.php

@@ -1,12 +1,10 @@
 <?php
 /**
- * Title: Footer with colophon
+ * Title: Footer with Navigation
  * Slug: wp-starter/footer
  * Categories: footer
  * Block Types: core/template-part/footer
  */
 
 ?>
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:site-title {"level":0,"fontSize":"medium"} /--></div>
-<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer"} /-->