Screenshot Preview block: Enable block to be "hidden" initially, prev…

…ent image fetch (#612) * Screenshot Preview block: Enable block to be "hidden" initially, prevent image fetch * Update documentation
WordPress · May 22, 2024 · 036104d · 036104d
1 parent c299529
commit 036104d
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 13 deletions.
diff --git a/mu-plugins/blocks/screenshot-preview-block/README.md b/mu-plugins/blocks/screenshot-preview-block/README.md
@@ -24,14 +24,29 @@ The same as above, but instead of adding the block to `block-templates/*.html` f
 echo do_blocks( '<!-- wp:wporg/screenshot-preview {"src":"https://wordpress.org/"} /-->' );
 ```
 
+## Showing/hiding an image
+
+If you pass through `"isHidden":true` as a block attribute, this will trigger a CSS class to hide the block, and prevent any network requests loading the image. To show the image, currently this requires manually dispatching a custom event.
+
+For example, in another block on a button click event, the `wporg-show` event can be triggered. This will call `actions.makeVisible` within the correct element context, flipping off the `isHidden` value. The context update then triggers the `watch` action, which fetches the image if it's not already loaded.
+
+```js
+// container is a wrapper around multiple screenshot preview blocks.
+container.querySelectorAll( '.wp-block-wporg-screenshot-preview' ).forEach( ( element ) => {
+    const event = new Event( 'wporg-show' );
+    element.dispatchEvent( event );
+} );
+```
+
 ## Attributes
 
-| Name          | Type    | Description                                | Default |
-|---------------|---------|--------------------------------------------|---------|
-| 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     |
+| Name           | Type    | Description                                | Default |
+|----------------|---------|--------------------------------------------|---------|
+| 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. | true |
+| href           | string  | Destination for link wrapper, if provided.  | ""     |
+| isHidden       | boolean | If true, hide the block with CSS, prevent network requests. | false |
+| 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,6 +10,7 @@
 
 $alt_text = $attributes['alt'] ?? '';
 $has_link = isset( $attributes['href'] ) && $attributes['href'];
+$is_hidden = (bool) $attributes['isHidden'];
 
 // Set up the viewport sizes.
 $viewport_width = $attributes['viewportWidth'] ?? 1200;
@@ -44,6 +45,7 @@
 	'attempts' => 0,
 	'shouldRetry' => true,
 	'hasError' => false,
+	'isHidden' => $is_hidden,
 ];
 $encoded_state = wp_json_encode( $init_state );
 
@@ -57,9 +59,11 @@
 	<?php echo get_block_wrapper_attributes( array( 'class' => $classname ) ); // phpcs:ignore ?>
 	data-wp-interactive="wporg/screenshot-preview"
 	data-wp-context="<?php echo esc_attr( $encoded_state ); ?>"
-	data-wp-init="callbacks.init"
+	data-wp-watch="callbacks.init"
 	data-wp-class--has-loaded="state.hasLoaded"
 	data-wp-class--has-error="state.hasError"
+	data-wp-class--is-hidden="context.isHidden"
+	data-wp-on--wporg-show="actions.makeVisible"
 	tabIndex="-1"
 >
 	<?php if ( $has_link ) : ?>

diff --git a/mu-plugins/blocks/screenshot-preview-block/src/block.json b/mu-plugins/blocks/screenshot-preview-block/src/block.json
@@ -20,6 +20,10 @@
 			"type": "string",
 			"default": ""
 		},
+		"isHidden": {
+			"type": "boolean",
+			"default": false
+		},
 		"src": {
 			"type": "string",
 			"default": ""
@@ -63,4 +67,4 @@
 	"viewScriptModule": "file:./view.js",
 	"style": "file:./style-index.css",
 	"render": "file:../render.php"
-}
+}
diff --git a/mu-plugins/blocks/screenshot-preview-block/src/style.scss b/mu-plugins/blocks/screenshot-preview-block/src/style.scss
@@ -22,6 +22,10 @@
 		box-shadow: none;
 	}
 
+	&:where(.is-hidden) {
+		display: none;
+	}
+
 	.wporg-screenshot-preview__container {
 		aspect-ratio: 4 / 3;
 		display: flex;

diff --git a/mu-plugins/blocks/screenshot-preview-block/src/view.js b/mu-plugins/blocks/screenshot-preview-block/src/view.js
@@ -44,6 +44,11 @@ const { actions, state } = store( 'wporg/screenshot-preview', {
 			context.base64Image = value;
 		},
 
+		makeVisible() {
+			const context = getContext();
+			context.isHidden = false;
+		},
+
 		*fetchImage( fullUrl ) {
 			try {
 				const context = getContext();
@@ -72,9 +77,12 @@ const { actions, state } = store( 'wporg/screenshot-preview', {
 	},
 
 	callbacks: {
-		// Run on init, starts the image fetch process.
+		// Run on any changes, trigger the image fetch process.
 		*init() {
-			const { src } = getContext();
+			const { isHidden, src } = getContext();
+			if ( isHidden ) {
+				return;
+			}
 
 			if ( ! state.base64Image ) {
 				// Initial fetch.