Add email newsletter block (studiopress#79)

* First pass at newsletter block. studiopress#73

* Fix composer dev dependencies

* Wire up newsletter form processing. Coding standards. studiopress#73

* Don't echo the nonce in block render function. studiopress#73

* Add Success Message setting. Clean up attribute registration. studiopress#73

* Namespace exceptions and interface. studiopress#73

* Add some error checking to list fetching. studiopress#73

* Complete the PHP version compatibility checking. studiopress#73

* Add stylesheets

* Add wrapper component and classes

* Clarify comment in compat.php.

* Change class prefix to ab-

* Always show RichText field

* Add padding styles to container

* Add background color component

* Add title and text to block

* Update methods to support additional arguments array. studiopress#73

* Add title and text to front end.

* Coding standards. studiopress#73

* Add color component support

- Adds background/text color component
- Implements contrast checker
-

* Remove title and text options

* Finish color integration

- Create a color class component
- Wire up color class
- Add button settings panel and wire up button settings
- Move button color to button settings panel
- Clean up unused const and imports

* Add color classes to front end

* Fix color array

* Reformat color array

* Make color props consistent

* Rename some variables. Coding standards.

* Use setButtonTextColor and setButtonBackgroundColor

* Use getColorClassName. Output classes on front end.

* Change attributes to match core pattern

* Wire up custom colors. Yay!

* Wire up custom colors to the front end.

* Refactor variables and style output

* Final touches to color

- Create an edit component file
- Tie editor colors to prop.color for consistent output between default color, custom color, and theme defined color

* Move const

* Add default padding when background is applied.

* Add form styles class

* Remove unused components

* Remove padding on background

* Add colors to inspector

- Move from color component to inspector
- Add contrast checkers for multiple color schemes

* Update padding component

- Allow title and help text to be passed through.

* Reorganize the settings

- Move padding and button settings into General panel.
- Simplify panel titles.
- Only open the newsletter panel by default until they select a list, then show the General panel instead.

* Add margin settings

- Create margin component
- Add margin styles to editor and front end

* Add default form styles

* Add Generic.Strings.UnnecessaryStringConcat.Found to phpcs exclusions.

* Return button text to original state.

* Clean up attribute variables. Coding standards.

* Add a "Select a list" choice in the mailing list dropdown.

* Fix indents in inspector component files.

* Fix idents in block-button editor.scss.

* Remove misspelled comment.

* Documentation tweaks.

* Remove success message styling

* Use PUT method when subscribing members.

When using PUT, Mailchimp will insert new members and/or update existing ones.

* Add classes to frontend label and input field.

* Improve error checking on Mailchimp API calls.

* Improve front-end error display.

* Fix hex class output in favor of custom class

* Add wp.a11y.speak support to submission process.

* Add link to Mailchimp api docs.

* Coding standards

* Improve form style output to account for themes

* Prefix custom color class to avoid conflict

atomicblocks.php

@@ -19,11 +19,15 @@
 	exit;
 }
 
-
 /**
  * Initialize the blocks
  */
 function atomic_blocks_loader() {
+
+	$atomic_blocks_includes_dir = plugin_dir_path( __FILE__ ) . 'includes/';
+	$atomic_blocks_src_dir      = plugin_dir_path( __FILE__ ) . 'src/';
+	$atomic_blocks_dist_dir     = plugin_dir_path( __FILE__ ) . 'dist/';
+
 	/**
 	 * Load the blocks functionality
 	 */
@@ -43,6 +47,27 @@ function atomic_blocks_loader() {
 	 * Load Post Grid PHP
 	 */
 	require_once plugin_dir_path( __FILE__ ) . 'src/blocks/block-post-grid/index.php';
+
+	/**
+	 * Load the newsletter block and related dependencies.
+	 */
+	if ( PHP_VERSION_ID >= 50600 ) {
+		if ( ! class_exists( '\DrewM\MailChimp\MailChimp' ) ) {
+			require_once $atomic_blocks_includes_dir . 'libraries/drewm/mailchimp-api/MailChimp.php';
+		}
+
+		require_once $atomic_blocks_includes_dir . 'exceptions/class-api-error-exception.php';
+		require_once $atomic_blocks_includes_dir . 'exceptions/class-mailchimp-api-error-exception.php';
+		require_once $atomic_blocks_includes_dir . 'interfaces/newsletter-provider-interface.php';
+		require_once $atomic_blocks_includes_dir . 'classes/class-mailchimp.php';
+		require_once $atomic_blocks_includes_dir . 'newsletter/newsletter-functions.php';
+		require_once $atomic_blocks_src_dir . 'blocks/block-newsletter/index.php';
+	}
+
+	/**
+	 * Compatibility functionality.
+	 */
+	require_once $atomic_blocks_includes_dir . 'compat.php';
 }
 add_action( 'plugins_loaded', 'atomic_blocks_loader' );
 
@@ -90,3 +115,12 @@ function atomic_blocks_image_sizes() {
 	add_image_size( 'ab-block-post-grid-square', 600, 600, true );
 }
 add_action( 'after_setup_theme', 'atomic_blocks_image_sizes' );
+
+/**
+ * Returns the full path and filename of the main Atomic Blocks plugin file.
+ *
+ * @return string
+ */
+function atomic_blocks_main_plugin_file() {
+	return __FILE__;
+}

composer.json

@@ -1,13 +1,15 @@
 {
-    "require": {
-        "dealerdirect/phpcodesniffer-composer-installer": "^0.5.0",
-        "phpcompatibility/phpcompatibility-wp": "^2.0",
-        "roave/security-advisories": "dev-master",
-        "squizlabs/php_codesniffer": "^3.4",
-        "wp-coding-standards/wpcs": "^2.0"
-    },
-    "scripts": {
-        "phpcs": "phpcs *.php dist src -sp --runtime-set testVersion 5.2-",
-        "phpcs-changed": "./bin/phpcs-changed.sh"
-    }
+	"require-dev": {
+		"dealerdirect/phpcodesniffer-composer-installer": "^0.5.0",
+		"phpcompatibility/phpcompatibility-wp": "^2.0",
+		"roave/security-advisories": "dev-master",
+		"squizlabs/php_codesniffer": "^3.4",
+		"wp-coding-standards/wpcs": "^2.0",
+		"phpunit/phpunit": "^5"
+	},
+	"scripts": {
+		"phpcs": "phpcs *.php dist src -sp --runtime-set testVersion 5.2-",
+		"phpcs-changed": "./bin/phpcs-changed.sh",
+		"phpunit": "phpunit"
+	}
 }

dist/assets/js/newsletter-block-functions.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var $ = jQuery;
+
+var AtomicBlocksNewsletterSubmission = {
+
+	init: function() {
+		$( '.ab-newsletter-submit' ).on( 'click', function( event ) {
+
+			event.preventDefault();
+
+			wp.a11y.speak( atomic_blocks_newsletter_vars.l10n.a11y.submission_processing );
+
+			var button = $( this );
+
+			var button_text_original = button.text();
+
+			button.text( atomic_blocks_newsletter_vars.l10n.button_text_processing ).prop( 'disabled', true );
+
+			var form = $( this ).parents( 'form' );
+
+			var email = button.parent().find( "[name='ab-newsletter-email-address']" ).val();
+
+			var provider = button.parent().find( "[name='ab-newsletter-mailing-list-provider']" ).val();
+
+			var list = button.parent().find( "[name='ab-newsletter-mailing-list']" ).val();
+
+			var successMessage = button.parent().find( "[name='ab-newsletter-success-message']" ).val();
+
+			var errorMessageContainer = button.parents( '.ab-block-newsletter' ).find( '.ab-block-newsletter-errors' );
+
+			if ( ! email ) {
+				button.text( button_text_original ).prop( 'disabled', false );
+				wp.a11y.speak( atomic_blocks_newsletter_vars.l10n.a11y.submission_failed );
+				return;
+			}
+
+			if ( ! provider || ! list ) {
+				form.html( '<p class="ab-newsletter-submission-message">' + atomic_blocks_newsletter_vars.l10n.invalid_configuration + '</p>' );
+				return;
+			}
+
+			$.ajax( {
+				data: {
+					action: 'atomic_blocks_newsletter_submission',
+					atomic_blocks_newsletter_email: email,
+					atomic_blocks_newsletter_mailing_list_provider: provider,
+					atomic_blocks_newsletter_mailing_list: list,
+					atomic_blocks_newsletter_form_nonce: $( '#ab-newsletter-form-nonce' ).val(),
+					atomic_blocks_newsletter_success_message: successMessage,
+				},
+				type: 'post',
+				url: atomic_blocks_newsletter_vars.ajaxurl,
+				success: function( response ) {
+					if ( response.success ) {
+						form.html( '<p class="ab-newsletter-submission-message">' + response.data.message + '</p>' );
+						wp.a11y.speak( atomic_blocks_newsletter_vars.l10n.a11y.submission_succeeded );
+					}
+
+					if ( ! response.success ) {
+						errorMessageContainer.html( '<p>' + response.data.message + '</p>' ).fadeIn();
+						button.text( button_text_original ).prop( 'disabled', false );
+						wp.a11y.speak( atomic_blocks_newsletter_vars.l10n.a11y.submission_failed );
+					}
+
+				},
+				failure: function( response ) {
+					errorMessageContainer.html( '<p>' + response.data.message + '</p>' ).fadeIn();
+				}
+
+			} );
+		} );
+
+		$( '.ab-newsletter-email-address-input' ).on( 'keyup', function( event ) {
+			$( '.ab-block-newsletter-errors' ).html('').fadeOut();
+		} );
+	}
+}
+
+$( document ).ready( function() {
+	AtomicBlocksNewsletterSubmission.init();
+} );

dist/getting-started/getting-started.php

@@ -56,6 +56,26 @@ function atomic_blocks_getting_started_menu() {
 		'dashicons-screenoptions'
 	);
 
+	add_submenu_page(
+		'atomic-blocks',
+		esc_html__( 'Getting Started', 'atomic-blocks' ),
+		esc_html__( 'Getting Started', 'atomic-blocks' ),
+		'manage_options',
+		'atomic-blocks',
+		'atomic_blocks_getting_started_page'
+	);
+
+	if ( PHP_VERSION_ID >= 50600 ) {
+		add_submenu_page(
+			'atomic-blocks',
+			esc_html__( 'Atomic Blocks Settings', 'atomic-blocks' ),
+			esc_html__( 'Settings', 'atomic-blocks' ),
+			'manage_options',
+			'atomic-blocks-plugin-settings',
+			'atomic_blocks_render_settings_page'
+		);
+	}
+
 }
 add_action( 'admin_menu', 'atomic_blocks_getting_started_menu' );
 
@@ -431,3 +451,49 @@ function atomic_blocks_getting_started_page() {
 	</div><!-- .getting-started -->
 	<?php
 }
+
+/**
+ * Renders the plugin settings page.
+ */
+function atomic_blocks_render_settings_page() {
+
+	$pages_dir = trailingslashit( dirname( __FILE__ ) ) . 'pages/';
+
+	include $pages_dir . 'settings-main.php';
+}
+
+add_action( 'admin_init', 'atomic_blocks_save_settings' );
+/**
+ * Saves the plugin settings.
+ */
+function atomic_blocks_save_settings() {
+
+	// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotValidated,WordPress.Security.ValidatedSanitizedInput.MissingUnslash,WordPress.Security.ValidatedSanitizedInput.InputNotSanitized -- Handled below.
+	if ( empty( $_POST['atomic-blocks-settings'] ) ) {
+		return;
+	}
+
+	if ( empty( $_POST['atomic-blocks-settings-save-nonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['atomic-blocks-settings-save-nonce'] ) ), 'atomic-blocks-settings-save-nonce' ) ) {
+		return;
+	}
+
+	if ( ! current_user_can( 'manage_options' ) ) {
+		return;
+	}
+
+	// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotValidated,WordPress.Security.ValidatedSanitizedInput.MissingUnslash,WordPress.Security.ValidatedSanitizedInput.InputNotSanitized -- Handled below.
+	$posted_settings = $_POST['atomic-blocks-settings'];
+
+	/**
+	 * Process the Mailchimp API key setting.
+	 */
+	if ( ! empty( $posted_settings['mailchimp-api-key'] ) ) {
+		update_option( 'atomic_blocks_mailchimp_api_key', sanitize_text_field( wp_unslash( $posted_settings['mailchimp-api-key'] ) ), false );
+	} else {
+		delete_option( 'atomic_blocks_mailchimp_api_key' );
+	}
+
+	$redirect = remove_query_arg( 'atomic-blocks-settings-saved', wp_get_referer() );
+	wp_safe_redirect( $redirect . '&atomic-blocks-settings-saved=true' );
+	exit;
+}

dist/getting-started/pages/settings-general.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * General tab for the settings page.
+ *
+ * @package AtomicBlocks\Settings
+ */
+
+$atomic_blocks_mailchimp_api_key = get_option( 'atomic_blocks_mailchimp_api_key', '' );
+?>
+<table class="form-table">
+	<tbody>
+		<tr>
+			<th>
+				<label for="atomic-blocks-settings[mailchimp-api-key]">
+					<?php esc_html_e( 'Mailchimp API Key', 'atomic-blocks' ); ?>
+				</label>
+			</th>
+			<td>
+				<input type="text" id="atomic-blocks-settings[mailchimp-api-key]" name="atomic-blocks-settings[mailchimp-api-key]" size="40" value="<?php echo esc_attr( $atomic_blocks_mailchimp_api_key ); ?>" />
+				<?php
+					$atomic_blocks_mailchimp_api_key_link = sprintf(
+						'<p><a href="%1$s" target="_blank" rel="noreferrer noopener">%2$s</a></p>',
+						'https://mailchimp.com/help/about-api-keys/',
+						esc_html__( 'Find your Mailchimp API key.', 'atomic-blocks' )
+					);
+					echo wp_kses_post( $atomic_blocks_mailchimp_api_key_link );
+					?>
+			</td>
+		</tr>
+	</tbody>
+</table>

dist/getting-started/pages/settings-main.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Wrapper for main settings page.
+ *
+ * @package AtomicBlocks\Settings
+ */
+
+?>
+<div class="wrap">
+	<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
+
+	<?php
+	// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Nonce verified in settings save routine. This is a false positive.
+	if ( ! empty( $_GET['atomic-blocks-settings-saved'] ) && $_GET['atomic-blocks-settings-saved'] === 'true' ) {
+		echo '<div class="updated fade"><p>' . esc_html__( 'Settings saved.', 'atomic-blocks' ) . '</p></div>';
+	}
+	?>
+
+	<form method="post" action="options.php" class="atomic-blocks-options-form">
+			<?php
+			require $pages_dir . 'settings-general.php';
+			submit_button( esc_html__( 'Save Settings', 'atomic-blocks' ) );
+			wp_nonce_field( 'atomic-blocks-settings-save-nonce', 'atomic-blocks-settings-save-nonce' );
+			?>
+	</form>
+</div>