WC Blocks: Change output markup to suppot links for consistency

We already support linking featured image in editor. This patch adds support for linked image in rendered post as well. Also markup is changed a bit (especially classnames) to make both editor and rendered post consistent.

Towards #36

public_html/wp-content/mu-plugins/blocks/assets/src/shared/featured-image/index.js

@@ -17,7 +17,6 @@ export default class FeaturedImage extends Component {
 	/**
 	 * @param props Props for function.
 	 * @param props.wpMediaDetails Available sizes of images in the format as returned by WP API. This is the `sizes` object inside `media_details` inside `wp:featuredMedia` object.
-	 * @param props.height Height in pixels for image.
 	 * @param props.width Width in pixels for image.
 	 * @param props.className Classname for image element
 	 * @param props.alt Alt text for image

public_html/wp-content/mu-plugins/blocks/includes/shared/featured-image.php

@@ -7,15 +7,14 @@
  *
  * @param array    $class_names        Additional classes to add inside <img> tag.
  * @param \WP_Post $post               Current post object. This will be used to calculate srcset attribute.
- * @param int      $height             Height of the image.
  * @param int      $width              Width of the image.
  *
  * @return string Output markup for featured image.
  */
-function render_featured_image( $class_names, $post, $height, $width ) {
+function render_featured_image( $class_names, $post, $width, $image_link = '' ) {
 	$class_names[] = 'wordcamp-featured-image';
-	$class_names[] = 'wordcamp-featured-image-' . $post->post_name;
 	$class_names = implode( ' ', $class_names );
+	$container_classes = "wordcamp-image-container wordcamp-featured-image-container $class_names";
 	$attachment_id = get_post_thumbnail_id( $post->ID );
 	$image_data = wp_get_attachment_metadata( $attachment_id );
 	$size = 'post-thumbnail';
@@ -25,6 +24,35 @@ function render_featured_image( $class_names, $post, $height, $width ) {
 		$size = array( $width, $height );
 	}
 
+	$image = render_featured_image_element( $post, $size, $class_names );
+	ob_start();
+	?>
+		<div class="<?php echo esc_attr( $container_classes ); ?>">
+			<?php if ( '' !== $image_link ) { ?>
+				<div class="components-disabled">
+					<a href="<?php echo esc_html( $image_link ); ?>" class="wordcamp-image-link wordcamp-featured-image-link">
+						<?php echo wp_kses_post( $image ); ?>
+					</a>
+				</div>
+			<?php } else { ?>
+					<?php echo wp_kses_post( $image ); ?>
+			<?php } ?>
+		</div>
+	<?php
+
+	return ob_get_clean();
+}
+
+/**
+ * Helper method to render thumbnail image.
+ *
+ * @param \WP_Post     $post
+ * @param string|array $size
+ * @param string       $class_names
+ *
+ * @return string
+ */
+function render_featured_image_element( $post, $size, $class_names ) {
 	return get_the_post_thumbnail(
 		$post,
 		$size,

public_html/wp-content/mu-plugins/blocks/view/sessions.php

@@ -49,8 +49,8 @@ function( $speaker ) {
 			echo wp_kses_post( render_featured_image(
 				array( 'wordcamp-session-image-container', 'align-' . esc_attr( $attributes['image_align'] ) ),
 				$session,
-				$attributes['featured_image_height'],
-				$attributes['featured_image_width']
+				$attributes['featured_image_width'],
+				get_permalink( $session )
 			) );
 		?>
 	<?php endif; ?>

public_html/wp-content/mu-plugins/blocks/view/sponsors.php

@@ -23,10 +23,10 @@
 	<?php if ( $attributes['show_logo'] ) { ?>
 		<?php echo wp_kses_post(
 			render_featured_image(
-				array( 'wordcamp-sponsor-featured-image' ),
+				array( 'wordcamp-sponsor-featured-image', 'wordcamp-sponsor-logo' ),
 				$sponsor,
-				$attributes['featured_image_height'],
-				$attributes['featured_image_width']
+				$attributes['featured_image_width'],
+				get_permalink( $sponsor )
 			)
 		); ?>
 	<?php } ?>