Add feature flag management for social and useEditorPreview flag

projects/js-packages/publicize-components/src/components/form/index.tsx

@@ -49,11 +49,12 @@ export default function PublicizeForm() {
 		userConnectionUrl,
 	} = usePublicizeConfig();
 
-	const { numberOfSharesRemaining, useAdminUiV1 } = useSelect( select => {
+	const { numberOfSharesRemaining, useAdminUiV1, featureFlags } = useSelect( select => {
 		const store = select( socialStore );
 		return {
 			numberOfSharesRemaining: store.numberOfSharesRemaining(),
 			useAdminUiV1: store.useAdminUiV1(),
+			featureFlags: store.featureFlags(),
 		};
 	}, [] );
 
@@ -106,6 +107,7 @@ export default function PublicizeForm() {
 					<ShareCountInfo />
 					<BrokenConnectionsNotice />
 					<UnsupportedConnectionsNotice />
+					{ featureFlags.useEditorPreview ? <p>New modal trigger goes here</p> : null }
 					{ shouldAutoConvert && showValidationNotice && mediaId && <AutoConversionNotice /> }
 					{ showValidationNotice &&
 						( Object.values( validationErrors ).includes( NO_MEDIA_ERROR ) ? (

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

@@ -16,6 +16,7 @@ const reducer = combineReducers( {
 	hasPaidPlan: ( state = false ) => state,
 	userConnectionUrl: ( state = '' ) => state,
 	useAdminUiV1: ( state = false ) => state,
+	featureFlags: ( state = false ) => state,
 	hasPaidFeatures: ( state = false ) => state,
 	connectionRefreshPath: ( state = '' ) => state,
 } );

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

@@ -14,6 +14,7 @@ const selectors = {
 	...autoConversionSettingsSelectors,
 	userConnectionUrl: state => state.userConnectionUrl,
 	useAdminUiV1: state => state.useAdminUiV1,
+	featureFlags: state => state.featureFlags,
 	hasPaidFeatures: state => state.hasPaidFeatures,
 	connectionRefreshPath: state => state.connectionRefreshPath,
 };

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

@@ -60,6 +60,7 @@ export type SocialStoreState = {
 	// on Jetack Social admin page
 	jetpackSettings?: JetpackSettings;
 	useAdminUiV1?: boolean;
+	featureFlags?: Record< string, boolean >;
 };
 
 export interface KeyringAdditionalUser {

projects/packages/publicize/src/class-publicize-base.php

@@ -293,6 +293,22 @@ public function use_admin_ui_v1(): bool {
 			|| $this->has_connections_management_feature();
 	}
 
+	/**
+	 * Whether the user has the feature flag enabled.
+	 *
+	 * @param string $flag_name The feature flag to check. Will be prefixed with 'jetpack_social_use_' for the option.
+	 * @param string $plan_name The plan name to check for for the Current_Plan check, without the social- prefix.
+	 * @return bool
+	 */
+	public function use_feature_flag( $flag_name, $plan_name ): bool {
+		// If the option is set, use it.
+		if ( get_option( 'jetpack_social_use_' . $flag_name, false ) ) {
+			return true;
+		}
+
+		return Current_Plan::supports( 'social-' . $plan_name );
+	}
+
 	/**
 	 * Does the given user have a connection to the service on the given blog?
 	 *

projects/packages/publicize/src/jetpack-social-settings/class-settings.php

@@ -38,6 +38,22 @@ class Settings {
 		'enabled' => true,
 	);
 
+	/**
+	 * Feature flags. Each item has 3 keys because of the naming conventions:
+	 * - flag_name: The name of the feature flag for the option check.
+	 * - plan_name: The name of the plan that enables the feature. Will be checked with Current_Plan.
+	 * - variable_name: The name of the variable that will be used in the front-end.
+	 *
+	 * @var array
+	 */
+	const FEATURE_FLAGS = array(
+		array(
+			'flag_name'     => 'editor_preview',
+			'plan_name'     => 'editor-preview',
+			'variable_name' => 'useEditorPreview',
+		),
+	);
+
 	/**
 	 * Migrate old options to the new settings. Previously SIG settings were stored in the
 	 * jetpack_social_image_generator_settings option. Now they are stored in the jetpack_social_settings
@@ -207,6 +223,10 @@ public function get_initial_state() {
 
 		$settings['connectionRefreshPath'] = ! empty( $settings['useAdminUiV1'] ) ? 'jetpack/v4/publicize/connections?test_connections=1' : '/jetpack/v4/publicize/connection-test-results';
 
+		foreach ( self::FEATURE_FLAGS as $feature_flag ) {
+			$settings['featureFlags'][ $feature_flag['variable_name'] ] = $publicize->use_feature_flag( $feature_flag['flag_name'], $feature_flag['plan_name'] );
+		}
+
 		return $settings;
 	}
 

projects/plugins/jetpack/class.jetpack-gutenberg.php

@@ -767,6 +767,8 @@ public static function enqueue_block_editor_assets() {
 
 				$initial_state['social']['connectionRefreshPath'] = $social_initial_state['connectionRefreshPath'];
 			}
+
+			$initial_state['social']['featureFlags'] = $social_initial_state['featureFlags'];
 		}
 
 		wp_localize_script(

projects/plugins/social/src/class-jetpack-social.php

@@ -352,6 +352,8 @@ class_exists( 'Jetpack' ) ||
 			$initial_state['connectionRefreshPath'] = $social_state['connectionRefreshPath'];
 		}
 
+		$initial_state['featureFlags'] = $social_state['featureFlags'];
+
 		wp_localize_script(
 			'jetpack-social-editor',
 			'Jetpack_Editor_Initial_State',