use @wordpress/core-data to handle settings

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';

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",

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(),
 		};
 	}, [] );
 

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(),
 		};
 	}, [] );
 

projects/js-packages/publicize-components/src/social-store/actions/index.js

@@ -1,13 +1,15 @@
 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 = {
 	...shareStatus,
 	...siteSettingActions,
 	...connectionData,
 	...socialNotesSettings,
+	...sigActions,
 };
 
 export default actions;

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 } );
+	};
+}

projects/js-packages/publicize-components/src/social-store/constants.ts

@@ -0,0 +1 @@
+export const SIG_SETTINGS_KEY = 'jetpack_social_image_generator_settings';

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;

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;

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 & {

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,14 +31,18 @@ export interface ApiPaths {
 	resharePost: string;
 }
 
+export type SocialSettings = {
+	socialImageGenerator: SocialImageGeneratorConfig;
+};
+
 export interface SocialScriptData {
 	api_paths: ApiPaths;
 	is_publicize_enabled: boolean;
 	feature_flags: FeatureFlags;
 	supported_services: Array< ConnectionService >;
 	shares_data: SharesData;
 	urls: SocialUrls;
-	store_initial_state: SocialStoreState;
+	settings: SocialSettings;
 }
 
 type JetpackSettingsSelectors = {

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(),
 		);
 	}
 

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(),
 		};
 	}, [] );