Archeo: Image with headline and description pattern (#5467)

* created pattern

* Use a responsive font size for the heading, reduce margin on the heading, reduce bottom padding.

* Move text decoration to an attribute

* Update image to transparent version

* move text to the right

* fix broken block markup

* Remove transparent pixels in the image.

* Inherit layout

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>

archeo/inc/block-patterns.php

@@ -43,6 +43,7 @@ function archeo_register_block_patterns() {
 	$block_patterns = array(
 		'headline-over-dark-image',
 		'image-with-headline-on-dark-background',
+		'image-with-headline-description',
 		'image-with-headline-and-description',
 	);
 

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

@@ -0,0 +1,19 @@
+<?php
+/**
+ * Image with headline and description
+ */
+return array(
+	'title'      => __( 'Image with headline and description', 'archeo' ),
+	'categories' => array( 'pages' ),
+	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"5vw","right":"5vw","bottom":"0","left":"5vw"}}},"layout":{"inherit":true}} -->
+	<div class="wp-block-group alignfull" style="padding-top:5vw;padding-right:5vw;padding-bottom:0;padding-left:5vw"><!-- wp:media-text {"mediaLink":"' . esc_url( get_template_directory_uri() ) . '/assets/images/chahk.png","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.png" 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":"48px"}}}} -->
+	<h2 class="has-text-align-right" id="chahk-raindeity" style="font-size:clamp(64px, 6vw, 100px);line-height:1;margin-bottom:48px;text-transform:uppercase">' . wp_kses_post( __( 'Chahk:<br>Rain<br>deity', 'archeo' ) ) . '</h2>
+	<!-- /wp:heading -->
+
+	<!-- wp:paragraph {"align":"right","fontSize":"small"} -->
+	<p class="has-text-align-right has-small-font-size">' . wp_kses_post( __( 'Chaahk is shown here clutching <br>his axe, ready to strike rain <br>thunder and rain from the <br>clouds. This sculpture was <br>likely created in the Puuc hills<br>of Yucatan and Campeche.', 'archeo' ) ) . '</p>
+	<!-- /wp:paragraph --></div></div>
+	<!-- /wp:media-text --></div>
+	<!-- /wp:group -->',
+);