Archeo: Image with headline and separate description pattern (#5470)

* created pattern

* Compress jpg

* Set image to fill space & add dynamic padding

* Adjust image focal point

Co-authored-by: Sarah Norris <sarah@sekai.co.uk>

archeo/inc/block-patterns.php

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

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

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Image with headline and separate description
+ */
+return array(
+	'title'      => __( 'Image with headline and separate description', 'archeo' ),
+	'categories' => array( 'pages' ),
+	'content'    => '<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaLink":"' . esc_url( get_template_directory_uri() ) . '/assets/images/pyramid.jpg","mediaType":"image","mediaWidth":56,"imageFill":true,"focalPoint":{"x":"0.50","y":"0.28"}} -->
+	<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile is-image-fill" style="grid-template-columns:auto 56%"><figure class="wp-block-media-text__media" style="background-image:url(' . esc_url( get_template_directory_uri() ) . '/assets/images/pyramid.jpg);background-position:50% 28.000000000000004%"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/pyramid.jpg" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"style":{"typography":{"letterSpacing":"-0.02em","lineHeight":"1","textTransform":"uppercase","fontStyle":"normal","fontWeight":"100"}},"fontSize":"huge"} -->
+	<p class="has-huge-font-size" style="font-style:normal;font-weight:100;line-height:1;text-transform:uppercase;letter-spacing:-0.02em">' . wp_kses_post( __( 'Maison<br>Du Nain<br>à Uxmal', 'archeo' ) ) . '</p>
+	<!-- /wp:paragraph -->
+	
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"min(26rem, 26vw)","bottom":"min(6rem, 6vw)"}}}} -->
+	<div class="wp-block-group" style="padding-top:min(26rem, 26vw);padding-bottom:min(6rem, 6vw)"><!-- wp:paragraph {"fontSize":"small"} -->
+	<p class="has-small-font-size">' . wp_kses_post( __( 'Also referred to as <br>The Pyramid of the Magician', 'archeo' ) ) . '</p>
+	<!-- /wp:paragraph -->
+	
+	<!-- wp:paragraph {"fontSize":"small"} -->
+	<p class="has-small-font-size">' . __( 'The pyramid is the tallest structure in Uxmal. Construction on the pyramid began around the 6th century AD. It was added and iterated on for the next 400 years.', 'archeo' ) . '</p>
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:group --></div></div>
+	<!-- /wp:media-text -->',
+);