/
index.js
107 lines (92 loc) · 2.19 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/**
* External dependencies
*/
import React from 'react';
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { getColorClass, InnerBlocks } from '@wordpress/editor';
/**
* Internal dependencies
*/
import edit, {
dimRatioToClass,
backgroundImageStyles,
} from './edit';
import './style.scss';
export const name = 'gutenbergjs/section';
export const settings = {
title: __('Section'),
icon: 'editor-table',
category: 'gutenbergjs',
attributes: {
maxWidth: {
type: 'string',
default: '',
},
hasImage: {
type: 'boolean',
default: false,
},
backgroundColor: {
type: 'string',
},
customBackgroundColor: {
type: 'string',
},
url: {
type: 'string',
},
hasParallax: {
type: 'boolean',
default: false,
},
dimRatio: {
type: 'number',
default: 50,
},
data: {
type: 'object',
default: {},
},
},
description: __('Add a block that wraps content, then add whatever content blocks you\'d like.'),
edit,
save ({ attributes, className }) {
const {
maxWidth,
hasImage,
backgroundColor,
customBackgroundColor,
url,
hasParallax,
dimRatio,
data,
} = attributes;
const backgroundClass = getColorClass('background-color', backgroundColor);
const classes = classnames(
className,
hasImage ? dimRatioToClass(dimRatio) : '',
{
'has-max-width': maxWidth !== '',
'has-background-dim': hasImage && dimRatio !== 0,
'has-parallax': hasImage && hasParallax,
'has-background': ! hasImage && (backgroundColor || customBackgroundColor),
[ backgroundClass ]: ! hasImage && backgroundClass,
}
);
const style = hasImage ? backgroundImageStyles(url) : {
backgroundColor: backgroundClass ? undefined : customBackgroundColor,
};
style.maxWidth = maxWidth ? maxWidth : '';
return (
<div className={ classes } style={ style } { ...data }>
<div className="wp-block-gutenbergjs-section-content">
<InnerBlocks.Content />
</div>
</div>
);
},
};