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