diff --git a/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js b/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js new file mode 100644 index 0000000000..26231ec20f --- /dev/null +++ b/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js @@ -0,0 +1,63 @@ +import App from 'newsletter_editor/App'; +import BaseBlock from 'newsletter_editor/blocks/base'; + +const BlockModel = BaseBlock.BlockModel.extend({ + stale: ['styles'], + defaults() { + return this._getDefaults({ + type: 'woocommerceHeading', + styles: { + fontColor: '#000000', + backgroundColor: '#FFFFFF', + }, + }, App.getConfig().get('blockDefaults.woocommerceHeading')); + }, +}); + +const BlockToolsView = BaseBlock.BlockToolsView.extend({ + tools: { move: true }, +}); + +const WidgetView = BaseBlock.WidgetView.extend({ + className: BaseBlock.WidgetView.prototype.className + ' mailpoet_droppable_layout_block', + getTemplate() { return window.templates.woocommerceHeadingInsertion; }, + behaviors: { + DraggableBehavior: { + cloneOriginal: true, + drop() { + return new BlockModel({}, { parse: true }); + }, + }, + }, +}); + +const BlockView = BaseBlock.BlockView.extend({ + className: 'mailpoet_block mailpoet_woocommerce_heading_block mailpoet_droppable_block', + getTemplate() { return window.templates.woocommerceHeadingBlock; }, + regions: { + toolsRegion: '.mailpoet_tools', + }, + onDragSubstituteBy() { return WidgetView; }, + onRender() { + this.toolsView = new BlockToolsView({ model: this.model }); + this.showChildView('toolsRegion', this.toolsView); + }, + templateContext() { + return { + viewCid: this.cid, + model: this.model.toJSON(), + styles: this.model.get('styles').toJSON(), + }; + }, +}); + +App.on('before:start', (BeforeStartApp) => { + BeforeStartApp.registerBlockType('woocommerceHeading', { + blockModel: BlockModel, + blockView: BlockView, + }); +}); + +export default { + BlockModel, BlockView, BlockToolsView, WidgetView, +}; diff --git a/assets/js/src/newsletter_editor/webpack_index.jsx b/assets/js/src/newsletter_editor/webpack_index.jsx index 31eaaefa44..57cca8cbc3 100644 --- a/assets/js/src/newsletter_editor/webpack_index.jsx +++ b/assets/js/src/newsletter_editor/webpack_index.jsx @@ -49,3 +49,4 @@ import 'newsletter_editor/blocks/posts.js'; // side effect - calls App.on() import 'newsletter_editor/blocks/products.js'; // side effect - calls App.on() import 'newsletter_editor/blocks/social.js'; // side effect - calls App.on() import 'newsletter_editor/blocks/woocommerceContent.js'; // side effect - calls App.on() +import 'newsletter_editor/blocks/woocommerceHeading.js'; // side effect - calls App.on() diff --git a/views/newsletter/editor.html b/views/newsletter/editor.html index b25e379c90..f4faad2d71 100644 --- a/views/newsletter/editor.html +++ b/views/newsletter/editor.html @@ -281,6 +281,18 @@ 'newsletter_editor_template_woocommerce_content_widget', 'newsletter/templates/blocks/woocommerceContent/widget.hbs' ) %> + <%= partial( + 'newsletter_editor_template_woocommerce_heading_block', + 'newsletter/templates/blocks/woocommerceHeading/block.hbs' + ) %> + <%= partial( + 'newsletter_editor_template_woocommerce_heading_widget', + 'newsletter/templates/blocks/woocommerceHeading/widget.hbs' + ) %> + <%= partial( + 'newsletter_editor_template_woocommerce_heading_settings', + 'newsletter/templates/blocks/woocommerceHeading/settings.hbs' + ) %> <% endblock %> <% block content %> @@ -620,6 +632,16 @@ woocommerceContentInsertion: Handlebars.compile( jQuery('#newsletter_editor_template_woocommerce_content_widget').html() ), + + woocommerceHeadingBlock: Handlebars.compile( + jQuery('#newsletter_editor_template_woocommerce_heading_block').html() + ), + woocommerceHeadingInsertion: Handlebars.compile( + jQuery('#newsletter_editor_template_woocommerce_heading_widget').html() + ), + woocommerceHeadingBlockSettings: Handlebars.compile( + jQuery('#newsletter_editor_template_woocommerce_heading_settings').html() + ), }; var config = { @@ -1412,6 +1434,12 @@ titleColor: '<%= woocommerce.email_base_color %>', }, }, + woocommerceHeading: { + styles: { + fontColor: '#000000', + backgroundColor: '<%= woocommerce.email_base_color %>', + }, + }, }, shortcodes: <%= json_encode(shortcodes) %>, sidepanelWidth: '331px', diff --git a/views/newsletter/templates/blocks/woocommerceHeading/block.hbs b/views/newsletter/templates/blocks/woocommerceHeading/block.hbs new file mode 100644 index 0000000000..1f4cfc8339 --- /dev/null +++ b/views/newsletter/templates/blocks/woocommerceHeading/block.hbs @@ -0,0 +1,11 @@ +
+ +
+

This is the WC Heading Widget...

+
+
\ No newline at end of file diff --git a/views/newsletter/templates/blocks/woocommerceHeading/settings.hbs b/views/newsletter/templates/blocks/woocommerceHeading/settings.hbs new file mode 100644 index 0000000000..ebb6ed1e0a --- /dev/null +++ b/views/newsletter/templates/blocks/woocommerceHeading/settings.hbs @@ -0,0 +1,3 @@ +

<%= _x('WooCommerce Email Heading', 'Name of a widget in the email editor. This widget is used to display WooCommerce messages (like ”Thanks for your order!”)') %>

+ +

Settings fields here...

\ No newline at end of file diff --git a/views/newsletter/templates/blocks/woocommerceHeading/widget.hbs b/views/newsletter/templates/blocks/woocommerceHeading/widget.hbs new file mode 100644 index 0000000000..5e1aee6b2f --- /dev/null +++ b/views/newsletter/templates/blocks/woocommerceHeading/widget.hbs @@ -0,0 +1,4 @@ +
+<%= source('newsletter/templates/svg/block-icons/text.svg') %> +
+
<%= _x('WooCommerce Email Heading', 'Name of a widget in the email editor. This widget is used to display WooCommerce messages (like ”Thanks for your order!”)') %>