1 | import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
2 | import _createClass from "@babel/runtime/helpers/esm/createClass";
|
3 | import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
4 | import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
5 | import _inherits from "@babel/runtime/helpers/esm/inherits";
|
6 | import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
7 | import { createElement } from "@wordpress/element";
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | import { map } from 'lodash';
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | import { Component, Fragment } from '@wordpress/element';
|
18 | import { Button, IconButton, PanelBody, Placeholder, SelectControl, Toolbar } from '@wordpress/components';
|
19 | import { __ } from '@wordpress/i18n';
|
20 | import { withSelect } from '@wordpress/data';
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | import { BlockControls, BlockIcon, InspectorControls, ServerSideRender } from '@wordpress/editor';
|
26 | import WidgetEditHandler from './WidgetEditHandler';
|
27 |
|
28 | var LegacyWidgetEdit =
|
29 |
|
30 | function (_Component) {
|
31 | _inherits(LegacyWidgetEdit, _Component);
|
32 |
|
33 | function LegacyWidgetEdit() {
|
34 | var _this;
|
35 |
|
36 | _classCallCheck(this, LegacyWidgetEdit);
|
37 |
|
38 | _this = _possibleConstructorReturn(this, _getPrototypeOf(LegacyWidgetEdit).apply(this, arguments));
|
39 | _this.state = {
|
40 | isPreview: false
|
41 | };
|
42 | _this.switchToEdit = _this.switchToEdit.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
43 | _this.switchToPreview = _this.switchToPreview.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
44 | _this.changeWidget = _this.changeWidget.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
45 | return _this;
|
46 | }
|
47 |
|
48 | _createClass(LegacyWidgetEdit, [{
|
49 | key: "render",
|
50 | value: function render() {
|
51 | var _this2 = this;
|
52 |
|
53 | var _this$props = this.props,
|
54 | attributes = _this$props.attributes,
|
55 | availableLegacyWidgets = _this$props.availableLegacyWidgets,
|
56 | hasPermissionsToManageWidgets = _this$props.hasPermissionsToManageWidgets,
|
57 | setAttributes = _this$props.setAttributes;
|
58 | var isPreview = this.state.isPreview;
|
59 | var identifier = attributes.identifier,
|
60 | isCallbackWidget = attributes.isCallbackWidget;
|
61 | var widgetObject = identifier && availableLegacyWidgets[identifier];
|
62 |
|
63 | if (!widgetObject) {
|
64 | var placeholderContent;
|
65 |
|
66 | if (!hasPermissionsToManageWidgets) {
|
67 | placeholderContent = __('You don\'t have permissions to use widgets on this site.');
|
68 | } else if (availableLegacyWidgets.length === 0) {
|
69 | placeholderContent = __('There are no widgets available.');
|
70 | } else {
|
71 | placeholderContent = createElement(SelectControl, {
|
72 | label: __('Select a legacy widget to display:'),
|
73 | value: identifier || 'none',
|
74 | onChange: function onChange(value) {
|
75 | return setAttributes({
|
76 | instance: {},
|
77 | identifier: value,
|
78 | isCallbackWidget: availableLegacyWidgets[value].isCallbackWidget
|
79 | });
|
80 | },
|
81 | options: [{
|
82 | value: 'none',
|
83 | label: 'Select widget'
|
84 | }].concat(map(availableLegacyWidgets, function (widget, key) {
|
85 | return {
|
86 | value: key,
|
87 | label: widget.name
|
88 | };
|
89 | }))
|
90 | });
|
91 | }
|
92 |
|
93 | return createElement(Placeholder, {
|
94 | icon: createElement(BlockIcon, {
|
95 | icon: "admin-customizer"
|
96 | }),
|
97 | label: __('Legacy Widget')
|
98 | }, placeholderContent);
|
99 | }
|
100 |
|
101 | var inspectorControls = createElement(InspectorControls, null, createElement(PanelBody, {
|
102 | title: widgetObject.name
|
103 | }, widgetObject.description));
|
104 |
|
105 | if (!hasPermissionsToManageWidgets) {
|
106 | return createElement(Fragment, null, inspectorControls, this.renderWidgetPreview());
|
107 | }
|
108 |
|
109 | return createElement(Fragment, null, createElement(BlockControls, null, createElement(Toolbar, null, createElement(IconButton, {
|
110 | onClick: this.changeWidget,
|
111 | label: __('Change widget'),
|
112 | icon: "update"
|
113 | }), !isCallbackWidget && createElement(Fragment, null, createElement(Button, {
|
114 | className: "components-tab-button ".concat(!isPreview ? 'is-active' : ''),
|
115 | onClick: this.switchToEdit
|
116 | }, createElement("span", null, __('Edit'))), createElement(Button, {
|
117 | className: "components-tab-button ".concat(isPreview ? 'is-active' : ''),
|
118 | onClick: this.switchToPreview
|
119 | }, createElement("span", null, __('Preview')))))), inspectorControls, !isCallbackWidget && createElement(WidgetEditHandler, {
|
120 | isVisible: !isPreview,
|
121 | identifier: attributes.identifier,
|
122 | instance: attributes.instance,
|
123 | onInstanceChange: function onInstanceChange(newInstance) {
|
124 | _this2.props.setAttributes({
|
125 | instance: newInstance
|
126 | });
|
127 | }
|
128 | }), (isPreview || isCallbackWidget) && this.renderWidgetPreview());
|
129 | }
|
130 | }, {
|
131 | key: "changeWidget",
|
132 | value: function changeWidget() {
|
133 | this.switchToEdit();
|
134 | this.props.setAttributes({
|
135 | instance: {},
|
136 | identifier: undefined
|
137 | });
|
138 | }
|
139 | }, {
|
140 | key: "switchToEdit",
|
141 | value: function switchToEdit() {
|
142 | this.setState({
|
143 | isPreview: false
|
144 | });
|
145 | }
|
146 | }, {
|
147 | key: "switchToPreview",
|
148 | value: function switchToPreview() {
|
149 | this.setState({
|
150 | isPreview: true
|
151 | });
|
152 | }
|
153 | }, {
|
154 | key: "renderWidgetPreview",
|
155 | value: function renderWidgetPreview() {
|
156 | var attributes = this.props.attributes;
|
157 | return createElement(ServerSideRender, {
|
158 | className: "wp-block-legacy-widget__preview",
|
159 | block: "core/legacy-widget",
|
160 | attributes: attributes
|
161 | });
|
162 | }
|
163 | }]);
|
164 |
|
165 | return LegacyWidgetEdit;
|
166 | }(Component);
|
167 |
|
168 | export default withSelect(function (select) {
|
169 | var editorSettings = select('core/block-editor').getSettings();
|
170 | var availableLegacyWidgets = editorSettings.availableLegacyWidgets,
|
171 | hasPermissionsToManageWidgets = editorSettings.hasPermissionsToManageWidgets;
|
172 | return {
|
173 | hasPermissionsToManageWidgets: hasPermissionsToManageWidgets,
|
174 | availableLegacyWidgets: availableLegacyWidgets
|
175 | };
|
176 | })(LegacyWidgetEdit);
|
177 |
|
\ | No newline at end of file |