1 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
4 | import _createClass from "@babel/runtime/helpers/esm/createClass";
|
5 | import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
6 | import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
7 | import _inherits from "@babel/runtime/helpers/esm/inherits";
|
8 | import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
9 | import { createElement } from "@wordpress/element";
|
10 |
|
11 |
|
12 |
|
13 |
|
14 | import { isUndefined, pickBy } from 'lodash';
|
15 | import classnames from 'classnames';
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | import { Component, Fragment, RawHTML } from '@wordpress/element';
|
21 | import { PanelBody, Placeholder, QueryControls, RangeControl, Spinner, ToggleControl, Toolbar } from '@wordpress/components';
|
22 | import apiFetch from '@wordpress/api-fetch';
|
23 | import { addQueryArgs } from '@wordpress/url';
|
24 | import { __ } from '@wordpress/i18n';
|
25 | import { dateI18n, format, __experimentalGetSettings } from '@wordpress/date';
|
26 | import { InspectorControls, BlockAlignmentToolbar, BlockControls } from '@wordpress/block-editor';
|
27 | import { withSelect } from '@wordpress/data';
|
28 |
|
29 |
|
30 |
|
31 |
|
32 | var CATEGORIES_LIST_QUERY = {
|
33 | per_page: -1
|
34 | };
|
35 | var MAX_POSTS_COLUMNS = 6;
|
36 |
|
37 | var LatestPostsEdit =
|
38 |
|
39 | function (_Component) {
|
40 | _inherits(LatestPostsEdit, _Component);
|
41 |
|
42 | function LatestPostsEdit() {
|
43 | var _this;
|
44 |
|
45 | _classCallCheck(this, LatestPostsEdit);
|
46 |
|
47 | _this = _possibleConstructorReturn(this, _getPrototypeOf(LatestPostsEdit).apply(this, arguments));
|
48 | _this.state = {
|
49 | categoriesList: []
|
50 | };
|
51 | _this.toggleDisplayPostDate = _this.toggleDisplayPostDate.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
52 | return _this;
|
53 | }
|
54 |
|
55 | _createClass(LatestPostsEdit, [{
|
56 | key: "componentWillMount",
|
57 | value: function componentWillMount() {
|
58 | var _this2 = this;
|
59 |
|
60 | this.isStillMounted = true;
|
61 | this.fetchRequest = apiFetch({
|
62 | path: addQueryArgs("/wp/v2/categories", CATEGORIES_LIST_QUERY)
|
63 | }).then(function (categoriesList) {
|
64 | if (_this2.isStillMounted) {
|
65 | _this2.setState({
|
66 | categoriesList: categoriesList
|
67 | });
|
68 | }
|
69 | }).catch(function () {
|
70 | if (_this2.isStillMounted) {
|
71 | _this2.setState({
|
72 | categoriesList: []
|
73 | });
|
74 | }
|
75 | });
|
76 | }
|
77 | }, {
|
78 | key: "componentWillUnmount",
|
79 | value: function componentWillUnmount() {
|
80 | this.isStillMounted = false;
|
81 | }
|
82 | }, {
|
83 | key: "toggleDisplayPostDate",
|
84 | value: function toggleDisplayPostDate() {
|
85 | var displayPostDate = this.props.attributes.displayPostDate;
|
86 | var setAttributes = this.props.setAttributes;
|
87 | setAttributes({
|
88 | displayPostDate: !displayPostDate
|
89 | });
|
90 | }
|
91 | }, {
|
92 | key: "render",
|
93 | value: function render() {
|
94 | var _this$props = this.props,
|
95 | attributes = _this$props.attributes,
|
96 | setAttributes = _this$props.setAttributes,
|
97 | latestPosts = _this$props.latestPosts;
|
98 | var categoriesList = this.state.categoriesList;
|
99 | var displayPostDate = attributes.displayPostDate,
|
100 | align = attributes.align,
|
101 | postLayout = attributes.postLayout,
|
102 | columns = attributes.columns,
|
103 | order = attributes.order,
|
104 | orderBy = attributes.orderBy,
|
105 | categories = attributes.categories,
|
106 | postsToShow = attributes.postsToShow;
|
107 | var inspectorControls = createElement(InspectorControls, null, createElement(PanelBody, {
|
108 | title: __('Latest Posts Settings')
|
109 | }, createElement(QueryControls, _extends({
|
110 | order: order,
|
111 | orderBy: orderBy
|
112 | }, {
|
113 | numberOfItems: postsToShow,
|
114 | categoriesList: categoriesList,
|
115 | selectedCategoryId: categories,
|
116 | onOrderChange: function onOrderChange(value) {
|
117 | return setAttributes({
|
118 | order: value
|
119 | });
|
120 | },
|
121 | onOrderByChange: function onOrderByChange(value) {
|
122 | return setAttributes({
|
123 | orderBy: value
|
124 | });
|
125 | },
|
126 | onCategoryChange: function onCategoryChange(value) {
|
127 | return setAttributes({
|
128 | categories: '' !== value ? value : undefined
|
129 | });
|
130 | },
|
131 | onNumberOfItemsChange: function onNumberOfItemsChange(value) {
|
132 | return setAttributes({
|
133 | postsToShow: value
|
134 | });
|
135 | }
|
136 | })), createElement(ToggleControl, {
|
137 | label: __('Display post date'),
|
138 | checked: displayPostDate,
|
139 | onChange: this.toggleDisplayPostDate
|
140 | }), postLayout === 'grid' && createElement(RangeControl, {
|
141 | label: __('Columns'),
|
142 | value: columns,
|
143 | onChange: function onChange(value) {
|
144 | return setAttributes({
|
145 | columns: value
|
146 | });
|
147 | },
|
148 | min: 2,
|
149 | max: !hasPosts ? MAX_POSTS_COLUMNS : Math.min(MAX_POSTS_COLUMNS, latestPosts.length),
|
150 | required: true
|
151 | })));
|
152 | var hasPosts = Array.isArray(latestPosts) && latestPosts.length;
|
153 |
|
154 | if (!hasPosts) {
|
155 | return createElement(Fragment, null, inspectorControls, createElement(Placeholder, {
|
156 | icon: "admin-post",
|
157 | label: __('Latest Posts')
|
158 | }, !Array.isArray(latestPosts) ? createElement(Spinner, null) : __('No posts found.')));
|
159 | }
|
160 |
|
161 |
|
162 | var displayPosts = latestPosts.length > postsToShow ? latestPosts.slice(0, postsToShow) : latestPosts;
|
163 | var layoutControls = [{
|
164 | icon: 'list-view',
|
165 | title: __('List View'),
|
166 | onClick: function onClick() {
|
167 | return setAttributes({
|
168 | postLayout: 'list'
|
169 | });
|
170 | },
|
171 | isActive: postLayout === 'list'
|
172 | }, {
|
173 | icon: 'grid-view',
|
174 | title: __('Grid View'),
|
175 | onClick: function onClick() {
|
176 | return setAttributes({
|
177 | postLayout: 'grid'
|
178 | });
|
179 | },
|
180 | isActive: postLayout === 'grid'
|
181 | }];
|
182 |
|
183 | var dateFormat = __experimentalGetSettings().formats.date;
|
184 |
|
185 | return createElement(Fragment, null, inspectorControls, createElement(BlockControls, null, createElement(BlockAlignmentToolbar, {
|
186 | value: align,
|
187 | onChange: function onChange(nextAlign) {
|
188 | setAttributes({
|
189 | align: nextAlign
|
190 | });
|
191 | }
|
192 | }), createElement(Toolbar, {
|
193 | controls: layoutControls
|
194 | })), createElement("ul", {
|
195 | className: classnames(this.props.className, _defineProperty({
|
196 | 'is-grid': postLayout === 'grid',
|
197 | 'has-dates': displayPostDate
|
198 | }, "columns-".concat(columns), postLayout === 'grid'))
|
199 | }, displayPosts.map(function (post, i) {
|
200 | var titleTrimmed = post.title.rendered.trim();
|
201 | return createElement("li", {
|
202 | key: i
|
203 | }, createElement("a", {
|
204 | href: post.link,
|
205 | target: "_blank",
|
206 | rel: "noreferrer noopener"
|
207 | }, titleTrimmed ? createElement(RawHTML, null, titleTrimmed) : __('(Untitled)')), displayPostDate && post.date_gmt && createElement("time", {
|
208 | dateTime: format('c', post.date_gmt),
|
209 | className: "wp-block-latest-posts__post-date"
|
210 | }, dateI18n(dateFormat, post.date_gmt)));
|
211 | })));
|
212 | }
|
213 | }]);
|
214 |
|
215 | return LatestPostsEdit;
|
216 | }(Component);
|
217 |
|
218 | export default withSelect(function (select, props) {
|
219 | var _props$attributes = props.attributes,
|
220 | postsToShow = _props$attributes.postsToShow,
|
221 | order = _props$attributes.order,
|
222 | orderBy = _props$attributes.orderBy,
|
223 | categories = _props$attributes.categories;
|
224 |
|
225 | var _select = select('core'),
|
226 | getEntityRecords = _select.getEntityRecords;
|
227 |
|
228 | var latestPostsQuery = pickBy({
|
229 | categories: categories,
|
230 | order: order,
|
231 | orderby: orderBy,
|
232 | per_page: postsToShow
|
233 | }, function (value) {
|
234 | return !isUndefined(value);
|
235 | });
|
236 | return {
|
237 | latestPosts: getEntityRecords('postType', 'post', latestPostsQuery)
|
238 | };
|
239 | })(LatestPostsEdit);
|
240 |
|
\ | No newline at end of file |