Merge pull request #328 from cloudinary/fix/parser-for-block

Fix gallery block inconsistencies & Refactor

Author: pereirinha

.eslintrc.json

@@ -16,6 +16,7 @@
   "rules": {
     "no-alert": "off",
     "no-console": "off",
+    "no-unused-vars": "off",
     "no-nested-ternary": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "react-hooks/rules-of-hooks": "error",

css/gallery-block-rtl.css

@@ -25,6 +25,18 @@
 	}
 }
 
+.loading-spinner-container {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255,255,255,0.8);
+	top: 0;
+	left: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
 /* stylelint-disable selector-class-pattern */
 .components-placeholder__fieldset {
 	justify-content: start;

css/gallery-block.css

@@ -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' => '9810fbbcfcc1692159bd922028b216cf');
+<?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');

css/src/gallery.scss

@@ -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' => '016b1065367c780bb1710e094ffcb228');
+<?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');

js/gallery-block.asset.php

@@ -1,32 +1,35 @@
-/*global CLD_THEME_COLORS */
+/*global CLD_THEME_COLORS, cloudinaryGalleryConfig */
 
 import React from 'react';
+import Dot from 'dot-object';
 import { render, useEffect, useState } from '@wordpress/element';
-import attributes from '../gallery-block/attributes';
 import GalleryControls from '../gallery-block/controls';
-import { setupAttributesForRendering } from '../gallery-block/utils';
 
-delete attributes.cloudName;
-delete attributes.mediaAssets;
+import {
+	setupAttributesForRendering,
+	toBlockAttributes,
+} from '../gallery-block/utils';
+
+const { cloudName, mediaAssets, ...attributes } = toBlockAttributes(
+	new Dot( '_' ).dot( cloudinaryGalleryConfig )
+);
 
 const parsedAttrs = {};
 Object.keys( attributes ).forEach( ( attr ) => {
 	parsedAttrs[ attr ] = attributes[ attr ]?.default;
 } );
 
-function galleryWidgetConfig( config ) {
-	return {
-		cloudName: 'demo',
-		...config,
-		mediaAssets: [
-			{
-				tag: 'shoes_product_gallery_demo',
-				mediaType: 'image',
-			},
-		],
-		container: '.gallery-preview',
-	};
-}
+const galleryWidgetConfig = ( config ) => ( {
+	cloudName: 'demo',
+	...config,
+	mediaAssets: [
+		{
+			tag: 'shoes_product_gallery_demo',
+			mediaType: 'image',
+		},
+	],
+	container: '.gallery-preview',
+} );
 
 const StatefulGalleryControls = () => {
 	const [ statefulAttrs, setStatefulAttrs ] = useState( parsedAttrs );