1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = void 0;
|
9 |
|
10 | var _element = require("@wordpress/element");
|
11 |
|
12 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13 |
|
14 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
|
15 |
|
16 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
17 |
|
18 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
19 |
|
20 | var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
21 |
|
22 | var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
23 |
|
24 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
25 |
|
26 | var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
27 |
|
28 | var _lodash = require("lodash");
|
29 |
|
30 | var _components = require("@wordpress/components");
|
31 |
|
32 | var _data = require("@wordpress/data");
|
33 |
|
34 | var _i18n = require("@wordpress/i18n");
|
35 |
|
36 | var _blockEditor = require("@wordpress/block-editor");
|
37 |
|
38 | var _compose = require("@wordpress/compose");
|
39 |
|
40 | var _editPanel = _interopRequireDefault(require("./edit-panel"));
|
41 |
|
42 | var _indicator = _interopRequireDefault(require("./indicator"));
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 | var ReusableBlockEdit =
|
56 |
|
57 | function (_Component) {
|
58 | (0, _inherits2.default)(ReusableBlockEdit, _Component);
|
59 |
|
60 | function ReusableBlockEdit(_ref) {
|
61 | var _this;
|
62 |
|
63 | var reusableBlock = _ref.reusableBlock;
|
64 | (0, _classCallCheck2.default)(this, ReusableBlockEdit);
|
65 | _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ReusableBlockEdit).apply(this, arguments));
|
66 | _this.startEditing = _this.startEditing.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
67 | _this.stopEditing = _this.stopEditing.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
68 | _this.setAttributes = _this.setAttributes.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
69 | _this.setTitle = _this.setTitle.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
70 | _this.save = _this.save.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
71 |
|
72 | if (reusableBlock && reusableBlock.isTemporary) {
|
73 |
|
74 | _this.state = {
|
75 | isEditing: true,
|
76 | title: reusableBlock.title,
|
77 | changedAttributes: {}
|
78 | };
|
79 | } else {
|
80 |
|
81 | _this.state = {
|
82 | isEditing: false,
|
83 | title: null,
|
84 | changedAttributes: null
|
85 | };
|
86 | }
|
87 |
|
88 | return _this;
|
89 | }
|
90 |
|
91 | (0, _createClass2.default)(ReusableBlockEdit, [{
|
92 | key: "componentDidMount",
|
93 | value: function componentDidMount() {
|
94 | if (!this.props.reusableBlock) {
|
95 | this.props.fetchReusableBlock();
|
96 | }
|
97 | }
|
98 | }, {
|
99 | key: "startEditing",
|
100 | value: function startEditing() {
|
101 | var reusableBlock = this.props.reusableBlock;
|
102 | this.setState({
|
103 | isEditing: true,
|
104 | title: reusableBlock.title,
|
105 | changedAttributes: {}
|
106 | });
|
107 | }
|
108 | }, {
|
109 | key: "stopEditing",
|
110 | value: function stopEditing() {
|
111 | this.setState({
|
112 | isEditing: false,
|
113 | title: null,
|
114 | changedAttributes: null
|
115 | });
|
116 | }
|
117 | }, {
|
118 | key: "setAttributes",
|
119 | value: function setAttributes(attributes) {
|
120 | this.setState(function (prevState) {
|
121 | if (prevState.changedAttributes !== null) {
|
122 | return {
|
123 | changedAttributes: (0, _objectSpread2.default)({}, prevState.changedAttributes, attributes)
|
124 | };
|
125 | }
|
126 | });
|
127 | }
|
128 | }, {
|
129 | key: "setTitle",
|
130 | value: function setTitle(title) {
|
131 | this.setState({
|
132 | title: title
|
133 | });
|
134 | }
|
135 | }, {
|
136 | key: "save",
|
137 | value: function save() {
|
138 | var _this$props = this.props,
|
139 | reusableBlock = _this$props.reusableBlock,
|
140 | onUpdateTitle = _this$props.onUpdateTitle,
|
141 | updateAttributes = _this$props.updateAttributes,
|
142 | block = _this$props.block,
|
143 | onSave = _this$props.onSave;
|
144 | var _this$state = this.state,
|
145 | title = _this$state.title,
|
146 | changedAttributes = _this$state.changedAttributes;
|
147 |
|
148 | if (title !== reusableBlock.title) {
|
149 | onUpdateTitle(title);
|
150 | }
|
151 |
|
152 | updateAttributes(block.clientId, changedAttributes);
|
153 | onSave();
|
154 | this.stopEditing();
|
155 | }
|
156 | }, {
|
157 | key: "render",
|
158 | value: function render() {
|
159 | var _this$props2 = this.props,
|
160 | isSelected = _this$props2.isSelected,
|
161 | reusableBlock = _this$props2.reusableBlock,
|
162 | block = _this$props2.block,
|
163 | isFetching = _this$props2.isFetching,
|
164 | isSaving = _this$props2.isSaving,
|
165 | canUpdateBlock = _this$props2.canUpdateBlock;
|
166 | var _this$state2 = this.state,
|
167 | isEditing = _this$state2.isEditing,
|
168 | title = _this$state2.title,
|
169 | changedAttributes = _this$state2.changedAttributes;
|
170 |
|
171 | if (!reusableBlock && isFetching) {
|
172 | return (0, _element.createElement)(_components.Placeholder, null, (0, _element.createElement)(_components.Spinner, null));
|
173 | }
|
174 |
|
175 | if (!reusableBlock || !block) {
|
176 | return (0, _element.createElement)(_components.Placeholder, null, (0, _i18n.__)('Block has been deleted or is unavailable.'));
|
177 | }
|
178 |
|
179 | var element = (0, _element.createElement)(_blockEditor.BlockEdit, (0, _extends2.default)({}, this.props, {
|
180 | isSelected: isEditing && isSelected,
|
181 | clientId: block.clientId,
|
182 | name: block.name,
|
183 | attributes: (0, _objectSpread2.default)({}, block.attributes, changedAttributes),
|
184 | setAttributes: isEditing ? this.setAttributes : _lodash.noop
|
185 | }));
|
186 |
|
187 | if (!isEditing) {
|
188 | element = (0, _element.createElement)(_components.Disabled, null, element);
|
189 | }
|
190 |
|
191 | return (0, _element.createElement)(_element.Fragment, null, (isSelected || isEditing) && (0, _element.createElement)(_editPanel.default, {
|
192 | isEditing: isEditing,
|
193 | title: title !== null ? title : reusableBlock.title,
|
194 | isSaving: isSaving && !reusableBlock.isTemporary,
|
195 | isEditDisabled: !canUpdateBlock,
|
196 | onEdit: this.startEditing,
|
197 | onChangeTitle: this.setTitle,
|
198 | onSave: this.save,
|
199 | onCancel: this.stopEditing
|
200 | }), !isSelected && !isEditing && (0, _element.createElement)(_indicator.default, {
|
201 | title: reusableBlock.title
|
202 | }), element);
|
203 | }
|
204 | }]);
|
205 | return ReusableBlockEdit;
|
206 | }(_element.Component);
|
207 |
|
208 | var _default = (0, _compose.compose)([(0, _data.withSelect)(function (select, ownProps) {
|
209 | var _select = select('core/editor'),
|
210 | getReusableBlock = _select.__experimentalGetReusableBlock,
|
211 | isFetchingReusableBlock = _select.__experimentalIsFetchingReusableBlock,
|
212 | isSavingReusableBlock = _select.__experimentalIsSavingReusableBlock;
|
213 |
|
214 | var _select2 = select('core'),
|
215 | canUser = _select2.canUser;
|
216 |
|
217 | var _select3 = select('core/block-editor'),
|
218 | getBlock = _select3.getBlock;
|
219 |
|
220 | var ref = ownProps.attributes.ref;
|
221 | var reusableBlock = getReusableBlock(ref);
|
222 | return {
|
223 | reusableBlock: reusableBlock,
|
224 | isFetching: isFetchingReusableBlock(ref),
|
225 | isSaving: isSavingReusableBlock(ref),
|
226 | block: reusableBlock ? getBlock(reusableBlock.clientId) : null,
|
227 | canUpdateBlock: !!reusableBlock && !reusableBlock.isTemporary && !!canUser('update', 'blocks', ref)
|
228 | };
|
229 | }), (0, _data.withDispatch)(function (dispatch, ownProps) {
|
230 | var _dispatch = dispatch('core/editor'),
|
231 | fetchReusableBlocks = _dispatch.__experimentalFetchReusableBlocks,
|
232 | updateReusableBlockTitle = _dispatch.__experimentalUpdateReusableBlockTitle,
|
233 | saveReusableBlock = _dispatch.__experimentalSaveReusableBlock;
|
234 |
|
235 | var _dispatch2 = dispatch('core/block-editor'),
|
236 | updateBlockAttributes = _dispatch2.updateBlockAttributes;
|
237 |
|
238 | var ref = ownProps.attributes.ref;
|
239 | return {
|
240 | fetchReusableBlock: (0, _lodash.partial)(fetchReusableBlocks, ref),
|
241 | updateAttributes: updateBlockAttributes,
|
242 | onUpdateTitle: (0, _lodash.partial)(updateReusableBlockTitle, ref),
|
243 | onSave: (0, _lodash.partial)(saveReusableBlock, ref)
|
244 | };
|
245 | })])(ReusableBlockEdit);
|
246 |
|
247 | exports.default = _default;
|
248 |
|
\ | No newline at end of file |