Meraki: Work in progress (#5862)

* Meraki: Update theme screenshot and image credits.

* Meraki: Add custom footer pattern.

* Meraki: Make footer full width.

* Meraki: Update header - apply vertical alignment to header elements.

* Meraki: Update theme.json file - add tiny font size, update color palette, add styling for button block.

meraki/parts/footer.html

@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"meraki/footer-default"} /-->

meraki/parts/header-minimal.html

@@ -1,9 +1,9 @@
 <!-- wp:group {"className":"gapless-group","layout":{"inherit":"true"}} -->
-<div class="wp-block-group gapless-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--gap--vertical)","top":"var(--wp--custom--gap--vertical)"}}},"className":"site-header site-header-linear","layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull site-header site-header-linear" style="padding-top:var(--wp--custom--gap--vertical);padding-bottom:var(--wp--custom--gap--vertical)"><!-- wp:group {"className":"site-brand","layout":{"type":"flex"}} -->
+<div class="wp-block-group gapless-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--gap--vertical)","top":"var(--wp--custom--gap--vertical)"}}},"className":"site-header site-header-linear","layout":{"type":"flex","justifyContent":"space-between","verticalAlignment":"bottom"}} -->
+<div class="wp-block-group alignfull site-header site-header-linear" style="padding-top:var(--wp--custom--gap--vertical);padding-bottom:var(--wp--custom--gap--vertical)"><!-- wp:group {"className":"site-brand","layout":{"type":"flex","verticalAlignment":"bottom"}} -->
 <div class="wp-block-group site-brand"><!-- wp:site-logo {"width":64} /-->
 
-<!-- wp:group {"className":"site-words-stack-small","layout":{"type":"flex"}} -->
+<!-- wp:group {"className":"site-words-stack-small","layout":{"type":"flex","verticalAlignment":"bottom"}} -->
 <div class="wp-block-group site-words-stack-small"><!-- wp:site-title /-->
 
 <!-- wp:site-tagline /--></div>

meraki/patterns/footer-default.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Title: Default footer block pattern
+ * Slug: meraki/footer-default
+ * Categories: footer
+ * Block Types: core/template-part/footer
+ */
+?>
+
+<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"20px","bottom":"20px"}}},"backgroundColor":"black","textColor":"background"} -->
+<div class="wp-block-group has-background-color has-black-background-color has-text-color has-background has-link-color" style="padding-top:20px;padding-bottom:20px">
+	<!-- wp:paragraph {"align":"center","fontSize":"tiny"} -->
+	<p class="has-text-align-center has-tiny-font-size">
+		<?php
+			printf(
+				/* Translators: WordPress link. */
+				esc_html__( 'Proudly powered by %s', 'meraki' ),
+				'<a href="' . esc_url( __( 'https://wordpress.org', 'meraki' ) ) . '" rel="nofollow">WordPress</a>'
+			)
+			?>
+	</p>
+	<!-- /wp:paragraph -->
+</div>
+<!-- /wp:group -->

meraki/readme.txt

@@ -28,3 +28,9 @@ This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.
+
+Meraki uses the following images:
+
+License: CC0
+https://www.pexels.com/photo/contemporary-stylish-building-and-arch-bridge-against-pink-sundown-sky-5707603/
+Used in theme screenshot and demo site.

meraki/templates/404.html

@@ -7,4 +7,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container alignfull"} /-->

meraki/templates/archive.html

@@ -30,4 +30,4 @@
 </main>
 <!-- /wp:query -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container alignfull"} /-->

meraki/templates/header-footer-only.html

@@ -4,4 +4,4 @@
 <main class="wp-block-group"><!-- wp:post-content {"layout":{"inherit":true}} /--></main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container alignfull"} /-->

meraki/templates/index.html

@@ -28,4 +28,4 @@
 <!-- /wp:group --></main>
 <!-- /wp:query -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container alignfull"} /-->

meraki/templates/page.html

@@ -18,4 +18,9 @@
 <!-- wp:post-comments /--></div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:spacer {"height":"60px"} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container alignfull"} /-->

meraki/templates/search.html

@@ -44,4 +44,4 @@
 </main>
 <!-- /wp:query -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container alignfull"} /-->

meraki/templates/single.html

@@ -25,4 +25,9 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:spacer {"height":"60px"} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container alignfull"} /-->

meraki/theme.json

@@ -7,19 +7,19 @@
 					"slug": "primary",
 					"color": "#1a2530",
 					"name": "Primary",
-					"default": "#007cba"
+					"default": "#000000"
 				},
 				{
 					"slug": "secondary",
 					"color": "#8d3f6e",
 					"name": "Secondary",
-					"default": "#006ba1"
+					"default": "#8d3f6e"
 				},
 				{
 					"slug": "foreground",
 					"color": "#1a2530",
 					"name": "Foreground",
-					"default": "#333333"
+					"default": "#000000"
 				},
 				{
 					"slug": "background",
@@ -80,6 +80,11 @@
 				}
 			],
 			"fontSizes": [
+				{
+					"name": "Tiny",
+					"size": ".875rem",
+					"slug": "tiny"
+				},
 				{
 					"name": "Small",
 					"size": "1rem",
@@ -110,11 +115,26 @@
 	},
 	"styles": {
 		"blocks": {
+			"core/button": {
+				"border": {
+					"radius": "50"
+				},
+				"color": {
+					"background": "var(--wp--preset--color--foreground)",
+					"text": "var(--wp--preset--color--background)"
+				},
+				"typography": {
+					"letterSpacing": "0.05em",
+					"fontSize": "var(--wp--preset--font-size--tiny)",
+					"textTransform": "uppercase",
+					"lineHeight": "1.2"
+				}
+			},
 			"core/navigation-link": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--heading-font)",
 					"letterSpacing": "0.05em",
-					"fontSize": "var(--wp--custom--font-sizes--tiny)",
+					"fontSize": "var(--wp--preset--font-size--tiny)",
 					"textTransform": "uppercase"
 				}
 			},
@@ -139,7 +159,7 @@
 			"core/site-tagline": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--heading-font)",
-					"fontSize": "var(--wp--preset--font-size--normal)"
+					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			}
 		},