Add height & fullPage control attributes

WordPress · Apr 24, 2024 · 7ac744d · 7ac744d
1 parent e0fc621
commit 7ac744d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/mu-plugins/blocks/screenshot-preview-block/README.md b/mu-plugins/blocks/screenshot-preview-block/README.md
@@ -28,8 +28,10 @@ echo do_blocks( '<!-- wp:wporg/screenshot-preview {"src":"https://wordpress.org/
 
 | Name          | Type    | Description                                | Default |
 |---------------|---------|--------------------------------------------|---------|
-| alt           | string  | Alt text for image.                        | ""      |
-| href          | string  | Destination for link wrapper, if provided. | ""      |
-| src           | string  | Source (website) to capture for display    | ""      |
-| width         | integer | Image width                                | 800     |
-| viewportWidth | integer | Viewport width                             | 1200    |
+| alt            | string  | Alt text for image.                         | ""      |
+| fullPage       | boolean | If true, image only captures page content, up to viewportHeight. If false, image is fixed height (viewportHeight), with whitespace surrounding. | "" |
+| href           | string  | Destination for link wrapper, if provided.  | ""      |
+| src            | string  | Source (website) to capture for display     | ""      |
+| viewportHeight | integer | Viewport height (or max-height if fullPage) | 0       |
+| viewportWidth  | integer | Viewport width                              | 1200    |
+| width          | integer | Image width                                 | 800     |
diff --git a/mu-plugins/blocks/screenshot-preview-block/render.php b/mu-plugins/blocks/screenshot-preview-block/render.php
@@ -10,21 +10,31 @@
 
 $alt_text = $attributes['alt'] ?? '';
 $has_link = isset( $attributes['href'] ) && $attributes['href'];
-$width = isset( $attributes['width'] ) ? $attributes['width'] * 2 : 800;
+
+// Set up the viewport sizes.
 $viewport_width = $attributes['viewportWidth'] ?? 1200;
+$viewport_height = $attributes['viewportHeight'] ?? 0;
+$fullpage = isset( $attributes['fullPage'] ) && $attributes['fullPage'];
 
-$cache_key = '20240423'; // To break out of cached image.
+// Multiply by 2 for hiDPI-ready sizes.
+$width = isset( $attributes['width'] ) ? $attributes['width'] * 2 : 800;
 
-$view_url = add_query_arg( 'v', $cache_key, $view_url );
-$url = add_query_arg(
-	array(
-		'w' => $width,
-		'vpw' => $viewport_width,
-		'vph' => 300, // Smaller than the vast majority of patterns to avoid whitespace.
-		'screen_height' => 3600, // Max height of a screenshot.
-	),
-	'https://s0.wp.com/mshots/v1/' . urlencode( $view_url ),
+$mshots_args = array(
+	'w' => $width,
+	'vpw' => $viewport_width,
 );
+if ( $fullpage ) {
+	// `screen_height` is the max height of a screenshot, image can be smaller.
+	$mshots_args['screen_height'] = $viewport_height ? $viewport_height : 3600;
+	$mshots_args['vph'] = 300; // Smaller than the vast majority of patterns to avoid whitespace.
+} else {
+	// `vph` is the fixed height of the screenshot (image size will be scaled by w/vpw).
+	$mshots_args['vph'] = $viewport_height ? $viewport_height : 900;
+}
+
+$cache_key = '20240423'; // To break out of cached image.
+$view_url = add_query_arg( 'v', $cache_key, $view_url );
+$url = add_query_arg( $mshots_args, 'https://s0.wp.com/mshots/v1/' . urlencode( $view_url ) );
 
 // Initial state to pass to Interactivity API.
 $init_state = [

diff --git a/mu-plugins/blocks/screenshot-preview-block/src/block.json b/mu-plugins/blocks/screenshot-preview-block/src/block.json
@@ -12,6 +12,10 @@
 			"type": "string",
 			"default": ""
 		},
+		"fullPage": {
+			"type": "boolean",
+			"default": true
+		},
 		"href": {
 			"type": "string",
 			"default": ""
@@ -20,13 +24,17 @@
 			"type": "string",
 			"default": ""
 		},
-		"width": {
+		"viewportHeight": {
 			"type": "integer",
-			"default": 800
+			"default": 0
 		},
 		"viewportWidth": {
 			"type": "integer",
 			"default": 1200
+		},
+		"width": {
+			"type": "integer",
+			"default": 800
 		}
 	},
 	"supports": {