Poc/social share title only

projects/js-packages/publicize-components/changelog/poc-social-share-title-only

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added option to share with title only

projects/js-packages/publicize-components/src/components/message-box-control/index.js

@@ -1,7 +1,10 @@
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
-import { TextareaControl } from '@wordpress/components';
+import { BaseControl, Button, Spinner, TextareaControl } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useCallback, useRef } from 'react';
+import { store as socialStore } from '../../social-store';
+import Notice from '../notice';
 
 /**
  * Wrapper around a textbox to restrict the number of characters and
@@ -25,6 +28,14 @@ export default function MessageBoxControl( {
 	const { recordEvent } = useAnalytics();
 	const isFirstChange = useRef( true );
 
+	const shareTitleOnly = useSelect( select => select( socialStore ).isShareTitleOnlyEnabled(), [] );
+	const isUpdatingShareTitleOnly = useSelect(
+		select => select( socialStore ).isUpdatingShareTitleOnly(),
+		[]
+	);
+
+	const { updateShareTitleOnly } = useDispatch( socialStore );
+
 	const charactersRemaining = maxLength - message.length;
 
 	const handleChange = useCallback(
@@ -38,6 +49,31 @@ export default function MessageBoxControl( {
 		[ analyticsData, isFirstChange, onChange, recordEvent ]
 	);
 
+	const handleShareTitleOnlyToggle = useCallback( () => {
+		updateShareTitleOnly( false );
+	}, [ updateShareTitleOnly ] );
+
+	if ( shareTitleOnly ) {
+		return (
+			<BaseControl __nextHasNoMarginBottom={ true } label={ __( 'Message', 'jetpack' ) }>
+				<Notice type={ 'highlight' }>
+					{ __(
+						'Custom message is disabled when you have title-only sharing enabled.',
+						'jetpack'
+					) }
+					<br />
+					{ isUpdatingShareTitleOnly ? (
+						<Spinner />
+					) : (
+						<Button variant="link" onClick={ handleShareTitleOnlyToggle }>
+							{ __( 'Turn off', 'jetpack' ) }
+						</Button>
+					) }
+				</Notice>
+			</BaseControl>
+		);
+	}
+
 	return (
 		<TextareaControl
 			value={ message }

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

@@ -2,6 +2,7 @@ import * as connectionData from './connection-data';
 import siteSettingActions from './jetpack-settings';
 import jetpackSocialSettings from './jetpack-social-settings';
 import * as shareStatus from './share-status';
+import shareTitleOnly from './share-title-only';
 import socialImageGeneratorSettingActions from './social-image-generator-settings';
 import socialNotesSettings from './social-notes-settings';
 
@@ -12,6 +13,7 @@ const actions = {
 	...jetpackSocialSettings,
 	...connectionData,
 	...socialNotesSettings,
+	...shareTitleOnly,
 };
 
 export default actions;

projects/js-packages/publicize-components/src/social-store/actions/share-title-only.js

@@ -0,0 +1,65 @@
+import { select } from '@wordpress/data';
+import { SOCIAL_STORE_ID } from '../../social-store';
+import {
+	fetchShareTitleOnly,
+	updateShareTitleOnly as updateShareTitleOnlyControl,
+} from '../controls';
+
+export const SET_SHARE_TITLE_ONLY = 'SET_SHARE_TITLE_ONLY';
+
+/**
+ * Yield actions to update settings
+ *
+ * @param {object} settings - settings to apply.
+ * @yield {object} - an action object.
+ * @return {object} - an action object.
+ */
+export function* updateShareTitleOnly( settings ) {
+	try {
+		yield setUpdatingShareTitleOnly();
+		yield setShareTitleOnly( settings );
+		yield updateShareTitleOnlyControl( settings );
+		const updatedSettings = yield fetchShareTitleOnly();
+		yield setShareTitleOnly( { isEnabled: !! updatedSettings.jetpack_social_share_title_only } );
+		return true;
+	} catch ( e ) {
+		const oldSettings = select( SOCIAL_STORE_ID ).getShareTitleOnly();
+		yield setShareTitleOnly( oldSettings );
+		return false;
+	} finally {
+		yield setUpdatingShareTitleOnlyDone();
+	}
+}
+
+/**
+ * Set state updating action
+ *
+ * @return {object} - an action object.
+ */
+export function setUpdatingShareTitleOnly() {
+	return setShareTitleOnly( { isUpdating: true } );
+}
+
+/**
+ * Set state updating finished
+ *
+ * @return {object} - an action object.
+ */
+export function setUpdatingShareTitleOnlyDone() {
+	return setShareTitleOnly( { isUpdating: false } );
+}
+
+/**
+ * Set Social Image Generator settings action
+ *
+ * @param {object} options - Social Image Generator settings.
+ * @return {object} - an action object.
+ */
+export function setShareTitleOnly( options ) {
+	return { type: SET_SHARE_TITLE_ONLY, options };
+}
+
+export default {
+	updateShareTitleOnly,
+	setShareTitleOnly,
+};

projects/js-packages/publicize-components/src/social-store/controls.js

@@ -7,6 +7,9 @@ export const UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'UPDATE_SOCIAL_IMAGE_GENER
 
 export const FETCH_JETPACK_SOCIAL_SETTINGS = 'FETCH_JETPACK_SOCIAL_SETTINGS';
 
+export const FETCH_SHARE_TITLE_ONLY = 'FETCH_SHARE_TITLE_ONLY';
+export const UPDATE_SHARE_TITLE_ONLY = 'UPDATE_SHARE_TITLE_ONLY';
+
 /**
  * fetchJetpackSettings action
  *
@@ -66,6 +69,19 @@ export const fetchJetpackSocialSettings = () => {
 	};
 };
 
+export const fetchShareTitleOnly = () => {
+	return {
+		type: FETCH_SHARE_TITLE_ONLY,
+	};
+};
+
+export const updateShareTitleOnly = settings => {
+	return {
+		type: UPDATE_SHARE_TITLE_ONLY,
+		settings,
+	};
+};
+
 export default {
 	[ FETCH_JETPACK_SETTINGS ]: function () {
 		return apiFetch( { path: '/jetpack/v4/social/settings' } );
@@ -96,4 +112,18 @@ export default {
 			path: '/wp/v2/settings?_fields=jetpack_social_image_generator_settings',
 		} );
 	},
+	[ FETCH_SHARE_TITLE_ONLY ]: function () {
+		return apiFetch( {
+			path: '/wp/v2/settings?_fields=jetpack_social_share_title_only',
+		} );
+	},
+	[ UPDATE_SHARE_TITLE_ONLY ]: function ( action ) {
+		return apiFetch( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data: {
+				jetpack_social_share_title_only: action.settings,
+			},
+		} );
+	},
 };

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

@@ -2,6 +2,7 @@ import { combineReducers } from '@wordpress/data';
 import connectionData from './connection-data';
 import jetpackSettings from './jetpack-settings';
 import { shareStatus } from './share-status';
+import shareTitleOnly from './share-title-only';
 import siteData from './site-data';
 import socialImageGeneratorSettings from './social-image-generator-settings';
 
@@ -11,6 +12,7 @@ const reducer = combineReducers( {
 	jetpackSettings,
 	socialImageGeneratorSettings,
 	shareStatus,
+	shareTitleOnly,
 	hasPaidPlan: ( state = false ) => state,
 	userConnectionUrl: ( state = '' ) => state,
 	hasPaidFeatures: ( state = false ) => state,

projects/js-packages/publicize-components/src/social-store/reducer/share-title-only.js

@@ -0,0 +1,14 @@
+import { SET_SHARE_TITLE_ONLY } from '../actions/share-title-only';
+
+const shareTitleOnly = ( state = {}, action ) => {
+	switch ( action.type ) {
+		case SET_SHARE_TITLE_ONLY:
+			return {
+				...state,
+				...action.options,
+			};
+	}
+	return state;
+};
+
+export default shareTitleOnly;

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

@@ -1,6 +1,7 @@
 import * as connectionDataSelectors from './connection-data';
 import jetpackSettingSelectors from './jetpack-settings';
 import * as shareStatusSelectors from './share-status';
+import shareTitleOnlySelectors from './share-title-only';
 import siteDataSelectors from './site-data';
 import socialImageGeneratorSettingsSelectors from './social-image-generator-settings';
 
@@ -10,6 +11,7 @@ const selectors = {
 	...jetpackSettingSelectors,
 	...socialImageGeneratorSettingsSelectors,
 	...shareStatusSelectors,
+	...shareTitleOnlySelectors,
 	userConnectionUrl: state => state.userConnectionUrl,
 	hasPaidFeatures: state => state.hasPaidFeatures,
 };

projects/js-packages/publicize-components/src/social-store/selectors/share-title-only.js

@@ -0,0 +1,6 @@
+const shareTitleOnlySelectors = {
+	isShareTitleOnlyEnabled: state => state.shareTitleOnly.isEnabled,
+	isUpdatingShareTitleOnly: state => state.shareTitleOnly.isUpdating,
+};
+
+export default shareTitleOnlySelectors;

projects/packages/publicize/changelog/poc-social-share-title-only

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added option to share with title only

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

@@ -31,6 +31,8 @@ class Settings {
 		'template' => Templates::DEFAULT_TEMPLATE,
 	);
 
+	const SHARE_TITLE_ONLY = 'share_title_only';
+
 	/**
 	 * Feature flags. Each item has 3 keys because of the naming conventions:
 	 * - flag_name: The name of the feature flag for the option check.
@@ -129,6 +131,20 @@ public function register_settings() {
 			)
 		);
 
+		register_setting(
+			'jetpack_social',
+			self::OPTION_PREFIX . self::SHARE_TITLE_ONLY,
+			array(
+				'type'         => 'boolean',
+				'default'      => false,
+				'show_in_rest' => array(
+					'schema' => array(
+						'type' => 'boolean',
+					),
+				),
+			)
+		);
+
 		add_filter( 'rest_pre_update_setting', array( $this, 'update_settings' ), 10, 3 );
 	}
 
@@ -144,6 +160,7 @@ public function get_settings( $with_available = false ) {
 
 		$settings = array(
 			'socialImageGeneratorSettings' => get_option( self::OPTION_PREFIX . self::IMAGE_GENERATOR_SETTINGS, self::DEFAULT_IMAGE_GENERATOR_SETTINGS ),
+			'shareTitleOnly'               => array( 'isEnabled' => get_option( self::OPTION_PREFIX . self::SHARE_TITLE_ONLY, false ) ),
 		);
 
 		// The feature cannot be enabled without Publicize.
@@ -213,6 +230,11 @@ public function update_settings( $updated, $name, $value ) {
 		if ( self::OPTION_PREFIX . self::IMAGE_GENERATOR_SETTINGS === $name ) {
 			return $this->update_social_image_generator_settings( $value );
 		}
+
+		if ( self::OPTION_PREFIX . self::SHARE_TITLE_ONLY === $name ) {
+			return update_option( self::OPTION_PREFIX . self::SHARE_TITLE_ONLY, $value );
+		}
+
 		return $updated;
 	}
 

projects/plugins/jetpack/changelog/poc-social-share-title-only

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Added option to share with title only

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

@@ -762,6 +762,7 @@ public static function enqueue_block_editor_assets() {
 				'jetpackSharingSettingsUrl'       => esc_url_raw( admin_url( 'admin.php?page=jetpack#/sharing' ) ),
 				'userConnectionUrl'               => esc_url_raw( admin_url( 'admin.php?page=my-jetpack#/connection' ) ),
 				'useAdminUiV1'                    => $social_initial_state['useAdminUiV1'],
+				'shareTitleOnly'                  => $social_initial_state['shareTitleOnly'],
 			);
 
 			// Add connectionData if we are using the new Connection UI.

projects/plugins/social/changelog/poc-social-share-title-only

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added option to share with title only

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

@@ -12,6 +12,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useCallback, useEffect, useRef } from '@wordpress/element';
 import React from 'react';
 import PricingPage from '../pricing-page';
+import ShareTitleOnlyToggle from '../share-title-only-toggle';
 import SocialImageGeneratorToggle from '../social-image-generator-toggle';
 import SocialModuleToggle from '../social-module-toggle';
 import SocialNotesToggle from '../social-notes-toggle';
@@ -91,6 +92,7 @@ const Admin = () => {
 					</AdminSectionHero>
 					<AdminSection>
 						<SocialModuleToggle />
+						{ isModuleEnabled && <ShareTitleOnlyToggle /> }
 						{ isModuleEnabled && <SocialNotesToggle disabled={ isUpdatingJetpackSettings } /> }
 						{ isModuleEnabled && isSocialImageGeneratorAvailable && (
 							<SocialImageGeneratorToggle disabled={ isUpdatingJetpackSettings } />

projects/plugins/social/src/js/components/share-title-only-toggle/index.tsx

@@ -0,0 +1,50 @@
+import { Text } from '@automattic/jetpack-components';
+import { SOCIAL_STORE_ID } from '@automattic/jetpack-publicize-components';
+import { useSelect, useDispatch } 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 ShareTitleOnlyToggleProps = {
+	/**
+	 * If the toggle is disabled.
+	 */
+	disabled?: boolean;
+};
+
+const ShareTitleOnlyToggle: React.FC< ShareTitleOnlyToggleProps > = ( { disabled } ) => {
+	const { isEnabled, isUpdating } = useSelect( select => {
+		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
+		return {
+			isEnabled: store.isShareTitleOnlyEnabled(),
+			isUpdating: store.isUpdatingShareTitleOnly(),
+		};
+	}, [] );
+
+	const updateOptions = useDispatch( SOCIAL_STORE_ID ).updateShareTitleOnly;
+
+	const toggleStatus = useCallback( () => {
+		updateOptions( ! isEnabled );
+	}, [ isEnabled, updateOptions ] );
+
+	return (
+		<ToggleSection
+			title={ __( 'Share the post title only', 'jetpack-social' ) }
+			disabled={ isUpdating || disabled }
+			checked={ isEnabled }
+			onChange={ toggleStatus }
+		>
+			<Text className={ styles.text }>
+				{ __(
+					'When enabled, Jetpack Social will only share the title and the link to the post by default on new posts.',
+					'jetpack-social'
+				) }
+			</Text>
+		</ToggleSection>
+	);
+};
+
+export default ShareTitleOnlyToggle;