Form Block: allowing marketing consent collection

.travis.yml

@@ -115,7 +115,6 @@ matrix:
     - name: "PHP Nightly"
     - name: "Spell check Markdown files"
     - name: "Code Coverage"
-    - name: "E2E tests"
     - name: "E2E tests with latest Gutenberg"
 
 cache:

class.jetpack-plan.php

@@ -45,7 +45,6 @@ class Jetpack_Plan {
 			),
 			'supports' => array(
 				'akismet',
-				'donations',
 				'recurring-payments',
 			),
 		),
@@ -58,6 +57,7 @@ class Jetpack_Plan {
 				'value_bundle-2y',
 			),
 			'supports' => array(
+				'donations',
 				'simple-payments',
 				'vaultpress',
 				'videopress',

class.jetpack.php

@@ -212,6 +212,7 @@ class Jetpack {
 			'All in One SEO Pack Pro'        => 'all-in-one-seo-pack-pro/all_in_one_seo_pack.php',
 			'The SEO Framework'              => 'autodescription/autodescription.php',
 			'Rank Math'                      => 'seo-by-rank-math/rank-math.php',
+			'Slim SEO'                       => 'slim-seo/slim-seo.php',
 		),
 		'verification-tools' => array(
 			'WordPress SEO by Yoast'         => 'wordpress-seo/wp-seo.php',
@@ -220,6 +221,7 @@ class Jetpack {
 			'All in One SEO Pack Pro'        => 'all-in-one-seo-pack-pro/all_in_one_seo_pack.php',
 			'The SEO Framework'              => 'autodescription/autodescription.php',
 			'Rank Math'                      => 'seo-by-rank-math/rank-math.php',
+			'Slim SEO'                       => 'slim-seo/slim-seo.php',
 		),
 		'widget-visibility'  => array(
 			'Widget Logic'    => 'widget-logic/widget_logic.php',
@@ -242,6 +244,7 @@ class Jetpack {
 			'XML Sitemaps'                         => 'xml-sitemaps/xml-sitemaps.php',
 			'MSM Sitemaps'                         => 'msm-sitemap/msm-sitemap.php',
 			'Rank Math'                            => 'seo-by-rank-math/rank-math.php',
+			'Slim SEO'                             => 'slim-seo/slim-seo.php',
 		),
 		'lazy-images'        => array(
 			'Lazy Load'              => 'lazy-load/lazy-load.php',
@@ -310,6 +313,7 @@ class Jetpack {
 		'wp-fb-share-like-button/wp_fb_share-like_widget.php',   // WP Facebook Like Button
 		'open-graph-metabox/open-graph-metabox.php',              // Open Graph Metabox
 		'seo-by-rank-math/rank-math.php',                        // Rank Math.
+		'slim-seo/slim-seo.php',                                 // Slim SEO
 	);
 
 	/**
@@ -328,6 +332,7 @@ class Jetpack {
 		'wp-to-twitter/wp-to-twitter.php',           // WP to Twitter
 		'wp-twitter-cards/twitter_cards.php',        // WP Twitter Cards
 		'seo-by-rank-math/rank-math.php',            // Rank Math.
+		'slim-seo/slim-seo.php',                     // Slim SEO
 	);
 
 	/**

docker/mu-plugins/avoid-plugin-deletion.php

@@ -65,6 +65,9 @@ function jetpack_docker_disable_delete_plugin( $plugin_file ) {
  */
 function jetpack_docker_disable_plugin_update( $plugins ) {
 	global $jetpack_docker_avoided_plugins;
+	if ( ! is_array( $jetpack_docker_avoided_plugins ) ) {
+		return $plugins;
+	}
 	foreach ( $jetpack_docker_avoided_plugins as $avoided_plugin ) {
 		if ( isset( $plugins->response[ $avoided_plugin ] ) ) {
 			unset( $plugins->response[ $avoided_plugin ] );

extensions/blocks/contact-form/components/jetpack-field-consent.js

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { BaseControl, ExternalLink, PanelBody, SelectControl } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { withInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import JetpackFieldLabel from './jetpack-field-label';
+import JetpackFieldControls from './jetpack-field-controls';
+
+const JetpackFieldConsent = ( {
+	id,
+	instanceId,
+	required,
+	width,
+	consentType,
+	implicitConsentMessage,
+	explicitConsentMessage,
+	setAttributes,
+} ) => {
+	return (
+		<BaseControl
+			id={ `jetpack-field-consent-${ instanceId }` }
+			className="jetpack-field jetpack-field-consent"
+			label={
+				<>
+					{ consentType === 'explicit' && (
+						<input className="jetpack-field-consent__checkbox" type="checkbox" disabled />
+					) }
+					<JetpackFieldLabel
+						required={ required }
+						label={
+							{
+								implicit: implicitConsentMessage,
+								explicit: explicitConsentMessage,
+							}[ consentType ] ?? ''
+						}
+						setAttributes={ setAttributes }
+						labelFieldName={ `${ consentType }ConsentMessage` }
+						placeholder={ sprintf( __( 'Add %s consent message…', 'jetpack' ), consentType ) }
+					/>
+					<JetpackFieldControls
+						id={ id }
+						required={ required }
+						width={ width }
+						setAttributes={ setAttributes }
+					/>
+					<InspectorControls>
+						<PanelBody title={ __( 'Consent Settings', 'jetpack' ) }>
+							<BaseControl>
+								<SelectControl
+									label={ __( 'Permission to email', 'jetpack' ) }
+									value={ consentType }
+									options={ [
+										{ label: __( 'Mention that you can email', 'jetpack' ), value: 'implicit' },
+										{ label: __( 'Add a privacy checkbox', 'jetpack' ), value: 'explicit' },
+									] }
+									onChange={ value => setAttributes( { consentType: value } ) }
+								/>
+							</BaseControl>
+						</PanelBody>
+					</InspectorControls>
+				</>
+			}
+		/>
+	);
+};
+
+export default withInstanceId( JetpackFieldConsent );

extensions/blocks/contact-form/components/jetpack-field-label.js

@@ -4,7 +4,14 @@
 import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
 
-const JetpackFieldLabel = ( { setAttributes, label, labelFieldName, resetFocus, required } ) => {
+const JetpackFieldLabel = ( {
+	setAttributes,
+	label,
+	labelFieldName,
+	placeholder,
+	resetFocus,
+	required,
+} ) => {
 	return (
 		<div className="jetpack-field-label">
 			<RichText
@@ -19,7 +26,7 @@ const JetpackFieldLabel = ( { setAttributes, label, labelFieldName, resetFocus,
 					}
 					setAttributes( { label: value } );
 				} }
-				placeholder={ __( 'Add label…', 'jetpack' ) }
+				placeholder={ placeholder ?? __( 'Add label…', 'jetpack' ) }
 				withoutInteractiveFormatting
 				allowedFormats={ [ 'core/bold', 'core/italic' ] }
 			/>

extensions/blocks/contact-form/components/jetpack-newsletter-integration-settings.js

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { BaseControl, Button, ExternalLink, PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+
+const useInsertConsentBlock = () => {
+	const selectedBlock = useSelect( select => select( 'core/block-editor' ).getSelectedBlock(), [] );
+	const { insertBlock } = useDispatch( 'core/block-editor' );
+
+	const insertConsentBlock = useCallback( async () => {
+		const buttonBlockIndex = ( selectedBlock.innerBlocks ?? [] ).findIndex(
+			( { name } ) => name === 'jetpack/button'
+		);
+		if ( buttonBlockIndex === -1 ) {
+			return;
+		}
+
+		const newConsentBlock = await createBlock( 'jetpack/field-consent' );
+		await insertBlock( newConsentBlock, buttonBlockIndex, selectedBlock.clientId, false );
+	}, [ insertBlock, selectedBlock.clientId, selectedBlock.innerBlocks ] );
+
+	return { insertConsentBlock };
+};
+
+const NoConsentBlockSettings = () => {
+	const { insertConsentBlock } = useInsertConsentBlock();
+
+	return (
+		<>
+			<p>
+				{ __(
+					'You’re already collecting email contacts. Why not make sure you have permission to email them too?',
+					'jetpack'
+				) }
+			</p>
+			<Button isSecondary onClick={ insertConsentBlock } style={ { marginBottom: '1em' } }>
+				{ __( 'Add email permission request', 'jetpack' ) }
+			</Button>
+		</>
+	);
+};
+
+const NewsletterIntegrationSettings = () => {
+	const selectedBlock = useSelect( select => select( 'core/block-editor' ).getSelectedBlock(), [] );
+
+	const hasConsentBlock = useMemo(
+		() => selectedBlock.innerBlocks.some( ( { name } ) => name === 'jetpack/field-consent' ),
+		[ selectedBlock.innerBlocks ]
+	);
+
+	return (
+		<PanelBody title={ __( 'Newsletter Integration', 'jetpack' ) } initialOpen={ false }>
+			<BaseControl>
+				{ ! hasConsentBlock && <NoConsentBlockSettings /> }
+				<p>
+					<em>
+						{ __(
+							'To start sending email campaigns, install the Creative Mail plugin for WordPress. ',
+							'jetpack'
+						) }
+						<ExternalLink href="https://wordpress.org/plugins/creative-mail-by-constant-contact/">
+							{ __( 'Get the plugin now', 'jetpack' ) }
+						</ExternalLink>
+					</em>
+				</p>
+			</BaseControl>
+		</PanelBody>
+	);
+};
+
+export default NewsletterIntegrationSettings;

extensions/blocks/contact-form/edit.js

@@ -35,6 +35,7 @@ import {
 import HelpMessage from '../../shared/help-message';
 import defaultVariations from './variations';
 import CRMConnectionSettings from './components/jetpack-crm-connection-settings';
+import NewsletterIntegrationSettings from './components/jetpack-newsletter-integration-settings';
 import { isSimpleSite } from '../../shared/site-type-utils';
 
 const ALLOWED_BLOCKS = [
@@ -323,6 +324,7 @@ function JetpackContactFormEdit( {
 				{ ! isSimpleSite() && (
 					<CRMConnectionSettings jetpackCRM={ jetpackCRM } setAttributes={ setAttributes } />
 				) }
+				{ ! isSimpleSite() && <NewsletterIntegrationSettings /> }
 			</InspectorControls>
 
 			<div className={ formClassnames }>

extensions/blocks/contact-form/editor.scss

@@ -3,7 +3,7 @@
 .wp-block-jetpack-contact-form {
 	.block-editor-block-variation-picker__variations > li {
 		max-width: none;
-		width: 85px;
+		width: 68px;
 		margin-right: 15px;
 
 		.block-editor-block-variation-picker__variation {
@@ -44,7 +44,7 @@
 				flex: 0 0 75%;
 			}
 
-			&[data-type="jetpack/field-checkbox"] {
+			&[data-type="jetpack/field-checkbox"], &[data-type="jetpack/field-consent"] {
 				align-self: center;
 			}
 		}
@@ -180,6 +180,11 @@ input.components-text-control__input {
 	margin: 3px 5px 0 0;
 }
 
+.jetpack-field-consent__checkbox.jetpack-field-consent__checkbox.jetpack-field-consent__checkbox {
+	float: left;
+	margin: 0 5px 0 0;
+}
+
 // Duplicated to elevate specificity in order to overwrite core styles
 .jetpack-field-multiple__list.jetpack-field-multiple__list {
 	list-style-type: none;
@@ -245,18 +250,20 @@ input.components-text-control__input {
 	display: block;
 }
 
-.jetpack-field-checkbox .components-base-control__label {
-	display: flex;
-	align-items: center;
+.jetpack-field-checkbox, .jetpack-field-consent {
+	.components-base-control__label {
+		display: flex;
+		align-items: center;
 
-	.jetpack-field-label {
-		flex-grow:1;
-	}
+  		.jetpack-field-label {
+			flex-grow:1;
+		}
 
-	.jetpack-field-label__input {
-		font-size: 13px;
-		font-weight: 400;
-		padding-left: 10px;
+		.jetpack-field-label__input {
+			font-size: 13px;
+			font-weight: 400;
+			padding-left: 10px;
+		}
 	}
 }