diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 81499ea8b1346..0ea2096b5ac01 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/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/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts index f10e54078ec65..e6ea16e810548 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/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..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,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 { store as socialStore } from '../../../../social-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.isSavingSiteSettings(), }; }, [] ); - 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..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,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 { store as socialStore } from '../../../social-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.isSavingSiteSettings(), }; }, [] ); - 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 ( } 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/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..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,15 +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 socialImageGeneratorSettingsSelectors from './social-image-generator-settings'; +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, - ...socialImageGeneratorSettingsSelectors, ...shareStatusSelectors, + isSavingSiteSettings, + ...sigSelectors, }; export default selectors; 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/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/types/types.ts b/projects/js-packages/publicize-components/src/types/types.ts index 667f33f90a64d..ca11ea43ce65b 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 { SocialImageGeneratorConfig } from '../social-store/types'; + export interface SocialUrls { connectionsManagementPage: string; } @@ -29,6 +31,10 @@ export interface ApiPaths { resharePost: string; } +export type SocialSettings = { + socialImageGenerator: SocialImageGeneratorConfig; +}; + export interface SocialScriptData { api_paths: ApiPaths; is_publicize_enabled: boolean; @@ -36,6 +42,7 @@ export interface SocialScriptData { supported_services: Array< ConnectionService >; shares_data: SharesData; urls: SocialUrls; + settings: SocialSettings; } type JetpackSettingsSelectors = { @@ -59,19 +66,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. * @@ -79,5 +73,4 @@ type SocialImageGeneratorSettingsSelectors = { */ export type SocialStoreSelectors = JetpackSettingsSelectors & ConnectionDataSelectors & - SiteDataSelectors & - SocialImageGeneratorSettingsSelectors; + SiteDataSelectors; 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/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/packages/publicize/src/class-publicize-script-data.php b/projects/packages/publicize/src/class-publicize-script-data.php index ff841f2da2545..d28334c002766 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; @@ -112,13 +113,25 @@ public static function get_admin_script_data() { 'supported_services' => self::get_supported_services(), 'shares_data' => self::get_shares_data(), 'urls' => self::get_urls(), - /** - * 'store' => self::get_store_script_data(), - */ + 'settings' => self::get_social_settings(), ) ); } + /** + * Get the social settings. + * + * @return array + */ + public static function get_social_settings() { + + $settings = ( new Settings() ); + + return array( + 'socialImageGenerator' => $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. 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..38863f5c6fde8 100644 --- a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx +++ b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx @@ -1,8 +1,6 @@ import { getRedirectUrl } from '@automattic/jetpack-components'; -import { - ConnectionManagement, - RefreshJetpackSocialSettingsWrapper, -} 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'; import Card from 'components/card'; @@ -48,7 +46,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, @@ -149,21 +147,17 @@ export const Publicize = withModuleSettingsFormHelpers( { __( 'Automatically share your posts to social networks', 'jetpack' ) } - - { shouldShowChildElements && hasSocialImageGenerator && ( - - ) } - { isActive && - isLinked && - useAdminUiV1 && - ! this.props.isSavingAnyOption( 'publicize' ) ? ( - - - - ) : null } - + { shouldShowChildElements && hasSocialImageGenerator && ( + + ) } + { isActive && + isLinked && + useAdminUiV1 && + ! this.props.isSavingAnyOption( 'publicize' ) ? ( + + + + ) : null } ) } { isActive && ! useAdminUiV1 && configCard() } 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/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", 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 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 ) { 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..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,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 { + SocialImageGeneratorTemplatePickerModal as TemplatePickerModal, + store as socialStore, +} 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,31 @@ 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 config = select( socialStore ).getSocialImageGeneratorConfig(); + return { - isEnabled: store.isSocialImageGeneratorEnabled(), - isUpdating: store.isUpdatingSocialImageGeneratorSettings(), - defaultTemplate: store.getSocialImageGeneratorDefaultTemplate(), + isEnabled: config.enabled, + defaultTemplate: config.template, + isUpdating: select( socialStore ).isSavingSiteSettings(), }; }, [] ); - 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 +77,8 @@ const SocialImageGeneratorToggle: React.FC< SocialImageGeneratorToggleProps > = ) } 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;