From a8351688432cf96420ef2c6ed04161cc36bc8bad Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 17:59:05 +0530
Subject: [PATCH 01/12] Install dependency

---
 pnpm-lock.yaml                                         | 3 +++
 projects/js-packages/publicize-components/package.json | 1 +
 2 files changed, 4 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65d6616984168..3cc549f8e88f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -975,6 +975,9 @@ importers:
       '@automattic/social-previews':
         specifier: 2.1.0-beta.8
         version: 2.1.0-beta.8(@babel/runtime@7.24.7)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@automattic/wp-data-sync':
+        specifier: workspace:*
+        version: link:../wp-data-sync
       '@wordpress/annotations':
         specifier: 3.9.0
         version: 3.9.0(react@18.3.1)
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
index 9ecb4c5633c96..6c5b9553274b9 100644
--- a/projects/js-packages/publicize-components/package.json
+++ b/projects/js-packages/publicize-components/package.json
@@ -25,6 +25,7 @@
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/popup-monitor": "1.0.2",
 		"@automattic/social-previews": "2.1.0-beta.8",
+		"@automattic/wp-data-sync": "workspace:*",
 		"@wordpress/annotations": "3.9.0",
 		"@wordpress/api-fetch": "7.9.0",
 		"@wordpress/block-editor": "14.4.0",

From c6aacec1a630c7c910bdbd91ff4a60db492a68f3 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 17:59:42 +0530
Subject: [PATCH 02/12] Create wp data sync for SIG settings

---
 .../src/store/social-image-generator.ts            | 14 ++++++++++++++
 .../publicize-components/src/store/types.ts        |  5 +++++
 2 files changed, 19 insertions(+)
 create mode 100644 projects/js-packages/publicize-components/src/store/social-image-generator.ts
 create mode 100644 projects/js-packages/publicize-components/src/store/types.ts

diff --git a/projects/js-packages/publicize-components/src/store/social-image-generator.ts b/projects/js-packages/publicize-components/src/store/social-image-generator.ts
new file mode 100644
index 0000000000000..2a94a183c8be5
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/store/social-image-generator.ts
@@ -0,0 +1,14 @@
+import { createWpDataSync } from '@automattic/wp-data-sync';
+import { SocialImageGeneratorConfig, SocialStoreState } from './types';
+
+const key = 'jetpack_social_image_generator_settings';
+
+export default createWpDataSync< SocialImageGeneratorConfig, 'socialImageGeneratorConfig' >(
+	'socialImageGeneratorConfig',
+	{
+		endpoint: `/wp/v2/settings?_fields=${ key }`,
+		getSliceFromState: ( { settings }: SocialStoreState ) => settings.socialImageGenerator,
+		extractFetchResponse: response => response[ key ],
+		prepareUpdateRequest: data => ( { [ key ]: data } ),
+	}
+);
diff --git a/projects/js-packages/publicize-components/src/store/types.ts b/projects/js-packages/publicize-components/src/store/types.ts
new file mode 100644
index 0000000000000..2d5746531fd43
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/store/types.ts
@@ -0,0 +1,5 @@
+export type SocialImageGeneratorConfig = {
+	enabled: boolean;
+	template?: string;
+};
+

From 236bff4c8a110771c0f8396b7be861bcf821ac3b Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 18:00:50 +0530
Subject: [PATCH 03/12] Create the new store

---
 .../publicize-components/src/store/index.ts   | 23 +++++++++++++++++++
 .../publicize-components/src/store/types.ts   |  5 ++++
 .../publicize-components/src/types/types.ts   |  3 +++
 3 files changed, 31 insertions(+)
 create mode 100644 projects/js-packages/publicize-components/src/store/index.ts

diff --git a/projects/js-packages/publicize-components/src/store/index.ts b/projects/js-packages/publicize-components/src/store/index.ts
new file mode 100644
index 0000000000000..20ad8f29b6cd7
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/store/index.ts
@@ -0,0 +1,23 @@
+import { createReduxStore, register, combineReducers } from '@wordpress/data';
+import { getSocialScriptData } from '../utils';
+import sig from './social-image-generator';
+
+export const socialStore = createReduxStore( 'jetpack-social', {
+	reducer: combineReducers( {
+		settings: combineReducers( {
+			socialImageGenerator: sig.reducer,
+		} ),
+	} ),
+	actions: {
+		...sig.actions,
+	},
+	selectors: {
+		...sig.selectors,
+	},
+	resolvers: {
+		...sig.resolvers,
+	},
+	initialState: getSocialScriptData().store_initial_state,
+} );
+
+register( socialStore );
diff --git a/projects/js-packages/publicize-components/src/store/types.ts b/projects/js-packages/publicize-components/src/store/types.ts
index 2d5746531fd43..e77cec7fbceb6 100644
--- a/projects/js-packages/publicize-components/src/store/types.ts
+++ b/projects/js-packages/publicize-components/src/store/types.ts
@@ -3,3 +3,8 @@ export type SocialImageGeneratorConfig = {
 	template?: string;
 };
 
+export type SocialStoreState = {
+	settings: {
+		socialImageGenerator: { data: SocialImageGeneratorConfig };
+	};
+};
diff --git a/projects/js-packages/publicize-components/src/types/types.ts b/projects/js-packages/publicize-components/src/types/types.ts
index 667f33f90a64d..43e4b33154eab 100644
--- a/projects/js-packages/publicize-components/src/types/types.ts
+++ b/projects/js-packages/publicize-components/src/types/types.ts
@@ -1,3 +1,5 @@
+import { SocialStoreState } from '../store/types';
+
 export interface SocialUrls {
 	connectionsManagementPage: string;
 }
@@ -36,6 +38,7 @@ export interface SocialScriptData {
 	supported_services: Array< ConnectionService >;
 	shares_data: SharesData;
 	urls: SocialUrls;
+	store_initial_state: SocialStoreState;
 }
 
 type JetpackSettingsSelectors = {

From 095c238dbb36b65f6305710647b956b79d45af12 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 18:01:24 +0530
Subject: [PATCH 04/12] Pass the script data from backend

---
 .../src/class-publicize-script-data.php       | 31 ++++++++++++++-----
 .../class-settings.php                        | 11 ++++++-
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/projects/packages/publicize/src/class-publicize-script-data.php b/projects/packages/publicize/src/class-publicize-script-data.php
index ff841f2da2545..e0fdd57b97be6 100644
--- a/projects/packages/publicize/src/class-publicize-script-data.php
+++ b/projects/packages/publicize/src/class-publicize-script-data.php
@@ -10,6 +10,7 @@
 use Automattic\Jetpack\Connection\Client;
 use Automattic\Jetpack\Connection\Manager;
 use Automattic\Jetpack\Current_Plan;
+use Automattic\Jetpack\Publicize\Jetpack_Social_Settings\Settings;
 use Automattic\Jetpack\Publicize\Publicize_Utils as Utils;
 use Automattic\Jetpack\Status\Host;
 use Jetpack_Options;
@@ -108,17 +109,33 @@ public static function get_admin_script_data() {
 		return array_merge(
 			$basic_data,
 			array(
-				'api_paths'          => self::get_api_paths(),
-				'supported_services' => self::get_supported_services(),
-				'shares_data'        => self::get_shares_data(),
-				'urls'               => self::get_urls(),
-				/**
-				 * 'store'       => self::get_store_script_data(),
-				 */
+				'api_paths'           => self::get_api_paths(),
+				'supported_services'  => self::get_supported_services(),
+				'shares_data'         => self::get_shares_data(),
+				'urls'                => self::get_urls(),
+				'store_initial_state' => self::get_store_initial_state(),
 			)
 		);
 	}
 
+	/**
+	 * Get initial state for social store.
+	 *
+	 * @return array
+	 */
+	public static function get_store_initial_state() {
+
+		$settings = ( new Settings() );
+
+		return array(
+			'settings' => array(
+				'socialImageGenerator' => array(
+					'data' => $settings->get_image_generator_settings(),
+				),
+			),
+		);
+	}
+
 	/**
 	 * Get the feature flags.
 	 *
diff --git a/projects/packages/publicize/src/jetpack-social-settings/class-settings.php b/projects/packages/publicize/src/jetpack-social-settings/class-settings.php
index 7b5db1037146f..8eb30b160abd8 100644
--- a/projects/packages/publicize/src/jetpack-social-settings/class-settings.php
+++ b/projects/packages/publicize/src/jetpack-social-settings/class-settings.php
@@ -132,6 +132,15 @@ public function register_settings() {
 		add_filter( 'rest_pre_update_setting', array( $this, 'update_settings' ), 10, 3 );
 	}
 
+	/**
+	 * Get the image generator settings.
+	 *
+	 * @return array
+	 */
+	public function get_image_generator_settings() {
+		return get_option( self::OPTION_PREFIX . self::IMAGE_GENERATOR_SETTINGS, self::DEFAULT_IMAGE_GENERATOR_SETTINGS );
+	}
+
 	/**
 	 * Get the current settings.
 	 *
@@ -143,7 +152,7 @@ public function get_settings( $with_available = false ) {
 		$this->migrate_old_option();
 
 		$settings = array(
-			'socialImageGeneratorSettings' => get_option( self::OPTION_PREFIX . self::IMAGE_GENERATOR_SETTINGS, self::DEFAULT_IMAGE_GENERATOR_SETTINGS ),
+			'socialImageGeneratorSettings' => $this->get_image_generator_settings(),
 		);
 
 		// The feature cannot be enabled without Publicize.

From 16e26a0a276016747dd119e28e0b09975d7d6738 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 18:01:59 +0530
Subject: [PATCH 05/12] Use the new selectors and actions in social

---
 .../js-packages/publicize-components/index.ts |  1 +
 .../social-image-generator-toggle/index.tsx   | 44 ++++++++++---------
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts
index f10e54078ec65..2cac7bb3fb79c 100644
--- a/projects/js-packages/publicize-components/index.ts
+++ b/projects/js-packages/publicize-components/index.ts
@@ -38,3 +38,4 @@ export * from './src/components/manage-connections-modal';
 export * from './src/utils/script-data';
 export * from './src/utils/shares-data';
 export * from './src/components/global-modals';
+export * from './src/store';
diff --git a/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx b/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx
index 77b3b683654cc..18f8f10480906 100644
--- a/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx
+++ b/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx
@@ -1,12 +1,13 @@
 import { Button, Text, useBreakpointMatch } from '@automattic/jetpack-components';
-import { SocialImageGeneratorTemplatePickerModal as TemplatePickerModal } from '@automattic/jetpack-publicize-components';
-import { SOCIAL_STORE_ID } from '@automattic/jetpack-publicize-components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useCallback, useEffect } from '@wordpress/element';
+import {
+	socialStore,
+	SocialImageGeneratorTemplatePickerModal as TemplatePickerModal,
+} from '@automattic/jetpack-publicize-components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import React from 'react';
 import ToggleSection from '../toggle-section';
-import { SocialStoreSelectors } from '../types/types';
 import styles from './styles.module.scss';
 
 type SocialImageGeneratorToggleProps = {
@@ -19,31 +20,32 @@ type SocialImageGeneratorToggleProps = {
 const SocialImageGeneratorToggle: React.FC< SocialImageGeneratorToggleProps > = ( {
 	disabled,
 } ) => {
-	const [ currentTemplate, setCurrentTemplate ] = useState< string | null >( null );
 	const { isEnabled, isUpdating, defaultTemplate } = useSelect( select => {
-		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
+		const store = select( socialStore );
+
+		const config = store.getSocialImageGeneratorConfig();
 		return {
-			isEnabled: store.isSocialImageGeneratorEnabled(),
-			isUpdating: store.isUpdatingSocialImageGeneratorSettings(),
-			defaultTemplate: store.getSocialImageGeneratorDefaultTemplate(),
+			isEnabled: config.enabled,
+			defaultTemplate: config.template,
+			isUpdating: store.getSocialImageGeneratorConfigStatus() === 'updating',
 		};
 	}, [] );
 
-	const updateOptions = useDispatch( SOCIAL_STORE_ID ).updateSocialImageGeneratorSettings;
+	const { updateSocialImageGeneratorConfig } = useDispatch( socialStore );
 
 	const toggleStatus = useCallback( () => {
 		const newOption = {
 			enabled: ! isEnabled,
 		};
-		updateOptions( newOption );
-	}, [ isEnabled, updateOptions ] );
+		updateSocialImageGeneratorConfig( newOption );
+	}, [ isEnabled, updateSocialImageGeneratorConfig ] );
 
-	useEffect( () => {
-		if ( currentTemplate ) {
-			const newOption = { template: currentTemplate };
-			updateOptions( newOption );
-		}
-	}, [ currentTemplate, updateOptions ] );
+	const updateTemplate = useCallback(
+		( template: string ) => {
+			updateSocialImageGeneratorConfig( { template } );
+		},
+		[ updateSocialImageGeneratorConfig ]
+	);
 
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 
@@ -76,8 +78,8 @@ const SocialImageGeneratorToggle: React.FC< SocialImageGeneratorToggleProps > =
 				) }
 			</Text>
 			<TemplatePickerModal
-				value={ currentTemplate || defaultTemplate }
-				onSelect={ setCurrentTemplate }
+				value={ defaultTemplate }
+				onSelect={ updateTemplate }
 				render={ renderTemplatePickerModal }
 			/>
 		</ToggleSection>

From 4cfb12952313711e1e38f0ee3593c12258cd1447 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 18:02:49 +0530
Subject: [PATCH 06/12] Use the new selectors and actions in publicize
 components

---
 .../template-picker/button/index.tsx          | 19 ++++++++++---------
 .../social-image-generator/toggle/index.tsx   | 16 ++++++++--------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/button/index.tsx b/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/button/index.tsx
index be88f46ed6532..f5887ac5be891 100644
--- a/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/button/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/button/index.tsx
@@ -3,29 +3,30 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import React from 'react';
-import { SOCIAL_STORE_ID } from '../../../../social-store';
-import { SocialStoreSelectors } from '../../../../types/types';
+import { socialStore } from '../../../../store';
 import TemplatePickerModal from '../modal';
 
 const TemplatePickerButton: React.FC = () => {
 	const [ currentTemplate, setCurrentTemplate ] = useState( null );
 	const { isEnabled, isUpdating, defaultTemplate } = useSelect( select => {
-		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
+		const store = select( socialStore );
+
+		const config = store.getSocialImageGeneratorConfig();
 		return {
-			isEnabled: store.isSocialImageGeneratorEnabled(),
-			isUpdating: store.isUpdatingSocialImageGeneratorSettings(),
-			defaultTemplate: store.getSocialImageGeneratorDefaultTemplate(),
+			isEnabled: config.enabled,
+			defaultTemplate: config.template,
+			isUpdating: store.getSocialImageGeneratorConfigStatus() === 'updating',
 		};
 	}, [] );
 
-	const updateOptions = useDispatch( SOCIAL_STORE_ID ).updateSocialImageGeneratorSettings;
+	const { updateSocialImageGeneratorConfig } = useDispatch( socialStore );
 
 	useEffect( () => {
 		if ( currentTemplate ) {
 			const newOption = { template: currentTemplate };
-			updateOptions( newOption );
+			updateSocialImageGeneratorConfig( newOption );
 		}
-	}, [ currentTemplate, updateOptions ] );
+	}, [ currentTemplate, updateSocialImageGeneratorConfig ] );
 
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 
diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx b/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx
index 7a7ceee6f7f50..08ddde4b5ec57 100644
--- a/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx
@@ -2,8 +2,7 @@ import { ToggleControl } from '@automattic/jetpack-components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import React from 'react';
-import { SOCIAL_STORE_ID } from '../../../social-store';
-import { SocialStoreSelectors } from '../../../types/types';
+import { socialStore } from '../../../store';
 
 type SocialImageGeneratorToggleProps = {
 	/**
@@ -28,21 +27,22 @@ const SocialImageGeneratorToggle: React.FC< SocialImageGeneratorToggleProps > =
 	children,
 } ) => {
 	const { isEnabled, isUpdating } = useSelect( select => {
-		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
+		const store = select( socialStore );
+
 		return {
-			isEnabled: store.isSocialImageGeneratorEnabled(),
-			isUpdating: store.isUpdatingSocialImageGeneratorSettings(),
+			isEnabled: store.getSocialImageGeneratorConfig().enabled,
+			isUpdating: store.getSocialImageGeneratorConfigStatus() === 'updating',
 		};
 	}, [] );
 
-	const updateOptions = useDispatch( SOCIAL_STORE_ID ).updateSocialImageGeneratorSettings;
+	const { updateSocialImageGeneratorConfig } = useDispatch( socialStore );
 
 	const toggleStatus = useCallback( () => {
 		const newOption = {
 			enabled: ! isEnabled,
 		};
-		updateOptions( newOption );
-	}, [ isEnabled, updateOptions ] );
+		updateSocialImageGeneratorConfig( newOption );
+	}, [ isEnabled, updateSocialImageGeneratorConfig ] );
 
 	return (
 		<ToggleControl

From dd3df7316a43965874723089afde5dbb7b4a575e Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 18:03:21 +0530
Subject: [PATCH 07/12] Update refresh action to use the new thunk

---
 .../actions/jetpack-social-settings.js        | 25 +++----------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/projects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js b/projects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js
index 23827a6261787..6b0b7e727b8f7 100644
--- a/projects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js
+++ b/projects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js
@@ -1,29 +1,12 @@
-import { fetchJetpackSocialSettings } from '../controls';
-import {
-	setSocialImageGeneratorSettings,
-	setUpdatingSocialImageGeneratorSettings,
-	setUpdatingSocialImageGeneratorSettingsDone,
-} from './social-image-generator-settings';
-
 /**
  * Yield actions to refresh all of the Jetpack Social registered settings.
  *
- * @yield {object} - an action object.
  * @return {object} - an action object.
  */
-export function* refreshJetpackSocialSettings() {
-	try {
-		yield setUpdatingSocialImageGeneratorSettings();
-		const updatedSettings = yield fetchJetpackSocialSettings();
-		yield setSocialImageGeneratorSettings(
-			updatedSettings.jetpack_social_image_generator_settings
-		);
-		return true;
-	} catch ( e ) {
-		return false;
-	} finally {
-		yield setUpdatingSocialImageGeneratorSettingsDone();
-	}
+export function refreshJetpackSocialSettings() {
+	return async function ( { dispatch } ) {
+		await dispatch.fetchSocialImageGeneratorConfig();
+	};
 }
 
 export default {

From 2161224456a98528d50e22310c9f430cfc635d87 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 18:03:38 +0530
Subject: [PATCH 08/12] Nuke everything that's not used anymore

---
 .../src/social-store/actions/index.js         |  2 -
 .../social-image-generator-settings.js        | 89 -------------------
 .../src/social-store/controls.js              | 40 ---------
 .../src/social-store/reducer/index.js         |  2 -
 .../social-image-generator-settings.js        | 14 ---
 .../src/social-store/resolvers.js             | 22 +----
 .../src/social-store/selectors/index.js       |  2 -
 .../social-image-generator-settings.js        |  8 --
 .../publicize-components/src/types/types.ts   | 16 +---
 .../jetpack/_inc/client/sharing/index.jsx     |  4 +-
 .../jetpack/_inc/client/sharing/publicize.jsx |  4 +-
 .../social/src/js/components/types/types.ts   | 14 ---
 12 files changed, 6 insertions(+), 211 deletions(-)
 delete mode 100644 projects/js-packages/publicize-components/src/social-store/actions/social-image-generator-settings.js
 delete mode 100644 projects/js-packages/publicize-components/src/social-store/reducer/social-image-generator-settings.js
 delete mode 100644 projects/js-packages/publicize-components/src/social-store/selectors/social-image-generator-settings.js

diff --git a/projects/js-packages/publicize-components/src/social-store/actions/index.js b/projects/js-packages/publicize-components/src/social-store/actions/index.js
index 0bfa479c22fa7..0176bc4a45f58 100644
--- a/projects/js-packages/publicize-components/src/social-store/actions/index.js
+++ b/projects/js-packages/publicize-components/src/social-store/actions/index.js
@@ -2,13 +2,11 @@ import * as connectionData from './connection-data';
 import siteSettingActions from './jetpack-settings';
 import jetpackSocialSettings from './jetpack-social-settings';
 import * as shareStatus from './share-status';
-import socialImageGeneratorSettingActions from './social-image-generator-settings';
 import socialNotesSettings from './social-notes-settings';
 
 const actions = {
 	...shareStatus,
 	...siteSettingActions,
-	...socialImageGeneratorSettingActions,
 	...jetpackSocialSettings,
 	...connectionData,
 	...socialNotesSettings,
diff --git a/projects/js-packages/publicize-components/src/social-store/actions/social-image-generator-settings.js b/projects/js-packages/publicize-components/src/social-store/actions/social-image-generator-settings.js
deleted file mode 100644
index 73fc4ad0ae7f0..0000000000000
--- a/projects/js-packages/publicize-components/src/social-store/actions/social-image-generator-settings.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { select } from '@wordpress/data';
-import { SOCIAL_STORE_ID } from '../../social-store';
-import {
-	fetchSocialImageGeneratorSettings,
-	updateSocialImageGeneratorSettings as updateSocialImageGeneratorSettingsControl,
-} from '../controls';
-
-export const SET_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'SET_SOCIAL_IMAGE_GENERATOR_SETTINGS';
-
-/**
- * Yield actions to update settings
- *
- * @param {object} settings - settings to apply.
- * @yield {object} - an action object.
- * @return {object} - an action object.
- */
-export function* updateSocialImageGeneratorSettings( settings ) {
-	try {
-		yield setUpdatingSocialImageGeneratorSettings();
-		yield setSocialImageGeneratorSettings( settings );
-		yield updateSocialImageGeneratorSettingsControl( settings );
-		const updatedSettings = yield fetchSocialImageGeneratorSettings();
-		yield setSocialImageGeneratorSettings(
-			updatedSettings.jetpack_social_image_generator_settings
-		);
-		return true;
-	} catch ( e ) {
-		const oldSettings = select( SOCIAL_STORE_ID ).getSocialImageGeneratorSettings();
-		yield setSocialImageGeneratorSettings( oldSettings );
-		return false;
-	} finally {
-		yield setUpdatingSocialImageGeneratorSettingsDone();
-	}
-}
-
-/**
- * Set state updating action
- *
- * @return {object} - an action object.
- */
-export function setUpdatingSocialImageGeneratorSettings() {
-	return setSocialImageGeneratorSettings( { isUpdating: true } );
-}
-
-/**
- * Set state updating finished
- *
- * @return {object} - an action object.
- */
-export function setUpdatingSocialImageGeneratorSettingsDone() {
-	return setSocialImageGeneratorSettings( { isUpdating: false } );
-}
-
-/**
- * Set Social Image Generator settings action
- *
- * @param {object} options - Social Image Generator settings.
- * @return {object} - an action object.
- */
-export function setSocialImageGeneratorSettings( options ) {
-	return { type: SET_SOCIAL_IMAGE_GENERATOR_SETTINGS, options };
-}
-
-/**
- * Yield actions to refresh settings
- *
- * @yield {object} - an action object.
- * @return {object} - an action object.
- */
-export function* refreshSocialImageGeneratorSettings() {
-	try {
-		yield setUpdatingSocialImageGeneratorSettings();
-		const updatedSettings = yield fetchSocialImageGeneratorSettings();
-		yield setSocialImageGeneratorSettings(
-			updatedSettings.jetpack_social_image_generator_settings
-		);
-		return true;
-	} catch ( e ) {
-		return false;
-	} finally {
-		yield setUpdatingSocialImageGeneratorSettingsDone();
-	}
-}
-
-export default {
-	updateSocialImageGeneratorSettings,
-	setSocialImageGeneratorSettings,
-	refreshSocialImageGeneratorSettings,
-};
diff --git a/projects/js-packages/publicize-components/src/social-store/controls.js b/projects/js-packages/publicize-components/src/social-store/controls.js
index 7830da3898d67..89535f845a990 100644
--- a/projects/js-packages/publicize-components/src/social-store/controls.js
+++ b/projects/js-packages/publicize-components/src/social-store/controls.js
@@ -2,8 +2,6 @@ import apiFetch from '@wordpress/api-fetch';
 
 export const FETCH_JETPACK_SETTINGS = 'FETCH_JETPACK_SETTINGS';
 export const UPDATE_JETPACK_SETTINGS = 'UPDATE_JETPACK_SETTINGS';
-export const FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS';
-export const UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS';
 
 export const FETCH_JETPACK_SOCIAL_SETTINGS = 'FETCH_JETPACK_SOCIAL_SETTINGS';
 
@@ -31,30 +29,6 @@ export const updateJetpackSettings = settings => {
 	};
 };
 
-/**
- * fetchSocialImageGeneratorSettings action
- *
- * @return {object} - an action object.
- */
-export const fetchSocialImageGeneratorSettings = () => {
-	return {
-		type: FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS,
-	};
-};
-
-/**
- * updateSocialImageGeneratorSettings action
- *
- * @param {*} settings - Social Image Generator settings object.
- * @return {object} - an action object.
- */
-export const updateSocialImageGeneratorSettings = settings => {
-	return {
-		type: UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS,
-		settings,
-	};
-};
-
 /**
  * fetchJetpackSocialSettings action
  *
@@ -77,20 +51,6 @@ export default {
 			data: action.settings,
 		} );
 	},
-	[ FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function () {
-		return apiFetch( {
-			path: '/wp/v2/settings?_fields=jetpack_social_image_generator_settings',
-		} );
-	},
-	[ UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function ( action ) {
-		return apiFetch( {
-			path: '/wp/v2/settings',
-			method: 'POST',
-			data: {
-				jetpack_social_image_generator_settings: action.settings,
-			},
-		} );
-	},
 	[ FETCH_JETPACK_SOCIAL_SETTINGS ]: function () {
 		return apiFetch( {
 			path: '/wp/v2/settings?_fields=jetpack_social_image_generator_settings',
diff --git a/projects/js-packages/publicize-components/src/social-store/reducer/index.js b/projects/js-packages/publicize-components/src/social-store/reducer/index.js
index 6bae3be245474..6fd0182755bfc 100644
--- a/projects/js-packages/publicize-components/src/social-store/reducer/index.js
+++ b/projects/js-packages/publicize-components/src/social-store/reducer/index.js
@@ -3,13 +3,11 @@ import connectionData from './connection-data';
 import jetpackSettings from './jetpack-settings';
 import { shareStatus } from './share-status';
 import siteData from './site-data';
-import socialImageGeneratorSettings from './social-image-generator-settings';
 
 const reducer = combineReducers( {
 	siteData,
 	connectionData,
 	jetpackSettings,
-	socialImageGeneratorSettings,
 	shareStatus,
 } );
 
diff --git a/projects/js-packages/publicize-components/src/social-store/reducer/social-image-generator-settings.js b/projects/js-packages/publicize-components/src/social-store/reducer/social-image-generator-settings.js
deleted file mode 100644
index de58aae5f7481..0000000000000
--- a/projects/js-packages/publicize-components/src/social-store/reducer/social-image-generator-settings.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { SET_SOCIAL_IMAGE_GENERATOR_SETTINGS } from '../actions/social-image-generator-settings';
-
-const socialImageGeneratorSettings = ( state = {}, action ) => {
-	switch ( action.type ) {
-		case SET_SOCIAL_IMAGE_GENERATOR_SETTINGS:
-			return {
-				...state,
-				...action.options,
-			};
-	}
-	return state;
-};
-
-export default socialImageGeneratorSettings;
diff --git a/projects/js-packages/publicize-components/src/social-store/resolvers.js b/projects/js-packages/publicize-components/src/social-store/resolvers.js
index 5d7c1a98108ce..64984f8147d83 100644
--- a/projects/js-packages/publicize-components/src/social-store/resolvers.js
+++ b/projects/js-packages/publicize-components/src/social-store/resolvers.js
@@ -5,8 +5,7 @@ import { normalizeShareStatus } from '../utils/share-status';
 import { setConnections } from './actions/connection-data';
 import { setJetpackSettings } from './actions/jetpack-settings';
 import { fetchPostShareStatus, receivePostShareStaus } from './actions/share-status';
-import { setSocialImageGeneratorSettings } from './actions/social-image-generator-settings';
-import { fetchJetpackSettings, fetchSocialImageGeneratorSettings } from './controls';
+import { fetchJetpackSettings } from './controls';
 
 /**
  * Yield actions to get the Jetpack settings.
@@ -26,24 +25,6 @@ export function* getJetpackSettings() {
 	}
 }
 
-/**
- * Yield actions to get the Social Image Generator settings.
- *
- * @yield {object} - an action object.
- * @return {object} - an action object.
- */
-export function* getSocialImageGeneratorSettings() {
-	try {
-		const settings = yield fetchSocialImageGeneratorSettings();
-		if ( settings ) {
-			return setSocialImageGeneratorSettings( settings.jetpack_social_image_generator_settings );
-		}
-	} catch ( e ) {
-		// TODO: Add proper error handling here
-		console.log( e ); // eslint-disable-line no-console
-	}
-}
-
 /**
  * Resolves the connections from the post.
  *
@@ -96,7 +77,6 @@ export function getPostShareStatus( _postId ) {
 
 export default {
 	getJetpackSettings,
-	getSocialImageGeneratorSettings,
 	getConnections,
 	getPostShareStatus,
 };
diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/index.js b/projects/js-packages/publicize-components/src/social-store/selectors/index.js
index 6cf378df068eb..11b3420c1a852 100644
--- a/projects/js-packages/publicize-components/src/social-store/selectors/index.js
+++ b/projects/js-packages/publicize-components/src/social-store/selectors/index.js
@@ -2,13 +2,11 @@ import * as connectionDataSelectors from './connection-data';
 import jetpackSettingSelectors from './jetpack-settings';
 import * as shareStatusSelectors from './share-status';
 import siteDataSelectors from './site-data';
-import socialImageGeneratorSettingsSelectors from './social-image-generator-settings';
 
 const selectors = {
 	...siteDataSelectors,
 	...connectionDataSelectors,
 	...jetpackSettingSelectors,
-	...socialImageGeneratorSettingsSelectors,
 	...shareStatusSelectors,
 };
 
diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/social-image-generator-settings.js b/projects/js-packages/publicize-components/src/social-store/selectors/social-image-generator-settings.js
deleted file mode 100644
index c7ea88783996c..0000000000000
--- a/projects/js-packages/publicize-components/src/social-store/selectors/social-image-generator-settings.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const socialImageGeneratorSettingsSelectors = {
-	getSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings,
-	isSocialImageGeneratorEnabled: state => state.socialImageGeneratorSettings.enabled,
-	isUpdatingSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings.isUpdating,
-	getSocialImageGeneratorDefaultTemplate: state => state.socialImageGeneratorSettings.template,
-};
-
-export default socialImageGeneratorSettingsSelectors;
diff --git a/projects/js-packages/publicize-components/src/types/types.ts b/projects/js-packages/publicize-components/src/types/types.ts
index 43e4b33154eab..126bb278441be 100644
--- a/projects/js-packages/publicize-components/src/types/types.ts
+++ b/projects/js-packages/publicize-components/src/types/types.ts
@@ -62,19 +62,6 @@ type SiteDataSelectors = {
 	getSiteTitle: () => string;
 };
 
-type SocialImageGeneratorSettingsSelectors = {
-	getSocialImageGeneratorSettings: () => {
-		available: boolean;
-		enabled: boolean;
-		defaults: () => {
-			template: string;
-		};
-	};
-	isSocialImageGeneratorEnabled: () => boolean;
-	isUpdatingSocialImageGeneratorSettings: () => boolean;
-	getSocialImageGeneratorDefaultTemplate: () => string;
-};
-
 /**
  * Types of the Social Store selectors.
  *
@@ -82,5 +69,4 @@ type SocialImageGeneratorSettingsSelectors = {
  */
 export type SocialStoreSelectors = JetpackSettingsSelectors &
 	ConnectionDataSelectors &
-	SiteDataSelectors &
-	SocialImageGeneratorSettingsSelectors;
+	SiteDataSelectors;
diff --git a/projects/plugins/jetpack/_inc/client/sharing/index.jsx b/projects/plugins/jetpack/_inc/client/sharing/index.jsx
index ba0f0e9b64409..16c6ab52384ef 100644
--- a/projects/plugins/jetpack/_inc/client/sharing/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/sharing/index.jsx
@@ -24,7 +24,7 @@ import {
 import { getModule } from 'state/modules';
 import { isModuleFound as _isModuleFound } from 'state/search';
 import { getSettings } from 'state/settings';
-import { siteHasFeature, getActiveFeatures, siteUsesWpAdminInterface } from 'state/site';
+import { getActiveFeatures, siteUsesWpAdminInterface } from 'state/site';
 import { Likes } from './likes';
 import { Publicize } from './publicize';
 import { ShareButtons } from './share-buttons';
@@ -47,7 +47,6 @@ class Sharing extends Component {
 			userCanManageModules: this.props.userCanManageModules,
 			activeFeatures: this.props.activeFeatures,
 			hasPaidFeatures: this.props.hasPaidFeatures,
-			hasSocialImageGenerator: this.props.hasSocialImageGenerator,
 			isAtomicSite: this.props.isAtomicSite,
 			hasSharingBlock: this.props.hasSharingBlock,
 			isBlockTheme: this.props.isBlockTheme,
@@ -101,7 +100,6 @@ export default connect( state => {
 		siteAdminUrl: getSiteAdminUrl( state ),
 		activeFeatures: getActiveFeatures( state ),
 		hasPaidFeatures: hasSocialPaidFeatures(),
-		hasSocialImageGenerator: siteHasFeature( state, 'social-image-generator' ),
 		userCanManageModules: userCanManageModules( state ),
 		isAtomicSite: isAtomicSite( state ),
 		hasSharingBlock: isSharingBlockAvailable( state ),
diff --git a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx
index 8750f8de20f6a..75770e57ed1be 100644
--- a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx
+++ b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx
@@ -2,7 +2,9 @@ import { getRedirectUrl } from '@automattic/jetpack-components';
 import {
 	ConnectionManagement,
 	RefreshJetpackSocialSettingsWrapper,
+	features,
 } from '@automattic/jetpack-publicize-components';
+import { siteHasFeature } from '@automattic/jetpack-script-data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import Card from 'components/card';
@@ -48,7 +50,7 @@ export const Publicize = withModuleSettingsFormHelpers(
 				blogID = this.props.blogID,
 				siteAdminUrl = this.props.siteAdminUrl,
 				hasPaidFeatures = this.props.hasPaidFeatures,
-				hasSocialImageGenerator = this.props.hasSocialImageGenerator,
+				hasSocialImageGenerator = siteHasFeature( features.IMAGE_GENERATOR ),
 				isAtomicSite = this.props.isAtomicSite,
 				activeFeatures = this.props.activeFeatures,
 				useAdminUiV1 = this.props.useAdminUiV1,
diff --git a/projects/plugins/social/src/js/components/types/types.ts b/projects/plugins/social/src/js/components/types/types.ts
index bd349bbd106f3..a8d9c4df12fc3 100644
--- a/projects/plugins/social/src/js/components/types/types.ts
+++ b/projects/plugins/social/src/js/components/types/types.ts
@@ -21,19 +21,6 @@ type SiteDataSelectors = {
 	getBlogID: () => number;
 };
 
-type SocialImageGeneratorSettingsSelectors = {
-	getSocialImageGeneratorSettings: () => {
-		available: boolean;
-		enabled: boolean;
-		defaults: () => {
-			template: string;
-		};
-	};
-	isSocialImageGeneratorEnabled: () => boolean;
-	isUpdatingSocialImageGeneratorSettings: () => boolean;
-	getSocialImageGeneratorDefaultTemplate: () => string;
-};
-
 type SocialNotesSettingsSelectors = {
 	isSocialNotesEnabled: () => boolean;
 	isSocialNotesSettingsUpdating: () => boolean;
@@ -47,5 +34,4 @@ type SocialNotesSettingsSelectors = {
 export type SocialStoreSelectors = JetpackSettingsSelectors &
 	ConnectionDataSelectors &
 	SiteDataSelectors &
-	SocialImageGeneratorSettingsSelectors &
 	SocialNotesSettingsSelectors;

From bd937f31b94861a3c1ecfd985eee44d9d8b35390 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 18:05:16 +0530
Subject: [PATCH 09/12] Add changelogs

---
 .../changelog/update-migrate-sid-settings-to-new-store       | 4 ++++
 .../changelog/update-migrate-sid-settings-to-new-store       | 4 ++++
 .../changelog/update-migrate-sid-settings-to-new-store       | 5 +++++
 .../changelog/update-migrate-sid-settings-to-new-store       | 4 ++++
 4 files changed, 17 insertions(+)
 create mode 100644 projects/js-packages/publicize-components/changelog/update-migrate-sid-settings-to-new-store
 create mode 100644 projects/packages/publicize/changelog/update-migrate-sid-settings-to-new-store
 create mode 100644 projects/plugins/jetpack/changelog/update-migrate-sid-settings-to-new-store
 create mode 100644 projects/plugins/social/changelog/update-migrate-sid-settings-to-new-store

diff --git a/projects/js-packages/publicize-components/changelog/update-migrate-sid-settings-to-new-store b/projects/js-packages/publicize-components/changelog/update-migrate-sid-settings-to-new-store
new file mode 100644
index 0000000000000..0e7734a13ccc9
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/update-migrate-sid-settings-to-new-store
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated Social Image Generator settings to new store
diff --git a/projects/packages/publicize/changelog/update-migrate-sid-settings-to-new-store b/projects/packages/publicize/changelog/update-migrate-sid-settings-to-new-store
new file mode 100644
index 0000000000000..0e7734a13ccc9
--- /dev/null
+++ b/projects/packages/publicize/changelog/update-migrate-sid-settings-to-new-store
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated Social Image Generator settings to new store
diff --git a/projects/plugins/jetpack/changelog/update-migrate-sid-settings-to-new-store b/projects/plugins/jetpack/changelog/update-migrate-sid-settings-to-new-store
new file mode 100644
index 0000000000000..502efac4d0cfb
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-migrate-sid-settings-to-new-store
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Social: Migrated Social Image Generator settings to new store
+
+
diff --git a/projects/plugins/social/changelog/update-migrate-sid-settings-to-new-store b/projects/plugins/social/changelog/update-migrate-sid-settings-to-new-store
new file mode 100644
index 0000000000000..0e7734a13ccc9
--- /dev/null
+++ b/projects/plugins/social/changelog/update-migrate-sid-settings-to-new-store
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated Social Image Generator settings to new store

From 532ab86f2bd27950c6a47d33b9fe9a73037fdad1 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 18:18:33 +0530
Subject: [PATCH 10/12] Get rid of refreshJetpackSocialSettings action

---
 .../js-packages/publicize-components/index.ts |  1 -
 .../refresh-jetpack-social-settings/index.js  | 20 ------------
 .../src/social-store/actions/index.js         |  2 --
 .../actions/jetpack-social-settings.js        | 14 --------
 .../jetpack/_inc/client/sharing/publicize.jsx | 32 +++++++------------
 .../src/js/components/admin-page/index.jsx    | 19 ++---------
 6 files changed, 14 insertions(+), 74 deletions(-)
 delete mode 100644 projects/js-packages/publicize-components/src/components/refresh-jetpack-social-settings/index.js
 delete mode 100644 projects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js

diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts
index 2cac7bb3fb79c..06748d4548053 100644
--- a/projects/js-packages/publicize-components/index.ts
+++ b/projects/js-packages/publicize-components/index.ts
@@ -17,7 +17,6 @@ export { default as TemplatePickerButton } from './src/components/social-image-g
 export { default as PublicizePanel } from './src/components/panel';
 export { default as ReviewPrompt } from './src/components/review-prompt';
 export { default as PostPublishPanels } from './src/components/post-publish-panels';
-export { default as RefreshJetpackSocialSettingsWrapper } from './src/components/refresh-jetpack-social-settings';
 export { default as ConnectionManagement } from './src/components/connection-management';
 
 export { default as useSocialMediaConnections } from './src/hooks/use-social-media-connections';
diff --git a/projects/js-packages/publicize-components/src/components/refresh-jetpack-social-settings/index.js b/projects/js-packages/publicize-components/src/components/refresh-jetpack-social-settings/index.js
deleted file mode 100644
index 16726c614650b..0000000000000
--- a/projects/js-packages/publicize-components/src/components/refresh-jetpack-social-settings/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useDispatch } from '@wordpress/data';
-import { SOCIAL_STORE_ID } from '../../social-store';
-
-/**
- * HOC that refreshes all of the Jetpack Social settings in the store, to be used in class components.
- *
- * @param {object}  props               - The component props.
- * @param {boolean} props.shouldRefresh - Whether or not to refresh the settings.
- * @param {object}  props.children      - The children to render.
- * @return { object } The refreshJetpackSocialSettings function.
- */
-export default function RefreshJetpackSocialSettingsWrapper( { shouldRefresh, children } ) {
-	const refreshOptions = useDispatch( SOCIAL_STORE_ID ).refreshJetpackSocialSettings;
-
-	if ( shouldRefresh ) {
-		refreshOptions();
-	}
-
-	return children;
-}
diff --git a/projects/js-packages/publicize-components/src/social-store/actions/index.js b/projects/js-packages/publicize-components/src/social-store/actions/index.js
index 0176bc4a45f58..79d3c41f1926c 100644
--- a/projects/js-packages/publicize-components/src/social-store/actions/index.js
+++ b/projects/js-packages/publicize-components/src/social-store/actions/index.js
@@ -1,13 +1,11 @@
 import * as connectionData from './connection-data';
 import siteSettingActions from './jetpack-settings';
-import jetpackSocialSettings from './jetpack-social-settings';
 import * as shareStatus from './share-status';
 import socialNotesSettings from './social-notes-settings';
 
 const actions = {
 	...shareStatus,
 	...siteSettingActions,
-	...jetpackSocialSettings,
 	...connectionData,
 	...socialNotesSettings,
 };
diff --git a/projects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js b/projects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js
deleted file mode 100644
index 6b0b7e727b8f7..0000000000000
--- a/projects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Yield actions to refresh all of the Jetpack Social registered settings.
- *
- * @return {object} - an action object.
- */
-export function refreshJetpackSocialSettings() {
-	return async function ( { dispatch } ) {
-		await dispatch.fetchSocialImageGeneratorConfig();
-	};
-}
-
-export default {
-	refreshJetpackSocialSettings,
-};
diff --git a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx
index 75770e57ed1be..38863f5c6fde8 100644
--- a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx
+++ b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx
@@ -1,9 +1,5 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
-import {
-	ConnectionManagement,
-	RefreshJetpackSocialSettingsWrapper,
-	features,
-} from '@automattic/jetpack-publicize-components';
+import { ConnectionManagement, features } from '@automattic/jetpack-publicize-components';
 import { siteHasFeature } from '@automattic/jetpack-script-data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
@@ -151,21 +147,17 @@ export const Publicize = withModuleSettingsFormHelpers(
 									{ __( 'Automatically share your posts to social networks', 'jetpack' ) }
 								</span>
 							</ModuleToggle>
-							<RefreshJetpackSocialSettingsWrapper
-								shouldRefresh={ ! isActive && this.props.isSavingAnyOption( 'publicize' ) }
-							>
-								{ shouldShowChildElements && hasSocialImageGenerator && (
-									<SocialImageGeneratorSection />
-								) }
-								{ isActive &&
-								isLinked &&
-								useAdminUiV1 &&
-								! this.props.isSavingAnyOption( 'publicize' ) ? (
-									<FormFieldset className="jp-settings__connection-management">
-										<ConnectionManagement />
-									</FormFieldset>
-								) : null }
-							</RefreshJetpackSocialSettingsWrapper>
+							{ shouldShowChildElements && hasSocialImageGenerator && (
+								<SocialImageGeneratorSection />
+							) }
+							{ isActive &&
+							isLinked &&
+							useAdminUiV1 &&
+							! this.props.isSavingAnyOption( 'publicize' ) ? (
+								<FormFieldset className="jp-settings__connection-management">
+									<ConnectionManagement />
+								</FormFieldset>
+							) : null }
 						</SettingsGroup>
 					) }
 					{ isActive && ! useAdminUiV1 && configCard() }
diff --git a/projects/plugins/social/src/js/components/admin-page/index.jsx b/projects/plugins/social/src/js/components/admin-page/index.jsx
index 466fd6342cda9..070053d2b2ed5 100644
--- a/projects/plugins/social/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/social/src/js/components/admin-page/index.jsx
@@ -13,8 +13,8 @@ import {
 	features,
 } from '@automattic/jetpack-publicize-components';
 import { siteHasFeature } from '@automattic/jetpack-script-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useCallback, useEffect, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useState, useCallback } from '@wordpress/element';
 import React from 'react';
 import PricingPage from '../pricing-page';
 import SocialImageGeneratorToggle from '../social-image-generator-toggle';
@@ -32,8 +32,6 @@ const Admin = () => {
 	const showConnectionCard = ! isRegistered || ! isUserConnected;
 	const [ forceDisplayPricingPage, setForceDisplayPricingPage ] = useState( false );
 
-	const refreshJetpackSocialSettings = useDispatch( socialStore ).refreshJetpackSocialSettings;
-
 	const onPricingPageDismiss = useCallback( () => setForceDisplayPricingPage( false ), [] );
 
 	const { isModuleEnabled, showPricingPage, pluginVersion, isUpdatingJetpackSettings } = useSelect(
@@ -48,19 +46,6 @@ const Admin = () => {
 		}
 	);
 
-	const hasEnabledModule = useRef( isModuleEnabled );
-
-	useEffect( () => {
-		if (
-			isModuleEnabled &&
-			! hasEnabledModule.current &&
-			siteHasFeature( features.IMAGE_GENERATOR )
-		) {
-			hasEnabledModule.current = true;
-			refreshJetpackSocialSettings();
-		}
-	}, [ isModuleEnabled, refreshJetpackSocialSettings ] );
-
 	const moduleName = `Jetpack Social ${ pluginVersion }`;
 
 	if ( showConnectionCard ) {

From 074ac9923ab955d24684252fccd350b6747df4b2 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Fri, 25 Oct 2024 18:51:04 +0530
Subject: [PATCH 11/12] Fix unit tests

---
 pnpm-lock.yaml                                                 | 3 +++
 projects/js-packages/publicize-components/src/store/index.ts   | 2 +-
 .../js-packages/publicize-components/src/utils/script-data.ts  | 2 +-
 projects/plugins/jetpack/package.json                          | 1 +
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3cc549f8e88f2..fa07003c1d3e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3767,6 +3767,9 @@ importers:
       '@automattic/jetpack-publicize-components':
         specifier: workspace:*
         version: link:../../js-packages/publicize-components
+      '@automattic/jetpack-script-data':
+        specifier: workspace:*
+        version: link:../../js-packages/script-data
       '@automattic/jetpack-shared-extension-utils':
         specifier: workspace:*
         version: link:../../js-packages/shared-extension-utils
diff --git a/projects/js-packages/publicize-components/src/store/index.ts b/projects/js-packages/publicize-components/src/store/index.ts
index 20ad8f29b6cd7..bec435243270a 100644
--- a/projects/js-packages/publicize-components/src/store/index.ts
+++ b/projects/js-packages/publicize-components/src/store/index.ts
@@ -17,7 +17,7 @@ export const socialStore = createReduxStore( 'jetpack-social', {
 	resolvers: {
 		...sig.resolvers,
 	},
-	initialState: getSocialScriptData().store_initial_state,
+	initialState: getSocialScriptData()?.store_initial_state,
 } );
 
 register( socialStore );
diff --git a/projects/js-packages/publicize-components/src/utils/script-data.ts b/projects/js-packages/publicize-components/src/utils/script-data.ts
index 25561a8b726f2..1a954bc7e7894 100644
--- a/projects/js-packages/publicize-components/src/utils/script-data.ts
+++ b/projects/js-packages/publicize-components/src/utils/script-data.ts
@@ -7,7 +7,7 @@ import { SocialScriptData } from '../types/types';
  * @return {SocialScriptData} The social script data.
  */
 export function getSocialScriptData(): SocialScriptData {
-	return getScriptData().social;
+	return getScriptData()?.social;
 }
 
 /**
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
index f4dcd8af67052..0ed7bffe3f165 100644
--- a/projects/plugins/jetpack/package.json
+++ b/projects/plugins/jetpack/package.json
@@ -57,6 +57,7 @@
 		"@automattic/jetpack-my-jetpack": "workspace:*",
 		"@automattic/jetpack-partner-coupon": "workspace:*",
 		"@automattic/jetpack-publicize-components": "workspace:*",
+		"@automattic/jetpack-script-data": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/popup-monitor": "1.0.2",
 		"@automattic/request-external-access": "1.0.0",

From 1339b0dc379e927e9224993f188bf26231f36dc4 Mon Sep 17 00:00:00 2001
From: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Thu, 31 Oct 2024 16:12:57 +0530
Subject: [PATCH 12/12] use @wordpress/core-data to handle settings

---
 pnpm-lock.yaml                                |  3 ---
 .../js-packages/publicize-components/index.ts |  1 -
 .../publicize-components/package.json         |  1 -
 .../template-picker/button/index.tsx          |  4 ++--
 .../social-image-generator/toggle/index.tsx   |  4 ++--
 .../src/social-store/actions/index.js         |  2 ++
 .../actions/social-image-generator.ts         | 18 +++++++++++++++
 .../src/social-store/constants.ts             |  1 +
 .../src/social-store/selectors/index.js       | 14 +++++++++++
 .../selectors/social-image-generator.ts       | 17 ++++++++++++++
 .../src/social-store/types.ts                 |  9 ++++++++
 .../publicize-components/src/store/index.ts   | 23 -------------------
 .../src/store/social-image-generator.ts       | 14 -----------
 .../publicize-components/src/store/types.ts   | 10 --------
 .../publicize-components/src/types/types.ts   |  8 +++++--
 .../src/class-publicize-script-data.php       | 20 +++++++---------
 .../social-image-generator-toggle/index.tsx   |  7 +++---
 17 files changed, 82 insertions(+), 74 deletions(-)
 create mode 100644 projects/js-packages/publicize-components/src/social-store/actions/social-image-generator.ts
 create mode 100644 projects/js-packages/publicize-components/src/social-store/constants.ts
 create mode 100644 projects/js-packages/publicize-components/src/social-store/selectors/social-image-generator.ts
 delete mode 100644 projects/js-packages/publicize-components/src/store/index.ts
 delete mode 100644 projects/js-packages/publicize-components/src/store/social-image-generator.ts
 delete mode 100644 projects/js-packages/publicize-components/src/store/types.ts

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fa07003c1d3e7..e71673dfa6e8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -975,9 +975,6 @@ importers:
       '@automattic/social-previews':
         specifier: 2.1.0-beta.8
         version: 2.1.0-beta.8(@babel/runtime@7.24.7)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@automattic/wp-data-sync':
-        specifier: workspace:*
-        version: link:../wp-data-sync
       '@wordpress/annotations':
         specifier: 3.9.0
         version: 3.9.0(react@18.3.1)
diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts
index 06748d4548053..e6ea16e810548 100644
--- a/projects/js-packages/publicize-components/index.ts
+++ b/projects/js-packages/publicize-components/index.ts
@@ -37,4 +37,3 @@ export * from './src/components/manage-connections-modal';
 export * from './src/utils/script-data';
 export * from './src/utils/shares-data';
 export * from './src/components/global-modals';
-export * from './src/store';
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
index 6c5b9553274b9..9ecb4c5633c96 100644
--- a/projects/js-packages/publicize-components/package.json
+++ b/projects/js-packages/publicize-components/package.json
@@ -25,7 +25,6 @@
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/popup-monitor": "1.0.2",
 		"@automattic/social-previews": "2.1.0-beta.8",
-		"@automattic/wp-data-sync": "workspace:*",
 		"@wordpress/annotations": "3.9.0",
 		"@wordpress/api-fetch": "7.9.0",
 		"@wordpress/block-editor": "14.4.0",
diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/button/index.tsx b/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/button/index.tsx
index f5887ac5be891..19fb211c88828 100644
--- a/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/button/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/button/index.tsx
@@ -3,7 +3,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import React from 'react';
-import { socialStore } from '../../../../store';
+import { store as socialStore } from '../../../../social-store';
 import TemplatePickerModal from '../modal';
 
 const TemplatePickerButton: React.FC = () => {
@@ -15,7 +15,7 @@ const TemplatePickerButton: React.FC = () => {
 		return {
 			isEnabled: config.enabled,
 			defaultTemplate: config.template,
-			isUpdating: store.getSocialImageGeneratorConfigStatus() === 'updating',
+			isUpdating: store.isSavingSiteSettings(),
 		};
 	}, [] );
 
diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx b/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx
index 08ddde4b5ec57..84d6c46550a6f 100644
--- a/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx
@@ -2,7 +2,7 @@ import { ToggleControl } from '@automattic/jetpack-components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import React from 'react';
-import { socialStore } from '../../../store';
+import { store as socialStore } from '../../../social-store';
 
 type SocialImageGeneratorToggleProps = {
 	/**
@@ -31,7 +31,7 @@ const SocialImageGeneratorToggle: React.FC< SocialImageGeneratorToggleProps > =
 
 		return {
 			isEnabled: store.getSocialImageGeneratorConfig().enabled,
-			isUpdating: store.getSocialImageGeneratorConfigStatus() === 'updating',
+			isUpdating: store.isSavingSiteSettings(),
 		};
 	}, [] );
 
diff --git a/projects/js-packages/publicize-components/src/social-store/actions/index.js b/projects/js-packages/publicize-components/src/social-store/actions/index.js
index 79d3c41f1926c..13679af331eb3 100644
--- a/projects/js-packages/publicize-components/src/social-store/actions/index.js
+++ b/projects/js-packages/publicize-components/src/social-store/actions/index.js
@@ -1,6 +1,7 @@
 import * as connectionData from './connection-data';
 import siteSettingActions from './jetpack-settings';
 import * as shareStatus from './share-status';
+import * as sigActions from './social-image-generator';
 import socialNotesSettings from './social-notes-settings';
 
 const actions = {
@@ -8,6 +9,7 @@ const actions = {
 	...siteSettingActions,
 	...connectionData,
 	...socialNotesSettings,
+	...sigActions,
 };
 
 export default actions;
diff --git a/projects/js-packages/publicize-components/src/social-store/actions/social-image-generator.ts b/projects/js-packages/publicize-components/src/social-store/actions/social-image-generator.ts
new file mode 100644
index 0000000000000..e957eb7bf7ae2
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/social-store/actions/social-image-generator.ts
@@ -0,0 +1,18 @@
+import { store as coreStore } from '@wordpress/core-data';
+import { SIG_SETTINGS_KEY } from '../constants';
+import { SocialImageGeneratorConfig } from '../types';
+
+/**
+ * Saves the Social Image Generator settings.
+ *
+ * @param {Partial< SocialImageGeneratorConfig >} data - The data to save.
+ *
+ * @return {Function} A thunk.
+ */
+export function updateSocialImageGeneratorConfig( data: Partial< SocialImageGeneratorConfig > ) {
+	return async function ( { registry } ) {
+		const { saveSite } = registry.dispatch( coreStore );
+
+		await saveSite( { [ SIG_SETTINGS_KEY ]: data } );
+	};
+}
diff --git a/projects/js-packages/publicize-components/src/social-store/constants.ts b/projects/js-packages/publicize-components/src/social-store/constants.ts
new file mode 100644
index 0000000000000..572623ced68e0
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/social-store/constants.ts
@@ -0,0 +1 @@
+export const SIG_SETTINGS_KEY = 'jetpack_social_image_generator_settings';
diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/index.js b/projects/js-packages/publicize-components/src/social-store/selectors/index.js
index 11b3420c1a852..e892cc4b1b425 100644
--- a/projects/js-packages/publicize-components/src/social-store/selectors/index.js
+++ b/projects/js-packages/publicize-components/src/social-store/selectors/index.js
@@ -1,13 +1,27 @@
+import { store as coreStore } from '@wordpress/core-data';
+import { createRegistrySelector } from '@wordpress/data';
 import * as connectionDataSelectors from './connection-data';
 import jetpackSettingSelectors from './jetpack-settings';
 import * as shareStatusSelectors from './share-status';
 import siteDataSelectors from './site-data';
+import * as sigSelectors from './social-image-generator';
+
+/**
+ * Returns whether the site settings are being saved.
+ *
+ * @type {() => boolean} Whether the site settings are being saved.
+ */
+export const isSavingSiteSettings = createRegistrySelector( select => () => {
+	return select( coreStore ).isSavingEntityRecord( 'root', 'site', undefined );
+} );
 
 const selectors = {
 	...siteDataSelectors,
 	...connectionDataSelectors,
 	...jetpackSettingSelectors,
 	...shareStatusSelectors,
+	isSavingSiteSettings,
+	...sigSelectors,
 };
 
 export default selectors;
diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/social-image-generator.ts b/projects/js-packages/publicize-components/src/social-store/selectors/social-image-generator.ts
new file mode 100644
index 0000000000000..7b0dbd57fec82
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/social-store/selectors/social-image-generator.ts
@@ -0,0 +1,17 @@
+import { store as coreStore } from '@wordpress/core-data';
+import { createRegistrySelector } from '@wordpress/data';
+import { getSocialScriptData } from '../../utils';
+import { SIG_SETTINGS_KEY } from '../constants';
+import { SocialImageGeneratorConfig, SocialSettingsFields } from '../types';
+
+/**
+ * Returns the Social Image Generator settings for the current site.
+ */
+export const getSocialImageGeneratorConfig = createRegistrySelector( select => () => {
+	const { getSite } = select( coreStore );
+
+	const settings = getSite( undefined, { _fields: SIG_SETTINGS_KEY } ) as SocialSettingsFields;
+
+	// If the settings are not available in the store yet, use the default settings.
+	return settings?.[ SIG_SETTINGS_KEY ] ?? getSocialScriptData().settings.socialImageGenerator;
+} ) as ( state: object ) => SocialImageGeneratorConfig;
diff --git a/projects/js-packages/publicize-components/src/social-store/types.ts b/projects/js-packages/publicize-components/src/social-store/types.ts
index b0ed6db4cf0c7..0d0d944f5e81f 100644
--- a/projects/js-packages/publicize-components/src/social-store/types.ts
+++ b/projects/js-packages/publicize-components/src/social-store/types.ts
@@ -87,6 +87,15 @@ export interface KeyringResult extends KeyringAdditionalUser {
 	status: ConnectionStatus;
 }
 
+export type SocialImageGeneratorConfig = {
+	enabled: boolean;
+	template?: string;
+};
+
+export type SocialSettingsFields = {
+	jetpack_social_image_generator_settings: SocialImageGeneratorConfig;
+};
+
 declare global {
 	interface Window {
 		jetpackSocialInitialState?: SocialStoreState & {
diff --git a/projects/js-packages/publicize-components/src/store/index.ts b/projects/js-packages/publicize-components/src/store/index.ts
deleted file mode 100644
index bec435243270a..0000000000000
--- a/projects/js-packages/publicize-components/src/store/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createReduxStore, register, combineReducers } from '@wordpress/data';
-import { getSocialScriptData } from '../utils';
-import sig from './social-image-generator';
-
-export const socialStore = createReduxStore( 'jetpack-social', {
-	reducer: combineReducers( {
-		settings: combineReducers( {
-			socialImageGenerator: sig.reducer,
-		} ),
-	} ),
-	actions: {
-		...sig.actions,
-	},
-	selectors: {
-		...sig.selectors,
-	},
-	resolvers: {
-		...sig.resolvers,
-	},
-	initialState: getSocialScriptData()?.store_initial_state,
-} );
-
-register( socialStore );
diff --git a/projects/js-packages/publicize-components/src/store/social-image-generator.ts b/projects/js-packages/publicize-components/src/store/social-image-generator.ts
deleted file mode 100644
index 2a94a183c8be5..0000000000000
--- a/projects/js-packages/publicize-components/src/store/social-image-generator.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createWpDataSync } from '@automattic/wp-data-sync';
-import { SocialImageGeneratorConfig, SocialStoreState } from './types';
-
-const key = 'jetpack_social_image_generator_settings';
-
-export default createWpDataSync< SocialImageGeneratorConfig, 'socialImageGeneratorConfig' >(
-	'socialImageGeneratorConfig',
-	{
-		endpoint: `/wp/v2/settings?_fields=${ key }`,
-		getSliceFromState: ( { settings }: SocialStoreState ) => settings.socialImageGenerator,
-		extractFetchResponse: response => response[ key ],
-		prepareUpdateRequest: data => ( { [ key ]: data } ),
-	}
-);
diff --git a/projects/js-packages/publicize-components/src/store/types.ts b/projects/js-packages/publicize-components/src/store/types.ts
deleted file mode 100644
index e77cec7fbceb6..0000000000000
--- a/projects/js-packages/publicize-components/src/store/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type SocialImageGeneratorConfig = {
-	enabled: boolean;
-	template?: string;
-};
-
-export type SocialStoreState = {
-	settings: {
-		socialImageGenerator: { data: SocialImageGeneratorConfig };
-	};
-};
diff --git a/projects/js-packages/publicize-components/src/types/types.ts b/projects/js-packages/publicize-components/src/types/types.ts
index 126bb278441be..ca11ea43ce65b 100644
--- a/projects/js-packages/publicize-components/src/types/types.ts
+++ b/projects/js-packages/publicize-components/src/types/types.ts
@@ -1,4 +1,4 @@
-import { SocialStoreState } from '../store/types';
+import { SocialImageGeneratorConfig } from '../social-store/types';
 
 export interface SocialUrls {
 	connectionsManagementPage: string;
@@ -31,6 +31,10 @@ export interface ApiPaths {
 	resharePost: string;
 }
 
+export type SocialSettings = {
+	socialImageGenerator: SocialImageGeneratorConfig;
+};
+
 export interface SocialScriptData {
 	api_paths: ApiPaths;
 	is_publicize_enabled: boolean;
@@ -38,7 +42,7 @@ export interface SocialScriptData {
 	supported_services: Array< ConnectionService >;
 	shares_data: SharesData;
 	urls: SocialUrls;
-	store_initial_state: SocialStoreState;
+	settings: SocialSettings;
 }
 
 type JetpackSettingsSelectors = {
diff --git a/projects/packages/publicize/src/class-publicize-script-data.php b/projects/packages/publicize/src/class-publicize-script-data.php
index e0fdd57b97be6..d28334c002766 100644
--- a/projects/packages/publicize/src/class-publicize-script-data.php
+++ b/projects/packages/publicize/src/class-publicize-script-data.php
@@ -109,30 +109,26 @@ public static function get_admin_script_data() {
 		return array_merge(
 			$basic_data,
 			array(
-				'api_paths'           => self::get_api_paths(),
-				'supported_services'  => self::get_supported_services(),
-				'shares_data'         => self::get_shares_data(),
-				'urls'                => self::get_urls(),
-				'store_initial_state' => self::get_store_initial_state(),
+				'api_paths'          => self::get_api_paths(),
+				'supported_services' => self::get_supported_services(),
+				'shares_data'        => self::get_shares_data(),
+				'urls'               => self::get_urls(),
+				'settings'           => self::get_social_settings(),
 			)
 		);
 	}
 
 	/**
-	 * Get initial state for social store.
+	 * Get the social settings.
 	 *
 	 * @return array
 	 */
-	public static function get_store_initial_state() {
+	public static function get_social_settings() {
 
 		$settings = ( new Settings() );
 
 		return array(
-			'settings' => array(
-				'socialImageGenerator' => array(
-					'data' => $settings->get_image_generator_settings(),
-				),
-			),
+			'socialImageGenerator' => $settings->get_image_generator_settings(),
 		);
 	}
 
diff --git a/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx b/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx
index 18f8f10480906..9c87fdc72d722 100644
--- a/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx
+++ b/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx
@@ -1,7 +1,7 @@
 import { Button, Text, useBreakpointMatch } from '@automattic/jetpack-components';
 import {
-	socialStore,
 	SocialImageGeneratorTemplatePickerModal as TemplatePickerModal,
+	store as socialStore,
 } from '@automattic/jetpack-publicize-components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
@@ -21,13 +21,12 @@ const SocialImageGeneratorToggle: React.FC< SocialImageGeneratorToggleProps > =
 	disabled,
 } ) => {
 	const { isEnabled, isUpdating, defaultTemplate } = useSelect( select => {
-		const store = select( socialStore );
+		const config = select( socialStore ).getSocialImageGeneratorConfig();
 
-		const config = store.getSocialImageGeneratorConfig();
 		return {
 			isEnabled: config.enabled,
 			defaultTemplate: config.template,
-			isUpdating: store.getSocialImageGeneratorConfigStatus() === 'updating',
+			isUpdating: select( socialStore ).isSavingSiteSettings(),
 		};
 	}, [] );