PluginProbe
Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts / trunk
Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts vtrunk
2.8.14 2.8.13 2.8.12 2.7.5 2.7.6 2.7.7 2.7.8 2.7.9 2.8.0 2.8.1 2.8.10 2.8.11 2.8.2 2.8.3 2.8.4 2.8.5 2.8.6 2.8.7 2.8.8 2.8.9 trunk 1.0.1 1.0.2 1.1.0 1.1.1 All 147 releases
content-blocks-builder / src / features / grid / utils.js

utils.js in Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts trunk, at src/features/grid/utils.js

572 lines 13.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * External depencencies
3 */
4 import { isString } from "lodash";
5
6 /**
7 * WordPress dependencies
8 */
9 import { __ } from "@wordpress/i18n";
10
11 /**
12 * Internal dependencies
13 */
14 import { isUnsetValue } from "sdk/utils";
15 import { labels } from "../../utils/labels";
16
17 /**
18 * Default grid settings
19 */
20 export const gridSettingsDefault = {
21 grid: {
22 columns: {
23 lg: {
24 value: "none",
25 inherit: null,
26 },
27 md: { inherit: "lg" },
28 sm: { inherit: null },
29 },
30 gap: {
31 lg: {
32 value: { row: "1rem", column: "1rem" },
33 inherit: null,
34 },
35 md: { inherit: "lg" },
36 sm: { inherit: "lg" },
37 },
38 },
39 };
40
41 /**
42 * Define a list of preset grid's row layout.
43 */
44 export const layoutPresets = [
45 {
46 label: __("1 Item", "content-blocks-builder"),
47 itemCount: 1,
48 breakpoints: ["sm", "md", "lg"],
49 attributes: {
50 grid: {
51 columns: "minmax(0, 1fr)",
52 },
53 },
54 innerBlocks: [
55 {
56 attributes: {
57 gridItem: {
58 columnSpan: { span: "auto", start: "auto", order: "auto" },
59 rowSpan: { span: "auto", start: "auto" },
60 },
61 },
62 },
63 ],
64 },
65 {
66 label: __("2 Items - 1:1", "content-blocks-builder"),
67 itemCount: 2,
68 breakpoints: ["sm", "md", "lg"],
69 attributes: {
70 grid: {
71 columns: "repeat(2, minmax(0, 1fr))",
72 },
73 },
74 innerBlocks: [
75 {
76 attributes: {
77 gridItem: {
78 columnSpan: { span: "auto", start: "auto", order: "auto" },
79 rowSpan: { span: "auto", start: "auto" },
80 },
81 },
82 },
83 {
84 attributes: {
85 gridItem: {
86 columnSpan: { span: "auto", start: "auto", order: "auto" },
87 rowSpan: { span: "auto", start: "auto" },
88 },
89 },
90 },
91 ],
92 },
93 {
94 label: __("3 Items - 1:1:1", "content-blocks-builder"),
95 itemCount: 3,
96 breakpoints: ["sm", "md", "lg"],
97 attributes: {
98 grid: {
99 columns: "repeat(3, minmax(0, 1fr))",
100 },
101 },
102 innerBlocks: [
103 {
104 attributes: {
105 gridItem: {
106 columnSpan: { span: "auto", start: "auto", order: "auto" },
107 rowSpan: { span: "auto", start: "auto" },
108 },
109 },
110 },
111 {
112 attributes: {
113 gridItem: {
114 columnSpan: { span: "auto", start: "auto", order: "auto" },
115 rowSpan: { span: "auto", start: "auto" },
116 },
117 },
118 },
119 {
120 attributes: {
121 gridItem: {
122 columnSpan: { span: "auto", start: "auto", order: "auto" },
123 rowSpan: { span: "auto", start: "auto" },
124 },
125 },
126 },
127 ],
128 },
129 {
130 label: __("4 Items - 1:1:1:1", "content-blocks-builder"),
131 itemCount: 4,
132 breakpoints: ["sm", "md", "lg"],
133 attributes: {
134 grid: {
135 columns: "repeat(4, minmax(0, 1fr))",
136 },
137 },
138 innerBlocks: [
139 {
140 attributes: {
141 gridItem: {
142 columnSpan: { span: "auto", start: "auto", order: "auto" },
143 rowSpan: { span: "auto", start: "auto" },
144 },
145 },
146 },
147 {
148 attributes: {
149 gridItem: {
150 columnSpan: { span: "auto", start: "auto", order: "auto" },
151 rowSpan: { span: "auto", start: "auto" },
152 },
153 },
154 },
155 {
156 attributes: {
157 gridItem: {
158 columnSpan: { span: "auto", start: "auto", order: "auto" },
159 rowSpan: { span: "auto", start: "auto" },
160 },
161 },
162 },
163 {
164 attributes: {
165 gridItem: {
166 columnSpan: { span: "auto", start: "auto", order: "auto" },
167 rowSpan: { span: "auto", start: "auto" },
168 },
169 },
170 },
171 ],
172 },
173 {
174 label: __("5 Items - 1:1:1:1:1", "content-blocks-builder"),
175 itemCount: 5,
176 breakpoints: ["lg"],
177 attributes: {
178 grid: {
179 columns: "repeat(5, minmax(0, 1fr))",
180 },
181 },
182 innerBlocks: [
183 {
184 attributes: {
185 gridItem: {
186 columnSpan: { span: "auto", start: "auto", order: "auto" },
187 rowSpan: { span: "auto", start: "auto" },
188 },
189 },
190 },
191 {
192 attributes: {
193 gridItem: {
194 columnSpan: { span: "auto", start: "auto", order: "auto" },
195 rowSpan: { span: "auto", start: "auto" },
196 },
197 },
198 },
199 {
200 attributes: {
201 gridItem: {
202 columnSpan: { span: "auto", start: "auto", order: "auto" },
203 rowSpan: { span: "auto", start: "auto" },
204 },
205 },
206 },
207 {
208 attributes: {
209 gridItem: {
210 columnSpan: { span: "auto", start: "auto", order: "auto" },
211 rowSpan: { span: "auto", start: "auto" },
212 },
213 },
214 },
215 {
216 attributes: {
217 gridItem: {
218 columnSpan: { span: "auto", start: "auto", order: "auto" },
219 rowSpan: { span: "auto", start: "auto" },
220 },
221 },
222 },
223 ],
224 },
225 {
226 label: __("6 Items - 1:1:1:1:1:1", "content-blocks-builder"),
227 itemCount: 6,
228 breakpoints: ["lg"],
229 attributes: {
230 grid: {
231 columns: "repeat(6, minmax(0, 1fr))",
232 },
233 },
234 innerBlocks: [
235 {
236 attributes: {
237 gridItem: {
238 columnSpan: { span: "auto", start: "auto", order: "auto" },
239 rowSpan: { span: "auto", start: "auto" },
240 },
241 },
242 },
243 {
244 attributes: {
245 gridItem: {
246 columnSpan: { span: "auto", start: "auto", order: "auto" },
247 rowSpan: { span: "auto", start: "auto" },
248 },
249 },
250 },
251 {
252 attributes: {
253 gridItem: {
254 columnSpan: { span: "auto", start: "auto", order: "auto" },
255 rowSpan: { span: "auto", start: "auto" },
256 },
257 },
258 },
259 {
260 attributes: {
261 gridItem: {
262 columnSpan: { span: "auto", start: "auto", order: "auto" },
263 rowSpan: { span: "auto", start: "auto" },
264 },
265 },
266 },
267 {
268 attributes: {
269 gridItem: {
270 columnSpan: { span: "auto", start: "auto", order: "auto" },
271 rowSpan: { span: "auto", start: "auto" },
272 },
273 },
274 },
275 {
276 attributes: {
277 gridItem: {
278 columnSpan: { span: "auto", start: "auto", order: "auto" },
279 rowSpan: { span: "auto", start: "auto" },
280 },
281 },
282 },
283 ],
284 },
285 {
286 label: __("2 Items - 3:1", "content-blocks-builder"),
287 itemCount: 2,
288 breakpoints: ["sm", "md", "lg"],
289 attributes: {
290 grid: {
291 columns: "minmax(0, 3fr) minmax(0, 1fr)",
292 },
293 },
294 innerBlocks: [
295 {
296 attributes: {
297 gridItem: {
298 columnSpan: { span: "auto", start: "auto", order: "auto" },
299 rowSpan: { span: "auto", start: "auto" },
300 },
301 },
302 },
303 {
304 attributes: {
305 gridItem: {
306 columnSpan: { span: "auto", start: "auto", order: "auto" },
307 rowSpan: { span: "auto", start: "auto" },
308 },
309 },
310 },
311 ],
312 },
313 {
314 label: __("2 Items - 2:1", "content-blocks-builder"),
315 itemCount: 2,
316 breakpoints: ["sm", "md", "lg"],
317 attributes: {
318 grid: {
319 columns: "minmax(0, 2fr) minmax(0, 1fr)",
320 },
321 },
322 innerBlocks: [
323 {
324 attributes: {
325 gridItem: {
326 columnSpan: { span: "auto", start: "auto", order: "auto" },
327 rowSpan: { span: "auto", start: "auto" },
328 },
329 },
330 },
331 {
332 attributes: {
333 gridItem: {
334 columnSpan: { span: "auto", start: "auto", order: "auto" },
335 rowSpan: { span: "auto", start: "auto" },
336 },
337 },
338 },
339 ],
340 },
341 {
342 label: __("2 Items - 1:2", "content-blocks-builder"),
343 itemCount: 2,
344 breakpoints: ["sm", "md", "lg"],
345 attributes: {
346 grid: {
347 columns: "minmax(0, 1fr) minmax(0, 2fr)",
348 },
349 },
350 innerBlocks: [
351 {
352 attributes: {
353 gridItem: {
354 columnSpan: { span: "auto", start: "auto", order: "auto" },
355 rowSpan: { span: "auto", start: "auto" },
356 },
357 },
358 },
359 {
360 attributes: {
361 gridItem: {
362 columnSpan: { span: "auto", start: "auto", order: "auto" },
363 rowSpan: { span: "auto", start: "auto" },
364 },
365 },
366 },
367 ],
368 },
369 {
370 label: __("2 Items - 1:3", "content-blocks-builder"),
371 itemCount: 2,
372 breakpoints: ["sm", "md", "lg"],
373 attributes: {
374 grid: {
375 columns: "minmax(0, 1fr) minmax(0, 3fr)",
376 },
377 },
378 innerBlocks: [
379 {
380 attributes: {
381 gridItem: {
382 columnSpan: { span: "auto", start: "auto", order: "auto" },
383 rowSpan: { span: "auto", start: "auto" },
384 },
385 },
386 },
387 {
388 attributes: {
389 gridItem: {
390 columnSpan: { span: "auto", start: "auto", order: "auto" },
391 rowSpan: { span: "auto", start: "auto" },
392 },
393 },
394 },
395 ],
396 },
397 {
398 label: __("3 Items - 2:1:1", "content-blocks-builder"),
399 itemCount: 3,
400 breakpoints: ["sm", "md", "lg"],
401 attributes: {
402 grid: {
403 columns: "minmax(0, 2fr) repeat(2, minmax(0, 1fr))",
404 },
405 },
406 innerBlocks: [
407 {
408 attributes: {
409 gridItem: {
410 columnSpan: { span: "auto", start: "auto", order: "auto" },
411 rowSpan: { span: "auto", start: "auto" },
412 },
413 },
414 },
415 {
416 attributes: {
417 gridItem: {
418 columnSpan: { span: "auto", start: "auto", order: "auto" },
419 rowSpan: { span: "auto", start: "auto" },
420 },
421 },
422 },
423 {
424 attributes: {
425 gridItem: {
426 columnSpan: { span: "auto", start: "auto", order: "auto" },
427 rowSpan: { span: "auto", start: "auto" },
428 },
429 },
430 },
431 ],
432 },
433 {
434 label: __("3 Items - 1:2:1", "content-blocks-builder"),
435 itemCount: 3,
436 breakpoints: ["sm", "md", "lg"],
437 attributes: {
438 grid: {
439 columns: "minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)",
440 },
441 },
442 innerBlocks: [
443 {
444 attributes: {
445 gridItem: {
446 columnSpan: { span: "auto", start: "auto", order: "auto" },
447 rowSpan: { span: "auto", start: "auto" },
448 },
449 },
450 },
451 {
452 attributes: {
453 gridItem: {
454 columnSpan: { span: "auto", start: "auto", order: "auto" },
455 rowSpan: { span: "auto", start: "auto" },
456 },
457 },
458 },
459 {
460 attributes: {
461 gridItem: {
462 columnSpan: { span: "auto", start: "auto", order: "auto" },
463 rowSpan: { span: "auto", start: "auto" },
464 },
465 },
466 },
467 ],
468 },
469 {
470 label: __("3 Items - 1:1:2", "content-blocks-builder"),
471 itemCount: 3,
472 breakpoints: ["sm", "md", "lg"],
473 attributes: {
474 grid: {
475 columns: "repeat(2, minmax(0, 1fr)) minmax(0, 2fr)",
476 },
477 },
478 innerBlocks: [
479 {
480 attributes: {
481 gridItem: {
482 columnSpan: { span: "auto", start: "auto", order: "auto" },
483 rowSpan: { span: "auto", start: "auto" },
484 },
485 },
486 },
487 {
488 attributes: {
489 gridItem: {
490 columnSpan: { span: "auto", start: "auto", order: "auto" },
491 rowSpan: { span: "auto", start: "auto" },
492 },
493 },
494 },
495 {
496 attributes: {
497 gridItem: {
498 columnSpan: { span: "auto", start: "auto", order: "auto" },
499 rowSpan: { span: "auto", start: "auto" },
500 },
501 },
502 },
503 ],
504 },
505 {
506 label: labels.auto,
507 itemCount: 1,
508 breakpoints: ["sm", "md", "lg"],
509 attributes: {
510 grid: {
511 columns: "repeat(auto-fill, minmax(min(15rem, 100%), 1fr))",
512 },
513 },
514 innerBlocks: [
515 {
516 attributes: {
517 gridItem: {
518 columnSpan: { span: "auto", start: "auto", order: "auto" },
519 rowSpan: { span: "auto", start: "auto" },
520 innerText: __("Auto fill", "content-blocks-builder"),
521 },
522 },
523 },
524 ],
525 },
526 ];
527
528 /**
529 * Get gap style
530 *
531 * @param {Object} gap
532 * @returns {Object}
533 */
534 export function getGridGapStyle(gap) {
535 let gapStyle = {};
536 Object.keys(gap).forEach((breakpoint) => {
537 const { value: { row, column } = {}, inherit } = gap[breakpoint];
538 if (isUnsetValue(row) && isUnsetValue(column)) {
539 if (inherit && isString(inherit)) {
540 const { value: { row, column } = {} } = gap[inherit] ?? {};
541 if (!isUnsetValue(row)) {
542 gapStyle = {
543 ...gapStyle,
544 [`--bb--grid--gap--row--${breakpoint}`]: `var(--bb--grid--gap--row--${inherit})`,
545 };
546 }
547 if (!isUnsetValue(column)) {
548 gapStyle = {
549 ...gapStyle,
550 [`--bb--grid--gap--column--${breakpoint}`]: `var(--bb--grid--gap--column--${inherit})`,
551 };
552 }
553 }
554 } else {
555 if (!isUnsetValue(row)) {
556 gapStyle = {
557 ...gapStyle,
558 [`--bb--grid--gap--row--${breakpoint}`]: row,
559 };
560 }
561 if (!isUnsetValue(column)) {
562 gapStyle = {
563 ...gapStyle,
564 [`--bb--grid--gap--column--${breakpoint}`]: column,
565 };
566 }
567 }
568 });
569
570 return gapStyle;
571 }
572