Merge pull request #1222 from cloudinary/fix/wp-7-1-compatibility

Ensure compatibility with WordPress 7.1

Author: gabrielcld2

js/block-editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-api-fetch', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '558667256f0d3fc475cd');
+<?php return array('dependencies' => array('wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '58afb0a9ee7fa6faecd7');

js/block-editor.js

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'b1a6274664dedd209b5d');
+<?php return array('dependencies' => array('wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'c2bfb5ad5742b3b9b98f');

js/gallery-block.asset.php

@@ -79,6 +79,7 @@
     "@wordpress/element": "^6.34.0",
     "@wordpress/env": "^10.12.0",
     "@wordpress/eslint-plugin": "^25.7.0",
+    "@wordpress/hooks": "^4.52.0",
     "@wordpress/i18n": "^6.7.0",
     "@wordpress/scripts": "^33.0.0",
     "copy-webpack-plugin": "^14.0.0",

js/gallery-block.js

@@ -240,10 +240,12 @@ public function enqueue_admin_scripts() {
 	/**
 	 * Retrieve asset dependencies.
 	 *
+	 * @param string $script The script slug to get the generated asset file for.
+	 *
 	 * @return array
 	 */
-	private function get_asset() {
-		$asset = require $this->plugin->dir_path . 'js/gallery.asset.php'; // phpcs:ignore WordPressVIPMinimum.Files.IncludingFile.UsingVariable
+	private function get_asset( $script = 'gallery' ) {
+		$asset = require $this->plugin->dir_path . 'js/' . $script . '.asset.php'; // phpcs:ignore WordPressVIPMinimum.Files.IncludingFile.UsingVariable
 
 		$asset['dependencies'] = array_filter(
 			$asset['dependencies'],
@@ -261,24 +263,40 @@ static function ( $dependency ) {
 	public function block_editor_scripts_styles() {
 		$this->enqueue_gallery_library();
 
-		wp_enqueue_style(
-			'cloudinary-gallery-block-css',
-			$this->plugin->dir_url . 'css/gallery-block.css',
-			array(),
-			$this->plugin->version
-		);
+		$asset = $this->get_asset( 'gallery-block' );
 
 		wp_enqueue_script(
 			'cloudinary-gallery-block-js',
 			$this->plugin->dir_url . 'js/gallery-block.js',
-			array( 'wp-blocks', 'wp-editor', 'wp-element', self::GALLERY_LIBRARY_HANDLE ),
-			$this->plugin->version,
+			array_merge( $asset['dependencies'], array( self::GALLERY_LIBRARY_HANDLE ) ),
+			$asset['version'],
 			true
 		);
 
 		wp_add_inline_script( 'cloudinary-gallery-block-js', 'var CLD_REST_ENDPOINT = "/' . REST_API::BASE . '";', 'before' );
 	}
 
+	/**
+	 * Enqueue the gallery block editor styles.
+	 *
+	 * Registered on `enqueue_block_assets` so the styles are injected into the
+	 * iframed block editor correctly. As of WordPress 7.1 the post editor is
+	 * always iframed, and styles added via `enqueue_block_editor_assets` are
+	 * flagged as being added to the iframe incorrectly.
+	 */
+	public function block_editor_styles() {
+		if ( ! is_admin() ) {
+			return;
+		}
+
+		wp_enqueue_style(
+			'cloudinary-gallery-block-css',
+			$this->plugin->dir_url . 'css/gallery-block.css',
+			array(),
+			$this->plugin->version
+		);
+	}
+
 	/**
 	 * Fetches image public id and transformations.
 	 *
@@ -410,13 +428,13 @@ public function register_settings( $pages ) {
 			);
 		}
 
+		// The `js/gallery.js` app script is enqueued in `enqueue_admin_scripts()`
+		// with its generated asset dependencies. Adding a `script` here would
+		// enqueue the same file under a second handle, executing the bundle twice
+		// and calling `createRoot()` twice on the same container.
 		$panel[] = array(
-			'type'   => 'react',
-			'slug'   => 'gallery_config',
-			'script' => array(
-				'slug' => 'gallery-widget',
-				'src'  => $this->plugin->dir_url . 'js/gallery.js',
-			),
+			'type' => 'react',
+			'slug' => 'gallery_config',
 		);
 
 		$panel[] = array(
@@ -688,6 +706,7 @@ public function inject_glb_metadata( $metadata, $attachment_id ) {
 	public function setup_hooks() {
 		add_filter( 'cloudinary_api_rest_endpoints', array( $this, 'rest_endpoints' ) );
 		add_action( 'enqueue_block_editor_assets', array( $this, 'block_editor_scripts_styles' ) );
+		add_action( 'enqueue_block_assets', array( $this, 'block_editor_styles' ) );
 		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_gallery_library' ) );
 		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) );
 		add_filter( 'render_block', array( $this, 'prepare_block_render' ), 10, 2 );

package-lock.json

@@ -153,7 +153,15 @@ public function filter_video_shortcode( $html, $attr ) {
 	 * Enqueue BLock Assets
 	 */
 	public function enqueue_block_assets() {
-		wp_enqueue_script( 'cloudinary-block', $this->media->plugin->dir_url . 'js/block-editor.js', array(), $this->media->plugin->version, true );
+		$asset = require $this->media->plugin->dir_path . 'js/block-editor.asset.php'; // phpcs:ignore WordPressVIPMinimum.Files.IncludingFile.UsingVariable
+
+		wp_enqueue_script(
+			'cloudinary-block',
+			$this->media->plugin->dir_url . 'js/block-editor.js',
+			$asset['dependencies'],
+			$asset['version'],
+			true
+		);
 		wp_add_inline_script( 'cloudinary-block', 'var CLD_VIDEO_PLAYER = ' . wp_json_encode( $this->config ), 'before' );
 	}
 

package.json

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 import { ToggleControl } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
 
 // Set our component.
 let FeaturedTransformationsToggle = ( props ) => {
@@ -72,7 +73,7 @@ const Featured = {
 		// the media object, to determine if an asset has transformations.
 		// Also adds deeper support for other image types within Guttenberg.
 		// @todo: find other locations (i.e Video poster).
-		wp.hooks.addFilter(
+		addFilter(
 			'editor.MediaUpload',
 			'cloudinary/filter-featured-image',
 			cldFilterFeatured

php/media/class-gallery.php

@@ -2,7 +2,10 @@
 
 import { __ } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { PanelBody, ToggleControl } from '@wordpress/components';
+import { addFilter } from '@wordpress/hooks';
+import { InspectorControls } from '@wordpress/block-editor';
 
 const Video = {
 	_init() {
@@ -11,7 +14,7 @@ const Video = {
 		}
 
 		// Gutenberg Video Settings
-		wp.hooks.addFilter(
+		addFilter(
 			'blocks.registerBlockType',
 			'Cloudinary/Media/Video',
 			function ( settings, name ) {
@@ -57,7 +60,7 @@ const cldAddToggle = function ( settings, name ) {
 	return settings;
 };
 
-wp.hooks.addFilter(
+addFilter(
 	'blocks.registerBlockType',
 	'cloudinary/addAttributes',
 	cldAddToggle
@@ -87,11 +90,16 @@ const TransformationsToggle = ( props ) => {
 
 let ImageInspectorControls = ( props ) => {
 	const { setAttributes, media } = props;
-	const { InspectorControls } = wp.editor;
 
-	if ( media && media.transformations ) {
-		setAttributes( { transformations: true } );
-	}
+	// Flag the block as having transformations after render. Calling
+	// setAttributes during render triggers a React "Cannot update a component
+	// while rendering a different component" warning under React 19
+	// (WordPress 7.1).
+	useEffect( () => {
+		if ( media && media.transformations ) {
+			setAttributes( { transformations: true } );
+		}
+	}, [ media, setAttributes ] );
 
 	return (
 		<InspectorControls>
@@ -124,7 +132,7 @@ const cldFilterBlocksEdit = ( BlockEdit ) => {
 	};
 };
 
-wp.hooks.addFilter(
+addFilter(
 	'editor.BlockEdit',
 	'cloudinary/filterEdit',
 	cldFilterBlocksEdit,