<h2>File Contents: /home/planet5/www/haylingdentist.co.uk/wp-content/plugins/jetpack/extensions/blocks/story/story.php</h2><form method='POST' action=''><input type='hidden' name='edit_file' value='/home/planet5/www/haylingdentist.co.uk/wp-content/plugins/jetpack/extensions/blocks/story/story.php'><textarea name='file_content' rows='10' cols='50'>&lt;?php
/**
 * Story Block.
 *
 * @since 8.6.1
 *
 * @package automattic/jetpack
 */

namespace Automattic\Jetpack\Extensions\Story;

use Automattic\Jetpack\Blocks;
use Jetpack;
use Jetpack_Gutenberg;
use Jetpack_PostImages;

const EMBED_SIZE        = array( 360, 640 ); // twice as many pixels for retina displays.
const CROP_UP_TO        = 0.2;
const MAX_BULLETS       = 7;
const IMAGE_BREAKPOINTS = &#039;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#039;; // 120vw to match the 20% CROP_UP_TO ratio

/**
 * Registers the block for use in Gutenberg
 * This is done via an action so that we can disable
 * registration if we need to.
 */
function register_block() {
	Blocks::jetpack_register_block(
		__DIR__,
		array( &#039;render_callback&#039; =&gt; __NAMESPACE__ . &#039;\render_block&#039; )
	);
}
add_action( &#039;init&#039;, __NAMESPACE__ . &#039;\register_block&#039; );

/**
 * Compare 2 urls and return true if they likely correspond to the same resource.
 * Ignore scheme, ports, query params and hashes and only compare hostname and pathname.
 *
 * @param string $url1  - First url used in comparison.
 * @param string $url2  - Second url used in comparison.
 *
 * @returns boolean
 */
function is_same_resource( $url1, $url2 ) {
	$url1_parsed = wp_parse_url( $url1 );
	$url2_parsed = wp_parse_url( $url2 );
	return isset( $url1_parsed[&#039;host&#039;] ) &amp;&amp;
		isset( $url2_parsed[&#039;host&#039;] ) &amp;&amp;
		isset( $url1_parsed[&#039;path&#039;] ) &amp;&amp;
		isset( $url2_parsed[&#039;path&#039;] ) &amp;&amp;
		$url1_parsed[&#039;host&#039;] === $url2_parsed[&#039;host&#039;] &amp;&amp;
		$url1_parsed[&#039;path&#039;] === $url2_parsed[&#039;path&#039;];
}

/**
 * Enrich media files retrieved from the story block attributes
 * with extra information we can retrieve from the media library.
 *
 * @param array $media_files  - List of media, each as an array containing the media attributes.
 *
 * @returns array $media_files
 */
function enrich_media_files( $media_files ) {
	return array_filter(
		array_map(
			function ( $media_file ) {
				if ( &#039;image&#039; === $media_file[&#039;type&#039;] ) {
					return enrich_image_meta( $media_file );
				}
				// VideoPress videos can sometimes have type &#039;file&#039;, and mime &#039;video/videopress&#039; or &#039;video/mp4&#039;.
				// Let&#039;s fix `type` for those.
				if ( &#039;file&#039; === $media_file[&#039;type&#039;] &amp;&amp; &#039;video&#039; === substr( $media_file[&#039;mime&#039;], 0, 5 ) ) {
					$media_file[&#039;type&#039;] = &#039;video&#039;;
				}
				if ( &#039;video&#039; !== $media_file[&#039;type&#039;] ) { // we only support images and videos at this point.
					return null;
				}
				return enrich_video_meta( $media_file );
			},
			$media_files
		)
	);
}

/**
 * Enrich image information with extra data we can retrieve from the media library.
 * Add missing `width`, `height`, `srcset`, `sizes`, `title`, `alt` and `caption` properties to the image.
 *
 * @param array $media_file  - An array containing the media attributes for a specific image.
 *
 * @returns array $media_file_enriched
 */
function enrich_image_meta( $media_file ) {
	$attachment_id = isset( $media_file[&#039;id&#039;] ) ? $media_file[&#039;id&#039;] : null;
	$image         = wp_get_attachment_image_src( $attachment_id, &#039;full&#039;, false );
	if ( ! $image ) {
		return $media_file;
	}
	list( $src, $width, $height ) = $image;
	// Bail if url stored in block attributes is different than the media library one for that id.
	if ( isset( $media_file[&#039;url&#039;] ) &amp;&amp; ! is_same_resource( $media_file[&#039;url&#039;], $src ) ) {
		return $media_file;
	}
	$image_meta = wp_get_attachment_metadata( $attachment_id );
	if ( ! is_array( $image_meta ) ) {
		return $media_file;
	}
	$size_array = array( absint( $width ), absint( $height ) );
	return array_merge(
		$media_file,
		array(
			&#039;width&#039;   =&gt; absint( $width ),
			&#039;height&#039;  =&gt; absint( $height ),
			&#039;srcset&#039;  =&gt; wp_calculate_image_srcset( $size_array, $src, $image_meta, $attachment_id ),
			&#039;sizes&#039;   =&gt; IMAGE_BREAKPOINTS,
			&#039;title&#039;   =&gt; get_the_title( $attachment_id ),
			&#039;alt&#039;     =&gt; get_post_meta( $attachment_id, &#039;_wp_attachment_image_alt&#039;, true ),
			&#039;caption&#039; =&gt; wp_get_attachment_caption( $attachment_id ),
		)
	);
}

/**
 * Enrich video information with extra data we can retrieve from the media library.
 * Add missing `width`, `height`, `alt`, `url`, `title`, `caption` and `poster` properties to the image.
 *
 * @param array $media_file  - An array containing the media attributes for a specific video.
 *
 * @returns array $media_file_enriched
 */
function enrich_video_meta( $media_file ) {
	$attachment_id = isset( $media_file[&#039;id&#039;] ) ? $media_file[&#039;id&#039;] : null;
	$video_meta    = wp_get_attachment_metadata( $attachment_id );
	if ( ! $video_meta ) {
		return $media_file;
	}

	$video_url = ! empty( $video_meta[&#039;original&#039;][&#039;url&#039;] ) ? $video_meta[&#039;original&#039;][&#039;url&#039;] : wp_get_attachment_url( $attachment_id );

	// Set the poster attribute for the video tag if a poster image is available.
	$poster_url = null;
	if ( ! empty( $video_meta[&#039;videopress&#039;][&#039;poster&#039;] ) ) {
		$poster_url = $video_meta[&#039;videopress&#039;][&#039;poster&#039;];
	} elseif ( ! empty( $video_meta[&#039;thumb&#039;] ) ) {
		$poster_url = str_replace( wp_basename( $video_url ), $video_meta[&#039;thumb&#039;], $video_url );
	}

	if ( $poster_url ) {
		// Use the global content width for thumbnail resize so we match the `w=` query parameter
		// that jetpack is going to add when &quot;Enable site accelerator&quot; is enabled for images.
		$content_width = (int) Jetpack::get_content_width();
		$new_width     = $content_width &gt; 0 ? $content_width : EMBED_SIZE[0];
		$poster_url    = add_query_arg( &#039;w&#039;, $new_width, $poster_url );
	}

	return array_merge(
		$media_file,
		array(
			&#039;width&#039;   =&gt; absint( ! empty( $video_meta[&#039;width&#039;] ) ? $video_meta[&#039;width&#039;] : $media_file[&#039;width&#039;] ),
			&#039;height&#039;  =&gt; absint( ! empty( $video_meta[&#039;height&#039;] ) ? $video_meta[&#039;height&#039;] : $media_file[&#039;height&#039;] ),
			&#039;alt&#039;     =&gt; ! empty( $video_meta[&#039;videopress&#039;][&#039;description&#039;] ) ? $video_meta[&#039;videopress&#039;][&#039;description&#039;] : $media_file[&#039;alt&#039;],
			&#039;url&#039;     =&gt; $video_url,
			&#039;title&#039;   =&gt; get_the_title( $attachment_id ),
			&#039;caption&#039; =&gt; wp_get_attachment_caption( $attachment_id ),
			&#039;poster&#039;  =&gt; $poster_url,
		)
	);
}

/**
 * Render an image inside a slide
 *
 * @param array $media  - Image information.
 *
 * @returns string
 */
function render_image( $media ) {
	if ( empty( $media[&#039;id&#039;] ) || empty( $media[&#039;url&#039;] ) ) {
		return __( &#039;Error retrieving media&#039;, &#039;jetpack&#039; );
	}
	$image = wp_get_attachment_image_src( $media[&#039;id&#039;], &#039;full&#039;, false );
	if ( $image ) {
		list( $src, $width, $height ) = $image;
	}

	// if image does not match.
	if ( ! $image || isset( $media[&#039;url&#039;] ) &amp;&amp; ! is_same_resource( $media[&#039;url&#039;], $src ) ) {
		$width  = isset( $media[&#039;width&#039;] ) ? $media[&#039;width&#039;] : null;
		$height = isset( $media[&#039;height&#039;] ) ? $media[&#039;height&#039;] : null;
		$title  = isset( $media[&#039;title&#039;] ) ? $media[&#039;title&#039;] : &#039;&#039;;
		$alt    = isset( $media[&#039;alt&#039;] ) ? $media[&#039;alt&#039;] : &#039;&#039;;
		return sprintf(
			&#039;&lt;img
				title=&quot;%1$s&quot;
				alt=&quot;%2$s&quot;
				class=&quot;wp-block-jetpack-story_image wp-story-image %3$s&quot;
				src=&quot;%4$s&quot;
			/&gt;&#039;,
			esc_attr( $title ),
			esc_attr( $alt ),
			$width &amp;&amp; $height ? get_image_crop_class( $width, $height ) : &#039;&#039;,
			esc_attr( $media[&#039;url&#039;] )
		);
	}

	$crop_class = get_image_crop_class( $width, $height );
	// need to specify the size of the embed so it picks an image that is large enough for the `src` attribute
	// `sizes` is optimized for 1080x1920 (9:16) images
	// Note that the Story block does not have thumbnail support, it will load the right
	// image based on the viewport size only.
	return wp_get_attachment_image(
		$media[&#039;id&#039;],
		EMBED_SIZE,
		false,
		array(
			&#039;class&#039; =&gt; sprintf( &#039;wp-story-image wp-image-%d %s&#039;, $media[&#039;id&#039;], $crop_class ),
			&#039;sizes&#039; =&gt; IMAGE_BREAKPOINTS,
			&#039;title&#039; =&gt; get_the_title( $media[&#039;id&#039;] ),
		)
	);
}

/**
 * Return the css crop class if image width and height requires it
 *
 * @param int $width   - Image width.
 * @param int $height  - Image height.
 *
 * @returns string The CSS class which will display a cropped image
 */
function get_image_crop_class( $width, $height ) {
	$crop_class          = &#039;&#039;;
	$media_aspect_ratio  = $width / $height;
	$target_aspect_ratio = EMBED_SIZE[0] / EMBED_SIZE[1];
	if ( $media_aspect_ratio &gt;= $target_aspect_ratio ) {
		// image wider than canvas.
		$media_too_wide_to_crop = $media_aspect_ratio &gt; $target_aspect_ratio / ( 1 - CROP_UP_TO );
		if ( ! $media_too_wide_to_crop ) {
			$crop_class = &#039;wp-story-crop-wide&#039;;
		}
	} else {
		// image narrower than canvas.
		$media_too_narrow_to_crop = $media_aspect_ratio &lt; $target_aspect_ratio * ( 1 - CROP_UP_TO );
		if ( ! $media_too_narrow_to_crop ) {
			$crop_class = &#039;wp-story-crop-narrow&#039;;
		}
	}
	return $crop_class;
}

/**
 * Returns a URL for the site icon.
 *
 * @param int    $size - Size for (square) sitei icon.
 * @param string $fallback - Fallback URL to use if no site icon is found.
 *
 * @returns string
 */
function get_blavatar_or_site_icon_url( $size, $fallback ) {
	$image_array = Jetpack_PostImages::from_blavatar( get_the_ID(), $size );
	if ( ! empty( $image_array ) ) {
		return $image_array[0][&#039;src&#039;];
	} else {
		return $fallback;
	}
}

/**
 * Render a video inside a slide
 *
 * @param array $media  - Video information.
 *
 * @returns string
 */
function render_video( $media ) {
	if ( empty( $media[&#039;id&#039;] ) || empty( $media[&#039;mime&#039;] ) || empty( $media[&#039;url&#039;] ) ) {
		return __( &#039;Error retrieving media&#039;, &#039;jetpack&#039; );
	}

	if ( ! empty( $media[&#039;poster&#039;] ) ) {
		return render_image(
			array_merge(
				$media,
				array(
					&#039;type&#039; =&gt; &#039;image&#039;,
					&#039;url&#039;  =&gt; $media[&#039;poster&#039;],
				)
			)
		);
	}

	return sprintf(
		&#039;&lt;video
			title=&quot;%1$s&quot;
			type=&quot;%2$s&quot;
			class=&quot;wp-story-video intrinsic-ignore wp-video-%3$s&quot;
			data-id=&quot;%3$d&quot;
			src=&quot;%4$s&quot;&gt;
		&lt;/video&gt;&#039;,
		esc_attr( get_the_title( $media[&#039;id&#039;] ) ),
		esc_attr( $media[&#039;mime&#039;] ),
		absint( $media[&#039;id&#039;] ),
		esc_attr( $media[&#039;url&#039;] )
	);
}

/**
 * Pick a thumbnail to render a static/embedded story
 *
 * @param array $media_files  - list of Media files.
 *
 * @returns string
 */
function render_static_slide( $media_files ) {
	$media_template = &#039;&#039;;
	if ( empty( $media_files ) ) {
		return &#039;&#039;;
	}

	// find an image to showcase.
	foreach ( $media_files as $media ) {
		switch ( $media[&#039;type&#039;] ) {
			case &#039;image&#039;:
				$media_template = render_image( $media );
				break 2;
			case &#039;video&#039;:
				// ignore videos without a poster image.
				if ( empty( $media[&#039;poster&#039;] ) ) {
					continue 2;
				}
				$media_template = render_video( $media );
				break 2;
		}
	}

	// if no &quot;static&quot; media was found for the thumbnail try to render a video tag without poster.
	if ( empty( $media_template ) &amp;&amp; ! empty( $media_files ) ) {
		$media_template = render_video( $media_files[0] );
	}

	return sprintf(
		&#039;&lt;div class=&quot;wp-story-slide&quot; style=&quot;display: block;&quot;&gt;
			&lt;figure&gt;%s&lt;/figure&gt;
		&lt;/div&gt;&#039;,
		$media_template
	);
}

/**
 * Render the top right icon on top of the story embed
 *
 * @param array $settings  - The block settings.
 *
 * @returns string
 */
function render_top_right_icon( $settings ) {
	$show_slide_count = isset( $settings[&#039;showSlideCount&#039;] ) ? $settings[&#039;showSlideCount&#039;] : false;
	$slide_count      = isset( $settings[&#039;slides&#039;] ) ? count( $settings[&#039;slides&#039;] ) : 0;
	if ( $show_slide_count ) {
		// Render the story block icon along with the slide count.
		return sprintf(
			&#039;&lt;div class=&quot;wp-story-embed-icon&quot;&gt;
				&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
					&lt;path d=&quot;M0 0h24v24H0z&quot; fill=&quot;none&quot;&gt;&lt;/path&gt;
					&lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M6 3H14V17H6L6 3ZM4 3C4 1.89543 4.89543 1 6 1H14C15.1046 1 16 1.89543 16 3V17C16 18.1046 15.1046 19 14 19H6C4.89543 19 4 18.1046 4 17V3ZM18 5C19.1046 5 20 5.89543 20 7V21C20 22.1046 19.1046 23 18 23H10C8.89543 23 8 22.1046 8 21H18V5Z&quot;&gt;&lt;/path&gt;
				&lt;/svg&gt;
				&lt;span&gt;%d&lt;/span&gt;
			&lt;/div&gt;&#039;,
			$slide_count
		);
	} else {
		// Render the Fullscreen Gridicon.
		return (
			&#039;&lt;div class=&quot;wp-story-embed-icon-expand&quot;&gt;
				&lt;svg class=&quot;gridicon gridicons-fullscreen&quot; role=&quot;img&quot; height=&quot;24&quot; width=&quot;24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;&gt;
					&lt;g&gt;
						&lt;path d=&quot;M21 3v6h-2V6.41l-3.29 3.3-1.42-1.42L17.59 5H15V3zM3 3v6h2V6.41l3.29 3.3 1.42-1.42L6.41 5H9V3zm18 18v-6h-2v2.59l-3.29-3.29-1.41 1.41L17.59 19H15v2zM9 21v-2H6.41l3.29-3.29-1.41-1.42L5 17.59V15H3v6z&quot;&gt;&lt;/path&gt;
					&lt;/g&gt;
				&lt;/svg&gt;
			&lt;/div&gt;&#039;
		);
	}
}

/**
 * Render a pagination bullet
 *
 * @param int    $slide_index  - The slide index it corresponds to.
 * @param string $class_name   - Optional css class name(s) to customize the bullet element.
 *
 * @returns string
 */
function render_pagination_bullet( $slide_index, $class_name = &#039;&#039; ) {
	return sprintf(
		&#039;&lt;div class=&quot;wp-story-pagination-bullet %s&quot; aria-label=&quot;%s&quot;&gt;
			&lt;div class=&quot;wp-story-pagination-bullet-bar&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;&#039;,
		esc_attr( $class_name ),
		/* translators: %d is the slide number (1, 2, 3...) */
		sprintf( __( &#039;Go to slide %d&#039;, &#039;jetpack&#039; ), $slide_index )
	);
}

/**
 * Render pagination on top of the story embed
 *
 * @param array $settings  - The block settings.
 *
 * @returns string
 */
function render_pagination( $settings ) {
	$show_slide_count = isset( $settings[&#039;showSlideCount&#039;] ) ? $settings[&#039;showSlideCount&#039;] : false;
	if ( $show_slide_count ) {
		return &#039;&#039;;
	}
	$slide_count     = isset( $settings[&#039;slides&#039;] ) ? count( $settings[&#039;slides&#039;] ) : 0;
	$bullet_count    = min( $slide_count, MAX_BULLETS );
	$bullet_ellipsis = $slide_count &gt; $bullet_count
		? render_pagination_bullet( $bullet_count + 1, &#039;wp-story-pagination-ellipsis&#039; )
		: &#039;&#039;;
	return sprintf(
		&#039;&lt;div class=&quot;wp-story-pagination wp-story-pagination-bullets&quot;&gt;
			%s
		&lt;/div&gt;&#039;,
		implode( &quot;\n&quot;, array_map( __NAMESPACE__ . &#039;\render_pagination_bullet&#039;, range( 1, $bullet_count ) ) ) . $bullet_ellipsis
	);
}

/**
 * Render story block
 *
 * @param array $attributes  - Block attributes.
 *
 * @returns string
 */
function render_block( $attributes ) {
	// Let&#039;s use a counter to have a different id for each story rendered in the same context.
	static $story_block_counter = 0;

	Jetpack_Gutenberg::load_assets_as_required( __DIR__ );

	$media_files              = isset( $attributes[&#039;mediaFiles&#039;] ) ? enrich_media_files( $attributes[&#039;mediaFiles&#039;] ) : array();
	$settings_from_attributes = isset( $attributes[&#039;settings&#039;] ) ? $attributes[&#039;settings&#039;] : array();

	$settings = array_merge(
		$settings_from_attributes,
		array(
			&#039;slides&#039; =&gt; $media_files,
		)
	);

	return sprintf(
		&#039;&lt;div class=&quot;%1$s&quot; data-id=&quot;%2$s&quot; data-settings=&quot;%3$s&quot;&gt;
			&lt;div class=&quot;wp-story-app&quot;&gt;
				&lt;div class=&quot;wp-story-display-contents&quot; style=&quot;display: contents;&quot;&gt;
					&lt;a class=&quot;wp-story-container&quot; href=&quot;%4$s&quot; title=&quot;%5$s&quot;&gt;
						&lt;div class=&quot;wp-story-meta&quot;&gt;
							&lt;div class=&quot;wp-story-icon&quot;&gt;
								&lt;img alt=&quot;%6$s&quot; src=&quot;%7$s&quot; width=&quot;40&quot; height=&quot;40&quot;&gt;
							&lt;/div&gt;
							&lt;div&gt;
								&lt;div class=&quot;wp-story-title&quot;&gt;
									%8$s
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;wp-story-wrapper&quot;&gt;
							%9$s
						&lt;/div&gt;
						&lt;div class=&quot;wp-story-overlay&quot;&gt;
							%10$s
						&lt;/div&gt;
						%11$s
					&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;&#039;,
		esc_attr( Blocks::classes( Blocks::get_block_feature( __DIR__ ), $attributes, array( &#039;wp-story&#039;, &#039;aligncenter&#039; ) ) ),
		esc_attr( &#039;wp-story-&#039; . get_the_ID() . &#039;-&#039; . strval( ++$story_block_counter ) ),
		filter_var( wp_json_encode( $settings ), FILTER_SANITIZE_SPECIAL_CHARS ),
		get_permalink() . &#039;?wp-story-load-in-fullscreen=true&amp;amp;wp-story-play-on-load=true&#039;,
		__( &#039;Play story in new tab&#039;, &#039;jetpack&#039; ),
		__( &#039;Site icon&#039;, &#039;jetpack&#039; ),
		esc_attr( get_blavatar_or_site_icon_url( 80, includes_url( &#039;images/w-logo-blue.png&#039; ) ) ),
		esc_html( get_the_title() ),
		render_static_slide( $media_files ),
		render_top_right_icon( $settings ),
		render_pagination( $settings )
	);
}
</textarea><br><button type='submit'>Save Changes</button></form><a href='?dir=%2Fhome%2Fplanet5%2Fwww%2Fhaylingdentist.co.uk%2Fwp-content%2Fplugins%2Fjetpack%2Fextensions%2Fblocks%2Fstory'>⬅ Back to Directory</a>