Skip to content

Commit

Permalink
feat: add template selection modal
Browse files Browse the repository at this point in the history
  • Loading branch information
Jefferson Rabb authored Apr 14, 2020
2 parents 89ce8a9 + 07bc7ed commit a765ddc
Show file tree
Hide file tree
Showing 12 changed files with 415 additions and 14 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.DS_Store
/vendor/
/node_modules/
/dist/
Expand Down
7 changes: 7 additions & 0 deletions includes/class-newspack-newsletters-renderer.php
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,13 @@ private static function render_mjml_component( $block, $is_in_column = false, $i
if ( 'thumbnail' == $attrs['sizeSlug'] ) {
$img_attrs['width'] = '150px';
}
} elseif ( isset( $attrs['className'] ) ) {
if ( 'size-medium' == $attrs['className'] ) {
$img_attrs['width'] = '300px';
}
if ( 'size-thumbnail' == $attrs['className'] ) {
$img_attrs['width'] = '150px';
}
}
if ( isset( $attrs['width'] ) ) {
$img_attrs['width'] = $attrs['width'] . 'px';
Expand Down
82 changes: 75 additions & 7 deletions includes/class-newspack-newsletters.php
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ public function __construct() {
add_action( 'enqueue_block_editor_assets', [ __CLASS__, 'enqueue_block_editor_assets' ] );
add_action( 'enqueue_block_editor_assets', [ __CLASS__, 'disable_gradients' ] );
add_action( 'rest_api_init', [ __CLASS__, 'rest_api_init' ] );
add_action( 'save_post_' . self::NEWSPACK_NEWSLETTERS_CPT, [ __CLASS__, 'sync_with_mailchimp' ], 10, 2 );
add_action( 'save_post_' . self::NEWSPACK_NEWSLETTERS_CPT, [ __CLASS__, 'sync_with_mailchimp' ], 10, 3 );
add_action( 'publish_' . self::NEWSPACK_NEWSLETTERS_CPT, [ __CLASS__, 'send_campaign' ], 10, 2 );
add_filter( 'allowed_block_types', [ __CLASS__, 'newsletters_allowed_block_types' ], 10, 2 );
include_once dirname( __FILE__ ) . '/class-newspack-newsletters-settings.php';
Expand Down Expand Up @@ -128,6 +128,15 @@ public static function enqueue_block_editor_assets() {
filemtime( NEWSPACK_NEWSLETTERS_PLUGIN_FILE . '/dist/editor.js' ),
true
);

wp_localize_script(
'newspack-newsletters',
'newspack_newsletters_data',
[
'templates' => self::get_newsletter_templates(),
]
);

wp_register_style(
'newspack-newsletters',
plugins_url( '../dist/editor.css', __FILE__ ),
Expand Down Expand Up @@ -464,13 +473,13 @@ public static function api_permissions_check( $request ) {
*
* @param string $id post ID.
* @param WP_Post $post the post.
* @param boolean $update whether it's an update.
*/
public static function sync_with_mailchimp( $id, $post ) {
public static function sync_with_mailchimp( $id, $post, $update ) {
$api_key = self::mailchimp_api_key();
if ( ! $api_key ) {
return;
}
$mc_campaign_id = get_post_meta( $id, 'mc_campaign_id', true );

$mc = new Mailchimp( $api_key );
$payload = [
Expand All @@ -482,16 +491,31 @@ public static function sync_with_mailchimp( $id, $post ) {
],
];

$campaign = $mc_campaign_id ? $mc->patch( "campaigns/$mc_campaign_id", $payload ) : $mc->post( 'campaigns', $payload );
$campaign_id = $campaign['id'];
update_post_meta( $id, 'mc_campaign_id', $campaign_id );
$mc_campaign_id = get_post_meta( $id, 'mc_campaign_id', true );

if ( $update && $mc_campaign_id ) {
$mc->patch( "campaigns/$mc_campaign_id", $payload );
} else {
$campaign = $mc->post( 'campaigns', $payload );
$mc_campaign_id = $campaign['id'];
update_post_meta( $id, 'mc_campaign_id', $mc_campaign_id );
}

$renderer = new Newspack_Newsletters_Renderer();
$content_payload = [
'html' => $renderer->render_html_email( $post ),
];

$result = $mc->put( "campaigns/$campaign_id/content", $content_payload );
$result = $mc->put( "campaigns/$mc_campaign_id/content", $content_payload );
}

/**
* Get newsletter templates.
*
* @return array Array of templates.
*/
public static function get_newsletter_templates() {
return apply_filters( 'newspack_newsletters_templates', [] );
}

/**
Expand Down Expand Up @@ -536,5 +560,49 @@ public static function send_campaign( $id, $post ) {
];
$result = $mc->post( "campaigns/$mc_campaign_id/actions/send", $payload );
}

/**
* Token replacement for newsletter templates.
*
* @param string $content Template content.
* @param array $extra Associative array of additional tokens to replace.
* @return string Content.
*/
public static function template_token_replacement( $content, $extra = [] ) {
$sitename = get_bloginfo( 'name' );
$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = $custom_logo_id ? wp_get_attachment_image_src( $custom_logo_id, 'thumbnail' )[0] : null;

$sitename_block = sprintf(
'<!-- wp:heading {"align":"center","level":1} --><h1 class="has-text-align-center">%s</h1><!-- /wp:heading -->',
$sitename
);

$logo_block = $logo ? sprintf(
'<!-- wp:image {"align":"center","id":%s,"sizeSlug":"thumbnail"} --><figure class="wp-block-image aligncenter size-thumbnail"><img src="%s" alt="%s" class="wp-image-%s" /></figure><!-- /wp:image -->',
$custom_logo_id,
$logo,
$sitename,
$custom_logo_id
) : null;

$search = array_merge(
[
'__SITENAME__',
'__LOGO__',
'__LOGO_OR_SITENAME__',
],
array_keys( $extra )
);
$replace = array_merge(
[
$sitename,
$logo,
$logo ? $logo_block : $sitename_block,
],
array_values( $extra )
);
return str_replace( $search, $replace, $content );
}
}
Newspack_Newsletters::instance();
36 changes: 36 additions & 0 deletions newspack-newsletters-templates.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<?php
/**
* Register newsletter templates.
*
* @package Newspack_Newsletters
*/

add_filter(
'newspack_newsletters_templates',
function( $templates ) {
$decode = json_decode( file_get_contents( NEWSPACK_NEWSLETTERS_PLUGIN_FILE . 'src/templates/blank.json'), true ); //phpcs:ignore
$content = $decode['content'];
$templates[] = [
'content' => $content,
'title' => __( 'Blank', 'newspack-newsletters' ),
];
return $templates;
},
10,
2
);

add_filter(
'newspack_newsletters_templates',
function( $templates ) {
$decode = json_decode( file_get_contents( NEWSPACK_NEWSLETTERS_PLUGIN_FILE . 'src/templates/template-1.json'), true ); //phpcs:ignore
$content = Newspack_Newsletters::template_token_replacement( $decode['content'] );
$templates[] = [
'content' => $content,
'title' => __( 'Template 1', 'newspack-newsletters' ),
];
return $templates;
},
10,
2
);
4 changes: 3 additions & 1 deletion newspack-newsletters.php
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

defined( 'ABSPATH' ) || exit;

// Define NEWSPACK_ADS_PLUGIN_FILE.
// Define NEWSPACK_NEWSLETTERS_PLUGIN_FILE.
if ( ! defined( 'NEWSPACK_NEWSLETTERS_PLUGIN_FILE' ) ) {
define( 'NEWSPACK_NEWSLETTERS_PLUGIN_FILE', plugin_dir_path( __FILE__ ) );
}
Expand All @@ -23,3 +23,5 @@
if ( ! class_exists( 'Newspack_Newsletters' ) ) {
include_once dirname( __FILE__ ) . '/includes/class-newspack-newsletters.php';
}

require_once dirname( __FILE__ ) . '/newspack-newsletters-templates.php';
5 changes: 5 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@
},
"dependencies": {
"@wordpress/api-fetch": "^3.12.0",
"@wordpress/base-styles": "^1.5.0",
"@wordpress/block-editor": "^3.8.0",
"@wordpress/blocks": "^6.13.0",
"@wordpress/components": "^9.3.0",
"@wordpress/compose": "^3.12.0",
Expand All @@ -99,6 +101,7 @@
"@wordpress/element": "^2.12.0",
"@wordpress/hooks": "^2.7.0",
"@wordpress/i18n": "^3.10.0",
"@wordpress/keycodes": "^2.10.0",
"@wordpress/plugins": "^2.13.0",
"lodash": "^4.17.15",
"webpack": "^4.42.1"
Expand Down
88 changes: 88 additions & 0 deletions src/components/template-modal/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/**
* Newsletter Modal
*/

/**
* WordPress dependencies
*/
import { parse } from '@wordpress/blocks';
import { __, sprintf } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { Button, Modal } from '@wordpress/components';
import { ENTER, SPACE } from '@wordpress/keycodes';
import { BlockPreview } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import './style.scss';

class TemplateModal extends Component {
generateBlockPreview = () => {
const { selectedTemplate, templates } = this.props;
return templates && templates[ selectedTemplate ]
? parse( templates[ selectedTemplate ].content )
: null;
};
render = () => {
const { onInsertTemplate, onSelectTemplate, selectedTemplate, templates } = this.props;
const blockPreview = this.generateBlockPreview();
return (
<Modal
className="newspack-newsletters-modal__frame"
isDismissible={ false }
overlayClassName="newspack-newsletters-modal__screen-overlay"
shouldCloseOnClickOutside={ false }
shouldCloseOnEsc={ false }
title={ __( 'Select a layout', 'newspack-newsletters' ) }
>
<div className="newspack-newsletters-modal__content">
<div className="newspack-newsletters-modal__patterns">
<div className="block-editor-patterns">
{ ( templates || [] ).map( ( { title, content }, index ) => (
<div
key={ index }
className={
selectedTemplate === index
? 'selected block-editor-patterns__item'
: 'block-editor-patterns__item'
}
onClick={ () => onSelectTemplate( index ) }
onKeyDown={ event => {
if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
event.preventDefault();
onSelectTemplate( index );
}
} }
role="button"
tabIndex="0"
aria-label={ title }
>
<div className="block-editor-patterns__item-preview">
<BlockPreview blocks={ parse( content ) } viewportWidth={ 810 } />
</div>
<div className="block-editor-patterns__item-title">{ title }</div>
</div>
) ) }
</div>
</div>

<div className="newspack-newsletters-modal__preview">
{ blockPreview && <BlockPreview blocks={ blockPreview } viewportWidth={ 810 } /> }
</div>
</div>

{ selectedTemplate !== null && (
<Button isPrimary onClick={ () => onInsertTemplate( selectedTemplate ) }>
{ sprintf(
__( 'Use %s layout', 'newspack-newsletter' ),
templates[ selectedTemplate ].title
) }
</Button>
) }
</Modal>
);
};
}

export default TemplateModal;
Loading

0 comments on commit a765ddc

Please sign in to comment.