Try making skatepark standalone block theme (#5523)

* removed parent theme, added functions file

* refactor json, functions.php added

* header and footer

* 404 page

* spacing for 404

* blank template, extra styles for buttons

* header and footer only template

* fixed missing alignment variables

* removed navigation pattern, removed label from navigation

* spacing on home page navigation

* fix separator styles

* removed two columns of text pattern

* Add hover state to navigation items.

* Reviser header template part to match the screenshot.

Co-authored-by: Kjell Reigstad <kjell@kjellr.com>

skatepark/assets/theme.css

@@ -1,47 +1,3 @@
-.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
-.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
-.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
-.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
-  border-style: var(--wp--custom--button--border--style);
-  border-color: currentColor;
-  border-width: var(--wp--custom--button--border--width);
-  padding-top: var(--wp--custom--button--spacing--padding--top);
-  padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
-  padding-left: var(--wp--custom--button--spacing--padding--left);
-  padding-right: var(--wp--custom--button--spacing--padding--right);
-}
-
-.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 {
-  border-style: var(--wp--custom--button--border--style);
-  border-color: currentColor;
-  border-width: var(--wp--custom--button--border--width);
-  padding-top: var(--wp--custom--button--spacing--padding--top);
-  padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
-  padding-left: var(--wp--custom--button--spacing--padding--left);
-  padding-right: var(--wp--custom--button--spacing--padding--right);
-}
-
-.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 {
-  border-style: var(--wp--custom--button--border--style);
-  border-color: currentColor;
-  border-width: var(--wp--custom--button--border--width);
-  padding-top: var(--wp--custom--button--spacing--padding--top);
-  padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
-  padding-left: var(--wp--custom--button--spacing--padding--left);
-  padding-right: var(--wp--custom--button--spacing--padding--right);
-}
-
-.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
-.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
-.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
-.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
-  color: var(--wp--custom--button--color--background);
-  background-color: var(--wp--custom--button--color--text);
-}
-
 /* Text selection text color */
 ::selection {
   color: var(--wp--custom--color--background);
@@ -55,10 +11,17 @@ body:not(.has-featured-image) h1.wp-block-post-title {
 }
 
 /* Separator width */
-/* We can remove after https://github.com/WordPress/gutenberg/pull/38635 gets deployed */
+.wp-block-separator {
+  /* https://github.com/WordPress/gutenberg/pull/38428 */
+  opacity: 1;
+}
 .wp-block-separator.is-style-wide {
+  /* We can remove after https://github.com/WordPress/gutenberg/pull/38635 gets deployed */
   border-width: 0 0 3px 0;
 }
+.wp-block-separator.has-background {
+  height: 3px;
+}
 
 /* Links and underlines */
 a {
@@ -104,13 +67,15 @@ h6 a,
 
 .wp-block-site-title a,
 .wp-block-post-title a,
-.wp-block-query-pagination a {
+.wp-block-query-pagination a,
+.wp-block-navigation a {
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
 .wp-block-site-title a:hover,
 .wp-block-post-title a:hover,
-.wp-block-query-pagination a:hover {
+.wp-block-query-pagination a:hover,
+.wp-block-navigation a:hover {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
@@ -140,4 +105,127 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
   font-weight: 500;
 }
 
+/*
+ * Search and File Block button styles.
+ * Necessary until the following issues are resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/36444
+ * https://github.com/WordPress/gutenberg/issues/27760
+ */
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+  border-style: var(--wp--custom--button--border--style);
+  border-width: var(--wp--custom--button--border--width);
+  border-color: var(--wp--custom--color--foreground);
+}
+
+.wp-block-search__input {
+  background-color: transparent;
+  border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+}
+
+.wp-block-search__button,
+.wp-block-file .wp-block-file__button {
+  border-width: 0;
+  border-radius: 0;
+  background-color: var(--wp--custom--color--foreground);
+  color: var(--wp--custom--color--background);
+  font-size: var(--wp--preset--font-size--normal);
+  font-weight: var(--wp--custom--button--typography--font-weight);
+  padding: calc(0.667em + 2px) calc(1.333em + 2px);
+  line-height: var(--wp--custom--button--typography--line-height);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .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));
+  padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+  padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
+}
+
+/*
+ * Button hover styles.
+ * Necessary until the following issue is resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/27075
+ */
+.wp-block-search__button:hover,
+.wp-block-file .wp-block-file__button:hover,
+.wp-block-button__link:hover {
+  opacity: 0.9;
+}
+
+/* Comments */
+.wp-block-post-comments input[type=submit] {
+  font-family: var(--wp--preset--font-family--red-hat-display);
+  color: var(--wp--custom--color--background);
+}
+
+.wp-block-post-comments textarea, .wp-block-post-comments input:not([type=submit]) {
+  background-color: var(--wp--custom--color--background);
+  color: var(--wp--custom--color--foreground);
+  border-style: var(--wp--custom--button--border--style);
+  border-width: var(--wp--custom--button--border--width);
+  border-color: var(--wp--custom--color--foreground);
+}
+
+/*
+* Alignment styles, borrowed from Twenty Twenty-Two.
+* These rules are temporary, and should not be relied on or
+* modified too heavily by themes or plugins that build on
+* Twenty Twenty-Two. These are meant to be a precursor to
+* a global solution provided by the Block Editor.
+*
+* Relevant issues:
+* https://github.com/WordPress/gutenberg/issues/35607
+* https://github.com/WordPress/gutenberg/issues/35884
+*/
+.wp-site-blocks,
+body > .is-root-container,
+.edit-post-visual-editor__post-title-wrapper,
+.wp-block-group.alignfull,
+.wp-block-group.has-background,
+.wp-block-cover.alignfull,
+.is-root-container .wp-block[data-align=full] > .wp-block-group,
+.is-root-container .wp-block[data-align=full] > .wp-block-cover {
+  padding-left: var(--wp--custom--spacing--outer);
+  padding-right: var(--wp--custom--spacing--outer);
+}
+
+.wp-site-blocks .alignfull,
+.wp-site-blocks > .wp-block-group.has-background,
+.wp-site-blocks > .wp-block-cover,
+.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
+.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
+body > .is-root-container > .wp-block-cover,
+body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
+body > .is-root-container > .wp-block-template-part > .wp-block-cover,
+.is-root-container .wp-block[data-align=full] {
+  margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+  margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+  max-width: unset;
+  width: unset;
+}
+
+/* Blocks inside columns don't have negative margins. */
+.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
+.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align=full],
+.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
+.is-root-container .wp-block[data-align=full] > *:not(.wp-block-group) .wp-block[data-align=full] {
+  margin-left: auto !important;
+  margin-right: auto !important;
+  width: inherit;
+}
+
+/*
+* Responsive menu container padding.
+* This ensures the responsive container inherits the same
+* spacing defined above. This behavior may be built into
+* the Block Editor in the future.
+*/
+.wp-block-navigation__responsive-container.is-menu-open {
+  padding-top: var(--wp--custom--spacing--outer);
+  padding-bottom: var(--wp--custom--spacing--large);
+  padding-right: var(--wp--custom--spacing--outer);
+  padding-left: var(--wp--custom--spacing--outer);
+}
+
 /*# sourceMappingURL=theme.css.map */

skatepark/block-template-parts/footer.html

@@ -1 +1,16 @@
-<!-- wp:pattern {"slug":"blockbase/footer-columns"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+
+	<!-- wp:pattern {"slug":"skatepark/three-columns"} /-->
+		
+	<!-- 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","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 -->
+</div>
+<!-- /wp:group -->

skatepark/block-template-parts/header.html

@@ -1 +1,25 @@
-<!-- wp:pattern {"slug":"blockbase/header-wide"} /-->
+<!-- wp:group {"layout":{"inherit":"true"}} -->
+<div class="wp-block-group"><!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"0","top":"var(--wp--custom--gap--vertical)"}}}} -->
+	<div class="wp-block-group alignwide" style="padding-bottom:0;padding-top:var(--wp--custom--gap--vertical)">
+		<!-- wp:site-title /-->
+
+		<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"overlayBackgroundColor":"primary","overlayTextColor":"background","style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"2em"}},"fontSize":"small"} -->
+			<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+		<!-- /wp:navigation -->
+
+	</div><!-- /wp:group -->
+
+	<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--gap--vertical)","top":"0"}}}} -->
+	<div class="wp-block-group alignwide" style="padding-bottom:var(--wp--custom--gap--vertical);padding-top:0">
+		<!-- wp:site-tagline /-->
+
+		<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"2em"}},"fontSize":"small"} -->
+			<!-- wp:social-links {"iconColor":"primary","iconColorValue":"#000000","className":"is-style-logos-only","style":{"spacing":{"blockGap":"1.2em"}}} -->
+				<ul class="wp-block-social-links has-icon-color is-style-logos-only">
+					<!-- wp:social-link {"url":"free.local","service":"twitter"} /-->
+					<!-- wp:social-link {"url":"free.local","service":"facebook"} /-->
+				</ul>
+			<!-- /wp:social-links -->
+		<!-- /wp:navigation --></div>
+	<!-- /wp:group --></div>
+<!-- /wp:group -->

skatepark/block-templates/404.html

@@ -0,0 +1,10 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"20vh","bottom":"20vh"}}},"layout":{"inherit":true}} -->
+<main class="wp-block-group" style="padding-top:20vh;padding-bottom:20vh">
+	<!-- wp:pattern {"slug":"skatepark/hidden-404"} /-->
+	<!-- wp:search {"label":""} /-->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->

skatepark/block-templates/blank.html

@@ -0,0 +1 @@
+<!-- wp:post-content {"layout":{"inherit":true}} /-->

skatepark/block-templates/header-footer-only.html

@@ -0,0 +1,11 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:group {"tagName":"main"} -->
+<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"} /-->
+	

skatepark/block-templates/home.html

@@ -5,7 +5,7 @@
 	
 	<!-- wp:group {"layout":{"inherit":true}} -->
 	<div class="wp-block-group">
-		<!-- wp:pattern {"slug":"skatepark/home-patterns"} /-->
+		<!-- wp:pattern {"slug":"skatepark/hidden-home-patterns"} /-->
 
 		<!-- wp:spacer {"height":"80px"} -->
 		<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>

skatepark/block-templates/single.html

@@ -50,6 +50,32 @@
 <div class="wp-block-group"><!-- wp:post-comments /--></div>
 <!-- /wp:group -->
 
-<!-- wp:pattern {"slug":"skatepark/post-navigation-labeled"} /-->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"3em","bottom":"3em"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group" style="padding-top:3em;padding-bottom:3em">
+
+	<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
+	<hr class="wp-block-separator alignwide is-style-wide"/>
+	<!-- /wp:separator -->
+
+	<!-- wp:columns {"align":"wide","className":"next-prev-links"} -->
+	<div class="wp-block-columns alignwide next-prev-links">
+		<!-- wp:column {"style":{"spacing":{"padding":{"top":"1em","bottom":"1em"}}}} -->
+		<div class="wp-block-column" style="padding-top:1em;padding-bottom:1em">
+			<!-- wp:post-navigation-link {"type":"previous","showTitle":false,"style":{"typography":{"fontSize":"14px"}}} /-->
+		</div>
+		<!-- /wp:column -->
+		<!-- wp:column {"style":{"spacing":{"padding":{"top":"1em","bottom":"1em"}}}} -->
+		<div class="wp-block-column" style="padding-top:1em;padding-bottom:1em">
+			<!-- wp:post-navigation-link {"textAlign":"right","showTitle":false,"style":{"typography":{"fontSize":"14px"}}} /-->
+		</div>
+		<!-- /wp:column -->
+	</div>
+	<!-- /wp:columns -->
+
+	<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
+	<hr class="wp-block-separator alignwide is-style-wide"/>
+	<!-- /wp:separator -->
+</div>
+<!-- /wp:group -->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->

skatepark/functions.php

@@ -1,6 +1,14 @@
 <?php
-
 /**
+ * Skatepark functions and definitions
+ *
+ * @link https://developer.wordpress.org/themes/basics/theme-functions/
+ *
+ * @package Skatepark
+ * @since Skatepark 1.0
+ */
+
+ /**
  * Add class to body if post/page has a featured image.
  */
 function add_featured_image_class( $classes ) {
@@ -11,3 +19,194 @@ function add_featured_image_class( $classes ) {
 	return $classes;
 }
 add_filter( 'body_class', 'add_featured_image_class' );
+
+if ( ! function_exists( 'skatepark_support' ) ) :
+
+	/**
+	 * Sets up theme defaults and registers support for various WordPress features.
+	 *
+	 * @since Skatepark 1.0
+	 *
+	 * @return void
+	 */
+	function skatepark_support() {
+
+		// Add support for block styles.
+		add_theme_support( 'wp-block-styles' );
+
+		// Enqueue editor styles.
+		add_editor_style( 'style.css' );
+
+	}
+
+endif;
+
+add_action( 'after_setup_theme', 'skatepark_support' );
+
+if ( ! function_exists( 'skatepark_styles' ) ) :
+
+	/**
+	 * Enqueue styles.
+	 *
+	 * @since Skatepark 1.0
+	 *
+	 * @return void
+	 */
+	function skatepark_styles() {
+
+		// Register theme stylesheet.
+		wp_register_style(
+			'skatepark-style',
+			get_template_directory_uri() . '/assets/theme.css',
+			array(),
+			wp_get_theme()->get( 'Version' )
+		);
+
+		// Add styles inline.
+		wp_add_inline_style( 'skatepark-style', skatepark_get_font_face_styles() );
+
+		// Enqueue theme stylesheet.
+		wp_enqueue_style( 'skatepark-style' );
+
+	}
+
+endif;
+
+add_action( 'wp_enqueue_scripts', 'skatepark_styles' );
+
+if ( ! function_exists( 'skatepark_editor_styles' ) ) :
+
+	/**
+	 * Enqueue editor styles.
+	 *
+	 * @since Skatepark 1.0
+	 *
+	 * @return void
+	 */
+	function skatepark_editor_styles() {
+
+		// Add styles inline.
+		wp_add_inline_style( 'wp-block-library', skatepark_get_font_face_styles() );
+
+		add_editor_style(
+			get_template_directory_uri() . '/assets/theme.css'
+		);
+
+	}
+
+endif;
+
+add_action( 'admin_init', 'skatepark_editor_styles' );
+
+
+if ( ! function_exists( 'skatepark_get_font_face_styles' ) ) :
+
+	/**
+	 * Get font face styles.
+	 * Called by functions skatepark_styles() and skatepark_editor_styles() above.
+	 *
+	 * @since Skatepark 1.0
+	 *
+	 * @return string
+	 */
+	function skatepark_get_font_face_styles() {
+
+		return "
+		@font-face{
+			font-family: 'Red Hat Display';
+			font-weight: 400;
+			font-style: normal;
+			font-stretch: normal;
+			font-display: swap;
+			src: url('" . get_theme_file_uri( 'assets/fonts/red-hat-display-regular.woff2' ) . "') format('woff2');
+		}
+		@font-face{
+			font-family: 'Red Hat Display';
+			font-weight: 500;
+			font-style: normal;
+			font-stretch: normal;
+			font-display: swap;
+			src: url('" . get_theme_file_uri( 'assets/fonts/red-hat-display-500.woff2' ) . "') format('woff2');
+		}
+		@font-face{
+			font-family: 'Red Hat Display';
+			font-weight: 700;
+			font-style: normal;
+			font-stretch: normal;
+			font-display: swap;
+			src: url('" . get_theme_file_uri( 'assets/fonts/red-hat-display-700.woff2' ) . "') format('woff2');
+		}
+		@font-face{
+			font-family: 'Red Hat Display';
+			font-weight: 900;
+			font-style: normal;
+			font-stretch: normal;
+			font-display: swap;
+			src: url('" . get_theme_file_uri( 'assets/fonts/red-hat-display-900.woff2' ) . "') format('woff2');
+		}
+		@font-face{
+			font-family: 'Red Hat Display';
+			font-weight: 400;
+			font-style: italic;
+			font-stretch: normal;
+			font-display: swap;
+			src: url('" . get_theme_file_uri( 'assets/fonts/red-hat-display-italic.woff2' ) . "') format('woff2');
+		}
+		@font-face{
+			font-family: 'Red Hat Display';
+			font-weight: 500;
+			font-style: italic;
+			font-stretch: normal;
+			font-display: swap;
+			src: url('" . get_theme_file_uri( 'assets/fonts/red-hat-display-500italic.woff2' ) . "') format('woff2');
+		}
+		@font-face{
+			font-family: 'Red Hat Display';
+			font-weight: 700;
+			font-style: italic;
+			font-stretch: normal;
+			font-display: swap;
+			src: url('" . get_theme_file_uri( 'assets/fonts/red-hat-display-700italic.woff2' ) . "') format('woff2');
+		}
+		@font-face{
+			font-family: 'Red Hat Display';
+			font-weight: 900;
+			font-style: italic;
+			font-stretch: normal;
+			font-display: swap;
+			src: url('" . get_theme_file_uri( 'assets/fonts/red-hat-display-900italic.woff2' ) . "') format('woff2');
+		}
+		";
+
+	}
+
+endif;
+
+if ( ! function_exists( 'skatepark_preload_webfonts' ) ) :
+
+	/**
+	 * Preloads the main web font to improve performance.
+	 *
+	 * Only the main web font (font-weight: 400,700, font-style: normal) is preloaded here since that font is always relevant. 
+	 * The other fonts are only needed if the user changed style or weight of the fonts,
+	 * and therefore preloading it would in most cases regress performance when that font would otherwise not be loaded
+	 * at all.
+	 *
+	 * @since Skatepark 1.0
+	 *
+	 * @return void
+	 */
+	function skatepark_preload_webfonts() {
+		?>
+		<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/red-hat-display-regular.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
+		<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/red-hat-display-700.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
+		<?php
+	}
+
+endif;
+
+add_action( 'wp_head', 'skatepark_preload_webfonts' );
+
+// Add block patterns
+require get_template_directory() . '/inc/block-patterns.php';
+

skatepark/inc/block-patterns.php

@@ -22,12 +22,12 @@ if ( ! function_exists( 'skatepark_register_block_patterns' ) ) :
 				'mixed-media-in-container',
 				'text-list-with-button',
 				'full-width-image-with-aside-caption',
-				'home-patterns',
+				'hidden-404',
+				'hidden-home-patterns',
 				'testimonial',
-				'two-columns-of-text',
+				'three-columns',
 				'paragraph-with-quote',
 				'columns-in-container',
-				'post-navigation-labeled',
 			);
 
 			foreach ( $block_patterns as $block_pattern ) {

skatepark/inc/patterns/hidden-404.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * A 404 page
+ *
+ * @package Skatepark
+ */
+
+return array(
+	'title'      => __( '404', 'skatepark' ),
+	'categories' => array( 'skatepark' ),
+	'inserter'   => false,
+	'content'    => '<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"medium"} -->
+<h1 class="has-text-align-center has-medium-font-size" id="oops-that-page-can-t-be-found">' . esc_html__( "Oops! That page can&rsquo;t be found.", "skatepark" ) . '</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>' . esc_html__( "It looks like nothing was found at this location. Maybe try a search?", "skatepark" ) . '</p>
+<!-- /wp:paragraph -->',
+);

skatepark/inc/patterns/home-patterns.php → skatepark/inc/patterns/hidden-home-patterns.php

@@ -40,7 +40,11 @@ return array(
 	<!-- /wp:group -->
 	<!-- /wp:post-template -->
 
-	<!-- wp:query-pagination -->
+	<!-- wp:spacer {"height":"70px"} -->
+	<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
 	<!-- wp:query-pagination-previous /-->
 	<!-- wp:query-pagination-next /-->
 	<!-- /wp:query-pagination --></div>

skatepark/inc/patterns/post-navigation-labeled.php

@@ -1,46 +0,0 @@
-<?php
-/**
- * Post Navigation Links.
- *
- * @package Skatepark
- */
-
-return array(
-	'title'      => __( 'Post Navigation Links', 'skatepark' ),
-	'categories' => array( 'skatepark' ),
-	'content'    => '
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"3em","bottom":"3em"}}},"layout":{"inherit":true}} -->
-<div class="wp-block-group" style="padding-top:3em;padding-bottom:3em">
-
-	<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
-	<hr class="wp-block-separator alignwide is-style-wide"/>
-	<!-- /wp:separator -->
-
-	<!-- wp:columns {"align":"wide","className":"next-prev-links"} -->
-	<div class="wp-block-columns alignwide next-prev-links">
-		<!-- wp:column {"style":{"spacing":{"padding":{"top":"1em","bottom":"1em"}}}} -->
-		<div class="wp-block-column" style="padding-top:1em;padding-bottom:1em">
-			<!-- wp:paragraph {"align":"left","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"800","fontSize":"14px","letterSpacing":"0.1em"},"spacing":{"margins":{"top":"0px", "bottom":"0px"}}}} -->
-			<p class="has-text-align-left" id="next-post" style="font-size:14px;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;margin-top:0px;margin-bottom:0px;">' . esc_html__( 'previous post', 'skatepark' ) . '</p>
-			<!-- /wp:paragraph -->
-			<!-- wp:post-navigation-link {"type":"previous","showTitle":true,"style":{"typography":{"fontSize":"14px"}}} /-->
-		</div>
-		<!-- /wp:column -->
-		<!-- wp:column {"style":{"spacing":{"padding":{"top":"1em","bottom":"1em"}}}} -->
-		<div class="wp-block-column" style="padding-top:1em;padding-bottom:1em">
-			<!-- wp:paragraph {"align":"right","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"800","fontSize":"14px","letterSpacing":"0.1em"},"spacing":{"margins":{"top":"0px", "bottom":"0px"}}}} -->
-			<p class="has-text-align-right" id="next-post" style="font-size:14px;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;margin-top:0px;margin-bottom:0px;">' . esc_html__( 'next post', 'skatepark' ) . '</p>
-			<!-- /wp:paragraph -->
-			<!-- wp:post-navigation-link {"textAlign":"right","showTitle":true,"style":{"typography":{"fontSize":"14px"}}} /-->
-		</div>
-		<!-- /wp:column -->
-	</div>
-	<!-- /wp:columns -->
-
-	<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
-	<hr class="wp-block-separator alignwide is-style-wide"/>
-	<!-- /wp:separator -->
-</div>
-<!-- /wp:group -->
-',
-);

skatepark/inc/patterns/three-columns.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Three columns
+ *
+ * @package Skatepark
+ */
+
+return array(
+	'title'      => __( 'Footer with 3 columns', 'skatepark' ),
+	'categories' => array( 'skatepark' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"60px","bottom":"60px"}}}} -->
+		<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":"medium"} /-->
+
+		<!-- wp:site-tagline {"fontSize":"small"} /-->
+
+		<!-- wp:social-links {"iconColor":"primary","iconColorValue":"#000000","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,"style":{"typography":{"fontSize":"14px"}}} -->
+		<h3 style="font-size:14px;"><strong>' . esc_html__( 'More info', 'skatepark' ) . '</strong></h3>
+		<!-- /wp:heading -->
+
+		<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"vertical"},"overlayBackgroundColor":"foreground","overlayTextColor":"background","fontSize":"small"} -->
+			<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+		<!-- /wp:navigation -->
+		
+		</div>
+		<!-- /wp:column -->
+
+		<!-- wp:column -->
+		<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"14px","textTransform":"uppercase"}}} -->
+		<h3 style="text-transform:uppercase;font-size:14px"><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/inc/patterns/two-columns-of-text.php

@@ -1,32 +0,0 @@
-<?php
-/**
- * Two columns of text.
- *
- * @package Skatepark
- */
-
-return array(
-	'title'      => __( 'Two columns of text', 'skatepark' ),
-	'categories' => array( 'skatepark' ),
-	'content'    => '<!-- wp:columns {"align":"wide"} -->
-	<div class="wp-block-columns alignwide"><!-- wp:column {"width":"","style":{"spacing":{"padding":{"right":"5em"}}}} -->
-	<div class="wp-block-column" style="padding-right:5em"><!-- wp:paragraph {"fontSize":"medium"} -->
-	<p class="has-medium-font-size">' . esc_html__( 'Steph Harper. Buddy Sellers. Mehmet Farrow. Bob Lopez. Tammy Habich. Tye Barclay. Kaden Price. Lily Rivera. Chris Wright. Sammy Sanchez. They are all skateboarding icons. Some of them even have video games you may have played.', 'skatepark' ) . '</p>
-	<!-- /wp:paragraph --></div>
-	<!-- /wp:column -->
-
-	<!-- wp:column {"width":"550px"} -->
-	<div class="wp-block-column" style="flex-basis:550px"><!-- wp:paragraph -->
-	<p>' . esc_html__( 'Skateboarding can teach people discipline, patience, and resiliency. It’s a great sport for kids with a lot of energy! We’ll help build up some structure and support in your life, all while you meet new people and have a ton of fun learning how to skateboard.', 'skatepark' ) . '</p>
-	<!-- /wp:paragraph -->
-
-	<!-- wp:paragraph -->
-	<p>' . esc_html__( 'Skateboarding is a social sport! Come hang out and meet some new friends to cheer you on while you skate. We have a strict no-bullying policy and maintain a supportive environment for all camp attendees.', 'skatepark' ) . '</p>
-	<!-- /wp:paragraph -->
-
-	<!-- wp:paragraph -->
-	<p>' . esc_html__( 'Work 1:1 with our team of coaches to learn how to skate. They’ll be your mentors and guides while you’re at camp. Plus, many of our older campers will mentor the younger skaters.', 'skatepark' ) . '</p>
-	<!-- /wp:paragraph --></div>
-	<!-- /wp:column --></div>
-	<!-- /wp:columns -->',
-);

skatepark/index.php

@@ -0,0 +1,2 @@
+<?php
+	# This page intentionally left blank

skatepark/sass/theme.scss

@@ -1,5 +1,3 @@
-@import "../../blockbase/sass/blocks/_buttons-outline-style";
-
 /* Text selection text color */
 ::selection {
 	color: var(--wp--custom--color--background);
@@ -16,11 +14,16 @@ h1.wp-block-post-title {
 }
 
 /* Separator width */
-/* We can remove after https://github.com/WordPress/gutenberg/pull/38635 gets deployed */
 .wp-block-separator {
+	/* https://github.com/WordPress/gutenberg/pull/38428 */
+	opacity: 1;
 	&.is-style-wide {
+		/* We can remove after https://github.com/WordPress/gutenberg/pull/38635 gets deployed */
 		border-width: 0 0 3px 0;
 	}
+	&.has-background {
+		height: 3px;
+	}
 }
 
 /* Links and underlines */
@@ -65,7 +68,8 @@ h6 a,
 }
 .wp-block-site-title a,
 .wp-block-post-title a,
-.wp-block-query-pagination a {
+.wp-block-query-pagination a,
+.wp-block-navigation a {
 	text-decoration-line: none;
 	&:hover {
 		text-decoration-line: underline;
@@ -102,4 +106,132 @@ a:not(.ab-item):not(.screen-reader-shortcut) {
 
 .wp-block-post-excerpt__more-link {
 	font-weight: 500;
-}
+}
+
+/*
+ * Search and File Block button styles.
+ * Necessary until the following issues are resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/36444
+ * https://github.com/WordPress/gutenberg/issues/27760
+ */
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	border-style: var(--wp--custom--button--border--style);
+	border-width: var(--wp--custom--button--border--width);
+	border-color: var(--wp--custom--color--foreground);	
+}
+
+.wp-block-search__input {
+	background-color: transparent;
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+}
+
+.wp-block-search__button,
+.wp-block-file .wp-block-file__button {
+	border-width: 0;
+	border-radius: 0;
+	background-color: var(--wp--custom--color--foreground);
+	color: var(--wp--custom--color--background);
+	font-size: var(--wp--preset--font-size--normal);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	padding: calc(.667em + 2px) calc(1.333em + 2px);
+	line-height: var(--wp--custom--button--typography--line-height);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .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) );
+	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width) );
+	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width) );
+}
+ 
+/*
+ * Button hover styles.
+ * Necessary until the following issue is resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/27075
+ */
+
+.wp-block-search__button:hover,
+.wp-block-file .wp-block-file__button:hover,
+.wp-block-button__link:hover {
+	opacity: 0.90;
+}
+
+/* Comments */
+.wp-block-post-comments input[type="submit"] {
+	font-family: var(--wp--preset--font-family--red-hat-display);
+	color: var(--wp--custom--color--background);
+}
+
+.wp-block-post-comments textarea, .wp-block-post-comments input:not([type="submit"]) {
+	background-color: var(--wp--custom--color--background);
+	color: var(--wp--custom--color--foreground);
+	border-style: var(--wp--custom--button--border--style);
+	border-width: var(--wp--custom--button--border--width);
+	border-color: var(--wp--custom--color--foreground);	
+}
+
+/*
+* Alignment styles, borrowed from Twenty Twenty-Two.
+* These rules are temporary, and should not be relied on or
+* modified too heavily by themes or plugins that build on
+* Twenty Twenty-Two. These are meant to be a precursor to
+* a global solution provided by the Block Editor.
+*
+* Relevant issues:
+* https://github.com/WordPress/gutenberg/issues/35607
+* https://github.com/WordPress/gutenberg/issues/35884
+*/
+
+.wp-site-blocks,
+body > .is-root-container,
+.edit-post-visual-editor__post-title-wrapper,
+.wp-block-group.alignfull,
+.wp-block-group.has-background,
+.wp-block-cover.alignfull,
+.is-root-container .wp-block[data-align='full'] > .wp-block-group,
+.is-root-container .wp-block[data-align='full'] > .wp-block-cover {
+	padding-left: var(--wp--custom--spacing--outer);
+	padding-right: var(--wp--custom--spacing--outer);
+}
+
+.wp-site-blocks .alignfull,
+.wp-site-blocks > .wp-block-group.has-background,
+.wp-site-blocks > .wp-block-cover,
+.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
+.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
+body > .is-root-container > .wp-block-cover,
+body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
+body > .is-root-container > .wp-block-template-part > .wp-block-cover,
+.is-root-container .wp-block[data-align='full'] {
+	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+	max-width: unset;
+	width: unset;
+}
+
+/* Blocks inside columns don't have negative margins. */
+.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
+.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
+/* We also want to avoid stacking negative margins. */
+.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
+.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
+	margin-left: auto !important;
+	margin-right: auto !important;
+	width: inherit;
+}
+
+/*
+* Responsive menu container padding.
+* This ensures the responsive container inherits the same
+* spacing defined above. This behavior may be built into
+* the Block Editor in the future.
+*/
+
+.wp-block-navigation__responsive-container.is-menu-open {
+	padding-top: var(--wp--custom--spacing--outer);
+	padding-bottom: var(--wp--custom--spacing--large);
+	padding-right: var(--wp--custom--spacing--outer);
+	padding-left: var(--wp--custom--spacing--outer);
+}

skatepark/style.css

@@ -10,7 +10,6 @@ Requires PHP: 5.7
 Version: 1.0.35
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
-Template: blockbase
 Text Domain: skatepark
 Tags: one-column, block-styles, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks, auto-loading-homepage
 

skatepark/theme.json

@@ -1,7 +1,36 @@
 {
 	"$schema": "https://json.schemastore.org/theme-v1.json",
 	"version": 1,
+	"customTemplates": [
+		{
+			"name": "blank",
+			"title": "Blank",
+			"postTypes": [
+				"page",
+				"post"
+			]
+		},
+		{
+			"name": "header-footer-only",
+			"title": "Header and Footer Only",
+			"postTypes": [
+				"page",
+				"post"
+			]
+		}
+	],
+	"templateParts": [
+		{
+			"name": "header",
+			"area": "header"
+		},
+		{
+			"name": "footer",
+			"area": "footer"
+		}
+	],
 	"settings": {
+		"appearanceTools": true,
 		"color": {
 			"duotone": [
                 {
@@ -53,7 +82,8 @@
 				"border": {
 					"color": "var(--wp--custom--color--primary)",
 					"radius": "0",
-					"width": "3px"
+					"width": "3px",
+					"style": "solid"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--primary)",
@@ -70,13 +100,16 @@
 				},
 				"spacing": {
 					"padding": {
+						"top": "0.667em",
+						"bottom": "0.667em",
 						"left": "1.75em",
 						"right": "1.75em"
 					}
 				},
 				"typography": {
 					"fontSize": "16px",
-					"fontWeight": "700"
+					"fontWeight": "700",
+					"lineHeight": 1.2
 				}
 			},
 			"body": {
@@ -91,48 +124,6 @@
 				"secondary": "var(--wp--preset--color--primary)",
 				"tertiary": "var(--wp--preset--color--background)"
 			},
-			"colorPalettes": [
-				{
-					"label": "White",
-					"slug": "white",
-					"colors": {
-						"primary": "#000000",
- 						"background": "#FFFFFF"
-					}
-				},
-				{
-					"label": "Red",
-					"slug": "red",
-					"colors": {
-						"primary": "#000000",
-						"background": "#F3B2A9"
-					}
-				},
-				{
-					"label": "Blue",
-					"slug": "blue",
-					"colors": {
-						"primary": "#000000",
-						"background": "#C9E4ED"
-					}
-				},
-				{
-					"label": "Blue/Cream",
-					"slug": "blue-cream",
-					"colors": {
-						"primary": "#F9EED4",
-						"background": "#252B39"
-					}
-				},
-				{
-					"label": "Green/Pink",
-					"slug": "green-pink",
-					"colors": {
-						"primary": "#F7B9A9",
-						"background": "#153232"
-					}
-				}
-			],
 			"form": {
 				"border": {
 					"color": "var(--wp--custom--color--primary)",
@@ -188,7 +179,9 @@
 				"normal": "20px"
 			},
 			"gap": {
-				"baseline": "10px"
+				"baseline": "10px",
+				"horizontal": "min(30px, 5vw)",
+				"vertical": "min(30px, 5vw)"
 			},
 			"heading": {
 				"typography": {
@@ -201,29 +194,36 @@
 			},
 			"line-height": {
 				"body": 1.6
+			},
+			"spacing": {
+				"small": "clamp(20px, 4vw, 40px)",
+				"medium": "clamp(30px, 8vw, 100px)",
+				"large": "clamp(100px, 12vw, 460px)",
+				"outer": "min(4vw, 90px)"
 			}
 		},
 		"layout": {
 			"contentSize": "684px",
 			"wideSize": "1160px"
 		},
+		"spacing": {
+			"units": [
+				"%",
+				"px",
+				"em",
+				"rem",
+				"vh",
+				"vw"
+			]
+		},
 		"typography": {
 			"customFontSize": true,
 			"customLineHeight": true,
 			"fontFamilies": [
 				{
 					"fontFamily": "\"Red Hat Display\", sans-serif",
-					"fontSlug": "red-hat-display",
-					"slug": "body-font",
-					"name": "Body (Red Hat Display)",
-					"google": "family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900"
-				},
-				{
-					"fontFamily": "\"Red Hat Display\", sans-serif",
-					"fontSlug": "red-hat-display",
-					"slug": "heading-font",
-					"name": "Heading (Red Hat Display)",
-					"google": "family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900"
+					"slug": "red-hat-display",
+					"name": "Red Hat Display"
 				}
 			],
 			"fontSizes": [
@@ -253,6 +253,9 @@
 	"styles": {
 		"blocks": {
 			"core/button": {
+				"border": {
+					"radius": "var(--wp--custom--button--border--radius)"
+				},
 				"color": {
 					"background": "var(--wp--custom--button--color--background)",
 					"text": "var(--wp--custom--button--color--text)"
@@ -264,6 +267,25 @@
 					"textTransform": "uppercase"
 				}
 			},
+			"core/code": {
+				"border": {
+					"color": "#CCCCCC",
+					"radius": "0px",
+					"style": "solid",
+					"width": "2px"
+				},
+				"spacing": {
+					"padding": {
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
+					}
+				},
+				"typography": {
+					"fontFamily": "monospace"
+				}
+			},
 			"core/cover": {
 				"filter": {
 					"duotone": "var(--wp--preset--duotone--default-filter)"
@@ -278,6 +300,13 @@
 					"textTransform": "uppercase"
 				}
 			},
+			"core/gallery": {
+				"spacing": {
+					"margin": {
+						"bottom": "var(--wp--custom--gap--vertical)"
+					}
+				}
+			},
 			"core/image": {
 				"filter": {
 					"duotone": "var(--wp--preset--duotone--default-filter)"
@@ -286,6 +315,7 @@
 			"core/navigation": {
 				"typography": {
 					"letterSpacing": "0.05em",
+					"fontSize": "var(--wp--custom--font-sizes--normal)",
 					"fontWeight": "900",
 					"textTransform": "uppercase"
 				},
@@ -299,7 +329,12 @@
 				}
 			},
 			"core/post-date": {
+				"color": {
+					"link": "var(--wp--custom--color--foreground)",
+					"text": "var(--wp--custom--color--foreground)"
+				},
 				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)",
 					"fontWeight": "500"
 				}
 			},
@@ -331,21 +366,61 @@
 				}
 			},
 			"core/pullquote": {
+				"border": {
+					"style": "solid",
+					"width": "1px 0"
+				},
 				"typography": {
+					"fontStyle": "italic",
 					"fontSize": "var(--wp--preset--font-size--x-large)"
+				},
+				"spacing": {
+					"padding": {
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--horizontal)",
+						"bottom": "var(--wp--custom--gap--horizontal)"
+					}
+				}
+			},
+			"core/quote": {
+				"border": {
+					"color": "var(--wp--custom--color--primary)",
+					"style": "solid",
+					"width": "0 0 0 1px"
+				},
+				"spacing": {
+					"padding": {
+						"left": "var(--wp--custom--gap--horizontal)"
+					}
+				},
+				"typography": {
+					"fontSize": "var(--wp--custom--font-sizes--normal)",
+					"fontStyle": "normal"
 				}
 			},
 			"core/search": {
 				"typography": {
+					"fontSize": "var(--wp--custom--button--typography--font-size)",
 					"letterSpacing": "0.1em",
 					"textTransform": "uppercase"
 				}
 			},
 			"core/separator": {
+				"color": {
+					"text": "var(--wp--custom--color--foreground)"
+				},
 				"border": {
+					"color": "currentColor",
+					"style": "solid",
 					"width": "0 0 3px 0"
 				}
 			},
+			"core/site-tagline": {
+				"typography": {
+					"fontSize": "var(--wp--custom--font-sizes--x-small)"
+				}
+			},
 			"core/site-title": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--medium)",
@@ -355,6 +430,10 @@
 				}
 			}
 		},
+		"color": {
+			"background": "var(--wp--custom--color--background)",
+			"text": "var(--wp--custom--color--foreground)"
+		},
 		"elements": {
 			"h1": {
 				"typography": {
@@ -374,6 +453,12 @@
 					"fontSize": "min(max(36px, 5vw), 64px)",
 					"fontWeight": "900",
 					"lineHeight": "1.2"
+				},
+				"spacing": {
+					"margin": {
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
+					}
 				}
 			},
 			"h3": {
@@ -381,6 +466,12 @@
 					"fontSize": "min(max(30px, 5vw), 48px)",
 					"fontWeight": "900",
 					"lineHeight": "1.3"
+				},
+				"spacing": {
+					"margin": {
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
+					}
 				}
 			},
 			"h4": {
@@ -390,6 +481,12 @@
 					"letterSpacing": "0.1em",
 					"lineHeight": "1.3",
 					"textTransform": "uppercase"
+				},
+				"spacing": {
+					"margin": {
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
+					}
 				}
 			},
 			"h5": {
@@ -399,6 +496,12 @@
 					"letterSpacing": "0.1em",
 					"lineHeight": "1.3",
 					"textTransform": "uppercase"
+				},
+				"spacing": {
+					"margin": {
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
+					}
 				}
 			},
 			"h6": {
@@ -408,6 +511,17 @@
 					"letterSpacing": "0.1em",
 					"lineHeight": "1.3",
 					"textTransform": "uppercase"
+				},
+				"spacing": {
+					"margin": {
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
+					}
+				}
+			},
+			"link": {
+				"color": {
+					"text": "var(--wp--custom--color--primary)"
 				}
 			}
 		},
@@ -415,6 +529,9 @@
 			"blockGap": "0.5em"
 		},
 		"typography": {
+			"lineHeight": "var(--wp--custom--body--typography--line-height)",
+			"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
+			"fontSize": "var(--wp--custom--font-sizes--normal)",
 			"fontWeight": "400"
 		}
 	}