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 classnames from 'classnames';
|
15 | import { get } from 'lodash';
|
16 | /**
|
17 | * WordPress dependencies
|
18 | */
|
19 |
|
20 | import { __, _x } from '@wordpress/i18n';
|
21 | import { BlockControls, InnerBlocks, InspectorControls, PanelColorSettings, withColors } from '@wordpress/block-editor';
|
22 | import { Component, Fragment } from '@wordpress/element';
|
23 | import { PanelBody, TextareaControl, ToggleControl, Toolbar } from '@wordpress/components';
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | import MediaContainer from './media-container';
|
29 |
|
30 |
|
31 |
|
32 |
|
33 | var ALLOWED_BLOCKS = ['core/button', 'core/paragraph', 'core/heading', 'core/list'];
|
34 | var TEMPLATE = [['core/paragraph', {
|
35 | fontSize: 'large',
|
36 | placeholder: _x('Content…', 'content placeholder')
|
37 | }]];
|
38 |
|
39 | var MediaTextEdit =
|
40 |
|
41 | function (_Component) {
|
42 | _inherits(MediaTextEdit, _Component);
|
43 |
|
44 | function MediaTextEdit() {
|
45 | var _this;
|
46 |
|
47 | _classCallCheck(this, MediaTextEdit);
|
48 |
|
49 | _this = _possibleConstructorReturn(this, _getPrototypeOf(MediaTextEdit).apply(this, arguments));
|
50 | _this.onSelectMedia = _this.onSelectMedia.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
51 | _this.onWidthChange = _this.onWidthChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
52 | _this.commitWidthChange = _this.commitWidthChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
53 | _this.state = {
|
54 | mediaWidth: null
|
55 | };
|
56 | return _this;
|
57 | }
|
58 |
|
59 | _createClass(MediaTextEdit, [{
|
60 | key: "onSelectMedia",
|
61 | value: function onSelectMedia(media) {
|
62 | var setAttributes = this.props.setAttributes;
|
63 | var mediaType;
|
64 | var src;
|
65 |
|
66 | if (media.media_type) {
|
67 | if (media.media_type === 'image') {
|
68 | mediaType = 'image';
|
69 | } else {
|
70 |
|
71 |
|
72 | mediaType = 'video';
|
73 | }
|
74 | } else {
|
75 |
|
76 | mediaType = media.type;
|
77 | }
|
78 |
|
79 | if (mediaType === 'image') {
|
80 |
|
81 | src = get(media, ['sizes', 'large', 'url']) || get(media, ['media_details', 'sizes', 'large', 'source_url']);
|
82 | }
|
83 |
|
84 | setAttributes({
|
85 | mediaAlt: media.alt,
|
86 | mediaId: media.id,
|
87 | mediaType: mediaType,
|
88 | mediaUrl: src || media.url
|
89 | });
|
90 | }
|
91 | }, {
|
92 | key: "onWidthChange",
|
93 | value: function onWidthChange(width) {
|
94 | this.setState({
|
95 | mediaWidth: width
|
96 | });
|
97 | }
|
98 | }, {
|
99 | key: "commitWidthChange",
|
100 | value: function commitWidthChange(width) {
|
101 | var setAttributes = this.props.setAttributes;
|
102 | setAttributes({
|
103 | mediaWidth: width
|
104 | });
|
105 | this.setState({
|
106 | mediaWidth: null
|
107 | });
|
108 | }
|
109 | }, {
|
110 | key: "renderMediaArea",
|
111 | value: function renderMediaArea() {
|
112 | var attributes = this.props.attributes;
|
113 | var mediaAlt = attributes.mediaAlt,
|
114 | mediaId = attributes.mediaId,
|
115 | mediaPosition = attributes.mediaPosition,
|
116 | mediaType = attributes.mediaType,
|
117 | mediaUrl = attributes.mediaUrl,
|
118 | mediaWidth = attributes.mediaWidth;
|
119 | return createElement(MediaContainer, _extends({
|
120 | className: "block-library-media-text__media-container",
|
121 | onSelectMedia: this.onSelectMedia,
|
122 | onWidthChange: this.onWidthChange,
|
123 | commitWidthChange: this.commitWidthChange
|
124 | }, {
|
125 | mediaAlt: mediaAlt,
|
126 | mediaId: mediaId,
|
127 | mediaType: mediaType,
|
128 | mediaUrl: mediaUrl,
|
129 | mediaPosition: mediaPosition,
|
130 | mediaWidth: mediaWidth
|
131 | }));
|
132 | }
|
133 | }, {
|
134 | key: "render",
|
135 | value: function render() {
|
136 | var _classnames;
|
137 |
|
138 | var _this$props = this.props,
|
139 | attributes = _this$props.attributes,
|
140 | className = _this$props.className,
|
141 | backgroundColor = _this$props.backgroundColor,
|
142 | isSelected = _this$props.isSelected,
|
143 | setAttributes = _this$props.setAttributes,
|
144 | setBackgroundColor = _this$props.setBackgroundColor;
|
145 | var isStackedOnMobile = attributes.isStackedOnMobile,
|
146 | mediaAlt = attributes.mediaAlt,
|
147 | mediaPosition = attributes.mediaPosition,
|
148 | mediaType = attributes.mediaType,
|
149 | mediaWidth = attributes.mediaWidth;
|
150 | var temporaryMediaWidth = this.state.mediaWidth;
|
151 | var classNames = classnames(className, (_classnames = {
|
152 | 'has-media-on-the-right': 'right' === mediaPosition,
|
153 | 'is-selected': isSelected
|
154 | }, _defineProperty(_classnames, backgroundColor.class, backgroundColor.class), _defineProperty(_classnames, 'is-stacked-on-mobile', isStackedOnMobile), _classnames));
|
155 | var widthString = "".concat(temporaryMediaWidth || mediaWidth, "%");
|
156 | var style = {
|
157 | gridTemplateColumns: 'right' === mediaPosition ? "auto ".concat(widthString) : "".concat(widthString, " auto"),
|
158 | backgroundColor: backgroundColor.color
|
159 | };
|
160 | var colorSettings = [{
|
161 | value: backgroundColor.color,
|
162 | onChange: setBackgroundColor,
|
163 | label: __('Background Color')
|
164 | }];
|
165 | var toolbarControls = [{
|
166 | icon: 'align-pull-left',
|
167 | title: __('Show media on left'),
|
168 | isActive: mediaPosition === 'left',
|
169 | onClick: function onClick() {
|
170 | return setAttributes({
|
171 | mediaPosition: 'left'
|
172 | });
|
173 | }
|
174 | }, {
|
175 | icon: 'align-pull-right',
|
176 | title: __('Show media on right'),
|
177 | isActive: mediaPosition === 'right',
|
178 | onClick: function onClick() {
|
179 | return setAttributes({
|
180 | mediaPosition: 'right'
|
181 | });
|
182 | }
|
183 | }];
|
184 |
|
185 | var onMediaAltChange = function onMediaAltChange(newMediaAlt) {
|
186 | setAttributes({
|
187 | mediaAlt: newMediaAlt
|
188 | });
|
189 | };
|
190 |
|
191 | var mediaTextGeneralSettings = createElement(PanelBody, {
|
192 | title: __('Media & Text Settings')
|
193 | }, createElement(ToggleControl, {
|
194 | label: __('Stack on mobile'),
|
195 | checked: isStackedOnMobile,
|
196 | onChange: function onChange() {
|
197 | return setAttributes({
|
198 | isStackedOnMobile: !isStackedOnMobile
|
199 | });
|
200 | }
|
201 | }), mediaType === 'image' && createElement(TextareaControl, {
|
202 | label: __('Alt Text (Alternative Text)'),
|
203 | value: mediaAlt,
|
204 | onChange: onMediaAltChange,
|
205 | help: __('Alternative text describes your image to people who can’t see it. Add a short description with its key details.')
|
206 | }));
|
207 | return createElement(Fragment, null, createElement(InspectorControls, null, mediaTextGeneralSettings, createElement(PanelColorSettings, {
|
208 | title: __('Color Settings'),
|
209 | initialOpen: false,
|
210 | colorSettings: colorSettings
|
211 | })), createElement(BlockControls, null, createElement(Toolbar, {
|
212 | controls: toolbarControls
|
213 | })), createElement("div", {
|
214 | className: classNames,
|
215 | style: style
|
216 | }, this.renderMediaArea(), createElement(InnerBlocks, {
|
217 | allowedBlocks: ALLOWED_BLOCKS,
|
218 | template: TEMPLATE,
|
219 | templateInsertUpdatesSelection: false
|
220 | })));
|
221 | }
|
222 | }]);
|
223 |
|
224 | return MediaTextEdit;
|
225 | }(Component);
|
226 |
|
227 | export default withColors('backgroundColor')(MediaTextEdit);
|
228 |
|
\ | No newline at end of file |