Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Merge pull request #1369 from mailpoet/posts-alc-image

Browse Source 
Multi-column layout in ALC/Posts [MAILPOET-1350]
This commit is contained in:
Michelle Shull
2018-06-04 07:37:56 -04:00
committed by GitHub
parent 24b63d324b 67b66856f5
commit 59d632895e
24 changed files with 1153 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl
View File

@@ -14,7 +14,7 @@
cursor: pointer
.mailpoet_automated_latest_content_block_posts
overflow: auto
overflow: hidden
pointer-events: none
& > .mailpoet_block

4
assets/css/src/newsletter_editor/contentBlocks/container.styl
View File

@@ -52,7 +52,9 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
width: $column-margin + $one-column-width + $column-margin
// More than one column
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_posts_block > .mailpoet_posts_container > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
& > .mailpoet_container_block > .mailpoet_container .mailpoet_automated_latest_content_block_posts .mailpoet_container_horizontal
// Column number detection technique found here:
// http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has

3
assets/css/src/newsletter_editor/contentBlocks/posts.styl
View File

@@ -54,3 +54,6 @@
.mailpoet_post_selection_loading
color: #999
.mailpoet_posts_container > .mailpoet_droppable_block
width: 100%

7
assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
View File

@@ -74,6 +74,7 @@ define([
defaults: function () {
return this._getDefaults({
type: 'automatedLatestContent',
withLayout: false,
amount: '5',
contentType: 'post', // 'post'|'page'|'mailpoet_page'
terms: [], // List of category and tag objects
@@ -385,12 +386,6 @@ define([
blockModel: Module.AutomatedLatestContentBlockModel,
blockView: Module.AutomatedLatestContentBlockView
});
BeforeStartApp.registerWidget({
name: 'automatedLatestContent',
widgetView: Module.AutomatedLatestContentWidgetView,
priority: 97
});
});
App.on('start', function (StartApp) {

400
assets/js/src/newsletter_editor/blocks/automatedLatestContentLayout.js Normal file
View File

@@ -0,0 +1,400 @@
/* eslint-disable func-names */
/**
* Automated latest content block with image alignment.
*/
define([
'newsletter_editor/App',
'newsletter_editor/blocks/base',
'newsletter_editor/blocks/button',
'newsletter_editor/blocks/divider',
'newsletter_editor/components/communication',
'mailpoet',
'backbone.supermodel',
'underscore',
'jquery'
], function (
App,
BaseBlock,
ButtonBlock,
DividerBlock,
CommunicationComponent,
MailPoet,
SuperModel,
_,
jQuery
) {
'use strict';
var Module = {};
var base = BaseBlock;
Module.ALCLayoutSupervisor = SuperModel.extend({
initialize: function () {
var DELAY_REFRESH_FOR_MS = 500;
this.listenTo(
App.getChannel(),
'automatedLatestContentLayoutRefresh',
_.debounce(this.refresh, DELAY_REFRESH_FOR_MS)
);
},
refresh: function () {
var blocks;
var models = App.findModels(function (model) {
return model.get('type') === 'automatedLatestContentLayout';
}) || [];
if (models.length === 0) return;
blocks = _.map(models, function (model) {
return model.toJSON();
});
CommunicationComponent.getBulkTransformedPosts({
blocks: blocks
}).then(_.partial(this.refreshBlocks, models));
},
refreshBlocks: function (models, renderedBlocks) {
_.each(
_.zip(models, renderedBlocks),
function (args) {
var model = args[0];
var contents = args[1];
model.trigger('refreshPosts', contents);
}
);
}
});
Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
stale: ['_container'],
defaults: function () {
return this._getDefaults({
type: 'automatedLatestContentLayout',
withLayout: true,
amount: '5',
contentType: 'post', // 'post'|'page'|'mailpoet_page'
terms: [], // List of category and tag objects
inclusionType: 'include', // 'include'|'exclude'
displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
titleAlignment: 'left', // 'left'|'center'|'right'
titleIsLink: false, // false|true
imageFullWidth: false, // true|false
featuredImagePosition: 'centered', // 'centered'|'left'|'right'|'alternate'|'none'
showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Author:',
showCategories: 'no', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Categories:',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Read more', // 'link'|'button'
readMoreButton: {
text: 'Read more',
url: '[postLink]'
},
sortBy: 'newest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {},
_container: new (App.getBlockTypeModel('container'))()
}, App.getConfig().get('blockDefaults.automatedLatestContentLayout'));
},
relations: function () {
return {
readMoreButton: App.getBlockTypeModel('button'),
divider: App.getBlockTypeModel('divider'),
_container: App.getBlockTypeModel('container')
};
},
initialize: function () {
base.BlockView.prototype.initialize.apply(this, arguments);
this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider', this._handleChanges, this);
this.listenTo(this.get('readMoreButton'), 'change', this._handleChanges);
this.listenTo(this.get('divider'), 'change', this._handleChanges);
this.on('add remove update reset', this._handleChanges);
this.on('refreshPosts', this.updatePosts, this);
},
updatePosts: function (posts) {
this.get('_container.blocks').reset(posts, { parse: true });
},
/**
* Batch more changes during a specific time, instead of fetching
* ALC posts on each model change
*/
_handleChanges: function () {
this._updateDefaults();
App.getChannel().trigger('automatedLatestContentLayoutRefresh');
}
});
Module.AutomatedLatestContentLayoutBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block',
initialize: function () {
function replaceButtonStylesHandler(data) {
this.model.set({ readMoreButton: data });
}
App.getChannel().on('replaceAllButtonStyles', replaceButtonStylesHandler.bind(this));
},
getTemplate: function () { return window.templates.automatedLatestContentLayoutBlock; },
regions: {
toolsRegion: '.mailpoet_tools',
postsRegion: '.mailpoet_automated_latest_content_block_posts'
},
modelEvents: _.extend(
_.omit(base.BlockView.prototype.modelEvents, 'change'),
{
postsChanged: 'render'
}),
events: _.extend(base.BlockView.prototype.events, {
'click .mailpoet_automated_latest_content_block_overlay': 'showSettings'
}),
onDragSubstituteBy: function () { return Module.AutomatedLatestContentLayoutWidgetView; },
onRender: function () {
var ContainerView = App.getBlockTypeView('container');
var renderOptions = {
disableTextEditor: true,
disableDragAndDrop: true,
emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay')
};
this.toolsView = new Module.AutomatedLatestContentLayoutBlockToolsView({ model: this.model });
this.showChildView('toolsRegion', this.toolsView);
this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
}
});
Module.AutomatedLatestContentLayoutBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function () { return Module.AutomatedLatestContentLayoutBlockSettingsView; }
});
// Sidebar view container
Module.AutomatedLatestContentLayoutBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function () { return window.templates.automatedLatestContentLayoutBlockSettings; },
events: function () {
return {
'click .mailpoet_automated_latest_content_hide_display_options': 'toggleDisplayOptions',
'click .mailpoet_automated_latest_content_show_display_options': 'toggleDisplayOptions',
'click .mailpoet_automated_latest_content_select_button': 'showButtonSettings',
'click .mailpoet_automated_latest_content_select_divider': 'showDividerSettings',
'change .mailpoet_automated_latest_content_read_more_type': 'changeReadMoreType',
'change .mailpoet_automated_latest_content_display_type': 'changeDisplayType',
'change .mailpoet_automated_latest_content_title_format': 'changeTitleFormat',
'change .mailpoet_automated_latest_content_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
'change .mailpoet_automated_latest_content_show_divider': _.partial(this.changeBoolField, 'showDivider'),
'input .mailpoet_automated_latest_content_show_amount': _.partial(this.changeField, 'amount'),
'change .mailpoet_automated_latest_content_content_type': _.partial(this.changeField, 'contentType'),
'change .mailpoet_automated_latest_content_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
'change .mailpoet_automated_latest_content_title_alignment': _.partial(this.changeField, 'titleAlignment'),
'change .mailpoet_automated_latest_content_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
'change .mailpoet_automated_latest_content_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
'change .mailpoet_automated_latest_content_show_author': _.partial(this.changeField, 'showAuthor'),
'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
'change .mailpoet_automated_latest_content_show_categories': _.partial(this.changeField, 'showCategories'),
'input .mailpoet_automated_latest_content_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
'input .mailpoet_automated_latest_content_read_more_text': _.partial(this.changeField, 'readMoreText'),
'change .mailpoet_automated_latest_content_sort_by': _.partial(this.changeField, 'sortBy'),
'click .mailpoet_done_editing': 'close'
};
},
onRender: function () {
var that = this;
// Dynamically update available post types
CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
this.$('.mailpoet_automated_latest_content_categories_and_tags').select2({
multiple: true,
allowClear: true,
placeholder: MailPoet.I18n.t('categoriesAndTags'),
ajax: {
data: function (params) {
return {
term: params.term
};
},
transport: function (options, success, failure) {
var taxonomies;
var termsPromise;
var promise = CommunicationComponent.getTaxonomies(
that.model.get('contentType')
).then(function (tax) {
taxonomies = tax;
// Fetch available terms based on the list of taxonomies already fetched
termsPromise = CommunicationComponent.getTerms({
search: options.data.term,
taxonomies: _.keys(taxonomies)
}).then(function (terms) {
return {
taxonomies: taxonomies,
terms: terms
};
});
return termsPromise;
});
promise.then(success);
promise.fail(failure);
return promise;
},
processResults: function (data) {
// Transform taxonomies and terms into select2 compatible format
return {
results: _.map(
data.terms,
function (item) {
return _.defaults({
text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
id: item.term_id
}, item);
}
)
};
}
}
}).on({
'select2:select': function (event) {
var terms = that.model.get('terms');
terms.add(event.params.data);
// Reset whole model in order for change events to propagate properly
that.model.set('terms', terms.toJSON());
},
'select2:unselect': function (event) {
var terms = that.model.get('terms');
terms.remove(event.params.data);
// Reset whole model in order for change events to propagate properly
that.model.set('terms', terms.toJSON());
}
}).trigger('change');
},
toggleDisplayOptions: function () {
var el = this.$('.mailpoet_automated_latest_content_display_options');
var showControl = this.$('.mailpoet_automated_latest_content_show_display_options');
if (el.hasClass('mailpoet_closed')) {
el.removeClass('mailpoet_closed');
showControl.addClass('mailpoet_hidden');
} else {
el.addClass('mailpoet_closed');
showControl.removeClass('mailpoet_hidden');
}
},
showButtonSettings: function () {
var buttonModule = ButtonBlock;
(new buttonModule.ButtonBlockSettingsView({
model: this.model.get('readMoreButton'),
renderOptions: {
displayFormat: 'subpanel',
hideLink: true,
hideApplyToAll: true
}
})).render();
},
showDividerSettings: function () {
var dividerModule = DividerBlock;
(new dividerModule.DividerBlockSettingsView({
model: this.model.get('divider'),
renderOptions: {
displayFormat: 'subpanel',
hideApplyToAll: true
}
})).render();
},
changeReadMoreType: function (event) {
var value = jQuery(event.target).val();
if (value === 'link') {
this.$('.mailpoet_automated_latest_content_read_more_text').removeClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_select_button').addClass('mailpoet_hidden');
} else if (value === 'button') {
this.$('.mailpoet_automated_latest_content_read_more_text').addClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_select_button').removeClass('mailpoet_hidden');
}
this.changeField('readMoreType', event);
},
changeDisplayType: function (event) {
var value = jQuery(event.target).val();
if (value === 'titleOnly') {
this.$('.mailpoet_automated_latest_content_title_as_list').removeClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_image_full_width_option').addClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_image_separator').addClass('mailpoet_hidden');
} else {
this.$('.mailpoet_automated_latest_content_title_as_list').addClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_image_full_width_option').removeClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_image_separator').removeClass('mailpoet_hidden');
// Reset titleFormat if it was set to List when switching away from displayType=titleOnly
if (this.model.get('titleFormat') === 'ul') {
this.model.set('titleFormat', 'h1');
this.$('.mailpoet_automated_latest_content_title_format').val(['h1']);
this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
}
}
if (value === 'excerpt') {
this.$('.mailpoet_automated_latest_content_featured_image_position_container').removeClass('mailpoet_hidden');
} else {
this.$('.mailpoet_automated_latest_content_featured_image_position_container').addClass('mailpoet_hidden');
}
this.changeField('displayType', event);
},
changeTitleFormat: function (event) {
var value = jQuery(event.target).val();
if (value === 'ul') {
this.$('.mailpoet_automated_latest_content_non_title_list_options').addClass('mailpoet_hidden');
this.model.set('titleIsLink', true);
this.$('.mailpoet_automated_latest_content_title_as_link').addClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_title_as_links').val(['true']);
} else {
this.$('.mailpoet_automated_latest_content_non_title_list_options').removeClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
}
this.changeField('titleFormat', event);
},
_updateContentTypes: function (postTypes) {
var select = this.$('.mailpoet_automated_latest_content_content_type');
var selectedValue = this.model.get('contentType');
select.find('option').remove();
_.each(postTypes, function (type) {
select.append(jQuery('<option>', {
value: type.name,
text: type.label
}));
});
select.val(selectedValue);
}
});
Module.AutomatedLatestContentLayoutWidgetView = base.WidgetView.extend({
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
getTemplate: function () { return window.templates.automatedLatestContentLayoutInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function () {
return new Module.AutomatedLatestContentLayoutBlockModel({}, { parse: true });
},
onDrop: function (options) {
options.droppedView.triggerMethod('showSettings');
}
}
}
});
App.on('before:start', function (BeforeStartApp) {
BeforeStartApp.registerBlockType('automatedLatestContentLayout', {
blockModel: Module.AutomatedLatestContentLayoutBlockModel,
blockView: Module.AutomatedLatestContentLayoutBlockView
});
BeforeStartApp.registerWidget({
name: 'automatedLatestContentLayout',
widgetView: Module.AutomatedLatestContentLayoutWidgetView,
priority: 97
});
});
App.on('start', function (StartApp) {
var Application = StartApp;
Application._ALCLayoutSupervisor = new Module.ALCLayoutSupervisor();
Application._ALCLayoutSupervisor.refresh();
});
return Module;
});

2
assets/js/src/newsletter_editor/blocks/container.js
View File

@@ -59,7 +59,7 @@ define([
},
parse: function (response) {
// If container has any blocks - add them to a collection
if (response.type === 'container' && _.has(response, 'blocks')) {
if (response.type === 'container' && _.has(response, 'blocks') && response.blocks.constructor === Array) {
response.blocks = new BlockCollection(response.blocks, {
parse: true
});

8
assets/js/src/newsletter_editor/blocks/posts.js
View File

@@ -52,6 +52,7 @@ define([
defaults: function () {
return this._getDefaults({
type: 'posts',
withLayout: true,
amount: '10',
offset: 0,
contentType: 'post', // 'post'|'page'|'mailpoet_page'
@@ -64,7 +65,7 @@ define([
titleAlignment: 'left', // 'left'|'center'|'right'
titleIsLink: false, // false|true
imageFullWidth: false, // true|false
featuredImagePosition: 'belowTitle', // 'aboveTitle'|'belowTitle'|'none'
featuredImagePosition: 'centered', // 'centered'|'right'|'left'|'alternate'|'none'
showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Author:',
showCategories: 'no', // 'no'|'aboveText'|'belowText'
@@ -178,7 +179,7 @@ define([
if (data.posts.length === 0) return;
CommunicationComponent.getTransformedPosts(data).done(function (posts) {
collection.add(posts, { at: index });
collection.add(JSON.parse(JSON.stringify(posts)), { at: index });
}).fail(function () {
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
});
@@ -190,7 +191,7 @@ define([
getTemplate: function () { return window.templates.postsBlock; },
modelEvents: {}, // Forcefully disable all events
regions: _.extend({
postsRegion: '.mailpoet_posts_block_posts'
postsRegion: '.mailpoet_posts_container'
}, base.BlockView.prototype.regions),
onDragSubstituteBy: function () { return Module.PostsWidgetView; },
initialize: function () {
@@ -583,6 +584,7 @@ define([
});
Module.PostsWidgetView = base.WidgetView.extend({
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
getTemplate: function () { return window.templates.postsInsertion; },
behaviors: {
DraggableBehavior: {

3
assets/js/src/newsletter_editor/components/save.js
View File

@@ -255,7 +255,8 @@ define([
}
if ((App.getNewsletter().get('type') === 'notification') &&
contents.indexOf('"type":"automatedLatestContent"') < 0
contents.indexOf('"type":"automatedLatestContent"') < 0 &&
contents.indexOf('"type":"automatedLatestContentLayout"') < 0
) {
this.showValidationError(MailPoet.I18n.t('automatedLatestContentMissing'));
return;

163
lib/Config/PopulatorData/Templates/PostNotificationsBlank1Column.php
View File

@@ -130,106 +130,76 @@ class PostNotificationsBlank1Column {
"borderColor" => "#aaaaaa"
)
)
),
array(
"type" => "spacer",
"styles" => array(
"block" => array(
"backgroundColor" => "transparent",
"height" => "40px"
)
)
)
)
)
)
),
array(
"type" => "container",
"orientation" => "horizontal",
"styles" => array(
"block" => array(
"backgroundColor" => "transparent"
)
),
"blocks" => array(
array(
"type" => "container",
"orientation" => "vertical",
"styles" => array(
"block" => array(
"backgroundColor" => "transparent"
)
),
"blocks" => array(
array(
"type" => "spacer",
"styles" => array(
"block" => array(
"backgroundColor" => "transparent",
"height" => "40px"
)
)
),
array(
"type" => "automatedLatestContent",
"amount" => "3",
"contentType" => "post",
"terms" => array(),
"inclusionType" => "include",
"displayType" => "excerpt",
"titleFormat" => "h3",
"titleAlignment" => "left",
"titleIsLink" => false,
"imageFullWidth" => false,
"featuredImagePosition" => "belowTitle",
"showAuthor" => "no",
"authorPrecededBy" => __("Author:", 'mailpoet'),
"showCategories" => "no",
"categoriesPrecededBy" => __("Categories:", 'mailpoet'),
"readMoreType" => "button",
"readMoreText" => "Read more",
"readMoreButton" => array(
"type" => "button",
"text" => __("Read the post", 'mailpoet'),
"url" => "[postLink]",
"styles" => array(
"block" => array(
"backgroundColor" => "#2ea1cd",
"borderColor" => "#0074a2",
"borderWidth" => "1px",
"borderRadius" => "5px",
"borderStyle" => "solid",
"width" => "160px",
"lineHeight" => "30px",
"fontColor" => "#ffffff",
"fontFamily" => "Verdana",
"fontSize" => "16px",
"fontWeight" => "normal",
"textAlign" => "center"
)
)
),
"sortBy" => "newest",
"showDivider" => true,
"divider" => array(
"type" => "divider",
"styles" => array(
"block" => array(
"backgroundColor" => "transparent",
"padding" => "13px",
"borderStyle" => "solid",
"borderWidth" => "3px",
"borderColor" => "#aaaaaa"
)
)
),
"backgroundColor" => "#ffffff",
"backgroundColorAlternate" => "#eeeeee"
),
array(
"type" => "spacer",
"styles" => array(
"block" => array(
"backgroundColor" => "transparent",
"height" => "40px"
)
)
)
"type" => "automatedLatestContentLayout",
"withLayout" => true,
"amount" => "3",
"contentType" => "post",
"terms" => array(),
"inclusionType" => "include",
"displayType" => "excerpt",
"titleFormat" => "h3",
"titleAlignment" => "left",
"titleIsLink" => false,
"imageFullWidth" => false,
"featuredImagePosition" => "alternate",
"showAuthor" => "no",
"authorPrecededBy" => __("Author:", 'mailpoet'),
"showCategories" => "no",
"categoriesPrecededBy" => __("Categories:", 'mailpoet'),
"readMoreType" => "button",
"readMoreText" => "Read more",
"readMoreButton" => array(
"type" => "button",
"text" => __("Read the post", 'mailpoet'),
"url" => "[postLink]",
"styles" => array(
"block" => array(
"backgroundColor" => "#2ea1cd",
"borderColor" => "#0074a2",
"borderWidth" => "1px",
"borderRadius" => "5px",
"borderStyle" => "solid",
"width" => "160px",
"lineHeight" => "30px",
"fontColor" => "#ffffff",
"fontFamily" => "Verdana",
"fontSize" => "16px",
"fontWeight" => "normal",
"textAlign" => "center"
)
)
)
),
"sortBy" => "newest",
"showDivider" => true,
"divider" => array(
"type" => "divider",
"styles" => array(
"block" => array(
"backgroundColor" => "transparent",
"padding" => "13px",
"borderStyle" => "solid",
"borderWidth" => "3px",
"borderColor" => "#aaaaaa"
)
)
),
"backgroundColor" => "#ffffff",
"backgroundColorAlternate" => "#eeeeee"
),
array(
"type" => "container",
@@ -249,6 +219,15 @@ class PostNotificationsBlank1Column {
)
),
"blocks" => array(
array(
"type" => "spacer",
"styles" => array(
"block" => array(
"backgroundColor" => "transparent",
"height" => "40px"
)
)
),
array(
"type" => "divider",
"styles" => array(

30
lib/Newsletter/Editor/LayoutHelper.php Normal file
View File

@@ -0,0 +1,30 @@
<?php
namespace MailPoet\Newsletter\Editor;
class LayoutHelper {
static function row($blocks) {
return array(
'type' => 'container',
'orientation' => 'horizontal',
'styles' => array(
'block' => array(
'backgroundColor' => 'transparent'
)
),
'blocks' => $blocks
);
}
static function col($blocks) {
return array(
'type' => 'container',
'orientation' => 'vertical',
'styles' => array(
'block' => array(
'backgroundColor' => 'transparent'
)
),
'blocks' => $blocks
);
}
}

12
lib/Newsletter/Editor/PostContentManager.php
View File

@@ -30,7 +30,7 @@ class PostContentManager {
}
}
function filterContent($content) {
function filterContent($content, $with_post_class = true) {
$content = self::convertEmbeddedContent($content);
// convert h4 h5 h6 to h3
@@ -45,11 +45,15 @@ class PostContentManager {
// strip useless tags
$tags_not_being_stripped = array(
'<img>', '<p>', '<em>', '<span>', '<b>', '<strong>', '<i>', '<h1>',
'<h2>', '<h3>', '<a>', '<ul>', '<ol>', '<li>', '<br>', '<blockquote>'
'<p>', '<em>', '<span>', '<b>', '<strong>', '<i>',
'<a>', '<ul>', '<ol>', '<li>', '<br>', '<blockquote>'
);
$content = strip_tags($content, implode('', $tags_not_being_stripped));
$content = str_replace('<p', '<p class="' . self::WP_POST_CLASS .'"', wpautop($content));
if($with_post_class) {
$content = str_replace('<p', '<p class="' . self::WP_POST_CLASS .'"', wpautop($content));
} else {
$content = wpautop($content);
}
$content = trim($content);
return $content;

2
lib/Newsletter/Editor/PostListTransformer.php
View File

@@ -18,7 +18,7 @@ class PostListTransformer {
foreach($posts as $index => $post) {
if($use_divider && $index > 0) {
$results[] = $this->args['divider'];
$results[] = $this->transformer->getDivider();
}
$results = array_merge($results, $this->transformer->transform($post));

279
lib/Newsletter/Editor/PostTransformer.php
View File

@@ -4,155 +4,203 @@ namespace MailPoet\Newsletter\Editor;
use MailPoet\Newsletter\Editor\PostContentManager;
use MailPoet\Newsletter\Editor\MetaInformationManager;
use MailPoet\Newsletter\Editor\StructureTransformer;
use MailPoet\Newsletter\Editor\LayoutHelper;
if(!defined('ABSPATH')) exit;
class PostTransformer {
private $args;
private $with_layout;
private $image_position;
function __construct($args) {
$this->args = $args;
$this->with_layout = (bool)filter_var($args['withLayout'], FILTER_VALIDATE_BOOLEAN);
$this->image_position = 'left';
}
function getDivider() {
if(empty($this->with_layout)) {
return $this->args['divider'];
}
return LayoutHelper::row(array(
LayoutHelper::col(array($this->args['divider']))
));
}
function transform($post) {
if(empty($this->with_layout)) {
return $this->getStructure($post);
}
return $this->getStructureWithLayout($post);
}
private function getStructure($post) {
$content = $this->getContent($post, true);
$title = $this->getTitle($post);
$featured_image = $this->getFeaturedImage($post);
$image_position = $this->args['featuredImagePosition'];
if($featured_image && $image_position === 'belowTitle') {
array_unshift($content, $title, $featured_image);
} else {
if($content[0]['type'] === 'text') {
$content[0]['text'] = $title['text'] . $content[0]['text'];
} else {
array_unshift($content, $title);
}
if($featured_image) {
array_unshift($content, $featured_image);
}
}
return $content;
}
private function getStructureWithLayout($post) {
$content = $this->getContent($post, false);
$title = $this->getTitle($post);
$featured_image = $this->getFeaturedImage($post);
$position = $this->args['featuredImagePosition'];
if(!$featured_image || $position === 'none' || $this->args['displayType'] !== 'excerpt') {
array_unshift($content, $title);
return array(
LayoutHelper::row(array(
LayoutHelper::col($content)
))
);
}
if($position === 'aboveTitle' || $position === 'belowTitle') {
$position = 'centered';
}
if($position === 'centered') {
array_unshift($content, $title, $featured_image);
return array(
LayoutHelper::row(array(
LayoutHelper::col($content)
))
);
}
if($position === 'alternate') {
$position = $this->nextImagePosition();
}
$content = ($position === 'left')
? array(
LayoutHelper::col(array($featured_image)),
LayoutHelper::col($content)
)
: array(
LayoutHelper::col($content),
LayoutHelper::col(array($featured_image))
);
return array(
LayoutHelper::row(array(
LayoutHelper::col(array($title))
)),
LayoutHelper::row($content)
);
}
private function nextImagePosition() {
$this->image_position = ($this->image_position === 'left') ? 'right' : 'left';
return $this->image_position;
}
private function getContent($post, $with_post_class) {
$content_manager = new PostContentManager();
$meta_manager = new MetaInformationManager();
$content = $content_manager->getContent($post, $this->args['displayType']);
$content = $meta_manager->appendMetaInformation($content, $post, $this->args);
$content = $content_manager->filterContent($content);
$content = $content_manager->filterContent($content, $with_post_class);
$structure_transformer = new StructureTransformer();
$structure = $structure_transformer->transform($content, $this->args['imageFullWidth'] === true);
$content = $structure_transformer->transform($content, $this->args['imageFullWidth'] === true);
if($this->args['featuredImagePosition'] === 'aboveTitle') {
$structure = $this->appendPostTitle($post, $structure);
$structure = $this->appendFeaturedImage(
$post,
$this->args['displayType'],
filter_var($this->args['imageFullWidth'], FILTER_VALIDATE_BOOLEAN),
$structure
);
$read_more_btn = $this->getReadMoreButton($post);
$blocks_count = count($content);
if($read_more_btn['type'] === 'text' && $blocks_count > 0 && $content[$blocks_count - 1]['type'] === 'text') {
$content[$blocks_count - 1]['text'] .= $read_more_btn['text'];
} else {
if($this->args['featuredImagePosition'] === 'belowTitle') {
$structure = $this->appendFeaturedImage(
$post,
$this->args['displayType'],
filter_var($this->args['imageFullWidth'], FILTER_VALIDATE_BOOLEAN),
$structure
);
}
$structure = $this->appendPostTitle($post, $structure);
$content[] = $read_more_btn;
}
$structure = $this->appendReadMore($post->ID, $structure);
return $structure;
return $content;
}
private function appendFeaturedImage($post, $display_type, $image_full_width, $structure) {
if($display_type !== 'excerpt') {
// Append featured images only on excerpts
return $structure;
private function getFeaturedImage($post) {
$post_id = $post->ID;
$post_title = $post->post_title;
$image_full_width = (bool)filter_var($this->args['imageFullWidth'], FILTER_VALIDATE_BOOLEAN);
if(!has_post_thumbnail($post_id)) {
return false;
}
$featured_image = $this->getFeaturedImage(
$post->ID,
$post->post_title,
(bool)$image_full_width
$thumbnail_id = get_post_thumbnail_id($post_id);
// get attachment data (src, width, height)
$image_info = wp_get_attachment_image_src(
$thumbnail_id,
'mailpoet_newsletter_max'
);
if(is_array($featured_image)) {
return array_merge(array($featured_image), $structure);
// get alt text
$alt_text = trim(strip_tags(get_post_meta(
$thumbnail_id,
'_wp_attachment_image_alt',
true
)));
if(strlen($alt_text) === 0) {
// if the alt text is empty then use the post title
$alt_text = trim(strip_tags($post_title));
}
return $structure;
}
private function getFeaturedImage($post_id, $post_title, $image_full_width) {
if(has_post_thumbnail($post_id)) {
$thumbnail_id = get_post_thumbnail_id($post_id);
// get attachment data (src, width, height)
$image_info = wp_get_attachment_image_src(
$thumbnail_id,
'mailpoet_newsletter_max'
);
// get alt text
$alt_text = trim(strip_tags(get_post_meta(
$thumbnail_id,
'_wp_attachment_image_alt',
true
)));
if(strlen($alt_text) === 0) {
// if the alt text is empty then use the post title
$alt_text = trim(strip_tags($post_title));
}
return array(
'type' => 'image',
'link' => get_permalink($post_id),
'src' => $image_info[0],
'alt' => $alt_text,
'fullWidth' => $image_full_width,
'width' => $image_info[1],
'height' => $image_info[2],
'styles' => array(
'block' => array(
'textAlign' => 'center',
),
return array(
'type' => 'image',
'link' => get_permalink($post_id),
'src' => $image_info[0],
'alt' => $alt_text,
'fullWidth' => $image_full_width,
'width' => $image_info[1],
'height' => $image_info[2],
'styles' => array(
'block' => array(
'textAlign' => 'center',
),
);
}
),
);
}
private function appendPostTitle($post, $structure) {
$title = $this->getPostTitle($post);
// Append title always at the top of the post structure
// Reuse an existing text block if needed
if(count($structure) > 0 && $structure[0]['type'] === 'text') {
$structure[0]['text'] = $title . $structure[0]['text'];
} else {
array_unshift(
$structure,
array(
'type' => 'text',
'text' => $title,
)
);
}
return $structure;
}
private function appendReadMore($post_id, $structure) {
private function getReadMoreButton($post) {
if($this->args['readMoreType'] === 'button') {
$button = $this->args['readMoreButton'];
$button['url'] = get_permalink($post_id);
$structure[] = $button;
} else {
$total_blocks = count($structure);
$read_more_text = sprintf(
'<p><a href="%s">%s</a></p>',
get_permalink($post_id),
$this->args['readMoreText']
);
if($structure[$total_blocks - 1]['type'] === 'text') {
$structure[$total_blocks - 1]['text'] .= $read_more_text;
} else {
$structure[] = array(
'type' => 'text',
'text' => $read_more_text,
);
}
$button['url'] = get_permalink($post->ID);
return $button;
}
return $structure;
$read_more_text = sprintf(
'<p><a href="%s">%s</a></p>',
get_permalink($post->ID),
$this->args['readMoreText']
);
return array(
'type' => 'text',
'text' => $read_more_text,
);
}
private function getPostTitle($post) {
private function getTitle($post) {
$title = $post->post_title;
if(filter_var($this->args['titleIsLink'], FILTER_VALIDATE_BOOLEAN)) {
@@ -169,6 +217,11 @@ class PostTransformer {
$alignment = (in_array($this->args['titleAlignment'], array('left', 'right', 'center'))) ? $this->args['titleAlignment'] : 'left';
return '<' . $tag . ' data-post-id="' . $post->ID . '" style="text-align: ' . $alignment . ';">' . $title . '</' . $tag . '>';
$title = '<' . $tag . ' data-post-id="' . $post->ID . '" style="text-align: ' . $alignment . ';">' . $title . '</' . $tag . '>';
return array(
'type' => 'text',
'text' => $title
);
}
}

12
lib/Newsletter/Renderer/Blocks/Renderer.php
View File

@@ -64,16 +64,20 @@ class Renderer {
return $block_class::render($block, $column_count);
}
function processAutomatedLatestContent($args, $column_count) {
function automatedLatestContentTransformedPosts($args) {
$posts_to_exclude = $this->getPosts();
$ALC_posts = $this->ALC->getPosts($args, $posts_to_exclude);
foreach($ALC_posts as $post) {
$posts_to_exclude[] = $post->ID;
}
$transformed_posts = array(
'blocks' => $this->ALC->transformPosts($args, $ALC_posts)
);
$this->setPosts($posts_to_exclude);
return $this->ALC->transformPosts($args, $ALC_posts);
}
function processAutomatedLatestContent($args, $column_count) {
$transformed_posts = array(
'blocks' => $this->automatedLatestContentTransformedPosts($args)
);
$transformed_posts = StylesHelper::applyTextAlignment($transformed_posts);
$rendered_posts = $this->render($transformed_posts, $column_count);
return $rendered_posts;

21
lib/Newsletter/Renderer/Renderer.php
View File

@@ -48,6 +48,7 @@ class Renderer {
$content = $this->addMailpoetLogoContentBlock($content, $styles);
}
$content = $this->preProcessALC($content);
$rendered_body = $this->renderBody($content);
$rendered_styles = $this->renderStyles($styles);
@@ -70,6 +71,26 @@ class Renderer {
$rendered_newsletter;
}
function preProcessALC($content) {
$blocks = array();
$content_blocks = (array_key_exists('blocks', $content))
? $content['blocks']
: array();
foreach($content_blocks as $block) {
if($block['type'] === 'automatedLatestContentLayout') {
$blocks = array_merge(
$blocks,
$this->blocks_renderer->automatedLatestContentTransformedPosts($block)
);
} else {
$blocks[] = $block;
}
}
$content['blocks'] = $blocks;
return $content;
}
function renderBody($content) {
$blocks = (array_key_exists('blocks', $content))
? $content['blocks']

4
tests/javascript/newsletter_editor/blocks/posts.spec.js
View File

@@ -91,7 +91,7 @@ define([
});
it('has featured image position', function () {
expect(model.get('featuredImagePosition')).to.match(/^(belowTitle|aboveTitle|none)$/);
expect(model.get('featuredImagePosition')).to.match(/^(centered|left|right|alternate|none)$/);
});
it('has an option to display author', function () {
@@ -293,7 +293,7 @@ define([
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
expect(view.$('.mailpoet_posts_container')).to.have.length(1);
});
});

17
tests/unit/Newsletter/Editor/PostContentManagerTest.php
View File

@@ -40,13 +40,16 @@ class PostContentManagerTest extends \MailPoetTest {
function testFilterContentRetainsHeadings() {
$html = '<h1>heading 1</h1>';
expect($this->post_content->filterContent($html))->equals($html);
expect($this->post_content->filterContent($html))
->equals('<p class="' . PostContentManager::WP_POST_CLASS . '">heading 1</p>');
$html = '<h2>heading 2</h2>';
expect($this->post_content->filterContent($html))->equals($html);
expect($this->post_content->filterContent($html))
->equals('<p class="' . PostContentManager::WP_POST_CLASS . '">heading 2</p>');
$html = '<h3>heading 3</h3>';
expect($this->post_content->filterContent($html))->equals($html);
expect($this->post_content->filterContent($html))
->equals('<p class="' . PostContentManager::WP_POST_CLASS . '">heading 3</p>');
}
function testFilterContentRetainsTextStyling() {
@@ -64,12 +67,7 @@ class PostContentManagerTest extends \MailPoetTest {
}
}
function testFilterContentRetainsImagesAndLinks() {
$html = '<img src="#" alt="some alt" />';
expect($this->post_content->filterContent($html))->equals(
'<p class="' . PostContentManager::WP_POST_CLASS . '"><img src="#" alt="some alt" /></p>'
);
function testFilterContentRetainsLinks() {
$html = '<a href="#" title="link title">some link</a>';
expect($this->post_content->filterContent($html))->equals(
'<p class="' . PostContentManager::WP_POST_CLASS . '">' . $html . '</p>'
@@ -88,6 +86,7 @@ class PostContentManagerTest extends \MailPoetTest {
'<table></table>',
'<tr></tr>',
'<td></td>',
'<img src="#" alt="some alt" />',
);
foreach($undesirable_tags as $html) {

81
views/newsletter/editor.html
View File

@@ -17,6 +17,18 @@
'newsletter_editor_template_automated_latest_content_settings',
'newsletter/templates/blocks/automatedLatestContent/settings.hbs'
) %>
<%= partial(
'newsletter_editor_template_automated_latest_content_layout_block',
'newsletter/templates/blocks/automatedLatestContentLayout/block.hbs'
) %>
<%= partial(
'newsletter_editor_template_automated_latest_content_layout_widget',
'newsletter/templates/blocks/automatedLatestContentLayout/widget.hbs'
) %>
<%= partial(
'newsletter_editor_template_automated_latest_content_layout_settings',
'newsletter/templates/blocks/automatedLatestContentLayout/settings.hbs'
) %>
<%= partial(
'newsletter_editor_template_button_block',
'newsletter/templates/blocks/button/block.hbs'
@@ -521,6 +533,16 @@
jQuery('#newsletter_editor_template_automated_latest_content_settings').html()
),
automatedLatestContentLayoutBlock: Handlebars.compile(
jQuery('#newsletter_editor_template_automated_latest_content_layout_block').html()
),
automatedLatestContentLayoutInsertion: Handlebars.compile(
jQuery('#newsletter_editor_template_automated_latest_content_layout_widget').html()
),
automatedLatestContentLayoutBlockSettings: Handlebars.compile(
jQuery('#newsletter_editor_template_automated_latest_content_layout_settings').html()
),
postsBlock: Handlebars.compile(
jQuery('#newsletter_editor_template_posts_block').html()
),
@@ -962,6 +984,7 @@
blockDefaults: {
automatedLatestContent: {
amount: '5',
withLayout: false,
contentType: 'post', // 'post'|'page'|'mailpoet_page'
inclusionType: 'include', // 'include'|'exclude'
displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
@@ -1014,6 +1037,61 @@
backgroundColor: '#ffffff',
backgroundColorAlternate: '#eeeeee',
},
automatedLatestContentLayout: {
amount: '5',
withLayout: true,
contentType: 'post', // 'post'|'page'|'mailpoet_page'
inclusionType: 'include', // 'include'|'exclude'
displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
titleAlignment: 'left', // 'left'|'center'|'right'
titleIsLink: false, // false|true
imageFullWidth: false, // true|false
featuredImagePosition: 'alternate', // 'centered'|'left'|'right'|'alternate'|'none',
showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: '<%= __('Author:') | escape('js') %>',
showCategories: 'no', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: '<%= __('Categories:') | escape('js') %>',
readMoreType: 'button', // 'link'|'button'
readMoreText: '<%= __('Read more') | escape('js') %>',
readMoreButton: {
text: '<%= __('Read more') | escape('js') %>',
url: '[postLink]',
context: 'automatedLatestContentLayout.readMoreButton',
styles: {
block: {
backgroundColor: '#2ea1cd',
borderColor: '#0074a2',
borderWidth: '1px',
borderRadius: '5px',
borderStyle: 'solid',
width: '180px',
lineHeight: '40px',
fontColor: '#ffffff',
fontFamily: 'Verdana',
fontSize: '18px',
fontWeight: 'normal',
textAlign: 'center',
}
}
},
sortBy: 'newest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {
context: 'automatedLatestContentLayout.divider',
styles: {
block: {
backgroundColor: 'transparent',
padding: '13px',
borderStyle: 'solid',
borderWidth: '3px',
borderColor: '#aaaaaa',
},
},
},
backgroundColor: '#ffffff',
backgroundColorAlternate: '#eeeeee',
},
button: {
text: '<%= __('Button') | escape('js') %>',
url: '',
@@ -1085,6 +1163,7 @@
},
posts: {
amount: '10',
withLayout: true,
contentType: 'post', // 'post'|'page'|'mailpoet_page'
postStatus: 'publish', // 'draft'|'pending'|'private'|'publish'|'future'
inclusionType: 'include', // 'include'|'exclude'
@@ -1093,7 +1172,7 @@
titleAlignment: 'left', // 'left'|'center'|'right'
titleIsLink: false, // false|true
imageFullWidth: false, // true|false
featuredImagePosition: 'belowTitle', // 'belowTitle'|'aboveTitle'|'none',
featuredImagePosition: 'alternate', // 'centered'|'left'|'right'|'alternate'|'none',
showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: '<%= __('Author:') | escape('js') %>',
showCategories: 'no', // 'no'|'aboveText'|'belowText'

6
views/newsletter/templates/blocks/automatedLatestContentLayout/block.hbs Normal file
View File

@@ -0,0 +1,6 @@
<div class="mailpoet_tools"></div>
<div class="mailpoet_content">
<div class="mailpoet_automated_latest_content_block_overlay"></div>
<div class="mailpoet_automated_latest_content_block_posts"></div>
</div>
<div class="mailpoet_block_highlight"></div>

313
views/newsletter/templates/blocks/automatedLatestContentLayout/settings.hbs Normal file
View File

@@ -0,0 +1,313 @@
<h3><%= __('Post selection') %></h3>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Show:') %></div>
<div class="mailpoet_form_field_input_option">
<input type="text" class="mailpoet_input mailpoet_input_small mailpoet_automated_latest_content_show_amount" value="{{ model.amount }}" maxlength="2" size="2" />
<select class="mailpoet_select mailpoet_select_large mailpoet_automated_latest_content_content_type">
<option value="post" {{#ifCond model.contentType '==' 'post'}}SELECTED{{/ifCond}}><%= __('Posts') %></option>
<option value="page" {{#ifCond model.contentType '==' 'page'}}SELECTED{{/ifCond}}><%= __('Pages') %></option>
<option value="mailpoet_page" {{#ifCond model.contentType '==' 'mailpoet_page'}}SELECTED{{/ifCond}}><%= __('MailPoet pages') %></option>
</select>
</div>
</div>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_select_option">
<select class="mailpoet_select mailpoet_automated_latest_content_categories_and_tags" multiple="multiple">
{{#each model.terms}}
<option value="{{ id }}" selected="selected">{{ text }}</option>
{{/each}}
</select>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_include_or_exclude" class="mailpoet_automated_latest_content_include_or_exclude" value="include" {{#ifCond model.inclusionType '==' 'include'}}CHECKED{{/ifCond}}/>
<%= __('Include') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_include_or_exclude" class="mailpoet_automated_latest_content_include_or_exclude" value="exclude" {{#ifCond model.inclusionType '==' 'exclude'}}CHECKED{{/ifCond}} />
<%= __('Exclude') %>
</label>
</div>
</div>
<hr class="mailpoet_separator" />
<div class="mailpoet_form_field">
<a href="javascript:;" class="mailpoet_automated_latest_content_show_display_options"><%= __('Display options') %></a>
</div>
<div class="mailpoet_automated_latest_content_display_options mailpoet_closed">
<div class="mailpoet_form_field">
<a href="javascript:;" class="mailpoet_automated_latest_content_hide_display_options"><%= __('Hide display options') %></a>
</div>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_display_type" class="mailpoet_automated_latest_content_display_type" value="excerpt" {{#ifCond model.displayType '==' 'excerpt'}}CHECKED{{/ifCond}}/>
<%= __('Excerpt') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_display_type" class="mailpoet_automated_latest_content_display_type" value="full" {{#ifCond model.displayType '==' 'full'}}CHECKED{{/ifCond}}/>
<%= __('Full post') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_display_type" class="mailpoet_automated_latest_content_display_type" value="titleOnly" {{#ifCond model.displayType '==' 'titleOnly'}}CHECKED{{/ifCond}} />
<%= __('Title only') %>
</label>
</div>
</div>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_title"><%= __('Title Format') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_title_format" class="mailpoet_automated_latest_content_title_format" value="h1" {{#ifCond model.titleFormat '==' 'h1'}}CHECKED{{/ifCond}}/>
<%= __('Heading 1') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_title_format" class="mailpoet_automated_latest_content_title_format" value="h2" {{#ifCond model.titleFormat '==' 'h2'}}CHECKED{{/ifCond}}/>
<%= __('Heading 2') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_title_format" class="mailpoet_automated_latest_content_title_format" value="h3" {{#ifCond model.titleFormat '==' 'h3'}}CHECKED{{/ifCond}}/>
<%= __('Heading 3') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option mailpoet_automated_latest_content_title_as_list {{#ifCond model.displayType '!=' 'titleOnly'}}mailpoet_hidden{{/ifCond}}">
<label>
<input type="radio" name="mailpoet_automated_latest_content_title_format" class="mailpoet_automated_latest_content_title_format" value="ul" {{#ifCond model.titleFormat '==' 'ul'}}CHECKED{{/ifCond}}/>
<%= __('Show as list') %>
</label>
</div>
</div>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_title"><%= __('Title Alignment') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_title_alignment" class="mailpoet_automated_latest_content_title_alignment" value="left" {{#ifCond model.titleAlignment '==' 'left'}}CHECKED{{/ifCond}} />
<%= __('Left') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_title_alignment" class="mailpoet_automated_latest_content_title_alignment" value="center" {{#ifCond model.titleAlignment '==' 'center'}}CHECKED{{/ifCond}} />
<%= __('Center') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_title_alignment" class="mailpoet_automated_latest_content_title_alignment" value="right" {{#ifCond model.titleAlignment '==' 'right'}}CHECKED{{/ifCond}} />
<%= __('Right') %>
</label>
</div>
</div>
<div class="mailpoet_form_field mailpoet_automated_latest_content_title_as_link {{#ifCond model.titleFormat '===' 'ul'}}mailpoet_hidden{{/ifCond}}">
<div class="mailpoet_form_field_title"><%= __('Title as links') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_title_as_links" class="mailpoet_automated_latest_content_title_as_links" value="true" {{#if model.titleIsLink}}CHECKED{{/if}}/>
<%= __('Yes') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_title_as_links" class="mailpoet_automated_latest_content_title_as_links" value="false" {{#unless model.titleIsLink}}CHECKED{{/unless}}/>
<%= __('No') %>
</label>
</div>
</div>
<hr class="mailpoet_separator mailpoet_automated_latest_content_image_separator {{#ifCond model.displayType '===' 'titleOnly'}}mailpoet_hidden{{/ifCond}}" />
<div class="mailpoet_form_field mailpoet_automated_latest_content_featured_image_position_container {{#ifCond model.displayType '!==' 'excerpt'}}mailpoet_hidden{{/ifCond}}">
<div class="mailpoet_form_field_title"><%= __('Featured image position') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="centered" {{#ifCond model.featuredImagePosition '==' 'centered' }}CHECKED{{/ifCond}}/>
<%= __('Centered') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="left" {{#ifCond model.featuredImagePosition '==' 'left' }}CHECKED{{/ifCond}}/>
<%= __('Left') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="right" {{#ifCond model.featuredImagePosition '==' 'right' }}CHECKED{{/ifCond}}/>
<%= __('Right') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="alternate" {{#ifCond model.featuredImagePosition '==' 'alternate' }}CHECKED{{/ifCond}}/>
<%= __('Alternate') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="none" {{#ifCond model.featuredImagePosition '==' 'none' }}CHECKED{{/ifCond}}/>
<%= __('None') %>
</label>
</div>
</div>
<div class="mailpoet_automated_latest_content_non_title_list_options {{#ifCond model.displayType '==' 'titleOnly'}}{{#ifCond model.titleFormat '==' 'ul'}}mailpoet_hidden{{/ifCond}}{{/ifCond}}">
<div class="mailpoet_form_field mailpoet_automated_latest_content_image_full_width_option {{#ifCond model.displayType '==' 'titleOnly'}}mailpoet_hidden{{/ifCond}}">
<div class="mailpoet_form_field_title"><%= __('Image width') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="imageFullWidth" class="mailpoet_automated_latest_content_image_full_width" value="true" {{#if model.imageFullWidth}}CHECKED{{/if}}/>
<%= __('Full width') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="imageFullWidth" class="mailpoet_automated_latest_content_image_full_width" value="false" {{#unless model.imageFullWidth}}CHECKED{{/unless}}/>
<%= __('Padded') %>
</label>
</div>
</div>
<hr class="mailpoet_separator" />
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_title"><%= __('Show author') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_show_author" class="mailpoet_automated_latest_content_show_author" value="no" {{#ifCond model.showAuthor '==' 'no'}}CHECKED{{/ifCond}}/>
<%= __('No') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_show_author" class="mailpoet_automated_latest_content_show_author" value="aboveText" {{#ifCond model.showAuthor '==' 'aboveText'}}CHECKED{{/ifCond}}/>
<%= __('Above text') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_show_author" class="mailpoet_automated_latest_content_show_author" value="belowText" {{#ifCond model.showAuthor '==' 'belowText'}}CHECKED{{/ifCond}}/>
<%= __('Below text') %><br />
</label>
</div>
<div class="mailpoet_form_field_title mailpoet_form_field_title_small"><%= __('Preceded by:') %></div>
<div class="mailpoet_form_field_input_option mailpoet_form_field_block">
<input type="text" class="mailpoet_input mailpoet_input_full mailpoet_automated_latest_content_author_preceded_by" value="{{ model.authorPrecededBy }}" />
</div>
</div>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_title"><%= __('Show categories') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_show_categories" class="mailpoet_automated_latest_content_show_categories" value="no" {{#ifCond model.showCategories '==' 'no'}}CHECKED{{/ifCond}}/>
<%= __('No') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_show_categories" class="mailpoet_automated_latest_content_show_categories" value="aboveText" {{#ifCond model.showCategories '==' 'aboveText'}}CHECKED{{/ifCond}}/>
<%= __('Above text') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_show_categories" class="mailpoet_automated_latest_content_show_categories" value="belowText" {{#ifCond model.showCategories '==' 'belowText'}}CHECKED{{/ifCond}}/>
<%= __('Below text') %>
</label>
</div>
<div class="mailpoet_form_field_title mailpoet_form_field_title_small"><%= __('Preceded by:') %></div>
<div class="mailpoet_form_field_input_option mailpoet_form_field_block">
<input type="text" class="mailpoet_input mailpoet_input_full mailpoet_automated_latest_content_categories" value="{{ model.categoriesPrecededBy }}" />
</div>
</div>
<hr class="mailpoet_separator" />
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_title mailpoet_form_field_title_small"><%= __('"Read more" text') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_read_more_type" class="mailpoet_automated_latest_content_read_more_type" value="link" {{#ifCond model.readMoreType '==' 'link'}}CHECKED{{/ifCond}}/>
<%= __('Link') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_read_more_type" class="mailpoet_automated_latest_content_read_more_type" value="button" {{#ifCond model.readMoreType '==' 'button'}}CHECKED{{/ifCond}}/>
<%= __('Button') %>
</label>
</div>
<div class="mailpoet_form_field_input_option mailpoet_form_field_block">
<input type="text" class="mailpoet_input mailpoet_input_full mailpoet_automated_latest_content_read_more_text {{#ifCond model.readMoreType '!=' 'link'}}mailpoet_hidden{{/ifCond}}" value="{{ model.readMoreText }}" />
</div>
<div class="mailpoet_form_field_input_option mailpoet_form_field_block">
<a href="javascript:;" class="mailpoet_automated_latest_content_select_button {{#ifCond model.readMoreType '!=' 'button'}}mailpoet_hidden{{/ifCond}}"><%= __('Design a button') %></a>
</div>
</div>
<hr class="mailpoet_separator" />
</div>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_title mailpoet_form_field_title_small"><%= __('Sort by') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_sort_by" class="mailpoet_automated_latest_content_sort_by" value="newest" {{#ifCond model.sortBy '==' 'newest'}}CHECKED{{/ifCond}}/>
<%= __('Newest') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_sort_by" class="mailpoet_automated_latest_content_sort_by" value="oldest" {{#ifCond model.sortBy '==' 'oldest'}}CHECKED{{/ifCond}}/>
<%= __('Oldest') %>
</label>
</div>
</div>
<div class="mailpoet_automated_latest_content_non_title_list_options {{#ifCond model.displayType '==' 'titleOnly'}}{{#ifCond model.titleFormat '==' 'ul'}}mailpoet_hidden{{/ifCond}}{{/ifCond}}">
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_title mailpoet_form_field_title_small"><%= __('Show divider between posts') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_show_divider"class="mailpoet_automated_latest_content_show_divider" value="true" {{#if model.showDivider}}CHECKED{{/if}}/>
<%= __('Yes') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_automated_latest_content_show_divider"class="mailpoet_automated_latest_content_show_divider" value="false" {{#unless model.showDivider}}CHECKED{{/unless}}/>
<%= __('No') %>
</label>
</div>
<div>
<a href="javascript:;" class="mailpoet_automated_latest_content_select_divider"><%= __('Select divider') %></a>
</div>
</div>
</div>
</div>
<div class="mailpoet_form_field">
<input type="button" class="button button-primary mailpoet_done_editing" value="<%= __('Done') | escape('html_attr') %>" />
</div>

4
views/newsletter/templates/blocks/automatedLatestContentLayout/widget.hbs Normal file
View File

@@ -0,0 +1,4 @@
<div class="mailpoet_widget_icon">
<%= source('newsletter/templates/svg/block-icons/auto-post.svg') %>
</div>
<div class="mailpoet_widget_title"><%= __('Automatic Latest Content') %></div>

4
views/newsletter/templates/blocks/posts/block.hbs
View File

@@ -1,5 +1,3 @@
<div class="mailpoet_tools"></div>
<div class="mailpoet_content">
<div class="mailpoet_posts_block_posts"></div>
</div>
<div class="mailpoet_posts_container"></div>
<div class="mailpoet_block_highlight"></div>

20
views/newsletter/templates/blocks/posts/settingsDisplayOptions.hbs
View File

@@ -95,14 +95,26 @@
<div class="mailpoet_form_field_title"><%= __('Featured image position') %></div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="belowTitle" {{#ifCond model.featuredImagePosition '==' 'belowTitle' }}CHECKED{{/ifCond}}/>
<%= __('Below title') %>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="centered" {{#ifCond model.featuredImagePosition '==' 'centered' }}CHECKED{{/ifCond}}/>
<%= __('Centered') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="aboveTitle" {{#ifCond model.featuredImagePosition '==' 'aboveTitle' }}CHECKED{{/ifCond}}/>
<%= __('Above block') %>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="left" {{#ifCond model.featuredImagePosition '==' 'left' }}CHECKED{{/ifCond}}/>
<%= __('Left') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="right" {{#ifCond model.featuredImagePosition '==' 'right' }}CHECKED{{/ifCond}}/>
<%= __('Right') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="alternate" {{#ifCond model.featuredImagePosition '==' 'alternate' }}CHECKED{{/ifCond}}/>
<%= __('Alternate') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">

2
webpack.config.js
View File

@@ -272,6 +272,7 @@ var adminConfig = {
'newsletter_editor/blocks/footer.js',
'newsletter_editor/blocks/header.js',
'newsletter_editor/blocks/automatedLatestContent.js',
'newsletter_editor/blocks/automatedLatestContentLayout.js',
'newsletter_editor/blocks/posts.js',
'newsletter_editor/blocks/social.js'
]
@@ -375,6 +376,7 @@ var testConfig = {
'newsletter_editor/blocks/footer.js',
'newsletter_editor/blocks/header.js',
'newsletter_editor/blocks/automatedLatestContent.js',
'newsletter_editor/blocks/automatedLatestContentLayout.js',
'newsletter_editor/blocks/posts.js',
'newsletter_editor/blocks/social.js',