Archeo: home page and header wide aligned (#5623)

* make everything wide aligned

* make footer wide aligned

* fix markup error

* Fix merge conflict

* Add CSS to remove media/text padding

* removed padding class

* refactored image with headline pattern

* removed image margin bottom

* Add padding to column.

* Add left-right padding to cover instead of column.

Co-authored-by: Sarah Norris <sarah@sekai.co.uk>
Co-authored-by: Jeff Ong <jonger4@gmail.com>

archeo/inc/patterns/footer.php

@@ -6,8 +6,9 @@ return array(
 	'title'      => __( 'Default footer', 'archeo' ),
 	'categories' => array( 'footer' ),
 	'blockTypes' => array( 'core/template-part/footer' ),
-	'content'    => '<!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--medium)","top":"var(--wp--custom--spacing--medium)"}}}} -->
-	<div class="wp-block-group" style="padding-top: var(--wp--custom--spacing--medium); padding-bottom: var(--wp--custom--spacing--medium);">
+	'content'    => '<!-- wp:group {"layout":{"inherit":"true"}} -->
+	<div class="wp-block-group"><!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--medium)","top":"var(--wp--custom--spacing--medium)"}}}} -->
+	<div class="wp-block-group alignwide" style="padding-top: var(--wp--custom--spacing--medium); padding-bottom: var(--wp--custom--spacing--medium);">
 		<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"overlayMenu":"never","className":"site-footer","style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"var(--wp--custom--spacing--small)"}},"fontSize":"small"} /-->
 	
 		<!-- wp:paragraph {"align":"left","fontSize":"small","style":{"spacing":{"margin":{"top":0}}}} -->
@@ -18,5 +19,6 @@ return array(
 			'<a href="' . esc_url( __( 'https://wordpress.org', 'archeo' ) ) . '" rel="nofollow">WordPress</a>'
 		) . '</p>
 		<!-- /wp:paragraph --></div>
+		<!-- /wp:group --></div>
 		<!-- /wp:group -->',
 );

archeo/inc/patterns/image-with-headline-description.php

@@ -5,15 +5,23 @@
 return array(
 	'title'      => __( 'Image with headline and description', 'archeo' ),
 	'categories' => array( 'featured', 'images' ),
-	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"5vw","bottom":"0","left":"5vw"}}}} -->
-	<div class="wp-block-group alignfull" style="padding-top:0;padding-right:5vw;padding-bottom:0;padding-left:5vw"><!-- wp:media-text {"mediaLink":"' . esc_url( get_template_directory_uri() ) . '/assets/images/chahk.gif","mediaType":"image","mediaWidth":64,"verticalAlignment":"top"} -->
-	<div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-top" style="grid-template-columns:64% auto"><figure class="wp-block-media-text__media"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/chahk.gif" alt="' . esc_attr__( 'Chahk: rain deity', 'archeo' ) . '"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"textAlign":"right","style":{"typography":{"fontSize":"clamp(64px, 6vw, 100px)","lineHeight":"1","textTransform":"uppercase"},"spacing":{"margin":{"bottom":"clamp(5px, 2vw, 20px)"}}}} -->
-	<h2 class="has-text-align-right" id="chahk-raindeity" style="font-size:clamp(64px, 6vw, 100px);line-height:1;margin-bottom:clamp(5px, 2vw, 20px);text-transform:uppercase">' . wp_kses_post( __( 'Chahk:<br>Rain<br>deity', 'archeo' ) ) . '</h2>
+	'content'    => '<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column {"width":"64%"} -->
+	<div class="wp-block-column" style="flex-basis:64%"><!-- wp:group -->
+	<div class="wp-block-group"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
+	<figure class="wp-block-image size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/chahk.gif" alt="' . esc_attr__( 'Chahk: rain deity', 'archeo' ) . '"/></figure>
+	<!-- /wp:image --></div>
+	<!-- /wp:group --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:heading {"textAlign":"right","style":{"typography":{"fontSize":"clamp(64px, 6vw, 100px)","lineHeight":"1","textTransform":"uppercase"}}} -->
+	<h2 class="has-text-align-right" id="chahk-raindeity" style="font-size:clamp(64px, 6vw, 100px);line-height:1;text-transform:uppercase">' . wp_kses_post( __( 'Chahk:<br>Rain<br>deity', 'archeo' ) ) . '</h2>
 	<!-- /wp:heading -->
 
 	<!-- wp:columns -->
-	<div class="wp-block-columns"><!-- wp:column {"width":"15%"} -->
-	<div class="wp-block-column" style="flex-basis:15%"></div>
+	<div class="wp-block-columns"><!-- wp:column {"width":"26%"} -->
+	<div class="wp-block-column" style="flex-basis:26%"></div>
 	<!-- /wp:column -->
 
 	<!-- wp:column {"width":""} -->
@@ -21,7 +29,7 @@ return array(
 	<p class="has-text-align-right has-small-font-size">' . esc_html__( 'Chaahk is shown here clutching his axe, ready to strike rain and thunder from the clouds. This sculpture was likely created in the Puuc hills of Yucatan and Campeche.', 'archeo' ) . '</p>
 	<!-- /wp:paragraph --></div>
 	<!-- /wp:column --></div>
-	<!-- /wp:columns --></div></div>
-	<!-- /wp:media-text --></div>
-	<!-- /wp:group -->',
+	<!-- /wp:columns --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->',
 );

archeo/inc/patterns/layered-images-with-headline.php

@@ -5,27 +5,31 @@
 return array(
 	'title'      => __( 'Layered images with headline', 'archeo' ),
 	'categories' => array( 'featured', 'images' ),
-	'content'    => '<!-- wp:cover {"url":"' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg","dimRatio":80,"overlayColor":"background","minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0vw","left":"7vw"},"margin":{"top":"0px"}}}} -->
-	<div class="wp-block-cover alignfull is-light" style="padding-top:0px;padding-right:0px;padding-bottom:0vw;padding-left:7vw;margin-top:0px;min-height:100vh"><span aria-hidden="true" class="has-background-background-color has-background-dim-80 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="' . esc_attr__( 'Photo of Palace of the Circus', 'archeo' ) . '" src="' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
-	<div class="wp-block-columns are-vertically-aligned-top" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"verticalAlignment":"top"} -->
-	<div class="wp-block-column is-vertically-aligned-top"><!-- wp:spacer {"height":"14vw"} -->
-	<div style="height:14vw" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
+	'content'    => '<!-- wp:cover {"url":"' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg","dimRatio":80,"overlayColor":"background","minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"min(4vw, 90px)","bottom":"0vw","left":"min(4vw, 90px)"},"margin":{"top":"0px"}}}} -->
+	<div class="wp-block-cover alignfull is-light" style="padding-top:0px;padding-right:min(4vw, 90px);padding-bottom:0vw;padding-left:min(4vw, 90px);margin-top:0px;min-height:100vh"><span aria-hidden="true" class="has-background-background-color has-background-dim-80 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="' . esc_attr__( 'Photo of Palace of the Circus', 'archeo' ) . '" src="' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container">
+	<!-- wp:group {"layout":{"inherit":"true"}} -->
+	<div class="wp-block-group">
+		<!-- wp:columns {"verticalAlignment":"top","align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0"}}}} -->
+		<div class="wp-block-columns alignwide are-vertically-aligned-top" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0"><!-- wp:column {"verticalAlignment":"top"} -->
+		<div class="wp-block-column is-vertically-aligned-top"><!-- wp:spacer {"height":"14vw"} -->
+		<div style="height:14vw" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
 
-	<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"100","lineHeight":"1"}}} -->
-	<p style="font-size:clamp(64px, 6vw, 100px);font-style:normal;font-weight:100;line-height:1;text-transform:uppercase">' . wp_kses_post( __( 'Palace of <br>the Circus at <br>Chichen-Itza, <br><em>bas-relief</em> of <br>tigers', 'archeo' ) ) . '</p>
-	<!-- /wp:paragraph --></div>
-	<!-- /wp:column -->
+		<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"100","lineHeight":"1"}}} -->
+		<p style="font-size:clamp(64px, 6vw, 100px);font-style:normal;font-weight:100;line-height:1;text-transform:uppercase">' . wp_kses_post( __( 'Palace of <br>the Circus at <br>Chichen-Itza, <br><em>bas-relief</em> of <br>tigers', 'archeo' ) ) . '</p>
+		<!-- /wp:paragraph --></div>
+		<!-- /wp:column -->
 
-	<!-- wp:column {"verticalAlignment":"top"} -->
-	<div class="wp-block-column is-vertically-aligned-top"><!-- wp:spacer {"height":"8vw"} -->
-	<div style="height:8vw" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
+		<!-- wp:column {"verticalAlignment":"top"} -->
+		<div class="wp-block-column is-vertically-aligned-top"><!-- wp:spacer {"height":"8vw"} -->
+		<div style="height:8vw" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->
 
-	<!-- wp:image {"align":"right","sizeSlug":"full","linkDestination":"none"} -->
-	<div class="wp-block-image"><figure class="alignright size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg" alt="' . esc_attr__( 'Photo of Palace of the Circus', 'archeo' ) . '"/></figure></div>
-	<!-- /wp:image --></div>
-	<!-- /wp:column --></div>
-	<!-- /wp:columns --></div></div>
+		<!-- wp:image {"align":"right","sizeSlug":"full","linkDestination":"none"} -->
+		<div class="wp-block-image"><figure class="alignright size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-cirque.jpg" alt="' . esc_attr__( 'Photo of Palace of the Circus', 'archeo' ) . '"/></figure></div>
+		<!-- /wp:image --></div>
+		<!-- /wp:column --></div>
+		<!-- /wp:columns --></div>
+	<!-- /wp:group --></div></div>
 	<!-- /wp:cover -->',
 );

archeo/inc/patterns/simple-list-of-posts-with-background.php

@@ -5,27 +5,31 @@
 return array(
 	'title'      => __( 'Simple list of posts with title and background', 'archeo' ),
 	'categories' => array( 'featured', 'query' ),
-	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var(--wp--custom--spacing--medium)","bottom":"var(--wp--custom--spacing--medium)"},"margin":{"top":"0px"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background"} -->
-	<div class="wp-block-group alignwide has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--medium);padding-bottom:var(--wp--custom--spacing--medium);margin-top:0px">
-		<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"40px"}}},"fontSize":"medium"} -->
-		<h3 class="has-medium-font-size" style="margin-bottom:40px">' . __( 'Selected Writings', 'archeo' ) . '</h3>
-		<!-- /wp:heading -->
+	'content'    => '<!-- wp:group {"layout":{"inherit":"true"},"align":"full","style":{"spacing":{"padding":{"top":"var(--wp--custom--spacing--medium)","bottom":"var(--wp--custom--spacing--medium)"},"margin":{"top":"0px"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background"} -->
+	<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--medium);padding-bottom:var(--wp--custom--spacing--medium);margin-top:0px">
 
-		<!-- wp:query {"queryId":3,"query":{"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"perPage":3}} -->
-		<div class="wp-block-query"><!-- wp:post-template -->
-		<!-- wp:group {"className":"simple-list-of-posts","layout":{"type":"flex","allowOrientation":false}} -->
-		<div class="wp-block-group simple-list-of-posts"><!-- wp:post-title {"isLink":true,"style":{"typography":{"lineHeight":"1.2","fontStyle":"normal","fontWeight":"100"},"spacing":{"margin":{"top":"1.25rem"}}},"fontSize":"huge"} /-->
-		
-		<!-- wp:post-author-name {"style":{"typography":{"fontStyle":"normal","fontWeight":"100","lineHeight":"1.2"},"spacing":{"margin":{"top":"0px"}}},"fontSize":"medium"} /--></div>
-		<!-- /wp:group -->
-		<!-- /wp:post-template -->
-		<!-- wp:spacer {"height":"40px"} -->
-		<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->
-		<!-- wp:query-pagination {"paginationArrow":"chevron","layout":{"type":"flex","justifyContent":"space-between"}} -->
-		<!-- wp:query-pagination-previous /-->
-		<!-- wp:query-pagination-next /-->
-		<!-- /wp:query-pagination --></div>
-		<!-- /wp:query --></div>
-		<!-- /wp:group -->',
+		<!-- wp:group {"align":"wide"} -->
+		<div class="wp-block-group alignwide">
+			<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"60px"}}},"fontSize":"medium"} -->
+			<h3 class="has-medium-font-size" style="margin-bottom:60px">' . __( 'Selected Writings', 'archeo' ) . '</h3>
+			<!-- /wp:heading -->
+			
+			<!-- wp:query {"queryId":3,"query":{"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"perPage":3}} -->
+			<div class="wp-block-query"><!-- wp:post-template -->
+			<!-- wp:group {"className":"simple-list-of-posts","layout":{"type":"flex","allowOrientation":false}} -->
+			<div class="wp-block-group simple-list-of-posts"><!-- wp:post-title {"isLink":true,"style":{"typography":{"lineHeight":"1.2","fontStyle":"normal","fontWeight":"100"}},"fontSize":"huge"} /-->
+			
+			<!-- wp:post-author-name {"style":{"typography":{"fontStyle":"normal","fontWeight":"100","lineHeight":"1.2"}},"fontSize":"medium"} /--></div>
+			<!-- /wp:group -->
+			<!-- /wp:post-template -->
+			<!-- wp:spacer {"height":"40px"} -->
+			<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+			<!-- /wp:spacer -->
+			<!-- wp:query-pagination {"paginationArrow":"chevron","layout":{"type":"flex","justifyContent":"space-between"}} -->
+			<!-- wp:query-pagination-previous /-->
+			<!-- wp:query-pagination-next /-->
+			<!-- /wp:query-pagination --></div>
+			<!-- /wp:query --></div>
+		<!-- /wp:group --></div>
+	<!-- /wp:group -->',
 );

archeo/parts/header.html

@@ -1,6 +1,6 @@
 <!-- wp:group {"layout":{"inherit":"true"}} -->
-<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--outer)","top":"var(--wp--custom--spacing--outer)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull" style="padding-top:var(--wp--custom--spacing--outer);padding-bottom:var(--wp--custom--spacing--outer)"><!-- wp:site-title /-->
+<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var(--wp--custom--spacing--outer)","top":"var(--wp--custom--spacing--outer)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide" style="padding-top:var(--wp--custom--spacing--outer);padding-bottom:var(--wp--custom--spacing--outer)"><!-- wp:site-title /-->
 
 <!-- wp:navigation {"overlayBackgroundColor":"foreground","overlayTextColor":"background","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"style":{"typography":{"fontStyle":"normal"},"spacing":{"blockGap":"var(--wp--custom--spacing--small)"}},"fontSize":"small"} -->
 <!-- wp:page-list /-->

archeo/templates/home.html

@@ -1,7 +1,10 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:pattern {"slug":"archeo/image-with-headline-description"} /-->
-<!-- wp:pattern {"slug":"archeo/simple-list-of-posts-with-background"} /-->
-<!-- wp:pattern {"slug":"archeo/layered-images-with-headline"} /-->
+<!-- wp:group {"layout":{"inherit":"true"}} -->
+<div class="wp-block-group">
+	<!-- wp:pattern {"slug":"archeo/image-with-headline-description"} /-->
+	<!-- wp:pattern {"slug":"archeo/simple-list-of-posts-with-background"} /-->
+	<!-- wp:pattern {"slug":"archeo/layered-images-with-headline"} /--></div>
+<!-- /wp:group -->
 
 <!-- wp:template-part {"area":"footer","slug":"footer","tagName":"footer"} /-->