Add it to the image block

This is still pretty basic, just to check that it works.

Co-authored-by: David Arenas <[email protected]>

packages/block-library/src/image/block.json

@@ -118,5 +118,6 @@
 		{ "name": "rounded", "label": "Rounded" }
 	],
 	"editorStyle": "wp-block-image-editor",
-	"style": "wp-block-image"
+	"style": "wp-block-image",
+	"viewScript": [ "file:./view.min.js" ]
 }

packages/block-library/src/image/index.php

@@ -15,7 +15,10 @@
  */
 function render_block_core_image( $attributes, $content ) {
 	$processor = new WP_HTML_Tag_Processor( $content );
+	$processor->next_tag( 'figure' );
+	$processor->set_attribute( 'data-wp-island', '' );
 	$processor->next_tag( 'img' );
+	$processor->set_attribute( 'data-wp-effect', 'effects.alert' );
 
 	if ( $processor->get_attribute( 'src' ) === null ) {
 		return '';
@@ -27,8 +30,10 @@ function render_block_core_image( $attributes, $content ) {
 		// which now wraps Image Blocks within innerBlocks.
 		// The data-id attribute is added in a core/gallery `render_block_data` hook.
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
-		$content = $processor->get_updated_html();
 	}
+
+	$content = $processor->get_updated_html();
+
 	return $content;
 }
 

packages/block-library/src/image/view.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../utils/interactivity/store';
+import init from '../utils/interactivity';
+
+store( {
+	effects: {
+		alert: () => {
+			// eslint-disable-next-line no-console
+			console.log( 'image hydrated!' );
+		},
+	},
+} );
+
+init();

packages/block-library/src/utils/interactivity/index.js

@@ -7,5 +7,11 @@ import { init } from './hydration';
 /**
  * Initialize the Interactivity API.
  */
-registerDirectives();
-init();
+export default () => {
+	window.addEventListener( 'DOMContentLoaded', () => {
+		registerDirectives();
+		init();
+		// eslint-disable-next-line no-console
+		console.log( 'hydrated!' );
+	} );
+};