Adding new Subscriptions block

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,70 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+import { TextControl, Button, ToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+import { sprintf } from '@wordpress/i18n/build/index';
+import apiFetch from '@wordpress/api-fetch';
+
+class SubscriptionEdit extends Component {
+	render() {
+		const { attributes, className, isSelected, setAttributes } = this.props;
+		const { subscribe_placeholder, show_subscribers_total, subscriber_count_string } = attributes;
+
+		// Get the subscriber count so it is available right away if the user toggles the setting
+		this.get_subscriber_count();
+
+		if ( isSelected ) {
+			return (
+				<div className={ className } role="form">
+					<ToggleControl
+						label={ __( 'Show total subscribers' ) }
+						checked={ show_subscribers_total }
+						onChange={ () => {
+							setAttributes( { show_subscribers_total: ! show_subscribers_total } );
+						} }
+					/>
+					<TextControl placeholder={ subscribe_placeholder } required onChange={ () => {} } />
+					<Button type="button" isDefault>
+						{ __( 'Subscribe' ) }
+					</Button>
+				</div>
+			);
+		}
+
+		return (
+			<div className={ className } role="form">
+				{ show_subscribers_total && <p role="heading">{ subscriber_count_string }</p> }
+				<TextControl placeholder={ subscribe_placeholder } />
+				<Button type="button" isDefault>
+					{ __( 'Subscribe' ) }
+				</Button>
+			</div>
+		);
+	}
+
+	get_subscriber_count() {
+		const { setAttributes } = this.props;
+
+		apiFetch( { path: '/wpcom/v2/subscribers/count' } ).then( count => {
+			if ( 1 === count ) {
+				setAttributes( {
+					subscriber_count_string: sprintf( __( 'Join %s other subscriber' ), count.count ),
+				} );
+			} else {
+				setAttributes( {
+					subscriber_count_string: sprintf( __( 'Join %s other subscribers' ), count.count ),
+				} );
+			}
+		} );
+	}
+}
+
+export default SubscriptionEdit;

client/gutenberg/extensions/subscriptions/editor.js

@@ -0,0 +1,45 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+//import './editor.scss';
+import edit from './edit';
+import save from './save';
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+import registerJetpackBlock from '../presets/jetpack/utils/register-jetpack-block';
+import renderMaterialIcon from 'gutenberg/extensions/presets/jetpack/utils/render-material-icon';
+
+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: {
+		subscriber_count_string: { type: 'string', default: '' },
+		subscribe_placeholder: { type: 'string', default: 'Email Address' },
+		subscribe_button: { type: 'string', default: 'Subscribe' },
+		show_subscribers_total: { type: 'boolean', default: false },
+	},
+	edit,
+	save,
+};
+
+registerJetpackBlock( name, settings );

client/gutenberg/extensions/subscriptions/save.jsx

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