From 48f074e41b6f7ef342dc1aada25bfa3041e8b402 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 25 Oct 2024 01:52:54 -0700 Subject: [PATCH] Initial State: Replace `isSocialImageGeneratorAvailable` with feature check (#39836) * Initial State: Replace isSocialImageGeneratorAvailable with feature check * Use constants instead of strings --- .../changelog/update-social-sig-feature-check | 5 +++ .../js-packages/publicize-components/index.ts | 1 + .../src/hooks/use-post-can-use-sig/index.ts | 21 ++++++++++ .../src/hooks/use-publicize-config/index.js | 9 ----- .../social-image-generator-settings.js | 1 - .../publicize-components/src/types/types.ts | 1 - .../src/utils/constants.ts | 1 + .../publicize-components/src/utils/index.js | 1 + .../changelog/update-social-sig-feature-check | 5 +++ .../extensions/plugins/publicize/index.js | 8 ++-- .../plugins/publicize/pre-publish.js | 6 ++- .../changelog/update-social-sig-feature-check | 5 +++ .../src/js/components/admin-page/index.jsx | 39 ++++++++++--------- .../social/src/js/components/types/types.ts | 1 - projects/plugins/social/src/js/editor.js | 10 +++-- 15 files changed, 73 insertions(+), 41 deletions(-) create mode 100644 projects/js-packages/publicize-components/changelog/update-social-sig-feature-check create mode 100644 projects/js-packages/publicize-components/src/hooks/use-post-can-use-sig/index.ts create mode 100644 projects/plugins/jetpack/changelog/update-social-sig-feature-check create mode 100644 projects/plugins/social/changelog/update-social-sig-feature-check diff --git a/projects/js-packages/publicize-components/changelog/update-social-sig-feature-check b/projects/js-packages/publicize-components/changelog/update-social-sig-feature-check new file mode 100644 index 0000000000000..96580bab97529 --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/update-social-sig-feature-check @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: Initial state: Migrated isSocialImageGeneratorAvailable to feature check + + diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts index 36f1fab810ff0..f10e54078ec65 100644 --- a/projects/js-packages/publicize-components/index.ts +++ b/projects/js-packages/publicize-components/index.ts @@ -32,6 +32,7 @@ export * from './src/components/share-post'; export * from './src/hooks/use-sync-post-data-to-store'; export * from './src/hooks/use-saving-post'; export * from './src/hooks/use-post-meta'; +export * from './src/hooks/use-post-can-use-sig'; export * from './src/components/share-buttons'; export * from './src/components/manage-connections-modal'; export * from './src/utils/script-data'; diff --git a/projects/js-packages/publicize-components/src/hooks/use-post-can-use-sig/index.ts b/projects/js-packages/publicize-components/src/hooks/use-post-can-use-sig/index.ts new file mode 100644 index 0000000000000..5602ca0709d00 --- /dev/null +++ b/projects/js-packages/publicize-components/src/hooks/use-post-can-use-sig/index.ts @@ -0,0 +1,21 @@ +import { siteHasFeature } from '@automattic/jetpack-script-data'; +import { useSelect } from '@wordpress/data'; +import { store as editorStore } from '@wordpress/editor'; +import { features } from '../../utils/constants'; + +/** + * When a post can use the Social Image Generator (SIG). + * + * @return {boolean} Whether the post can use the Social Image Generator. + */ +export function usePostCanUseSig() { + const isJetpackSocialNote = useSelect( select => { + const currentPostType = select( editorStore ) + // @ts-expect-error -- `@wordpress/editor` is a nightmare to work with TypeScript - getCurrentPostType exists on the editor store + .getCurrentPostType(); + + return 'jetpack-social-note' === currentPostType; + }, [] ); + + return ! isJetpackSocialNote && siteHasFeature( features.IMAGE_GENERATOR ); +} diff --git a/projects/js-packages/publicize-components/src/hooks/use-publicize-config/index.js b/projects/js-packages/publicize-components/src/hooks/use-publicize-config/index.js index e7827d27afd78..d55353f871995 100644 --- a/projects/js-packages/publicize-components/src/hooks/use-publicize-config/index.js +++ b/projects/js-packages/publicize-components/src/hooks/use-publicize-config/index.js @@ -25,7 +25,6 @@ export default function usePublicizeConfig() { const isRePublicizeFeatureAvailable = isJetpackSite || getJetpackExtensionAvailability( republicizeFeatureName )?.available; const isPostPublished = useSelect( select => select( editorStore ).isCurrentPostPublished(), [] ); - const currentPostType = useSelect( select => select( editorStore ).getCurrentPostType(), [] ); const { isUserConnected } = useConnection(); const { urls } = getSocialScriptData(); @@ -80,11 +79,6 @@ export default function usePublicizeConfig() { */ const hidePublicizeFeature = isPostPublished && ! isRePublicizeFeatureAvailable; - /**\ - * Returns true if the post type is a Jetpack Social Note. - */ - const isJetpackSocialNote = 'jetpack-social-note' === currentPostType; - const needsUserConnection = ! isUserConnected && ! isSimpleSite(); return { @@ -96,11 +90,8 @@ export default function usePublicizeConfig() { isRePublicizeUpgradableViaUpsell, hidePublicizeFeature, isPostAlreadyShared, - isSocialImageGeneratorAvailable: - !! getJetpackData()?.social?.isSocialImageGeneratorAvailable && ! isJetpackSocialNote, isSocialImageGeneratorEnabled: !! getJetpackData()?.social?.isSocialImageGeneratorEnabled, connectionsPageUrl: urls.connectionsManagementPage, - isJetpackSocialNote, needsUserConnection, }; } 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 index 25cf39b9dedd8..c7ea88783996c 100644 --- 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 @@ -1,6 +1,5 @@ const socialImageGeneratorSettingsSelectors = { getSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings, - isSocialImageGeneratorAvailable: state => state.socialImageGeneratorSettings.available, isSocialImageGeneratorEnabled: state => state.socialImageGeneratorSettings.enabled, isUpdatingSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings.isUpdating, getSocialImageGeneratorDefaultTemplate: state => state.socialImageGeneratorSettings.template, diff --git a/projects/js-packages/publicize-components/src/types/types.ts b/projects/js-packages/publicize-components/src/types/types.ts index 041b0bd18f8f4..667f33f90a64d 100644 --- a/projects/js-packages/publicize-components/src/types/types.ts +++ b/projects/js-packages/publicize-components/src/types/types.ts @@ -67,7 +67,6 @@ type SocialImageGeneratorSettingsSelectors = { template: string; }; }; - isSocialImageGeneratorAvailable: () => boolean; isSocialImageGeneratorEnabled: () => boolean; isUpdatingSocialImageGeneratorSettings: () => boolean; getSocialImageGeneratorDefaultTemplate: () => string; diff --git a/projects/js-packages/publicize-components/src/utils/constants.ts b/projects/js-packages/publicize-components/src/utils/constants.ts index 9ac40038d75b8..49cedf5633358 100644 --- a/projects/js-packages/publicize-components/src/utils/constants.ts +++ b/projects/js-packages/publicize-components/src/utils/constants.ts @@ -1,3 +1,4 @@ export const features = { ENHANCED_PUBLISHING: 'social-enhanced-publishing', + IMAGE_GENERATOR: 'social-image-generator', }; diff --git a/projects/js-packages/publicize-components/src/utils/index.js b/projects/js-packages/publicize-components/src/utils/index.js index 6e0284f7b9870..bfc461305ff8a 100644 --- a/projects/js-packages/publicize-components/src/utils/index.js +++ b/projects/js-packages/publicize-components/src/utils/index.js @@ -3,3 +3,4 @@ export * from './get-supported-additional-connections'; export * from './request-external-access'; export * from './types'; export * from './script-data'; +export * from './constants'; diff --git a/projects/plugins/jetpack/changelog/update-social-sig-feature-check b/projects/plugins/jetpack/changelog/update-social-sig-feature-check new file mode 100644 index 0000000000000..82aa474998f99 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-social-sig-feature-check @@ -0,0 +1,5 @@ +Significance: patch +Type: other +Comment: Initial state: Migrated isSocialImageGeneratorAvailable to feature check + + diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/index.js b/projects/plugins/jetpack/extensions/plugins/publicize/index.js index 0a73e5629f843..5d705f0638dd2 100644 --- a/projects/plugins/jetpack/extensions/plugins/publicize/index.js +++ b/projects/plugins/jetpack/extensions/plugins/publicize/index.js @@ -10,7 +10,7 @@ import { PublicizePanel, SocialImageGeneratorPanel, - usePublicizeConfig, + usePostCanUseSig, PostPublishPanels, GlobalModals, } from '@automattic/jetpack-publicize-components'; @@ -29,7 +29,7 @@ export const name = 'publicize'; const PublicizeSettings = () => { const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } = useModuleStatus( name ); - const { isSocialImageGeneratorAvailable } = usePublicizeConfig(); + const postCanUseSig = usePostCanUseSig(); let children = null; let panels = null; @@ -50,12 +50,12 @@ const PublicizeSettings = () => { - { isSocialImageGeneratorAvailable && } + { postCanUseSig && } ); panels = ( <> - + diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/pre-publish.js b/projects/plugins/jetpack/extensions/plugins/publicize/pre-publish.js index e0ba6ac7cbeb2..559c9edff032d 100644 --- a/projects/plugins/jetpack/extensions/plugins/publicize/pre-publish.js +++ b/projects/plugins/jetpack/extensions/plugins/publicize/pre-publish.js @@ -3,16 +3,18 @@ import { SocialImageGeneratorPanel, useSyncPostDataToStore, useSocialMediaConnections, + usePostCanUseSig, } from '@automattic/jetpack-publicize-components'; import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils'; import { PluginPrePublishPanel } from '@wordpress/edit-post'; import { __ } from '@wordpress/i18n'; import UpsellNotice from './components/upsell'; -const PrePublishPanels = ( { isSocialImageGeneratorAvailable } ) => { +const PrePublishPanels = () => { useSyncPostDataToStore(); const { hasEnabledConnections } = useSocialMediaConnections(); + const postCanUseSig = usePostCanUseSig(); return ( <> @@ -31,7 +33,7 @@ const PrePublishPanels = ( { isSocialImageGeneratorAvailable } ) => { - { isSocialImageGeneratorAvailable && ( + { postCanUseSig && ( { const onPricingPageDismiss = useCallback( () => setForceDisplayPricingPage( false ), [] ); - const { - isModuleEnabled, - showPricingPage, - pluginVersion, - isSocialImageGeneratorAvailable, - isUpdatingJetpackSettings, - } = useSelect( select => { - const store = select( socialStore ); - return { - isModuleEnabled: store.isModuleEnabled(), - showPricingPage: store.showPricingPage(), - pluginVersion: store.getPluginVersion(), - isSocialImageGeneratorAvailable: store.isSocialImageGeneratorAvailable(), - isUpdatingJetpackSettings: store.isUpdatingJetpackSettings(), - }; - } ); + const { isModuleEnabled, showPricingPage, pluginVersion, isUpdatingJetpackSettings } = useSelect( + select => { + const store = select( socialStore ); + return { + isModuleEnabled: store.isModuleEnabled(), + showPricingPage: store.showPricingPage(), + pluginVersion: store.getPluginVersion(), + isUpdatingJetpackSettings: store.isUpdatingJetpackSettings(), + }; + } + ); const hasEnabledModule = useRef( isModuleEnabled ); useEffect( () => { - if ( isModuleEnabled && ! hasEnabledModule.current && isSocialImageGeneratorAvailable ) { + if ( + isModuleEnabled && + ! hasEnabledModule.current && + siteHasFeature( features.IMAGE_GENERATOR ) + ) { hasEnabledModule.current = true; refreshJetpackSocialSettings(); } - }, [ isModuleEnabled, isSocialImageGeneratorAvailable, refreshJetpackSocialSettings ] ); + }, [ isModuleEnabled, refreshJetpackSocialSettings ] ); const moduleName = `Jetpack Social ${ pluginVersion }`; @@ -93,7 +94,7 @@ const Admin = () => { { isModuleEnabled && } - { isModuleEnabled && isSocialImageGeneratorAvailable && ( + { isModuleEnabled && siteHasFeature( features.IMAGE_GENERATOR ) && ( ) } diff --git a/projects/plugins/social/src/js/components/types/types.ts b/projects/plugins/social/src/js/components/types/types.ts index a7047318cfcd5..bd349bbd106f3 100644 --- a/projects/plugins/social/src/js/components/types/types.ts +++ b/projects/plugins/social/src/js/components/types/types.ts @@ -29,7 +29,6 @@ type SocialImageGeneratorSettingsSelectors = { template: string; }; }; - isSocialImageGeneratorAvailable: () => boolean; isSocialImageGeneratorEnabled: () => boolean; isUpdatingSocialImageGeneratorSettings: () => boolean; getSocialImageGeneratorDefaultTemplate: () => string; diff --git a/projects/plugins/social/src/js/editor.js b/projects/plugins/social/src/js/editor.js index 2966d8d49ae34..ed12f1e5c4f18 100644 --- a/projects/plugins/social/src/js/editor.js +++ b/projects/plugins/social/src/js/editor.js @@ -9,6 +9,7 @@ import { useSyncPostDataToStore, PostPublishPanels, GlobalModals, + usePostCanUseSig, } from '@automattic/jetpack-publicize-components'; import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils'; import { PanelBody } from '@wordpress/components'; @@ -51,8 +52,9 @@ const JetpackSocialSidebar = () => { const closeModal = useCallback( () => setIsModalOpened( false ), [] ); const { hasConnections, hasEnabledConnections } = useSocialMediaConnections(); - const { isPublicizeEnabled, hidePublicizeFeature, isSocialImageGeneratorAvailable } = - usePublicizeConfig(); + const { isPublicizeEnabled, hidePublicizeFeature } = usePublicizeConfig(); + const postCanUseSig = usePostCanUseSig(); + const isPostPublished = useSelect( select => select( editorStore ).isCurrentPostPublished(), [] ); const PanelDescription = () => ( { - { isSocialImageGeneratorAvailable && } + { postCanUseSig && } @@ -95,7 +97,7 @@ const JetpackSocialSidebar = () => { - { isSocialImageGeneratorAvailable && ( + { postCanUseSig && (