Remote: add footer and tags pattern (#5543)

* Add tags pattern and register it.

* Revise footer.

* categories pattern, used different blocks, added to the footer

* Corrected a couple of comments

* Remove CSS that is in gutenberg now.

* Make tags uppercase.

* Remove text tranform from tag cloud.

Co-authored-by: Maggie <maggie.cabrera@automattic.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>

remote/inc/block-patterns.php

@@ -46,6 +46,8 @@ function remote_register_block_patterns() {
 		'hidden-search-form',
 		'posts-grid',
 		'posts-list',
+		'tags',
+		'categories',
 	);
 
 	/**

remote/inc/patterns/categories.php

@@ -0,0 +1,12 @@
+<?php
+/**
+ * Categories Pattern
+ */
+return array(
+	'title'      => __( 'Categories', 'remote' ),
+	'categories' => array( 'text' ),
+	'content'    => '<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} -->
+		<p class="has-small-font-size" style="text-transform:uppercase">' . esc_html__( 'Categories', 'remote' ) . '</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:tag-cloud {"className":"is-style-outline","taxonomy":"category"} /-->',
+);

remote/inc/patterns/tags.php

@@ -0,0 +1,12 @@
+<?php
+/**
+ * Tags Pattern
+ */
+return array(
+	'title'      => __( 'Tags', 'remote' ),
+	'categories' => array( 'text' ),
+	'content'    => '<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} -->
+		<p class="has-small-font-size" style="text-transform:uppercase">' . esc_html__( 'Tags', 'remote' ) . '</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:tag-cloud {"className":"is-style-outline"} /-->',
+);

remote/parts/footer.html

@@ -7,19 +7,13 @@
 
 <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":"5%"}}} -->
 <div class="wp-block-columns alignwide"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:heading {"fontSize":"small","style":{"typography":{"textTransform":"uppercase"}}} -->
-<h2 class="has-small-font-size" style="text-transform:uppercase">Tags</h2>
-<!-- /wp:heading -->
-
-<!-- wp:tag-cloud {"className":"is-style-outline"} /--></div>
+<div class="wp-block-column">
+<!-- wp:pattern {"slug":"remote/tags"} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class="wp-block-column"><!-- wp:heading {"fontSize":"small","style":{"typography":{"textTransform":"uppercase"}}} -->
-<h2 class="has-small-font-size" style="text-transform:uppercase">Categories</h2>
-<!-- /wp:heading -->
-
-<!-- wp:tag-cloud {"className":"is-style-outline","taxonomy":"category"} /-->
+<div class="wp-block-column">
+<!-- wp:pattern {"slug":"remote/categories"} /-->
 </div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
@@ -27,16 +21,14 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":32} -->
-<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":112} -->
+<div style="height:112px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:group -->
-<div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} -->
-<p class="has-text-align-center" style="font-size:var(--wp--custom--font-sizes--tiny)">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->
+<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
+<p class="has-text-align-center has-small-font-size">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
+<!-- /wp:paragraph -->
 
-<!-- wp:spacer {"height":32} -->
-<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":58} -->
+<div style="height:58px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->

remote/style.css

@@ -195,3 +195,11 @@ a:not(
 	outline: 1.5px dotted var(--wp--preset--color--primary);
 	outline-offset: 3px;
 }
+
+/*
+ * Needed until https://github.com/WordPress/gutenberg/issues/34196 or something like it.
+ */
+.wp-block-tag-cloud.is-style-outline a {
+	border-radius: 10px;
+	padding: .5rem 1.25rem;
+}