Remote: single and page templates (#5534)

* single page content

* test

* undo test

* tweaked spacings

* created page template

* added missing blocks on single page

* fix alignment on separator

* offset content of templates to the left

* removed height from featured image

remote/style.css

@@ -15,7 +15,7 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 */
 
 /*
- * Font smoothing
+ * Font smoothing.
  */
 
 body {
@@ -23,6 +23,14 @@ body {
 	-webkit-font-smoothing: antialiased;
 }
 
+/*
+ * Links styles.
+ */
+
+.wp-block-post-title a {
+	text-decoration: none;
+}
+
 /*
  * Alignment styles, borrowed from Twenty Twenty-Two.
  * These rules are temporary, and should not be relied on or
@@ -88,3 +96,14 @@ body > .is-root-container,
 	 padding-right: var(--wp--custom--spacing--outer);
 	 padding-left: var(--wp--custom--spacing--outer);
  }
+
+
+/*
+* Needed until https://github.com/WordPress/gutenberg/issues/29167 is addressed.
+*/
+.wp-block-post-comments input[type=submit].wp-block-button__link {
+	border-radius: var(--wp--custom--button--border--radius);
+	border: 1px solid var(--wp--preset--color--foreground);
+	background-color: transparent;
+	color: var(--wp--preset--color--foreground);
+}

remote/templates/home.html

@@ -35,8 +35,8 @@
 	<!-- /wp:columns -->
 	<!-- /wp:post-template -->
 
-	<!-- wp:spacer {"height":32} -->
-	<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- wp:spacer {"height":"1.5em"} -->
+	<div style="height:1.5em" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
 
 	<!-- wp:query-pagination -->

remote/templates/page.html

@@ -0,0 +1,52 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group">
+
+	<!-- wp:group {"layout":{"inherit":true}} -->
+	<div class="wp-block-group">
+
+		<!-- wp:spacer {"height":"1.5em"} -->
+		<div style="height:1.5em" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+
+		<!-- wp:separator {"className":"is-style-wide","align":"wide"} -->
+		<hr class="wp-block-separator is-style-wide alignwide"/>
+		<!-- /wp:separator -->
+
+		<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"1em","bottom":"2em"}}}} -->
+		<div class="wp-block-columns alignwide" style="padding-top:1em;padding-bottom:2em;"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"><!-- wp:post-date {"format":"M j","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /--></div>
+			<!-- /wp:column -->
+		
+			<!-- wp:column {"verticalAlignment":"center","width":""} -->
+			<div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}},"typography":{"fontSize":"clamp(3rem, 6vw, 4rem)","lineHeight":"1.17"}}} /--></div>
+		<!-- /wp:column --></div>
+		<!-- /wp:columns -->
+
+		<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"top":"0em","bottom":"2.5em"}}}} /-->
+
+		<!-- wp:columns {"align":"wide"} -->
+		<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"></div>
+			<!-- /wp:column -->
+		
+			<!-- wp:column {"verticalAlignment":"center","width":"652px"} -->
+			<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:652px"><!-- wp:post-content /--></div>
+			<!-- /wp:column --></div>
+		<!-- /wp:columns -->
+
+		<!-- wp:spacer {"height":"1.5em"} -->
+		<div style="height:1.5em" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+
+		<!-- wp:separator {"className":"is-style-wide","align":"wide"} -->
+		<hr class="wp-block-separator is-style-wide alignwide"/>
+		<!-- /wp:separator -->
+	</div>
+	<!-- /wp:group -->
+
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container","layout":{"inherit":true}} /-->

remote/templates/single.html

@@ -0,0 +1,87 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group">
+
+	<!-- wp:group {"layout":{"inherit":true}} -->
+	<div class="wp-block-group">
+
+		<!-- wp:spacer {"height":"1.5em"} -->
+		<div style="height:1.5em" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+
+		<!-- wp:separator {"className":"is-style-wide","align":"wide"} -->
+		<hr class="wp-block-separator is-style-wide alignwide"/>
+		<!-- /wp:separator -->
+
+		<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"1em","bottom":"2em"}}}} -->
+		<div class="wp-block-columns alignwide" style="padding-top:1em;padding-bottom:2em;"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"><!-- wp:post-date {"format":"M j","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /--></div>
+			<!-- /wp:column -->
+		
+			<!-- wp:column {"verticalAlignment":"center","width":""} -->
+			<div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}},"typography":{"fontSize":"clamp(3rem, 6vw, 4rem)","lineHeight":"1.17"}}} /--></div>
+		<!-- /wp:column --></div>
+		<!-- /wp:columns -->
+
+		<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"top":"0em","bottom":"2.5em"}}}} /-->
+
+		<!-- wp:columns {"align":"wide"} -->
+		<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"></div>
+			<!-- /wp:column -->
+
+			<!-- wp:column {"verticalAlignment":"center","width":"652px"} -->
+			<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:652px"><!-- wp:post-content /-->
+
+			<!-- wp:spacer {"height":"1.5em"} -->
+			<div style="height:1.5em" aria-hidden="true" class="wp-block-spacer"></div>
+			<!-- /wp:spacer -->
+
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0.5em"}},"layout":{"type":"flex","allowOrientation":false},"fontSize":"small"} -->
+			<div class="wp-block-group has-small-font-size"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}}} -->
+			<p style="text-transform:uppercase">By:</p>
+			<!-- /wp:paragraph -->
+			
+			<!-- wp:post-author-name {"style":{"typography":{"textTransform":"uppercase"}}} /--></div>
+			<!-- /wp:group -->
+
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0.5em"}},"layout":{"type":"flex","allowOrientation":false},"fontSize":"small"} -->
+			<div class="wp-block-group has-small-font-size"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}}} -->
+			<p style="text-transform:uppercase">Posted in:</p>
+			<!-- /wp:paragraph -->
+			
+			<!-- wp:post-terms {"term":"post_tag","style":{"typography":{"textTransform":"uppercase"}}} /--></div>
+			<!-- /wp:group --></div>
+			<!-- /wp:column --></div>
+		<!-- /wp:columns -->
+
+		<!-- wp:spacer {"height":"1.5em"} -->
+		<div style="height:1.5em" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+
+		<!-- wp:separator {"className":"is-style-wide","align":"wide"} -->
+		<hr class="wp-block-separator is-style-wide alignwide"/>
+		<!-- /wp:separator -->
+
+		<!-- wp:spacer {"height":"1.5em"} -->
+		<div style="height:1.5em" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
+
+		<!-- wp:columns {"align":"wide"} -->
+		<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"></div>
+			<!-- /wp:column -->
+
+			<!-- wp:column {"verticalAlignment":"center","width":"652px"} -->
+			<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:652px"><!-- wp:post-comments /--></div>
+			<!-- /wp:column --></div>
+		<!-- /wp:columns -->
+
+	</div>
+	<!-- /wp:group -->
+
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container","layout":{"inherit":true}} /-->

remote/theme.json

@@ -9,6 +9,11 @@
 				"medium": "clamp(30px, 8vw, 100px)",
 				"large": "clamp(100px, 12vw, 460px)",
 				"outer": "min(4vw, 90px)"
+			},
+			"button": {
+				"border": {
+					"radius": "6px"
+				}
 			}
 		},
 		"color": {
@@ -83,6 +88,11 @@
 	},
 	"styles": {
 		"blocks": {
+			"core/button": {
+				"border": {
+					"radius": "var(--wp--custom--button--border--radius)"
+				}
+			},
 			"core/heading": {
 				"typography": {
 					"fontWeight": "400"