From 036104d276f65a312c29fd80fec8d7c6c29a44f2 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Wed, 22 May 2024 11:06:17 -0400 Subject: [PATCH] Screenshot Preview block: Enable block to be "hidden" initially, prevent image fetch (#612) * Screenshot Preview block: Enable block to be "hidden" initially, prevent image fetch * Update documentation --- .../blocks/screenshot-preview-block/README.md | 33 ++++++++++++++----- .../screenshot-preview-block/render.php | 6 +++- .../screenshot-preview-block/src/block.json | 6 +++- .../screenshot-preview-block/src/style.scss | 4 +++ .../screenshot-preview-block/src/view.js | 12 +++++-- 5 files changed, 48 insertions(+), 13 deletions(-) diff --git a/mu-plugins/blocks/screenshot-preview-block/README.md b/mu-plugins/blocks/screenshot-preview-block/README.md index a39bbed8..bed8f4d0 100644 --- 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( '' ); ``` +## 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 index e2991a2e..ba4c90f6 100644 --- 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 @@ $classname ) ); // phpcs:ignore ?> data-wp-interactive="wporg/screenshot-preview" data-wp-context="" - 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" > diff --git a/mu-plugins/blocks/screenshot-preview-block/src/block.json b/mu-plugins/blocks/screenshot-preview-block/src/block.json index caf428df..53afb5c2 100644 --- 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" -} \ No newline at end of file +} diff --git a/mu-plugins/blocks/screenshot-preview-block/src/style.scss b/mu-plugins/blocks/screenshot-preview-block/src/style.scss index cd3a0573..61442d0f 100644 --- 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 index 63e388be..da43ca81 100644 --- 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.