1 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
2 | import { createElement } from "@wordpress/element";
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | import classnames from 'classnames';
|
8 | import { noop } from 'lodash';
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | import { createBlock } from '@wordpress/blocks';
|
14 | import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
|
15 | import { __ } from '@wordpress/i18n';
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | import edit from './edit';
|
21 | import icon from './icon';
|
22 | var DEFAULT_MEDIA_WIDTH = 50;
|
23 | export var name = 'core/media-text';
|
24 | var blockAttributes = {
|
25 | align: {
|
26 | type: 'string',
|
27 | default: 'wide'
|
28 | },
|
29 | backgroundColor: {
|
30 | type: 'string'
|
31 | },
|
32 | customBackgroundColor: {
|
33 | type: 'string'
|
34 | },
|
35 | mediaAlt: {
|
36 | type: 'string',
|
37 | source: 'attribute',
|
38 | selector: 'figure img',
|
39 | attribute: 'alt',
|
40 | default: ''
|
41 | },
|
42 | mediaPosition: {
|
43 | type: 'string',
|
44 | default: 'left'
|
45 | },
|
46 | mediaId: {
|
47 | type: 'number'
|
48 | },
|
49 | mediaUrl: {
|
50 | type: 'string',
|
51 | source: 'attribute',
|
52 | selector: 'figure video,figure img',
|
53 | attribute: 'src'
|
54 | },
|
55 | mediaType: {
|
56 | type: 'string'
|
57 | },
|
58 | mediaWidth: {
|
59 | type: 'number',
|
60 | default: 50
|
61 | },
|
62 | isStackedOnMobile: {
|
63 | type: 'boolean',
|
64 | default: false
|
65 | }
|
66 | };
|
67 | export var settings = {
|
68 | title: __('Media & Text'),
|
69 | description: __('Set media and words side-by-side for a richer layout.'),
|
70 | icon: icon,
|
71 | category: 'layout',
|
72 | keywords: [__('image'), __('video')],
|
73 | attributes: blockAttributes,
|
74 | supports: {
|
75 | align: ['wide', 'full'],
|
76 | html: false
|
77 | },
|
78 | transforms: {
|
79 | from: [{
|
80 | type: 'block',
|
81 | blocks: ['core/image'],
|
82 | transform: function transform(_ref) {
|
83 | var alt = _ref.alt,
|
84 | url = _ref.url,
|
85 | id = _ref.id;
|
86 | return createBlock('core/media-text', {
|
87 | mediaAlt: alt,
|
88 | mediaId: id,
|
89 | mediaUrl: url,
|
90 | mediaType: 'image'
|
91 | });
|
92 | }
|
93 | }, {
|
94 | type: 'block',
|
95 | blocks: ['core/video'],
|
96 | transform: function transform(_ref2) {
|
97 | var src = _ref2.src,
|
98 | id = _ref2.id;
|
99 | return createBlock('core/media-text', {
|
100 | mediaId: id,
|
101 | mediaUrl: src,
|
102 | mediaType: 'video'
|
103 | });
|
104 | }
|
105 | }],
|
106 | to: [{
|
107 | type: 'block',
|
108 | blocks: ['core/image'],
|
109 | isMatch: function isMatch(_ref3) {
|
110 | var mediaType = _ref3.mediaType,
|
111 | mediaUrl = _ref3.mediaUrl;
|
112 | return !mediaUrl || mediaType === 'image';
|
113 | },
|
114 | transform: function transform(_ref4) {
|
115 | var mediaAlt = _ref4.mediaAlt,
|
116 | mediaId = _ref4.mediaId,
|
117 | mediaUrl = _ref4.mediaUrl;
|
118 | return createBlock('core/image', {
|
119 | alt: mediaAlt,
|
120 | id: mediaId,
|
121 | url: mediaUrl
|
122 | });
|
123 | }
|
124 | }, {
|
125 | type: 'block',
|
126 | blocks: ['core/video'],
|
127 | isMatch: function isMatch(_ref5) {
|
128 | var mediaType = _ref5.mediaType,
|
129 | mediaUrl = _ref5.mediaUrl;
|
130 | return !mediaUrl || mediaType === 'video';
|
131 | },
|
132 | transform: function transform(_ref6) {
|
133 | var mediaId = _ref6.mediaId,
|
134 | mediaUrl = _ref6.mediaUrl;
|
135 | return createBlock('core/video', {
|
136 | id: mediaId,
|
137 | src: mediaUrl
|
138 | });
|
139 | }
|
140 | }]
|
141 | },
|
142 | edit: edit,
|
143 | save: function save(_ref7) {
|
144 | var _classnames;
|
145 |
|
146 | var attributes = _ref7.attributes;
|
147 | var backgroundColor = attributes.backgroundColor,
|
148 | customBackgroundColor = attributes.customBackgroundColor,
|
149 | isStackedOnMobile = attributes.isStackedOnMobile,
|
150 | mediaAlt = attributes.mediaAlt,
|
151 | mediaPosition = attributes.mediaPosition,
|
152 | mediaType = attributes.mediaType,
|
153 | mediaUrl = attributes.mediaUrl,
|
154 | mediaWidth = attributes.mediaWidth,
|
155 | mediaId = attributes.mediaId;
|
156 | var mediaTypeRenders = {
|
157 | image: function image() {
|
158 | return createElement("img", {
|
159 | src: mediaUrl,
|
160 | alt: mediaAlt,
|
161 | className: mediaId && mediaType === 'image' ? "wp-image-".concat(mediaId) : null
|
162 | });
|
163 | },
|
164 | video: function video() {
|
165 | return createElement("video", {
|
166 | controls: true,
|
167 | src: mediaUrl
|
168 | });
|
169 | }
|
170 | };
|
171 | var backgroundClass = getColorClassName('background-color', backgroundColor);
|
172 | var className = classnames((_classnames = {
|
173 | 'has-media-on-the-right': 'right' === mediaPosition
|
174 | }, _defineProperty(_classnames, backgroundClass, backgroundClass), _defineProperty(_classnames, 'is-stacked-on-mobile', isStackedOnMobile), _classnames));
|
175 | var gridTemplateColumns;
|
176 |
|
177 | if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
|
178 | gridTemplateColumns = 'right' === mediaPosition ? "auto ".concat(mediaWidth, "%") : "".concat(mediaWidth, "% auto");
|
179 | }
|
180 |
|
181 | var style = {
|
182 | backgroundColor: backgroundClass ? undefined : customBackgroundColor,
|
183 | gridTemplateColumns: gridTemplateColumns
|
184 | };
|
185 | return createElement("div", {
|
186 | className: className,
|
187 | style: style
|
188 | }, createElement("figure", {
|
189 | className: "wp-block-media-text__media"
|
190 | }, (mediaTypeRenders[mediaType] || noop)()), createElement("div", {
|
191 | className: "wp-block-media-text__content"
|
192 | }, createElement(InnerBlocks.Content, null)));
|
193 | },
|
194 | deprecated: [{
|
195 | attributes: blockAttributes,
|
196 | save: function save(_ref8) {
|
197 | var _classnames2;
|
198 |
|
199 | var attributes = _ref8.attributes;
|
200 | var backgroundColor = attributes.backgroundColor,
|
201 | customBackgroundColor = attributes.customBackgroundColor,
|
202 | isStackedOnMobile = attributes.isStackedOnMobile,
|
203 | mediaAlt = attributes.mediaAlt,
|
204 | mediaPosition = attributes.mediaPosition,
|
205 | mediaType = attributes.mediaType,
|
206 | mediaUrl = attributes.mediaUrl,
|
207 | mediaWidth = attributes.mediaWidth;
|
208 | var mediaTypeRenders = {
|
209 | image: function image() {
|
210 | return createElement("img", {
|
211 | src: mediaUrl,
|
212 | alt: mediaAlt
|
213 | });
|
214 | },
|
215 | video: function video() {
|
216 | return createElement("video", {
|
217 | controls: true,
|
218 | src: mediaUrl
|
219 | });
|
220 | }
|
221 | };
|
222 | var backgroundClass = getColorClassName('background-color', backgroundColor);
|
223 | var className = classnames((_classnames2 = {
|
224 | 'has-media-on-the-right': 'right' === mediaPosition
|
225 | }, _defineProperty(_classnames2, backgroundClass, backgroundClass), _defineProperty(_classnames2, 'is-stacked-on-mobile', isStackedOnMobile), _classnames2));
|
226 | var gridTemplateColumns;
|
227 |
|
228 | if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
|
229 | gridTemplateColumns = 'right' === mediaPosition ? "auto ".concat(mediaWidth, "%") : "".concat(mediaWidth, "% auto");
|
230 | }
|
231 |
|
232 | var style = {
|
233 | backgroundColor: backgroundClass ? undefined : customBackgroundColor,
|
234 | gridTemplateColumns: gridTemplateColumns
|
235 | };
|
236 | return createElement("div", {
|
237 | className: className,
|
238 | style: style
|
239 | }, createElement("figure", {
|
240 | className: "wp-block-media-text__media"
|
241 | }, (mediaTypeRenders[mediaType] || noop)()), createElement("div", {
|
242 | className: "wp-block-media-text__content"
|
243 | }, createElement(InnerBlocks.Content, null)));
|
244 | }
|
245 | }]
|
246 | };
|
247 |
|
\ | No newline at end of file |