Settings: Allow Users to Insert Header Code

client/components/inline-support-link/context-links.js

@@ -138,6 +138,10 @@ const contextLinks = {
 		link: 'https://wordpress.com/support/export/',
 		post_id: 2087,
 	},
+	'insert-header-code': {
+		link: 'https://wordpress.com/support/adding-code-to-headers/',
+		post_id: 187480,
+	},
 	'introduction-to-woocommerce': {
 		link: 'https://wordpress.com/support/introduction-to-woocommerce/',
 		post_id: 176336,

client/my-sites/site-settings/controller.js

@@ -14,6 +14,7 @@ import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selecto
 import DeleteSite from './delete-site';
 import DisconnectSite from './disconnect-site';
 import ConfirmDisconnection from './disconnect-site/confirm';
+import HeaderCodeSettings from './header-code';
 import ManageConnection from './manage-connection';
 import SiteOwnerTransfer from './site-owner-transfer/site-owner-transfer';
 import StartOver from './start-over';
@@ -61,6 +62,19 @@ export function redirectIfCantStartSiteOwnerTransfer( context, next ) {
 	next();
 }
 
+export function redirectIfCantAddHeaderCode( context, next ) {
+	const state = context.store.getState();
+	const siteId = getSelectedSiteId( state );
+
+	if (
+		( ! isSiteAutomatedTransfer( state, siteId ) && ! isJetpackSite( state, siteId ) ) ||
+		! canCurrentUser( state, siteId, 'manage_options' )
+	) {
+		return page.redirect( '/settings/general/' + getSelectedSiteSlug( state ) );
+	}
+	next();
+}
+
 export function general( context, next ) {
 	context.primary = <SiteSettingsMain />;
 	next();
@@ -111,6 +125,11 @@ export function startSiteOwnerTransfer( context, next ) {
 	next();
 }
 
+export function headerCode( context, next ) {
+	context.primary = <HeaderCodeSettings />;
+	next();
+}
+
 export function legacyRedirects( context, next ) {
 	const { section } = context.params;
 	const redirectMap = {

client/my-sites/site-settings/header-code/index.jsx

@@ -0,0 +1,122 @@
+import { Button, Card, Gridicon } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import DocumentHead from 'calypso/components/data/document-head';
+import QuerySiteSettings from 'calypso/components/data/query-site-settings';
+import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation';
+import FormTextarea from 'calypso/components/forms/form-textarea';
+import HeaderCake from 'calypso/components/header-cake';
+import InlineSupportLink from 'calypso/components/inline-support-link';
+import Main from 'calypso/components/main';
+import NavigationHeader from 'calypso/components/navigation-header';
+import { successNotice, errorNotice } from 'calypso/state/notices/actions';
+import getSiteSetting from 'calypso/state/selectors/get-site-setting';
+import { saveSiteSettings } from 'calypso/state/site-settings/actions';
+import {
+	isRequestingSiteSettings,
+	isSavingSiteSettings,
+	isSiteSettingsSaveSuccessful,
+	getSiteSettingsSaveError,
+} from 'calypso/state/site-settings/selectors';
+import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
+import './style.scss';
+
+const HeaderCodeSettings = () => {
+	const translate = useTranslate();
+	const dispatch = useDispatch();
+
+	const [ editedCode, setEditedCode ] = useState( '' );
+
+	const siteId = useSelector( ( state ) => getSelectedSiteId( state ) );
+	const headCode = useSelector( ( state ) =>
+		getSiteSetting( state, siteId, 'jetpack_header_code' )
+	);
+	const isRequestingSettings = useSelector( ( state ) =>
+		isRequestingSiteSettings( state, siteId )
+	);
+	const isSaveFailure = useSelector( ( state ) => getSiteSettingsSaveError( state, siteId ) );
+	const isSaveSuccess = useSelector( ( state ) => isSiteSettingsSaveSuccessful( state, siteId ) );
+	const isSavingSettings = useSelector( ( state ) => isSavingSiteSettings( state, siteId ) );
+	const siteSlug = useSelector( ( state ) => getSelectedSiteSlug( state, siteId ) );
+
+	const saveSettings = () => {
+		dispatch(
+			saveSiteSettings( siteId, {
+				jetpack_header_code: editedCode,
+			} )
+		);
+	};
+
+	const noticeOptions = {
+		duration: 4000,
+	};
+
+	useEffect( () => {
+		if ( isSaveSuccess ) {
+			dispatch( successNotice( translate( 'Code updated successfully.' ), noticeOptions ) );
+		} else if ( isSaveFailure ) {
+			dispatch( errorNotice( translate( 'There was an error saving your code.' ), noticeOptions ) );
+		}
+	}, [ isSaveSuccess, isSaveFailure ] );
+
+	useEffect( () => {
+		if ( headCode ) {
+			setEditedCode( headCode );
+		}
+	}, [ headCode ] );
+
+	return (
+		<Main className="header-code">
+			<DocumentHead title={ translate( 'Header Code' ) } />
+			{ siteId && <QuerySiteSettings siteId={ siteId } /> }
+			<NavigationHeader
+				title={ translate( 'Header Code' ) }
+				subtitle={ translate( 'Insert HTML meta tags and JavaScript code to your site.' ) }
+			/>
+			<HeaderCake backHref={ `/settings/general/${ siteSlug }` } isCompact>
+				<h1>{ translate( 'Header Code' ) }</h1>
+			</HeaderCake>
+			<Card>
+				<p className="header-code__text">
+					{ translate(
+						'The following code will be inserted within {{code}}<head>{{/code}} on your site. {{link}}Learn more{{/link}}.',
+						{
+							components: {
+								code: <code />,
+								link: <InlineSupportLink supportContext="insert-header-code" showIcon={ false } />,
+							},
+						}
+					) }
+				</p>
+
+				<FormTextarea
+					className="header-code__editor"
+					disabled={ isRequestingSettings || isSavingSettings }
+					value={ editedCode }
+					onChange={ ( input ) => setEditedCode( input.target.value ) }
+				/>
+				<FormSettingExplanation className="header-code__warning">
+					<Gridicon icon="info" size={ 18 } />
+					<span>
+						{ translate(
+							"This code will be run for all your site's viewers. Please make sure that you understand any code and trust its source before adding it here."
+						) }
+					</span>
+				</FormSettingExplanation>
+				<div className="header-code__button">
+					<Button
+						disabled={ headCode === editedCode || ! editedCode || isRequestingSettings }
+						primary
+						busy={ isSavingSettings }
+						onClick={ saveSettings }
+					>
+						{ translate( 'Save' ) }
+					</Button>
+				</div>
+			</Card>
+		</Main>
+	);
+};
+
+export default HeaderCodeSettings;

client/my-sites/site-settings/header-code/style.scss

@@ -0,0 +1,15 @@
+.header-code__editor {
+	font-family: $code;
+	font-size: $font-body-small;
+	min-height: 250px;
+}
+
+.header-code .header-code__warning {
+	display: flex;
+	font-style: normal;
+	margin-bottom: 1.5em;
+
+	.gridicon {
+		margin-right: 4px;
+	}
+}

client/my-sites/site-settings/index.js

@@ -7,8 +7,10 @@ import {
 	disconnectSite,
 	disconnectSiteConfirm,
 	general,
+	headerCode,
 	legacyRedirects,
 	manageConnection,
+	redirectIfCantAddHeaderCode,
 	redirectIfCantDeleteSite,
 	redirectIfCantStartSiteOwnerTransfer,
 	redirectToGeneral,
@@ -111,6 +113,17 @@ export default function () {
 		clientRender
 	);
 
+	page(
+		'/settings/header-code/:site_id',
+		siteSelection,
+		redirectIfCantAddHeaderCode,
+		navigation,
+		setScroll,
+		headerCode,
+		makeLayout,
+		clientRender
+	);
+
 	page( '/settings/traffic/:site_id', redirectToTraffic );
 	page( '/settings/analytics/:site_id?', redirectToTraffic );
 	page( '/settings/seo/:site_id?', redirectToTraffic );

client/my-sites/site-settings/site-tools/index.jsx

@@ -56,12 +56,14 @@ class SiteTools extends Component {
 			showClone,
 			showDeleteContent,
 			showDeleteSite,
+			showHeaderCode,
 			showManageConnection,
 			showStartSiteTransfer,
 			siteId,
 		} = this.props;
 
 		const changeAddressLink = `/domains/manage/${ siteSlug }`;
+		const headerCodeLink = `/settings/header-code/${ siteSlug }`;
 		const startOverLink = `/settings/start-over/${ siteSlug }`;
 		const startSiteTransferLink = `/settings/start-site-transfer/${ siteSlug }`;
 		const deleteSiteLink = `/settings/delete-site/${ siteSlug }`;
@@ -74,6 +76,9 @@ class SiteTools extends Component {
 			"Remove all posts, pages, and media to start fresh while keeping your site's address."
 		);
 
+		const headerCode = translate( 'Header code' );
+		const headerCodeText = translate( 'Insert code within the <head> of your site.' );
+
 		const deleteSite = translate( 'Delete your site permanently' );
 		const deleteSiteText = translate(
 			"Delete all your posts, pages, media, and data, and give up your site's address."
@@ -117,6 +122,13 @@ class SiteTools extends Component {
 						description={ copyText }
 					/>
 				) }
+				{ showHeaderCode && (
+					<SiteToolsLink
+						href={ headerCodeLink }
+						title={ headerCode }
+						description={ headerCodeText }
+					/>
+				) }
 				{ showClone && (
 					<SiteToolsLink href={ cloneUrl } title={ cloneTitle } description={ cloneText } />
 				) }
@@ -219,6 +231,7 @@ export default compose( [
 				showClone: 'active' === rewindState.state && ! isAtomic,
 				showDeleteContent: isAtomic || ( ! isJetpack && ! isVip && ! isP2Hub ),
 				showDeleteSite: ( ! isJetpack || isAtomic ) && ! isVip && sitePurchasesLoaded,
+				showHeaderCode: isJetpack || isAtomic,
 				showManageConnection: isJetpack && ! isAtomic,
 				showStartSiteTransfer,
 				siteId,