Wizard improvements

js/block-editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => 'a517612ccdaff27b97a1');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '6d7c14c34904052ff5b5');

js/deactivate.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '999d433fe37be4ac75a6');
+<?php return array('dependencies' => array(), 'version' => 'f405be0196ee03c352da');

js/gallery-block.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', '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' => '40acc964c4846bfc3a1c');
+<?php return array('dependencies' => array('react', 'react-dom', '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' => '0fe7242cf29e22d47b4b');

js/gallery-init.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'ccd0bf28dc6e7e0372eb');
+<?php return array('dependencies' => array(), 'version' => '0196bb57bf9b757da5e1');

js/gallery.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '92e750daff597bc257ba');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'e43d4fd3e99784efb0ae');

js/inline-loader.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'a638105d39fc8265e2f3');
+<?php return array('dependencies' => array(), 'version' => '980f7ffe080efd9cda16');

js/lazy-load.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'b96bfd96de232250aa92');
+<?php return array('dependencies' => array(), 'version' => '5f8a7db86fbec1eede6b');

js/media-modal.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'b44f2e54e7f389c16f67');
+<?php return array('dependencies' => array(), 'version' => 'ce85f4351f448371cc26');

js/terms-order.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'e1bf5df8efbf2d4112f7');
+<?php return array('dependencies' => array(), 'version' => 'cf1ff7190192713c8dae');

js/video-init.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '44e1b69b81ff3dbdc83c');
+<?php return array('dependencies' => array(), 'version' => '01eb0d63ab6dd18040af');

php/ui/component/class-on-off.php

@@ -96,6 +96,17 @@ protected function input( $struct ) {
 			$struct['attributes']['type'] = 'hidden';
 		}
 
+		if (
+			true === $this->setting->get_param( 'disabled', false )
+			|| $this->is_readonly()
+			|| (
+				true === $this->setting->get_param( 'main_required', false )
+				&& empty( $this->setting->get_param( 'main', array() ) )
+			)
+		) {
+			$struct['attributes']['disabled'] = 'disabled';
+		}
+
 		return $struct;
 	}
 

src/css/components/ui/_ui-components.scss

@@ -95,6 +95,10 @@
 		.button.wp-color-result {
 			border-color: #d0d0d0;
 		}
+
+		.button.hidden {
+			display: none;
+		}
 	}
 
 	&-error {

src/css/components/ui/controls/_on-off.scss

@@ -68,6 +68,7 @@
 
 			input:disabled + & {
 				opacity: 0.4;
+				pointer-events: none;
 			}
 
 			input:checked + & {

src/css/components/ui/wizard/_connect.scss

@@ -25,6 +25,7 @@
 		padding: 5px 11px;
 		border-radius: 14px;
 		font-weight: bold;
+		margin-inline-start: 1em;
 
 		&.active {
 			display: inline-flex;

src/js/components/wizard.js

@@ -55,6 +55,13 @@ const Wizard = {
 		const connectionInput = document.getElementById(
 			'connect.cloudinary_url'
 		);
+		const updateConnection = document.getElementById( 'update-connection' );
+		const didSave = false;
+
+		updateConnection.addEventListener( 'click', () => {
+			connectionInput.parentNode.classList.remove( 'hidden' );
+			updateConnection.classList.add( 'hidden' );
+		} );
 
 		[ ...navs ].forEach( ( button ) => {
 			button.addEventListener( 'click', () => {
@@ -94,8 +101,10 @@ const Wizard = {
 				}, 500 );
 			}
 		} );
-		if ( this.config.cldString.length ) {
-			connectionInput.value = this.config.cldString;
+
+		if ( this.config.cldString ) {
+			connectionInput.parentNode.classList.add( 'hidden' );
+			updateConnection.classList.remove( 'hidden' );
 		}
 
 		this.getTab( this.config.tab );
@@ -155,7 +164,11 @@ const Wizard = {
 		return this.tabs[ `tab-icon-${ this.config.tab }` ];
 	},
 	getTab( tab ) {
-		if ( 4 === tab && window.localStorage.getItem( this.storageKey ) ) {
+		if (
+			4 === tab &&
+			window.localStorage.getItem( this.storageKey ) &&
+			! this.didSave
+		) {
 			// Place a save and wait, before moving.
 			this.saveConfig();
 			return;
@@ -179,7 +192,7 @@ const Wizard = {
 				break;
 			case 2:
 				this.show( this.back );
-				if ( ! this.config.cldString.length ) {
+				if ( ! this.config.cldString ) {
 					this.lockNext();
 					setTimeout( () => {
 						document
@@ -191,22 +204,21 @@ const Wizard = {
 				}
 				break;
 			case 3:
-				if ( ! this.config.cldString.length ) {
+				if ( ! this.config.cldString ) {
 					document.location.hash = '1';
 					return;
 				}
 				this.show( this.lock );
 				this.show( this.back );
 				break;
 			case 4:
-				if ( ! this.config.cldString.length ) {
+				if ( ! this.config.cldString ) {
 					document.location.hash = '1';
 					return;
 				}
 				this.hide( this.tabBar );
 				this.hide( this.next );
 				this.hide( this.back );
-				this.saveConfig();
 				break;
 		}
 		this.setConfig( 'tab', tab );
@@ -284,16 +296,22 @@ const Wizard = {
 	saveConfig() {
 		this.lockNext();
 		this.next.innerText = __( 'Setting up Cloudinary', 'cloudinary' );
+		this.didSave = true;
+
 		apiFetch( {
 			path: cldData.wizard.saveURL,
 			data: this.config,
 			method: 'POST',
-		} ).then( ( result ) => {
-			this.next.innerText = __( 'Next', 'cloudinary' );
-			this.unlockNext();
-			this.getTab( 4 );
-			window.localStorage.removeItem( this.storageKey );
-		} );
+		} )
+			.then( ( result ) => {
+				this.next.innerText = __( 'Next', 'cloudinary' );
+				this.unlockNext();
+				this.getTab( 4 );
+				window.localStorage.removeItem( this.storageKey );
+			} )
+			.fail( ( error ) => {
+				this.didSave = false;
+			} );
 	},
 };
 

ui-definitions/components/wizard.php

@@ -31,11 +31,10 @@
 	'saveNonce' => wp_create_nonce( 'wp_rest' ),
 	'config'    => array(
 		'tab'          => $current_tab,
-		'cldString'    => $cloudinary_url,
+		'cldString'    => ! empty( $cloudinary_url ),
 		'mediaLibrary' => $autosync,
 		'nonMedia'     => $nonmedia,
 		'advanced'     => $advanced,
-
 	),
 );
 
@@ -142,6 +141,7 @@
 						</div>
 						<input type="text" class="connection-string cld-ui-input regular-text" name="connect[cloudinary_url]" id="connect.cloudinary_url" value="" placeholder="cloudinary://API_KEY:API_SECRET@CLOUD_NAME">
 					</div>
+					<button id="update-connection" class="button button-primary hidden"><?php esc_html_e( 'Update the connection string', 'cloudinary' ); ?></button>
 					<span id="connection-success" class="cld-wizard-connect-status success">
 						<span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e( 'Connected!', 'cloudinary' ); ?>
 					</span>