Jetpack Social: Add toggle to Social admin page to enable or disable …

…SIG and pick a default template (#29722)

* [not verified] Add SIG toggle with template picker to admin page

* [not verified] changelog

* [not verified] Only show toggle when SIG is available

* [not verified] Actually use default template

* [not verified] changelog

* [not verified] Do not load SIG when it is not enabled

* [not verified] changelog

* Fix PHP tests

* Fix JS tests

projects/js-packages/publicize-components/changelog/add-jetpack-social-add-sig-settings-to-publicize-store

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added toggle to Social admin page to enable or disable Social Image Generator as well as an option to pick a default template

projects/js-packages/publicize-components/index.js

@@ -11,6 +11,7 @@ export { default as TwitterOptions } from './src/components/twitter/options';
 export { default as SocialPreviewsModal } from './src/components/social-previews/modal';
 export { default as SocialPreviewsPanel } from './src/components/social-previews/panel';
 export { default as SocialImageGeneratorPanel } from './src/components/social-image-generator/panel';
+export { default as SocialImageGeneratorTemplatePicker } from './src/components/social-image-generator/template-picker';
 export { default as PublicizePanel } from './src/components/panel';
 export { default as ReviewPrompt } from './src/components/review-prompt';
 

projects/js-packages/publicize-components/package.json

@@ -35,6 +35,7 @@
 		"@wordpress/hooks": "3.28.0",
 		"@wordpress/i18n": "4.28.0",
 		"@wordpress/icons": "9.19.0",
+		"@wordpress/notices": "3.28.0",
 		"classnames": "2.3.1",
 		"lodash": "4.17.21",
 		"prop-types": "15.8.1",

projects/packages/publicize/changelog/add-jetpack-social-add-sig-settings-to-publicize-store

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Use picked default template for Social Image Generator

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

@@ -1063,7 +1063,7 @@ public function register_post_meta() {
 			'single'        => true,
 			'default'       => array(
 				'image_generator_settings' => array(
-					'template' => Social_Image_Generator\Templates::DEFAULT_TEMPLATE,
+					'template' => ( new Social_Image_Generator\Settings() )->get_default_template(),
 				),
 			),
 			'show_in_rest'  => array(

projects/packages/publicize/src/social-image-generator/class-setup.php

@@ -53,6 +53,10 @@ public function generate_token( $post_id ) {
 	 * @param \WP_Post $post Post that's being updated.
 	 */
 	public function set_meta( $post_id, $post ) {
+		if ( ! ( new Settings() )->is_enabled() ) {
+			return;
+		}
+
 		global $publicize;
 
 		if ( ! $publicize->has_social_image_generator_feature() ) {

projects/packages/publicize/tests/php/test-social-image-generator/test-setup.php

@@ -30,6 +30,8 @@ class Setup_Test extends BaseTestCase {
 	 * Setting up the test.
 	 */
 	public function set_up() {
+		// Enable the feature
+		( new Social_Image_Generator\Settings() )->set_enabled( true );
 		$this->sig = new Social_Image_Generator\Setup();
 		$this->sig->init();
 		$plan                       = Current_Plan::PLAN_DATA['free'];
@@ -99,9 +101,22 @@ public function create_post( $image_generator_settings = array() ) {
 	}
 
 	/**
-	 * Test that SIG gets enabled by default.
+	 * Test that SIG does not get enabled by default if the feature is not active.
 	 */
-	public function test_sig_gets_enabled_by_default_when_a_post_gets_saved() {
+	public function test_sig_does_not_get_enabled_by_default_when_a_post_gets_saved() {
+		( new Social_Image_Generator\Settings() )->set_enabled( false );
+		add_filter( 'pre_http_request', array( $this, 'mock_success_response' ) );
+		$post_id = $this->create_post();
+		remove_filter( 'pre_http_request', array( $this, 'mock_success_response' ) );
+
+		$settings = new Social_Image_Generator\Post_Settings( $post_id );
+		$this->assertFalse( $settings->is_enabled() );
+	}
+
+	/**
+	 * Test that SIG gets enabled by default when the feature is active.
+	 */
+	public function test_sig_gets_enabled_by_default_when_a_post_gets_saved_and_the_feature_is_active() {
 		add_filter( 'pre_http_request', array( $this, 'mock_success_response' ) );
 		$post_id = $this->create_post();
 		remove_filter( 'pre_http_request', array( $this, 'mock_success_response' ) );

projects/plugins/jetpack/changelog/add-jetpack-social-add-sig-settings-to-publicize-store

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Prevent SIG from running when it is disabled

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

@@ -747,7 +747,7 @@ public static function enqueue_block_editor_assets() {
 				'sharesData'                    => $publicize->get_publicize_shares_info( $blog_id ),
 				'hasPaidPlan'                   => $publicize->has_paid_plan(),
 				'isEnhancedPublishingEnabled'   => $publicize->is_enhanced_publishing_enabled( $blog_id ),
-				'isSocialImageGeneratorEnabled' => $publicize->has_social_image_generator_feature(),
+				'isSocialImageGeneratorEnabled' => $publicize->has_social_image_generator_feature() && ( new Automattic\Jetpack\Publicize\Social_Image_Generator\Settings() )->is_enabled(),
 			);
 		}
 

projects/plugins/social/changelog/add-jetpack-social-add-sig-settings-to-publicize-store

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added toggle to Social admin page to enable or disable Social Image Generator as well as an option to pick a default template

projects/plugins/social/jest.config.js

@@ -5,4 +5,8 @@ module.exports = {
 	roots: [ '<rootDir>/src' ],
 	moduleDirectories: [ 'node_modules', '<rootDir>/src' ],
 	setupFilesAfterEnv: [ ...baseConfig.setupFilesAfterEnv, '<rootDir>/jest.setup.js' ],
+	moduleNameMapper: {
+		...baseConfig.moduleNameMapper,
+		'\\.(css|less|sass|scss)$': '<rootDir>/tests/styles-mock.js',
+	},
 };

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

@@ -231,16 +231,21 @@ public function initial_state() {
 			$state = array_merge(
 				$state,
 				array(
-					'jetpackSettings' => array(
+					'jetpackSettings'              => array(
 						'publicize_active'  => self::is_publicize_active(),
 						'show_pricing_page' => self::should_show_pricing_page(),
 						'showNudge'         => ! $publicize->has_paid_plan( true ),
 					),
-					'connectionData'  => array(
+					'connectionData'               => array(
 						'connections' => $publicize->get_all_connections_for_user(), // TODO: Sanitize the array
 						'adminUrl'    => esc_url_raw( $publicize->publicize_connections_url( 'jetpack-social-connections-admin-page' ) ),
 					),
-					'sharesData'      => $publicize->get_publicize_shares_info( Jetpack_Options::get_option( 'id' ) ),
+					'sharesData'                   => $publicize->get_publicize_shares_info( Jetpack_Options::get_option( 'id' ) ),
+					'socialImageGeneratorSettings' => array(
+						'available'       => $publicize->has_social_image_generator_feature(),
+						'enabled'         => ( new Automattic\Jetpack\Publicize\Social_Image_Generator\Settings() )->is_enabled(),
+						'defaultTemplate' => ( new Automattic\Jetpack\Publicize\Social_Image_Generator\Settings() )->get_default_template(),
+					),
 				)
 			);
 		}
@@ -318,7 +323,7 @@ class_exists( 'Jetpack' ) ||
 					),
 					'hasPaidPlan'                   => $publicize->has_paid_plan(),
 					'isEnhancedPublishingEnabled'   => $publicize->is_enhanced_publishing_enabled( Jetpack_Options::get_option( 'id' ) ),
-					'isSocialImageGeneratorEnabled' => $publicize->has_social_image_generator_feature(),
+					'isSocialImageGeneratorEnabled' => $publicize->has_social_image_generator_feature() && ( new Automattic\Jetpack\Publicize\Social_Image_Generator\Settings() )->is_enabled(),
 				),
 			)
 		);

projects/plugins/social/src/js/components/admin-page/index.jsx

@@ -10,6 +10,7 @@ import { useSelect } from '@wordpress/data';
 import React from 'react';
 import { STORE_ID } from '../../store';
 import PricingPage from '../pricing-page';
+import SocialImageGeneratorToggle from '../social-image-generator-toggle';
 import SocialModuleToggle from '../social-module-toggle';
 import SupportSection from '../support-section';
 import ConnectionScreen from './../connection-screen';
@@ -22,17 +23,22 @@ const Admin = () => {
 	const { isUserConnected, isRegistered } = useConnection();
 	const showConnectionCard = ! isRegistered || ! isUserConnected;
 
-	const { showPricingPage, hasPaidPlan, isShareLimitEnabled, pluginVersion } = useSelect(
-		select => {
-			const store = select( STORE_ID );
-			return {
-				showPricingPage: store.showPricingPage(),
-				hasPaidPlan: store.hasPaidPlan(),
-				isShareLimitEnabled: store.isShareLimitEnabled(),
-				pluginVersion: store.getPluginVersion(),
-			};
-		}
-	);
+	const {
+		showPricingPage,
+		hasPaidPlan,
+		isShareLimitEnabled,
+		pluginVersion,
+		isSocialImageGeneratorAvailable,
+	} = useSelect( select => {
+		const store = select( STORE_ID );
+		return {
+			showPricingPage: store.showPricingPage(),
+			hasPaidPlan: store.hasPaidPlan(),
+			isShareLimitEnabled: store.isShareLimitEnabled(),
+			pluginVersion: store.getPluginVersion(),
+			isSocialImageGeneratorAvailable: store.isSocialImageGeneratorAvailable(),
+		};
+	} );
 
 	const moduleName = `Jetpack Social ${ pluginVersion }`;
 
@@ -65,6 +71,7 @@ const Admin = () => {
 					</AdminSectionHero>
 					<AdminSection>
 						<SocialModuleToggle />
+						{ isSocialImageGeneratorAvailable && <SocialImageGeneratorToggle /> }
 					</AdminSection>
 					<AdminSectionHero>
 						<InfoSection />

projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx

@@ -0,0 +1,78 @@
+import { Button, Text, useBreakpointMatch } from '@automattic/jetpack-components';
+import { SocialImageGeneratorTemplatePicker as TemplatePicker } from '@automattic/jetpack-publicize-components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState, useCallback, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import React from 'react';
+import { STORE_ID } from '../../store';
+import ToggleSection from '../toggle-section';
+import { SocialStoreSelectors } from '../types/types';
+import styles from './styles.module.scss';
+
+const SocialImageGeneratorToggle: React.FC = () => {
+	const [ currentTemplate, setCurrentTemplate ] = useState( null );
+	const { isEnabled, isUpdating, defaultTemplate } = useSelect( select => {
+		const store = select( STORE_ID ) as SocialStoreSelectors;
+		return {
+			isEnabled: store.isSocialImageGeneratorEnabled(),
+			isUpdating: store.isUpdatingSocialImageGeneratorSettings(),
+			defaultTemplate: store.getSocialImageGeneratorDefaultTemplate(),
+		};
+	}, [] );
+
+	const updateOptions = useDispatch( STORE_ID ).updateSocialImageGeneratorSettings;
+
+	const toggleStatus = useCallback( () => {
+		const newOption = {
+			enabled: ! isEnabled,
+		};
+		updateOptions( newOption );
+	}, [ isEnabled, updateOptions ] );
+
+	useEffect( () => {
+		if ( currentTemplate ) {
+			const newOption = { defaults: { template: currentTemplate } };
+			updateOptions( newOption );
+		}
+	}, [ currentTemplate, updateOptions ] );
+
+	const [ isSmall ] = useBreakpointMatch( 'sm' );
+
+	const renderTemplatePicker = useCallback(
+		( { open } ) => (
+			<Button
+				fullWidth={ isSmall }
+				className={ styles.button }
+				variant="secondary"
+				disabled={ isUpdating || ! isEnabled }
+				onClick={ open }
+			>
+				{ __( 'Change default template', 'jetpack-social' ) }
+			</Button>
+		),
+		[ isEnabled, isSmall, isUpdating ]
+	);
+
+	return (
+		<ToggleSection
+			title={ __( 'Enable Social Image Generator', 'jetpack-social' ) }
+			disabled={ isUpdating }
+			checked={ isEnabled }
+			onChange={ toggleStatus }
+		>
+			<Text className={ styles.text }>
+				{ __(
+					'When enabled, Social Image Generator will automatically generate social images for your posts. You can use the button below to choose a default template for new posts.',
+					'jetpack-social'
+				) }
+			</Text>
+			<TemplatePicker
+				value={ currentTemplate || defaultTemplate }
+				onSelect={ setCurrentTemplate }
+				render={ renderTemplatePicker }
+			/>
+		</ToggleSection>
+	);
+};
+
+export default SocialImageGeneratorToggle;

projects/plugins/social/src/js/components/social-image-generator-toggle/styles.module.scss

@@ -0,0 +1,21 @@
+.text {
+	grid-column: span 2;
+
+	a {
+		color: inherit;
+	}
+
+	@media ( min-width: 600px ) {
+		grid-column: 2;
+	}
+}
+
+.button {
+	margin-top: calc( var( --spacing-base ) * 2 );
+	grid-column: span 2;
+	justify-self: flex-start;
+
+	@media ( min-width: 600px ) {
+		grid-column: 2;
+	}
+}

projects/plugins/social/src/js/components/types/types.ts

@@ -28,6 +28,20 @@ type SiteDataSelectors = {
 	getSiteTitle: () => string;
 };
 
+type SocialImageGeneratorSettingsSelectors = {
+	getSocialImageGeneratorSettings: () => {
+		available: boolean;
+		enabled: boolean;
+		defaults: () => {
+			template: string;
+		};
+	};
+	isSocialImageGeneratorAvailable: () => boolean;
+	isSocialImageGeneratorEnabled: () => boolean;
+	isUpdatingSocialImageGeneratorSettings: () => boolean;
+	getSocialImageGeneratorDefaultTemplate: () => string;
+};
+
 /**
  * Types of the Social Store selectors.
  *
@@ -36,4 +50,5 @@ type SiteDataSelectors = {
 export type SocialStoreSelectors = JetpackSettingsSelectors &
 	ConnectionDataSelectors &
 	SharesDataSelectors &
-	SiteDataSelectors;
+	SiteDataSelectors &
+	SocialImageGeneratorSettingsSelectors;

projects/plugins/social/src/js/store/actions/index.js

@@ -1,7 +1,9 @@
 import siteSettingActions from './jetpack-settings';
+import socialImageGeneratorSettingActions from './social-image-generator-settings';
 
 const actions = {
 	...siteSettingActions,
+	...socialImageGeneratorSettingActions,
 };
 
 export default actions;