Update documentation

WordPress · May 21, 2024 · d70a48d · d70a48d
1 parent ef8f134
commit d70a48d
Showing 1 changed file with 24 additions and 9 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    |