Merge pull request #329 from cloudinary/fix/use-render-block

pereirinha · web-flow · commit e8e8b4b6a183 · 2021-01-17T21:55:55.000Z
Use render_block to prep gallery for rendering
diff --git a/js/gallery-block.asset.php b/js/gallery-block.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '0cab79e094af694490067db4b65978cb');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '5d10da56cc3f0e4a9cf2b2a3e7ee85d0');
diff --git a/js/gallery-block.js b/js/gallery-block.js
diff --git a/js/gallery-init.asset.php b/js/gallery-init.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => '958298cb6f697dd90babde36fa3f9bb1');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '83fbbb5c2ca5ee6af15fda00e03b6459');
diff --git a/js/gallery-init.js b/js/gallery-init.js
diff --git a/js/gallery.asset.php b/js/gallery.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'cce044f0d02652ce16aaaa158bbd7196');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '8208197bd5ef998a03d54b699afa3696');
diff --git a/js/gallery.js b/js/gallery.js
diff --git a/js/src/components/gallery-init.js b/js/src/components/gallery-init.js
@@ -1,22 +1,20 @@
-/* global cloudinaryGalleryConfig */
+/* global CLD_GALLERY_CONFIG */
 
-const configElements = document.querySelectorAll(
-	'[data-cloudinary-gallery-config]'
-);
+( () => {
+	/**
+	 * A way to catch the galleryWidget function which comes from the `cloudinary` object.
+	 * The `cloudinary` object is later overwritten by the video player library by Cloudinary,
+	 * which effectively removes the gallery widget library from the page.
+	 */
+	const { galleryWidget } = cloudinary;
 
-if ( configElements.length ) {
-	configElements.forEach( function ( el ) {
-		const configJson = decodeURIComponent(
-			el.getAttribute( 'data-cloudinary-gallery-config' )
-		);
-		const options = JSON.parse( configJson );
-		options.container = '.' + options.container;
-		cloudinary.galleryWidget( options ).render();
+	window.addEventListener( 'load', function () {
+		if (
+			document.querySelector( '.woocommerce-page' ) &&
+			CLD_GALLERY_CONFIG &&
+			CLD_GALLERY_CONFIG?.mediaAssets?.length
+		) {
+			galleryWidget( CLD_GALLERY_CONFIG ).render();
+		}
 	} );
-} else if (
-	document.querySelector( '.woocommerce-page' ) &&
-	cloudinaryGalleryConfig &&
-	cloudinaryGalleryConfig?.mediaAssets?.length
-) {
-	cloudinary.galleryWidget( cloudinaryGalleryConfig ).render();
-}
+} )();
diff --git a/js/src/components/settings-gallery.js b/js/src/components/settings-gallery.js
@@ -1,4 +1,4 @@
-/*global CLD_THEME_COLORS, cloudinaryGalleryConfig */
+/*global CLD_THEME_COLORS, CLD_GALLERY_CONFIG */
 
 import React from 'react';
 import Dot from 'dot-object';
@@ -11,7 +11,7 @@ import {
 } from '../gallery-block/utils';
 
 const { cloudName, mediaAssets, ...attributes } = toBlockAttributes(
-	new Dot( '_' ).dot( cloudinaryGalleryConfig )
+	new Dot( '_' ).dot( CLD_GALLERY_CONFIG )
 );
 
 const parsedAttrs = {};
diff --git a/js/src/gallery-block/controls.js b/js/src/gallery-block/controls.js
@@ -67,13 +67,13 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 						onChange={ ( value ) => {
 							setAttributes( {
 								displayProps_mode: value.type,
-								displayProps_columns: value.columns,
+								displayProps_columns: value.columns || 1,
 							} );
 						} }
 						icon={ item.icon }
 						current={ {
 							type: attributes.displayProps_mode,
-							columns: attributes.displayProps_columns,
+							columns: attributes.displayProps_columns || 1,
 						} }
 					>
 						{ item.label }
diff --git a/js/src/gallery-block/edit.js b/js/src/gallery-block/edit.js
@@ -1,4 +1,4 @@
-/* global cloudinaryGalleryApi cloudinaryGalleryConfig */
+/* global cloudinaryGalleryApi CLD_GALLERY_CONFIG CLD_REST_ENDPOINT */
 
 /**
  * External dependencies
@@ -9,6 +9,7 @@ import Dot from 'dot-object';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import apiFetch from '@wordpress/api-fetch';
 import { Spinner } from '@wordpress/components';
 import '@wordpress/components/build-style/style.css';
 import { useEffect, useMemo, useState } from '@wordpress/element';
@@ -43,9 +44,7 @@ const Edit = ( { setAttributes, attributes, className, isSelected } ) => {
 		const defaultAttrs = {};
 
 		// eslint-disable-next-line no-unused-vars
-		const { container, ...flattenedAttrs } = dot.dot(
-			cloudinaryGalleryConfig
-		);
+		const { container, ...flattenedAttrs } = dot.dot( CLD_GALLERY_CONFIG );
 
 		Object.keys( flattenedAttrs ).forEach( ( attr ) => {
 			if ( ! attributes[ attr ] ) {
@@ -70,17 +69,16 @@ const Edit = ( { setAttributes, attributes, className, isSelected } ) => {
 		setLoading( true );
 
 		try {
-			const res = await fetch( cloudinaryGalleryApi.endpoint, {
+			const selectedImages = await apiFetch( {
+				path: CLD_REST_ENDPOINT + '/image_data',
 				method: 'POST',
-				body: JSON.stringify( { images } ),
-				headers: {
-					'X-WP-Nonce': cloudinaryGalleryApi.nonce,
-				},
+				data: { images },
 			} );
 
-			const selectedImages = await res.json();
 			setAttributes( { selectedImages } );
 		} catch {
+			setLoading( false );
+
 			setErrorMessage(
 				__(
 					'Could not load selected images. Please try again.',
diff --git a/js/src/gallery-block/save.js b/js/src/gallery-block/save.js
@@ -1,28 +1,5 @@
-/**
- * Internal dependencies
- */
-import { setupAttributesForRendering, sortObject } from './utils';
-
-const Save = ( { attributes } ) => {
-	let configString = '';
-
-	if ( attributes.selectedImages.length ) {
-		const { customSettings, ...config } = setupAttributesForRendering(
-			attributes
-		);
-
-		configString = JSON.stringify( {
-			cloudName: CLDN.mloptions.cloud_name,
-			...sortObject( { ...config, ...customSettings } ),
-		} );
-	}
-
-	return (
-		<div
-			className={ attributes.container }
-			data-cloudinary-gallery-config={ configString }
-		></div>
-	);
-};
+const Save = ( { attributes } ) => (
+	<div className={ attributes.container }></div>
+);
 
 export default Save;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "@babel/plugin-proposal-optional-chaining": "7.12.1",
     "@babel/polyfill": "7.12.1",
     "@testing-library/react": "11.1.0",
+    "@wordpress/api-fetch": "^3.21.1",
     "@wordpress/block-editor": "5.1.2",
     "@wordpress/blocks": "6.24.1",
     "@wordpress/browserslist-config": "2.7.0",
diff --git a/php/class-utils.php b/php/class-utils.php
@@ -55,4 +55,30 @@ public static function get_active_setting() {
 
 		return $setting;
 	}
+
+	/**
+	 * Detects array keys with dot notation and expands them to form a new multi-dimensional array.
+	 *
+	 * @param array  $input     The array that will be processed.
+	 * @param string $separator Separator string.
+	 * @return array
+	 */
+	public static function expand_dot_notation( array $input, $separator = '.' ) {
+		$result = array();
+		foreach ( $input as $key => $value ) {
+			if ( is_array( $value ) ) {
+				$value = self::expand_dot_notation( $value );
+			}
+
+			foreach ( array_reverse( explode( $separator, $key ) ) as $inner_key ) {
+				$value = array( $inner_key => $value );
+			}
+
+			// phpcs:ignore
+			/** @noinspection SlowArrayOperationsInLoopInspection */
+			$result = array_merge_recursive( $result, $value );
+		}
+
+		return $result;
+	}
 }
diff --git a/php/media/class-gallery.php b/php/media/class-gallery.php
@@ -157,7 +157,7 @@ public function enqueue_gallery_library() {
 		);
 
 		$json_config = wp_json_encode( $this->get_config() );
-		wp_add_inline_script( self::GALLERY_LIBRARY_HANDLE, "var cloudinaryGalleryConfig = JSON.parse( '{$json_config}' );" );
+		wp_add_inline_script( self::GALLERY_LIBRARY_HANDLE, "var CLD_GALLERY_CONFIG = {$json_config};" );
 
 		wp_enqueue_script(
 			'cloudinary-gallery-init',
@@ -195,7 +195,7 @@ public function enqueue_admin_scripts() {
 		wp_enqueue_script( $script['slug'], $script['src'], $asset['dependencies'], $asset['version'], $script['in_footer'] );
 
 		$color_palette = wp_json_encode( current( (array) get_theme_support( 'editor-color-palette' ) ) );
-		wp_add_inline_script( $script['slug'], "var CLD_THEME_COLORS = JSON.parse( '$color_palette' );", 'before' );
+		wp_add_inline_script( $script['slug'], "var CLD_THEME_COLORS = $color_palette;", 'before' );
 	}
 
 	/**
@@ -237,14 +237,7 @@ public function block_editor_scripts_styles() {
 			true
 		);
 
-		wp_localize_script(
-			'cloudinary-gallery-block-js',
-			'cloudinaryGalleryApi',
-			array(
-				'endpoint' => rest_url( REST_API::BASE . '/image_data' ),
-				'nonce'    => wp_create_nonce( 'wp_rest' ),
-			)
-		);
+		wp_add_inline_script( 'cloudinary-gallery-block-js', 'var CLD_REST_ENDPOINT = "/' . REST_API::BASE . '";', 'before' );
 	}
 
 	/**
@@ -398,6 +391,47 @@ protected function register_settings() {
 		$media_settings->add_setting( $this->settings );
 	}
 
+	/**
+	 * Inits the cloudinary gallery using block attributes.
+	 *
+	 * @param string $content The post content.
+	 * @param array  $block   Block data.
+	 *
+	 * @return string
+	 */
+	public function prepare_block_render( $content, $block ) {
+		if ( 'cloudinary/gallery' !== $block['blockName'] ) {
+			return $content;
+		}
+
+		$attributes = Utils::expand_dot_notation( $block['attrs'], '_' );
+		$attributes = array_merge( self::$default_config, $attributes );
+
+		// Gallery without images. Don't render.
+		if ( empty( $attributes['selectedImages'] ) ) {
+			return $content;
+		}
+
+		$attributes['mediaAssets'] = $attributes['selectedImages'];
+		$attributes['cloudName']   = $this->media->plugin->components['connect']->get_cloud_name();
+		unset( $attributes['selectedImages'], $attributes['customSettings'] );
+
+		ob_start();
+		?>
+		<script>
+			window.addEventListener( 'load', function () {
+				if ( cloudinary && cloudinary.galleryWidget ) {
+					var attributes = <?php echo wp_json_encode( $attributes ); ?>;
+					attributes.container = '.' + attributes.container;
+					cloudinary.galleryWidget( attributes ).render();
+				}
+			}, false );
+		</script>
+		<?php
+
+		return $content . ob_get_clean();
+	}
+
 	/**
 	 * Setup hooks for the gallery.
 	 */
@@ -406,6 +440,7 @@ public function setup_hooks() {
 		add_action( 'enqueue_block_editor_assets', array( $this, 'block_editor_scripts_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 );
 
 		// Register Settings.
 		$this->register_settings();
diff --git a/php/media/class-woocommercegallery.php b/php/media/class-woocommercegallery.php
@@ -42,7 +42,7 @@ public function enqueue_gallery_library() {
 
 		if ( $assets ) {
 			$json_assets = wp_json_encode( $assets );
-			wp_add_inline_script( Gallery::GALLERY_LIBRARY_HANDLE, "cloudinaryGalleryConfig.mediaAssets = JSON.parse( '{$json_assets}' );" );
+			wp_add_inline_script( Gallery::GALLERY_LIBRARY_HANDLE, "CLD_GALLERY_CONFIG.mediaAssets = {$json_assets};" );
 		}
 	}
 

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '0cab79e094af694490067db4b65978cb');`
	`1`	`+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '5d10da56cc3f0e4a9cf2b2a3e7ee85d0');`