Ensure compatibility with WP 5.6

Author: gabriel-detassigny

readme.txt

@@ -1,7 +1,7 @@
 === Cloudinary - Deliver Images and Videos at Scale ===
 Contributors: Cloudinary, XWP, Automattic
 Tags: image-optimizer, core-web-vitals, video, resize, performance
-Requires at least: 6.3
+Requires at least: 5.6
 Tested up to: 7.0
 Requires PHP: 7.4
 Stable tag: STABLETAG

src/js/components/settings-gallery.js

@@ -8,7 +8,7 @@ import Dot from 'dot-object';
 /**
  * WordPress dependencies
  */
-import { createRoot, useEffect, useState } from '@wordpress/element';
+import { createRoot, render, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -127,7 +127,9 @@ const StatefulGalleryControls = () => {
 	);
 };
 
-const root = createRoot(
-	document.getElementById( 'app_gallery_gallery_config' )
-);
-root.render( <StatefulGalleryControls /> );
+const container = document.getElementById( 'app_gallery_gallery_config' );
+if ( createRoot ) {
+	createRoot( container ).render( <StatefulGalleryControls /> );
+} else {
+	render( <StatefulGalleryControls />, container );
+}

src/js/gallery-block/controls.js

@@ -214,6 +214,7 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 							<Button
 								key={ type.value + '-look-and-feel' }
 								variant="secondary"
+								isSecondary
 								isPressed={
 									type.value ===
 									attributes.transformation_crop
@@ -251,6 +252,7 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 							<Button
 								key={ navType.value + '-navigation' }
 								variant="secondary"
+								isSecondary
 								isPressed={
 									navType.value === attributes.navigation
 								}
@@ -283,6 +285,7 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 										<Button
 											key={ item.value + '-zoom-type' }
 											variant="secondary"
+											isSecondary
 											isPressed={
 												item.value ===
 												attributes.zoomProps_type
@@ -331,6 +334,7 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 														'-zoom-trigger'
 													}
 													variant="secondary"
+													isSecondary
 													isPressed={
 														item.value ===
 														attributes.zoomProps_trigger
@@ -364,6 +368,7 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 							<Button
 								key={ item.value + '-carousel-location' }
 								variant="secondary"
+								isSecondary
 								isPressed={
 									item.value === attributes.carouselLocation
 								}
@@ -396,6 +401,7 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 							<Button
 								key={ item.value + '-carousel-style' }
 								variant="secondary"
+								isSecondary
 								isPressed={
 									item.value === attributes.carouselStyle
 								}
@@ -463,6 +469,7 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 									<Button
 										key={ item.value + '-selected-style' }
 										variant="secondary"
+										isSecondary
 										isPressed={
 											item.value ===
 											attributes.thumbnailProps_selectedStyle

src/js/gallery-block/index.js

@@ -12,7 +12,6 @@ import save from './save';
 import attributes from './attributes.json';
 
 registerBlockType( 'cloudinary/gallery', {
-	apiVersion: 2,
 	title: __( 'Cloudinary Gallery', 'cloudinary' ),
 	description: __(
 		'Add a gallery powered by the Cloudinary Gallery Widget to your post.',