Merge pull request #35 from mailchimp/feat/form-block

Adds basic block

Author: dkotter

README.md

@@ -18,6 +18,12 @@ WordPress.com compatibility is limited to Business tier users only. [How to add
 
 ![Configuring extra fields on your Signup Form (optional)](https://github.com/mailchimp/wordpress/blob/develop/.wordpress-org/screenshot-4.jpg?raw=true)
 
+## Frequently Asked Questions
+
+### Can I have multiple forms on one page?
+
+No, only one form should exist per page, no matter the display type (widget, shortcode, or block).
+
 ## Installation
 
 This section describes how to install the plugin and get started using it.

includes/blocks/mailchimp/block.json

@@ -0,0 +1,42 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "mailchimp/mailchimp",
+	"title": "Mailchimp List Subscribe Form",
+	"category": "text",
+	"description": "Mailchimp List Subscribe Form",
+	"attributes": {
+		"json": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"multiple": false,
+		"reusable": true,
+		"align": [ "wide", "full" ],
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"color": {
+			"background": true,
+			"text": true
+		}
+	},
+	"textdomain": "mailchimp_i18n",
+	"editorScript": "file:./index.js",
+	"render": "file:./markup.php",
+	"editorStyle": "file:./editor.css"
+}

includes/blocks/mailchimp/edit.js

@@ -0,0 +1,38 @@
+import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { Placeholder, Button, Disabled } from '@wordpress/components';
+import ServerSideRender from '@wordpress/server-side-render';
+import Icon from './icon';
+
+export const BlockEdit = ({ isSelected }) => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div {...blockProps}>
+			{isSelected ? (
+				<Placeholder
+					icon={Icon}
+					label={__('Mailchimp Block', 'mailchimp_i18n')}
+					instructions={__('Great work! Your block is ready to go.', 'mailchimp_i18n')}
+				>
+					<div>
+						<Button
+							style={{ paddingLeft: 0 }}
+							variant="link"
+							href={window.MAILCHIMP_ADMIN_SETTINGS_URL}
+						>
+							{__(
+								"Head over here if you'd like to adjust your settings.",
+								'mailchimp_i18n',
+							)}
+						</Button>
+					</div>
+				</Placeholder>
+			) : (
+				<Disabled>
+					<ServerSideRender block="mailchimp/mailchimp" />
+				</Disabled>
+			)}
+		</div>
+	);
+};

includes/blocks/mailchimp/editor.css

@@ -0,0 +1,4 @@
+/* Leave this file - wp_add_inline_style relies on this file existing */
+#mc_message {
+	display: none;
+}

includes/blocks/mailchimp/icon.js

@@ -0,0 +1,11 @@
+import { registerBlockType } from '@wordpress/blocks';
+
+import { BlockEdit } from './edit';
+import metadata from './block.json';
+import Icon from './icon';
+
+registerBlockType(metadata, {
+	icon: Icon,
+	edit: BlockEdit,
+	save: () => null,
+});

includes/blocks/mailchimp/index.js

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Displays a signup form.
+ *
+ * @package Mailchimp
+ */
+
+?>
+<div <?php echo get_block_wrapper_attributes(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+	<?php
+	mailchimp_sf_signup_form();
+	?>
+</div>

includes/blocks/mailchimp/markup.php

@@ -816,6 +816,38 @@ function mailchimp_sf_shortcode() {
 }
 add_shortcode( 'mailchimpsf_form', 'mailchimp_sf_shortcode' );
 
+/**
+ * Add block
+ *
+ * @return void
+ */
+function mailchimp_sf_block() {
+	// In line with conditional register of the widget.
+	if ( ! mailchimp_sf_get_api() ) {
+		return;
+	}
+
+	$blocks_dist_path = plugin_dir_path( __FILE__ ) . 'dist/blocks/';
+
+	if ( file_exists( $blocks_dist_path ) ) {
+		$block_json_files = glob( $blocks_dist_path . '*/block.json' );
+		foreach ( $block_json_files as $filename ) {
+			$block_folder = dirname( $filename );
+			register_block_type( $block_folder );
+		}
+	}
+
+	$data = 'window.MAILCHIMP_ADMIN_SETTINGS_URL = "' . esc_js( esc_url( admin_url( 'admin.php?page=mailchimp_sf_options' ) ) ) . '";';
+	wp_add_inline_script( 'mailchimp-mailchimp-editor-script', $data, 'before' );
+
+	ob_start();
+	require_once MCSF_DIR . '/views/css/frontend.php';
+	$data = ob_get_clean();
+	wp_add_inline_style( 'mailchimp-mailchimp-editor-style', $data );
+}
+
+add_action( 'init', 'mailchimp_sf_block' );
+
 /**
  * Attempts to signup a user, per the $_POST args.
  *

mailchimp.php

@@ -526,7 +526,7 @@ public function widget( $args, $instance ) {
 	 */
 	public function form( $instance ) {
 		?>
-<p>Great work! Your widget is ready to go — just head <a href="<?php echo esc_url( admin_url( 'options-general.php?page=mailchimp_sf_options' ) ); ?>">over here</a> if you'd like to adjust your settings.</p>
+<p>Great work! Your widget is ready to go — just head <a href="<?php echo esc_url( admin_url( 'admin.php?page=mailchimp_sf_options' ) ); ?>">over here</a> if you'd like to adjust your settings.</p>
 		<?php
 	}
 }