Merge pull request #4343 from Automattic/skatepark-footer

Skatepark: footer and pre footer block pattern

blockbase/assets/ponyfill.css

@@ -179,6 +179,7 @@ a:hover, a:focus {
 	text-decoration: none;
 }
 
+input.wp-block-search__input,
 input[type="text"],
 input[type="email"],
 input[type="url"],
@@ -204,6 +205,7 @@ textarea {
 	padding: var(--wp--custom--form--padding);
 }
 
+input.wp-block-search__input:focus,
 input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="url"]:focus,
@@ -565,23 +567,28 @@ p.has-background {
 	font-style: var(--wp--custom--quote--citation--typography--font-style);
 }
 
+.wp-block-search {
+	margin-top: var(--wp--custom--margin--baseline);
+}
+
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-	padding: var(--wp--custom--form--padding);
+	padding: var(--wp--custom--form--border--width);
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	border-radius: var(--wp--custom--form--border--radius);
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
-	padding: 0;
+	padding: 0 var(--wp--custom--form--padding);
 }
 
 .wp-block-search .wp-block-search__input {
+	line-height: var(--wp--custom--button--typography--line-height);
 	padding: var(--wp--custom--form--padding);
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-.wp-block-search .wp-block-search__button {
+.wp-block-search .wp-block-search__button.wp-block-search__button {
 	border-width: 0;
 	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
 	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
@@ -600,14 +607,14 @@ p.has-background {
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button svg,
-.wp-block-search .wp-block-search__button svg {
+.wp-block-search .wp-block-search__button.wp-block-search__button svg {
 	fill: var(--wp--custom--button--color--text);
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color):hover,
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color):focus,
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
 	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
 	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
 	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
@@ -619,14 +626,14 @@ p.has-background {
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg {
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg {
 	fill: var(--wp--custom--button--color--text);
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon,
-.wp-block-search .wp-block-search__button.has-icon {
+.wp-block-search .wp-block-search__button.wp-block-search__button.has-icon {
 	line-height: 0;
 }
 

blockbase/sass/blocks/_search.scss

@@ -1,25 +1,27 @@
 @import 'button-mixins';
 
 .wp-block-search {
+	margin-top: var(--wp--custom--margin--baseline);
 
 	&.wp-block-search__button-inside {
 		.wp-block-search__inside-wrapper{
-			padding: var(--wp--custom--form--padding);
+			padding: var(--wp--custom--form--border--width);
 			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 			border-radius: var(--wp--custom--form--border--radius);
 			.wp-block-search__input {
-				padding: 0;
+				padding: 0 var(--wp--custom--form--padding);
 			}
 		}
 	}
 
 	.wp-block-search__input {
+		line-height: var(--wp--custom--button--typography--line-height);
 		padding: var(--wp--custom--form--padding);
 		border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	}
 
 	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-	.wp-block-search__button {
+	.wp-block-search__button.wp-block-search__button {
 		@include button-main-styles;
 		@include button-hover-styles;
 		&.has-icon {

blockbase/sass/elements/_forms.scss

@@ -1,3 +1,4 @@
+input.wp-block-search__input,
 input[type="text"],
 input[type="email"],
 input[type="url"],

skatepark/assets/theme.css

@@ -57,6 +57,7 @@
 
 .wp-block-file .wp-block-file__button {
 	text-transform: uppercase;
+	letter-spacing: 0.1em;
 }
 
 .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
@@ -70,14 +71,15 @@
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-.wp-block-search .wp-block-search__button {
+.wp-block-search .wp-block-search__button.wp-block-search__button {
 	text-transform: uppercase;
+	letter-spacing: 0.1em;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus,
-.wp-block-search .wp-block-search__button:hover,
-.wp-block-search .wp-block-search__button:focus,
-.wp-block-search .wp-block-search__button.has-focus {
+.wp-block-search .wp-block-search__button.wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button.wp-block-search__button:focus,
+.wp-block-search .wp-block-search__button.wp-block-search__button.has-focus {
 	border-style: var(--wp--custom--button--border--style);
 	border-color: currentColor;
 	border-width: var(--wp--custom--button--border--width);
@@ -89,6 +91,7 @@
 
 .wp-block-post-comments input[type="submit"], .wp-block-post-comments .reply a {
 	text-transform: uppercase;
+	letter-spacing: 0.1em;
 }
 
 .wp-block-post-comments input[type="submit"]:hover, .wp-block-post-comments input[type="submit"]:focus, .wp-block-post-comments input[type="submit"].has-focus, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a.has-focus {
@@ -109,6 +112,71 @@
 	background-color: var(--wp--custom--button--color--text);
 }
 
+.wp-block-search .wp-block-search__button:active, .wp-block-search .wp-block-search__button:focus {
+	outline-offset: -0.25em;
+}
+
+.wp-block-search .wp-block-search__button svg {
+	min-width: 2em;
+	min-height: 2em;
+}
+
+.wp-block-search .wp-block-search__button.has-icon {
+	--wp--custom--button--spacing--padding--left: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
+	--wp--custom--button--spacing--padding--right: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	padding: 0;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	--wp--custom--button--color--text: var(--wp--custom--color--primary);
+	--wp--custom--button--color--background: var(--wp--custom--color--background);
+	position: relative;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button::before {
+	content: "";
+	height: 80%;
+	width: 1px;
+	background: var(--wp--custom--color--primary);
+	position: absolute;
+	left: 0;
+	top: 10%;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover {
+	--wp--custom--button--color--text: var(--wp--custom--color--background);
+	--wp--custom--button--color--background: var(--wp--custom--color--primary);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover.has-focus {
+	outline-color: var(--wp--custom--color--background);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
+	border-color: transparent;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus::before, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus::before {
+	left: calc( -1 * var(--wp--custom--button--border--width));
+}
+
+.pre-footer h3 {
+	text-transform: uppercase;
+}
+
+.pre-footer .wp-block-social-links.is-style-logos-only {
+	margin-left: calc( -1 * ( 8px + 0.25em ));
+}
+
+.pre-footer .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	--wp--custom--button--typography--font-size: 14px;
+	--wp--custom--button--spacing--padding--top: 0.5em;
+	--wp--custom--button--spacing--padding--bottom: 0.5em;
+}
+
 a {
 	text-decoration-thickness: 0.07em;
 	text-underline-offset: 0.46ex;
@@ -164,7 +232,9 @@ h6 a,
 	        text-decoration-line: underline;
 }
 
-a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus {
+.wp-block-search__button:active, .wp-block-search__button:focus,
+a:not(.ab-item):not(.screen-reader-shortcut):active,
+a:not(.ab-item):not(.screen-reader-shortcut):focus {
 	outline: 1px dotted var(--wp--custom--color--primary);
 	outline-offset: 0.1em;
 	text-decoration: none;

skatepark/block-template-parts/footer.html

@@ -0,0 +1,10 @@
+<!-- wp:group {"className":"site-footer","style":{"spacing":{"padding":{"bottom":"30px"}}}} -->
+<div class="wp-block-group site-footer" style="padding-bottom: 30px">
+
+	<!-- wp:paragraph {"align":"center","fontSize":"tiny"} -->
+	<p class="has-text-align-center has-tiny-font-size">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
+	<!-- /wp:paragraph -->
+	
+	</div>
+	<!-- /wp:group -->
+	

skatepark/child-theme.json

@@ -101,6 +101,19 @@
 					}
 				}
 			],
+			"form": {
+				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
+				"border": {
+					"color": "var(--wp--custom--color--primary)",
+					"width": "3px"
+				},
+				"color": {
+					"background": "transparent"
+				},
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)"
+				}
+			},
 			"fontsToLoadFromGoogle": [
 				"family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900"
 			],

skatepark/functions.php

@@ -22,10 +22,10 @@ if ( ! function_exists( 'skatepark_support' ) ) :
 			)
 		);
 
-		// This theme uses wp_nav_menu() in two locations.
+		//Primary navigation is used on the header and the footer pattern
 		register_nav_menus(
 			array(
-				'primary' => __( 'Primary Navigation', 'skatepark' ),
+				'primary' => __( 'Primary Navigation', 'skatepark' )
 			)
 		);
 
@@ -42,3 +42,8 @@ function skatepark_scripts() {
 	wp_enqueue_style( 'skatepark-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array( 'blockbase-ponyfill' ), wp_get_theme()->get( 'Version' ) );
 }
 add_action( 'wp_enqueue_scripts', 'skatepark_scripts' );
+
+/**
+ * Block Patterns.
+ */
+require get_stylesheet_directory() . '/inc/block-patterns.php';

skatepark/inc/block-patterns.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Skatepark Theme: Block Patterns
+ *
+ * @package Skatepark
+ * @since   1.0.0
+ */
+if ( ! function_exists( 'skatepark_register_block_patterns' ) ) :
+
+	function skatepark_register_block_patterns() {
+
+		if ( function_exists( 'register_block_pattern_category' ) ) {
+			register_block_pattern_category(
+				'skatepark',
+				array( 'label' => __( 'Skatepark', 'skatepark' ) )
+			);
+		}
+
+		if ( function_exists( 'register_block_pattern' ) ) {
+			$block_patterns = array(
+				'pre-footer',
+			);
+
+			foreach ( $block_patterns as $block_pattern ) {
+				register_block_pattern(
+					'skatepark/' . $block_pattern,
+					require __DIR__ . '/patterns/' . $block_pattern . '.php'
+				);
+			}
+		}
+	}
+endif;
+
+add_action( 'init', 'skatepark_register_block_patterns', 9 );

skatepark/inc/patterns/pre-footer.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Pre Footer.
+ *
+ * @package Skatepark
+ */
+
+return array(
+	'title'      => __( 'Footer', 'skatepark' ),
+	'categories' => array( 'skatepark' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"60px","bottom":"60px"}}},"className":"pre-footer"} -->
+	<div class="wp-block-group alignwide pre-footer" style="padding-top:60px;padding-bottom:60px"><!-- wp:columns -->
+		<div class="wp-block-columns"><!-- wp:column -->
+		<div class="wp-block-column"><!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"large"} /-->
+		
+		<!-- wp:paragraph {"fontSize":"small"} -->
+		<p class="has-small-font-size">' . esc_html__( "Skatepark's coaches will work with you to develop and improve your skating abilities.", 'skatepark' ) . '</p>
+		<!-- /wp:paragraph -->
+		
+		<!-- wp:social-links {"iconColor":"primary","iconColorValue":"var(--wp--custom--color--foreground)","className":"is-style-logos-only"} -->
+		<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"http://twitter.com","service":"twitter"} /-->
+		
+		<!-- wp:social-link {"url":"http://facebook.com","service":"facebook"} /-->
+		
+		<!-- wp:social-link {"url":"http://instagram.com","service":"instagram"} /--></ul>
+		<!-- /wp:social-links --></div>
+		<!-- /wp:column -->
+		
+		<!-- wp:column -->
+		<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"tiny"} -->
+		<h3 class="has-tiny-font-size"><strong>' . esc_html__( 'More info', 'skatepark' ) . '</strong></h3>
+		<!-- /wp:heading -->
+		
+		<!-- wp:navigation {"orientation":"vertical","__unstableLocation":"primary","style":{"typography":{"textDecoration":"underline"}},"fontSize":"small"} /--></div>
+		<!-- /wp:column -->
+
+		<!-- wp:column -->
+		<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"tiny"} -->
+		<h3 class="has-tiny-font-size"><strong>' . esc_html__( 'Search', 'skatepark' ) . '</strong></h3><!-- /wp:heading --><!-- wp:search {"label":"' . esc_html__( 'Search', 'skatepark' ) . '","showLabel":false,"buttonText":"' . esc_html__( 'Search', 'skatepark' ) . '","buttonPosition":"button-inside"} /--></div>
+		<!-- /wp:column --></div>
+		<!-- /wp:columns --></div>
+		<!-- /wp:group -->',
+);

skatepark/sass/block-patterns/_pre-footer.scss

@@ -0,0 +1,13 @@
+.pre-footer {
+	h3 {
+		text-transform: uppercase;
+	}
+	.wp-block-social-links.is-style-logos-only {
+		margin-left: calc( -1 * ( 8px + 0.25em ) );
+	}
+	.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+		--wp--custom--button--typography--font-size: 14px;
+		--wp--custom--button--spacing--padding--top: 0.5em;
+		--wp--custom--button--spacing--padding--bottom: 0.5em;
+	}
+}

skatepark/sass/blocks/_buttons.scss

@@ -21,13 +21,15 @@
 }
 .wp-block-file .wp-block-file__button {
 	text-transform: uppercase;
+	letter-spacing: 0.1em;
 	@include skatepark_button_hover_styles;
 }	
 
 .wp-block-search {
 	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-	.wp-block-search__button {
+	.wp-block-search__button.wp-block-search__button {
 		text-transform: uppercase;
+		letter-spacing: 0.1em;
 		@include skatepark_button_hover_styles;
 	}
 }
@@ -35,6 +37,7 @@
 .wp-block-post-comments {
 	input[type="submit"], .reply a {
 		text-transform: uppercase;
+		letter-spacing: 0.1em;
 		@include skatepark_button_hover_styles;
 	}
 }

skatepark/sass/blocks/_search.scss

@@ -0,0 +1,52 @@
+.wp-block-search {
+	.wp-block-search__button {
+		&:active,
+		&:focus {
+			outline-offset: -0.25em;
+		}
+		svg {
+			min-width: 2em;
+			min-height: 2em;
+		}
+		&.has-icon {
+			--wp--custom--button--spacing--padding--left: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
+			--wp--custom--button--spacing--padding--right: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
+		}
+	}
+	&.wp-block-search__button-inside {
+		.wp-block-search__inside-wrapper{
+			padding: 0;
+			.wp-block-search__button {
+				--wp--custom--button--color--text: var(--wp--custom--color--primary);
+				--wp--custom--button--color--background: var(--wp--custom--color--background);
+				position: relative;
+				&::before {
+					content: "";
+					height: 80%;
+					width: 1px;
+					background: var(--wp--custom--color--primary);
+					position: absolute;
+					left: 0;
+					top: 10%;
+				}
+				&:not(.has-background):not(.has-text-color) {
+					&:hover {
+						--wp--custom--button--color--text: var(--wp--custom--color--background);
+						--wp--custom--button--color--background: var(--wp--custom--color--primary);
+						&:focus,
+						&.has-focus {
+							outline-color: var(--wp--custom--color--background);
+						}
+					}
+					&:focus,
+					&.has-focus {
+						border-color: transparent;
+						&::before {
+							left: calc( -1 * var(--wp--custom--button--border--width) );
+						}
+					}
+				}
+			}
+		}
+	}
+}

skatepark/sass/elements/_links.scss

@@ -42,6 +42,7 @@ h6 a,
 }
 
 // Select the focus states of all non-wpadmin and screen reader links
+.wp-block-search__button,
 a:not(.ab-item):not(.screen-reader-shortcut) {
 	&:active,
 	&:focus {

skatepark/sass/theme.scss

@@ -2,4 +2,6 @@
 @import "../../blockbase/sass/base/mixins";
 @import "base/text";
 @import "blocks/buttons";
-@import "elements/links";
+@import "blocks/search";
+@import "block-patterns/pre-footer";
+@import "elements/links";

skatepark/theme.json

@@ -146,10 +146,10 @@
 			"form": {
 				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
 				"border": {
-					"color": "#EFEFEF",
+					"color": "var(--wp--custom--color--primary)",
 					"radius": "0",
 					"style": "solid",
-					"width": "2px"
+					"width": "3px"
 				},
 				"color": {
 					"background": "transparent",
@@ -162,7 +162,7 @@
 					}
 				},
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--normal)"
+					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
 			"gallery": {