Add Blocks step with toggle to control auto-generation of blocks (#322)

* Add Blocks step with toggle to control auto-generation Signed-off-by: brookewp <[email protected]> * Add enable_blocks to integrated sources configs Signed-off-by: brookewp <[email protected]> * Make backwards compatible so existing sources don’t blow up Signed-off-by: brookewp <[email protected]> * Add more context Signed-off-by: brookewp <[email protected]> * Make enable_blocks optional Signed-off-by: brookewp <[email protected]> * Linting Signed-off-by: brookewp <[email protected]> * Fix yoda errors Signed-off-by: brookewp <[email protected]> * Update inc/Integrations/Airtable/AirtableIntegration.php Co-authored-by: Max Schmeling <[email protected]> * Remove unused arg Signed-off-by: brookewp <[email protected]> * Remove unneccesary step Signed-off-by: brookewp <[email protected]> * Remove duplicated code Signed-off-by: brookewp <[email protected]> * Remove unnecessary state and function Signed-off-by: brookewp <[email protected]> * Update inc/Integrations/Airtable/AirtableIntegration.php Co-authored-by: Chris Zarate <[email protected]> * Update src/data-sources/components/DataSourceForm.tsx Co-authored-by: Chris Zarate <[email protected]> * Lint fix Signed-off-by: brookewp <[email protected]> * Cleanup Signed-off-by: brookewp <[email protected]> --------- Signed-off-by: brookewp <[email protected]> Co-authored-by: Max Schmeling <[email protected]> Co-authored-by: Chris Zarate <[email protected]>
Automattic · Jan 31, 2025 · 4209f7d · 4209f7d
1 parent 8a6c0bc
commit 4209f7d
Show file tree

Hide file tree

Showing 14 changed files with 175 additions and 61 deletions.
diff --git a/inc/Integrations/Airtable/AirtableDataSource.php b/inc/Integrations/Airtable/AirtableDataSource.php
@@ -17,6 +17,7 @@ protected static function get_service_config_schema(): array {
 				'id' => Types::string(),
 				'name' => Types::nullable( Types::string() ),
 			] ),
+			'enable_blocks' => Types::nullable( Types::boolean() ),
 			'display_name' => Types::string(),
 			'tables' => Types::list_of(
 				Types::object( [

diff --git a/inc/Integrations/Airtable/AirtableIntegration.php b/inc/Integrations/Airtable/AirtableIntegration.php
@@ -20,6 +20,11 @@ public static function register_blocks(): void {
 
 		foreach ( $data_source_configs as $config ) {
 			$data_source = AirtableDataSource::from_array( $config );
+
+			if ( false === ( $config['service_config']['enable_blocks'] ?? true ) ) {
+				continue;
+			}
+
 			self::register_blocks_for_airtable_data_source( $data_source );
 			self::register_loop_blocks_for_airtable_data_source( $data_source );
 		}
@@ -32,26 +37,26 @@ public static function register_blocks_for_airtable_data_source(
 		$tables = $data_source->to_array()['service_config']['tables'];
 
 		foreach ( $tables as $table ) {
-			$query = self::get_query( $data_source, $table );
-			$list_query = self::get_list_query( $data_source, $table );
-
-			register_remote_data_block(
-				array_merge(
-					[
-						'title' => $data_source->get_display_name() . '/' . $table['name'],
-						'render_query' => [
-							'query' => $query,
-						],
-						'selection_queries' => [
-							[
-								'query' => $list_query,
-								'type' => 'list',
+				$query = self::get_query( $data_source, $table );
+				$list_query = self::get_list_query( $data_source, $table );
+
+				register_remote_data_block(
+					array_merge(
+						[
+							'title' => $data_source->get_display_name() . '/' . $table['name'],
+							'render_query' => [
+								'query' => $query,
+							],
+							'selection_queries' => [
+								[
+									'query' => $list_query,
+									'type' => 'list',
+								],
 							],
 						],
-					],
-					$block_overrides
-				)
-			);
+						$block_overrides
+					)
+				);
 		}
 	}
 

diff --git a/inc/Integrations/Google/Sheets/GoogleSheetsDataSource.php b/inc/Integrations/Google/Sheets/GoogleSheetsDataSource.php
@@ -27,6 +27,7 @@ protected static function get_service_config_schema(): array {
 				'universe_domain' => Types::string(),
 			] ),
 			'display_name' => Types::string(),
+			'enable_blocks' => Types::nullable( Types::boolean() ),
 			'spreadsheet' => Types::object( [
 				'id' => Types::id(),
 				'name' => Types::nullable( Types::string() ),

diff --git a/inc/Integrations/Google/Sheets/GoogleSheetsIntegration.php b/inc/Integrations/Google/Sheets/GoogleSheetsIntegration.php
@@ -20,6 +20,11 @@ public static function register_blocks(): void {
 
 		foreach ( $data_source_configs as $config ) {
 			$data_source = GoogleSheetsDataSource::from_array( $config );
+
+			if ( false === ( $config['service_config']['enable_blocks'] ?? true ) ) {
+				continue;
+			}
+
 			self::register_blocks_for_google_sheets_data_source( $data_source );
 			self::register_loop_blocks_for_google_sheets_data_source( $data_source );
 		}

diff --git a/inc/Integrations/SalesforceB2C/SalesforceB2CDataSource.php b/inc/Integrations/SalesforceB2C/SalesforceB2CDataSource.php
@@ -18,6 +18,7 @@ protected static function get_service_config_schema(): array {
 			'display_name' => Types::string(),
 			'client_id' => Types::string(),
 			'client_secret' => Types::string(),
+			'enable_blocks' => Types::nullable( Types::boolean() ),
 			'organization_id' => Types::string(),
 			'shortcode' => Types::string(),
 		] );

diff --git a/inc/Integrations/SalesforceB2C/SalesforceB2CIntegration.php b/inc/Integrations/SalesforceB2C/SalesforceB2CIntegration.php
@@ -18,6 +18,11 @@ public static function register_blocks(): void {
 
 		foreach ( $data_source_configs as $config ) {
 			$data_source = SalesforceB2CDataSource::from_array( $config );
+
+			if ( false === ( $config['service_config']['enable_blocks'] ?? true ) ) {
+				continue;
+			}
+
 			self::register_blocks_for_salesforce_data_source( $data_source );
 		}
 	}

diff --git a/inc/Integrations/Shopify/ShopifyDataSource.php b/inc/Integrations/Shopify/ShopifyDataSource.php
@@ -17,6 +17,7 @@ protected static function get_service_config_schema(): array {
 			'__version' => Types::integer(),
 			'access_token' => Types::skip_sanitize( Types::string() ),
 			'display_name' => Types::string(),
+			'enable_blocks' => Types::nullable( Types::boolean() ),
 			'store_name' => Types::string(),
 		] );
 	}

diff --git a/inc/Integrations/Shopify/ShopifyIntegration.php b/inc/Integrations/Shopify/ShopifyIntegration.php
@@ -19,6 +19,11 @@ public static function register_blocks(): void {
 
 		foreach ( $data_source_configs as $config ) {
 			$data_source = ShopifyDataSource::from_array( $config );
+
+			if ( false === ( $config['service_config']['enable_blocks'] ?? true ) ) {
+				continue;
+			}
+
 			self::register_blocks_for_shopify_data_source( $data_source );
 		}
 	}

diff --git a/src/data-sources/airtable/AirtableSettings.tsx b/src/data-sources/airtable/AirtableSettings.tsx
@@ -41,7 +41,10 @@ export const AirtableSettings = ( {
 	const { onSave } = useDataSources< AirtableConfig >( false );
 
 	const { state, handleOnChange, validState } = useForm< AirtableServiceConfig >( {
-		initialValues: config?.service_config ?? { __version: SERVICE_CONFIG_VERSION },
+		initialValues: config?.service_config ?? {
+			__version: SERVICE_CONFIG_VERSION,
+			enable_blocks: true,
+		},
 	} );
 	const { fetchingUserId, userId, userIdError } = useAirtableApiUserId( state.access_token ?? '' );
 	const { bases, basesError, fetchingBases } = useAirtableApiBases(
@@ -209,6 +212,10 @@ export const AirtableSettings = ( {
 						onFieldsChange={ onTablesChange }
 					/>
 				</DataSourceForm.Scope>
+				<DataSourceForm.Blocks
+					handleOnChange={ handleOnChange }
+					hasEnabledBlocks={ state.enable_blocks ?? true }
+				/>
 			</DataSourceForm>
 		</>
 	);

diff --git a/src/data-sources/components/DataSourceForm.tsx b/src/data-sources/components/DataSourceForm.tsx
@@ -6,6 +6,7 @@ import {
 	VisuallyHidden,
 	__experimentalInputControl as InputControl,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	ToggleControl,
 } from '@wordpress/components';
 import { Children, createPortal, isValidElement, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -70,15 +71,38 @@ const DataSourceForm = ( { children, onSave }: DataSourceFormProps ) => {
 	const steps = Children.toArray( children );
 	const singleStep = steps.length === 1 || screen === 'editDataSource';
 
-	const stepHeadings = [ 'Setup', 'Scope' ];
+	const stepHeadings = [ __( 'Setup' ) ]; // First step is always Setup
+
+	if (
+		steps.some(
+			child =>
+				isValidElement( child ) && ( child.type === DataSourceForm.Scope || child.type === 'Scope' )
+		)
+	) {
+		stepHeadings.push( __( 'Scope' ) );
+	}
+
+	if (
+		steps.some(
+			child =>
+				isValidElement( child ) &&
+				( child.type === DataSourceForm.Blocks || child.type === 'Blocks' )
+		)
+	) {
+		stepHeadings.push( __( 'Blocks' ) );
+	}
 
 	const canProceedToNextStep = () => {
 		const step = steps[ currentStep - 1 ];
 		if ( ! isValidElement< { canProceed?: boolean; displayName: string; uuid: string } >( step ) ) {
 			return false;
 		}
 		const { canProceed, displayName, uuid } = step.props;
-		return Boolean( canProceed ) && ( currentStep !== 1 || canUseDisplayName( displayName, uuid ) );
+		const isBlocksStep = step.type === DataSourceForm.Blocks;
+		const noConflicts =
+			Boolean( canProceed ) && ( currentStep !== 1 || canUseDisplayName( displayName, uuid ) );
+
+		return isBlocksStep || noConflicts;
 	};
 
 	const handleNextStep = () => {
@@ -146,42 +170,36 @@ const DataSourceForm = ( { children, onSave }: DataSourceFormProps ) => {
 			{ screen === 'addDataSource' && (
 				<div className="rdb-settings-page_data-source-form-footer">
 					<div className="rdb-settings-page_data-source-form-setup-actions">
-						<>
-							{ currentStep === 1 && (
-								<Button
-									onClick={ () => goToMainScreen() }
-									variant="secondary"
-									__next40pxDefaultSize
-								>
-									Cancel
-								</Button>
-							) }
-							{ currentStep > 1 && (
-								<Button
-									onClick={ () => setCurrentStep( currentStep - 1 ) }
-									variant="secondary"
-									__next40pxDefaultSize
-								>
-									Go back
-								</Button>
-							) }
-							{ currentStep < steps.length && (
-								<Button
-									onClick={ handleNextStep }
-									variant="primary"
-									__next40pxDefaultSize
-									disabled={ ! canProceedToNextStep() }
-								>
-									Continue
-								</Button>
-							) }
-							{ currentStep === steps.length && (
-								<DataSourceFormActions
-									onSave={ onSave }
-									isSaveDisabled={ ! canProceedToNextStep() }
-								/>
-							) }
-						</>
+						{ currentStep === 1 && (
+							<Button onClick={ () => goToMainScreen() } variant="secondary" __next40pxDefaultSize>
+								Cancel
+							</Button>
+						) }
+						{ currentStep > 1 && (
+							<Button
+								onClick={ () => setCurrentStep( currentStep - 1 ) }
+								variant="secondary"
+								__next40pxDefaultSize
+							>
+								Go back
+							</Button>
+						) }
+						{ currentStep < steps.length && (
+							<Button
+								onClick={ handleNextStep }
+								variant="primary"
+								__next40pxDefaultSize
+								disabled={ ! canProceedToNextStep() }
+							>
+								Continue
+							</Button>
+						) }
+						{ currentStep === steps.length && (
+							<DataSourceFormActions
+								onSave={ onSave }
+								isSaveDisabled={ ! canProceedToNextStep() }
+							/>
+						) }
 					</div>
 				</div>
 			) }
@@ -321,7 +339,7 @@ const DataSourceFormScope = ( {
 	const { service } = useSettingsContext();
 	return (
 		<DataSourceFormStep
-			heading="Scope"
+			heading={ __( 'Scope' ) }
 			subheading={ __(
 				`Choose what data should be pulled from ${ service ?? 'your data source' } to your site.`
 			) }
@@ -332,7 +350,50 @@ const DataSourceFormScope = ( {
 	);
 };
 
+const DataSourceFormBlocks = ( {
+	handleOnChange,
+	hasEnabledBlocks,
+}: {
+	handleOnChange: ( key: string, value: boolean ) => void;
+	hasEnabledBlocks: boolean;
+} ) => {
+	const handleToggle = () => {
+		handleOnChange( 'enable_blocks', ! hasEnabledBlocks );
+	};
+	return (
+		<DataSourceFormStep
+			heading={ __( 'Set up blocks' ) }
+			subheading={
+				<>
+					{ __( 'Enable or disable the auto-generation of remote data container blocks. ' ) }
+					<ExternalLink href="https://remotedatablocks.com/docs/extending/block-registration/">
+						{ __( 'Learn more', 'remote-data-blocks' ) }
+					</ExternalLink>
+				</>
+			}
+		>
+			<ToggleControl
+				checked={ hasEnabledBlocks }
+				help={
+					hasEnabledBlocks
+						? __(
+								'Turning this off will require you to implement your own configuration code in your site.',
+								'remote-data-blocks'
+						  )
+						: __(
+								'Turning this on will automatically generate blocks for your site.',
+								'remote-data-blocks'
+						  )
+				}
+				label={ __( 'Auto-generate blocks' ) }
+				onChange={ handleToggle }
+			/>
+		</DataSourceFormStep>
+	);
+};
+
 DataSourceForm.Setup = DataSourceFormSetup;
 DataSourceForm.Scope = DataSourceFormScope;
+DataSourceForm.Blocks = DataSourceFormBlocks;
 
 export { DataSourceForm };
diff --git a/src/data-sources/google-sheets/GoogleSheetsSettings.tsx b/src/data-sources/google-sheets/GoogleSheetsSettings.tsx
@@ -60,7 +60,10 @@ export const GoogleSheetsSettings = ( {
 	const { onSave } = useDataSources< GoogleSheetsConfig >( false );
 
 	const { state, errors, handleOnChange, validState } = useForm< GoogleSheetsServiceConfig >( {
-		initialValues: config?.service_config ?? { __version: SERVICE_CONFIG_VERSION },
+		initialValues: config?.service_config ?? {
+			__version: SERVICE_CONFIG_VERSION,
+			enable_blocks: true,
+		},
 		validationRules,
 	} );
 
@@ -269,6 +272,10 @@ export const GoogleSheetsSettings = ( {
 					customHelpText={ getSheetsHelpText() }
 				/>
 			</DataSourceForm.Scope>
+			<DataSourceForm.Blocks
+				handleOnChange={ handleOnChange }
+				hasEnabledBlocks={ state.enable_blocks ?? true }
+			/>
 		</DataSourceForm>
 	);
 };
diff --git a/src/data-sources/salesforce-b2c/SalesforceB2CSettings.tsx b/src/data-sources/salesforce-b2c/SalesforceB2CSettings.tsx
@@ -23,7 +23,10 @@ export const SalesforceB2CSettings = ( {
 	const { onSave } = useDataSources< SalesforceB2CConfig >( false );
 
 	const { state, handleOnChange, validState } = useForm< SalesforceB2CServiceConfig >( {
-		initialValues: config?.service_config ?? { __version: SERVICE_CONFIG_VERSION },
+		initialValues: config?.service_config ?? {
+			__version: SERVICE_CONFIG_VERSION,
+			enable_blocks: true,
+		},
 	} );
 
 	const shouldAllowSubmit = useMemo( () => {
@@ -103,6 +106,10 @@ export const SalesforceB2CSettings = ( {
 					value={ state.client_secret }
 				/>
 			</DataSourceForm.Setup>
+			<DataSourceForm.Blocks
+				handleOnChange={ handleOnChange }
+				hasEnabledBlocks={ state.enable_blocks ?? true }
+			/>
 		</DataSourceForm>
 	);
 };
diff --git a/src/data-sources/shopify/ShopifySettings.tsx b/src/data-sources/shopify/ShopifySettings.tsx
@@ -20,7 +20,10 @@ export const ShopifySettings = ( {
 	const { onSave } = useDataSources< ShopifyConfig >( false );
 
 	const { state, handleOnChange, validState } = useForm< ShopifyServiceConfig >( {
-		initialValues: config?.service_config ?? { __version: SERVICE_CONFIG_VERSION },
+		initialValues: config?.service_config ?? {
+			__version: SERVICE_CONFIG_VERSION,
+			enable_blocks: true,
+		},
 	} );
 
 	const { shopName, connectionMessage } = useShopifyShopName(
@@ -105,6 +108,10 @@ export const ShopifySettings = ( {
 					__nextHasNoMarginBottom
 				/>
 			</DataSourceForm.Setup>
+			<DataSourceForm.Blocks
+				handleOnChange={ handleOnChange }
+				hasEnabledBlocks={ state.enable_blocks ?? true }
+			/>
 		</DataSourceForm>
 	);
 };