diff --git a/projects/js-packages/publicize-components/src/components/form/index.tsx b/projects/js-packages/publicize-components/src/components/form/index.tsx
index d659d4afee780..902abd5020b56 100644
--- a/projects/js-packages/publicize-components/src/components/form/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/form/index.tsx
@@ -7,14 +7,15 @@
*/
import { Disabled, PanelRow } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
import { Fragment } from '@wordpress/element';
-import { usePublicizeConfig } from '../../..';
+import { getSocialScriptData, usePublicizeConfig } from '../../..';
import useAttachedMedia from '../../hooks/use-attached-media';
import useFeaturedImage from '../../hooks/use-featured-image';
import useMediaDetails from '../../hooks/use-media-details';
import useMediaRestrictions from '../../hooks/use-media-restrictions';
import useSocialMediaConnections from '../../hooks/use-social-media-connections';
-import { getSocialScriptData } from '../../utils/script-data';
+import { store as socialStore } from '../../social-store';
import { ThemedConnectionsModal as ManageConnectionsModal } from '../manage-connections-modal';
import { SocialPostModal } from '../social-post-modal/modal';
import { ConnectionNotice } from './connection-notice';
@@ -46,6 +47,12 @@ export default function PublicizeForm() {
// fix the issues with uploading an image.
attachedMedia.length > 0 ||
( Object.keys( validationErrors ).length !== 0 && ! isConvertible ) );
+ const { featureFlags } = useSelect( select => {
+ const store = select( socialStore );
+ return {
+ featureFlags: store.featureFlags(),
+ };
+ }, [] );
const Wrapper = isPublicizeDisabledBySitePlan ? Disabled : Fragment;
@@ -62,7 +69,7 @@ export default function PublicizeForm() {
- { feature_flags.useEditorPreview && isPublicizeEnabled ? : null }
+ { featureFlags.useEditorPreview && isPublicizeEnabled ? : null }
) : null }
diff --git a/projects/js-packages/publicize-components/src/components/global-modals/index.tsx b/projects/js-packages/publicize-components/src/components/global-modals/index.tsx
index faba6b69ac658..a391014236a19 100644
--- a/projects/js-packages/publicize-components/src/components/global-modals/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/global-modals/index.tsx
@@ -1,8 +1,9 @@
-import { getSocialScriptData } from '../../utils/script-data';
+import { useSelect } from '@wordpress/data';
+import { store as socialStore } from '../../social-store';
import { ThemedShareStatusModal as ShareStatusModal } from '../share-status';
export const GlobalModals = () => {
- const { feature_flags } = getSocialScriptData();
+ const featureFlags = useSelect( select => select( socialStore ).featureFlags(), [] );
- return <>{ feature_flags.useShareStatus ? : null };
+ return <>{ featureFlags.useShareStatus ? : null };
};
diff --git a/projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx b/projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx
index 45e431f5fdc7e..158be6c8cbac9 100644
--- a/projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx
@@ -1,14 +1,12 @@
import { ThemeProvider } from '@automattic/jetpack-components';
-import { getSocialScriptData } from '../../utils/script-data';
import PostPublishManualSharing from '../post-publish-manual-sharing';
import PostPublishReviewPrompt from '../post-publish-review-prompt';
import { PostPublishShareStatus } from '../post-publish-share-status';
const PostPublishPanels = () => {
- const { feature_flags } = getSocialScriptData();
return (
- { feature_flags.useShareStatus ? : null }
+
diff --git a/projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx b/projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx
index 304493afaf73f..72a6565312f65 100644
--- a/projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx
@@ -13,11 +13,14 @@ import { ShareStatus } from './share-status';
*/
export function PostPublishShareStatus() {
const { isPublicizeEnabled } = usePostMeta();
- const { postId, isPostPublised } = useSelect( select => {
+ const { featureFlags, postId, isPostPublised } = useSelect( select => {
+ const store = select( socialStore );
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- `@wordpress/editor` is a nightmare to work with TypeScript
const _editorStore = select( editorStore ) as any;
return {
+ featureFlags: store.featureFlags(),
postId: _editorStore.getCurrentPostId(),
isPostPublised: _editorStore.isCurrentPostPublished(),
};
@@ -29,7 +32,7 @@ export function PostPublishShareStatus() {
const willPostBeShared = isPublicizeEnabled && enabledConnections.length > 0;
- if ( ! willPostBeShared || ! isPostPublised ) {
+ if ( ! featureFlags.useShareStatus || ! willPostBeShared || ! isPostPublised ) {
return null;
}
diff --git a/projects/js-packages/publicize-components/src/components/share-status/modal-trigger.tsx b/projects/js-packages/publicize-components/src/components/share-status/modal-trigger.tsx
index ef9b8085618a2..df1a3373f21f9 100644
--- a/projects/js-packages/publicize-components/src/components/share-status/modal-trigger.tsx
+++ b/projects/js-packages/publicize-components/src/components/share-status/modal-trigger.tsx
@@ -1,9 +1,8 @@
import { Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { forwardRef } from 'react';
import { store as socialStore } from '../../social-store';
-import { getSocialScriptData } from '../../utils/script-data';
import styles from './styles.module.scss';
import type { ButtonProps } from '@wordpress/components/build-types/button/types';
@@ -17,9 +16,10 @@ type ModalTriggerProps = ButtonProps & {
export const ModalTrigger = forwardRef(
( { withWrapper = false, ...props }: ModalTriggerProps, ref: unknown ) => {
const { openShareStatusModal } = useDispatch( socialStore );
- const { feature_flags } = getSocialScriptData();
- if ( ! feature_flags.useShareStatus ) {
+ const featureFlags = useSelect( select => select( socialStore ).featureFlags(), [] );
+
+ if ( ! featureFlags.useShareStatus ) {
return null;
}
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 9f8d335a59bbc..53f86fd31764e 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
@@ -13,6 +13,7 @@ const reducer = combineReducers( {
shareStatus,
hasPaidPlan: ( state = false ) => state,
userConnectionUrl: ( state = '' ) => state,
+ featureFlags: ( state = false ) => state,
hasPaidFeatures: ( state = false ) => state,
} );
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 66d134aee2229..58f547f87bab8 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
@@ -11,6 +11,7 @@ const selectors = {
...socialImageGeneratorSettingsSelectors,
...shareStatusSelectors,
userConnectionUrl: state => state.userConnectionUrl,
+ featureFlags: state => state.featureFlags,
hasPaidFeatures: state => state.hasPaidFeatures,
};
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 8c0049945172a..40ab63027a49f 100644
--- a/projects/js-packages/publicize-components/src/social-store/types.ts
+++ b/projects/js-packages/publicize-components/src/social-store/types.ts
@@ -61,6 +61,7 @@ export type SocialStoreState = {
hasPaidPlan?: boolean;
// on Jetack Social admin page
jetpackSettings?: JetpackSettings;
+ featureFlags?: Record< string, boolean >;
shareStatus?: ShareStatus;
};
diff --git a/projects/js-packages/publicize-components/src/types/types.ts b/projects/js-packages/publicize-components/src/types/types.ts
index 44b6c00c8342e..58c8fe8f50183 100644
--- a/projects/js-packages/publicize-components/src/types/types.ts
+++ b/projects/js-packages/publicize-components/src/types/types.ts
@@ -6,8 +6,6 @@ export type SharesData = {
export interface FeatureFlags {
useAdminUiV1: boolean;
- useEditorPreview: boolean;
- useShareStatus: boolean;
}
export type ConnectionService = {
diff --git a/projects/packages/publicize/src/class-publicize-script-data.php b/projects/packages/publicize/src/class-publicize-script-data.php
index 053ad74a938ee..96f4d3d4934b0 100644
--- a/projects/packages/publicize/src/class-publicize-script-data.php
+++ b/projects/packages/publicize/src/class-publicize-script-data.php
@@ -120,9 +120,7 @@ public static function get_admin_script_data() {
*/
public static function get_feature_flags() {
$variable_to_feature_map = array(
- 'useAdminUiV1' => 'connections-management',
- 'useEditorPreview' => 'editor-preview',
- 'useShareStatus' => 'share-status',
+ 'useAdminUiV1' => 'connections-management',
);
$feature_flags = array();