Gutenpack Subscription Block (Take two)

client/gutenberg/extensions/presets/jetpack/editor.js

@@ -14,6 +14,7 @@ import * as MapBlock from 'gutenberg/extensions/map';
 import * as PublicizeBlock from 'gutenberg/extensions/publicize';
 import * as RelatedPostsBlock from 'gutenberg/extensions/related-posts';
 import * as SimplePaymentsBlock from 'gutenberg/extensions/simple-payments';
+import * as SubscriptionsBlock from 'gutenberg/extensions/subscriptions';
 import * as TiledGalleryBlock from 'gutenberg/extensions/tiled-gallery';
 import * as VRBlock from 'gutenberg/extensions/vr';
 import { isEnabled } from 'config';
@@ -25,6 +26,7 @@ export default [
 	MapBlock,
 	PublicizeBlock,
 	SimplePaymentsBlock,
+	SubscriptionsBlock,
 	...( isEnabled( 'jetpack/blocks/beta' )
 		? [ RelatedPostsBlock, TiledGalleryBlock, VRBlock ]
 		: [] ),

client/gutenberg/extensions/presets/jetpack/index.json

@@ -8,6 +8,7 @@
   ],
   "beta": [
     "related-posts",
+    "subscriptions",
     "tiled-gallery",
     "vr"
   ]

client/gutenberg/extensions/subscriptions/edit.jsx

@@ -0,0 +1,82 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Button, TextControl, ToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+import apiFetch from '@wordpress/api-fetch';
+import { sprintf, _n } from '@wordpress/i18n';
+
+class SubscriptionEdit extends Component {
+	state = {
+		subscriberCountString: '',
+	};
+
+	componentDidMount() {
+		// Get the subscriber count so it is available right away if the user toggles the setting
+		this.get_subscriber_count();
+	}
+
+	render() {
+		const { attributes, className, isSelected, setAttributes } = this.props;
+		const { subscribePlaceholder, showSubscribersTotal } = attributes;
+
+		if ( isSelected ) {
+			return (
+				<div className={ className } role="form">
+					<ToggleControl
+						label={ __( 'Show total subscribers' ) }
+						checked={ showSubscribersTotal }
+						onChange={ () => {
+							setAttributes( { showSubscribersTotal: ! showSubscribersTotal } );
+						} }
+					/>
+					<TextControl
+						placeholder={ subscribePlaceholder }
+						disabled={ true }
+						onChange={ () => {} }
+					/>
+					<Button type="button" isDefault>
+						{ __( 'Subscribe' ) }
+					</Button>
+				</div>
+			);
+		}
+
+		return (
+			<div className={ className } role="form">
+				{ showSubscribersTotal && <p role="heading">{ this.state.subscriberCountString }</p> }
+				<TextControl placeholder={ subscribePlaceholder } />
+				<Button type="button" isDefault>
+					{ __( 'Subscribe' ) }
+				</Button>
+			</div>
+		);
+	}
+
+	get_subscriber_count() {
+		apiFetch( { path: '/wpcom/v2/subscribers/count' } ).then( count => {
+			// Handle error condition
+			if ( ! count.hasOwnProperty( 'count' ) ) {
+				this.setState( {
+					subscriberCountString: __( 'Subscriber count unavailable' ),
+				} );
+			} else {
+				this.setState( {
+					subscriberCountString: sprintf(
+						_n( 'Join %s other subscriber', 'Join %s other subscribers', count.count ),
+						count.count
+					),
+				} );
+			}
+		} );
+	}
+}
+
+export default SubscriptionEdit;

client/gutenberg/extensions/subscriptions/editor.js

@@ -0,0 +1,9 @@
+/** @format */
+
+/**
+ * Internal dependencies
+ */
+import registerJetpackBlock from 'gutenberg/extensions/presets/jetpack/utils/register-jetpack-block';
+import { name, settings } from '.';
+
+registerJetpackBlock( name, settings );

client/gutenberg/extensions/subscriptions/index.js

@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+import renderMaterialIcon from 'gutenberg/extensions/presets/jetpack/utils/render-material-icon';
+import { Path } from '@wordpress/components';
+
+export const name = 'subscriptions';
+export const settings = {
+	title: __( 'Subscription form' ),
+
+	description: (
+		<p>
+			{ __(
+				'A form enabling readers to get notifications when new posts are published from this site.'
+			) }
+		</p>
+	),
+	icon: renderMaterialIcon(
+		<Path d="M23 16v2h-3v3h-2v-3h-3v-2h3v-3h2v3h3zM20 2v9h-4v3h-3v4H4c-1.1 0-2-.9-2-2V2h18zM8 13v-1H4v1h4zm3-3H4v1h7v-1zm0-2H4v1h7V8zm7-4H4v2h14V4z" />
+	),
+	category: 'jetpack',
+
+	keywords: [ __( 'subscribe' ), __( 'join' ), __( 'follow' ) ],
+
+	attributes: {
+		subscribePlaceholder: { type: 'string', default: __( 'Email Address' ) },
+		subscribeButton: { type: 'string', default: __( 'Subscribe' ) },
+		showSubscribersTotal: { type: 'boolean', default: false },
+	},
+	edit,
+	save,
+};

client/gutenberg/extensions/subscriptions/save.jsx

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function Save( { attributes } ) {
+	const { showSubscribersTotal } = attributes;
+	return (
+		<RawHTML
+		>{ `[jetpack_subscription_form show_subscribers_total="${ showSubscribersTotal }" show_only_email_and_button="true"]` }</RawHTML>
+	);
+}