Skip to content

Commit 09d5af2

Browse files
AlecadddAlecaddd
committed
Updated gutenberg example block with latest API. Fixes #46, Fixes #41 
1 parent a9bbda9 commit 09d5af2

File tree

9 files changed

+369
-144
lines changed

9 files changed

+369
-144
lines changed

‎assets/src/sass/blocks/_cta.scss

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.cta-container {
2+
min-height: 360px;
3+
position: relative;
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
7+
align-items: center;
8+
width: 100%;
9+
text-align: center;
10+
margin-bottom: 20px;
11+
padding: 10px;
12+
13+
.cta-overlay {
14+
position: absolute;
15+
top: 0;
16+
left: 0;
17+
width: 100%;
18+
height: 100%;
19+
}
20+
21+
.cta-content {
22+
z-index: 1;
23+
position: relative;
24+
display: flex;
25+
flex-direction: column;
26+
justify-content: center;
27+
align-items: center;
28+
width: 100%;
29+
text-align: center;
30+
color: #fff;
31+
32+
h3 {
33+
margin-bottom: 2em !important;
34+
line-height: 1em;
35+
}
36+
37+
p {
38+
line-height: 1.5em;
39+
margin-bottom: 0;
40+
}
41+
42+
.cta-content-button {
43+
width: 100%;
44+
margin: 10px 0;
45+
46+
a {
47+
cursor: pointer;
48+
color: #fff;
49+
padding: 8px 12px;
50+
background-color: transparent;
51+
border: 1px solid #fff;
52+
display: inline-block;
53+
54+
&:hover {
55+
background-color: #fff;
56+
color: #333;
57+
}
58+
}
59+
}
60+
}
61+
}

‎assets/src/sass/blocks/_hello-world.scss

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎assets/src/sass/blocks/_latest-post.scss

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎assets/src/sass/gutenberg.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
@import 'blocks/hello-world';
2-
@import 'blocks/latest-post';
1+
@import 'blocks/cta';

‎assets/src/scripts/blocks/cta.js

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
const { registerBlockType } = wp.blocks;
2+
const { Fragment } = wp.element;
3+
const {
4+
PlainText,
5+
RichText,
6+
MediaUpload,
7+
BlockControls,
8+
InspectorControls,
9+
ColorPalette,
10+
getColorClass
11+
} = wp.editor;
12+
const { IconButton, RangeControl, PanelBody } = wp.components;
13+
14+
registerBlockType( 'gutenberg-awps/awps-cta', {
15+
title: 'Call to Action',
16+
icon: 'format-image',
17+
category: 'layout',
18+
19+
attributes: {
20+
title: {
21+
type: 'string',
22+
source: 'html',
23+
selector: 'h3'
24+
},
25+
body: {
26+
type: 'string',
27+
source: 'html',
28+
selector: 'p'
29+
},
30+
titleColor: {
31+
type: 'string',
32+
default: 'white'
33+
},
34+
bodyColor: {
35+
type: 'string',
36+
default: 'white'
37+
},
38+
overlayColor: {
39+
type: 'string',
40+
default: 'black'
41+
},
42+
overlayOpacity: {
43+
type: 'number',
44+
default: 0.3
45+
},
46+
backgroundImage: {
47+
type: 'string',
48+
default: null
49+
},
50+
url: {
51+
type: 'string',
52+
source: 'attribute',
53+
selector: 'a',
54+
attribute: 'href'
55+
},
56+
buttonText: {
57+
type: 'string',
58+
selector: 'a',
59+
default: 'Call to action'
60+
}
61+
},
62+
63+
edit({ attributes, className, setAttributes }) {
64+
const {
65+
title,
66+
body,
67+
backgroundImage,
68+
titleColor,
69+
bodyColor,
70+
overlayColor,
71+
overlayOpacity,
72+
url,
73+
buttonText
74+
} = attributes;
75+
76+
function onSelectImage( newImage ) {
77+
setAttributes({ backgroundImage: newImage.sizes.full.url });
78+
}
79+
80+
function onChangeBody( newBody ) {
81+
setAttributes({ body: newBody });
82+
}
83+
84+
function onChangeTitle( newTitle ) {
85+
setAttributes({ title: newTitle });
86+
}
87+
88+
function onTitleColorChange( newColor ) {
89+
setAttributes({ titleColor: newColor });
90+
}
91+
92+
function onBodyColorChange( newColor ) {
93+
setAttributes({ bodyColor: newColor });
94+
}
95+
96+
function onOverlayColorChange( newColor ) {
97+
setAttributes({ overlayColor: newColor });
98+
}
99+
100+
function onOverlayOpacityChange( newOpacity ) {
101+
setAttributes({ overlayOpacity: newOpacity });
102+
}
103+
104+
function changeButtonText( newText ) {
105+
setAttributes({ buttonText: newText });
106+
}
107+
108+
function onChangeUrl( newUrl ) {
109+
setAttributes({ url: newUrl });
110+
}
111+
112+
return ([
113+
<InspectorControls style={{ marginBottom: '40px' }}>
114+
<PanelBody title={'Font Color Settings'}>
115+
<div style={{ marginTop: '20px' }}>
116+
<p><strong>Select a Title color:</strong></p>
117+
<ColorPalette
118+
value={titleColor}
119+
onChange={onTitleColorChange}
120+
/>
121+
</div>
122+
<div style={{ marginTop: '20px', marginBottom: '40px' }}>
123+
<p><strong>Select a Body color:</strong></p>
124+
<ColorPalette
125+
value={bodyColor}
126+
onChange={onBodyColorChange}
127+
/>
128+
</div>
129+
</PanelBody>
130+
<PanelBody title={'Background Image Settings'}>
131+
<p><strong>Select a background image:</strong></p>
132+
<MediaUpload
133+
onSelect={onSelectImage}
134+
type="image"
135+
value={backgroundImage}
136+
render={({ open }) => (
137+
<IconButton
138+
className="editor-media-placeholder__button is-button is-default is-large"
139+
icon="upload"
140+
onClick={open}>
141+
Background Image
142+
</IconButton>
143+
)}
144+
/>
145+
<div style={{ marginTop: '20px', marginBottom: '40px' }}>
146+
<p><strong>Overlay Color:</strong></p>
147+
<ColorPalette
148+
value={overlayColor}
149+
onChange={onOverlayColorChange}
150+
/>
151+
</div>
152+
<RangeControl
153+
label={'Overlay Opacity'}
154+
value={overlayOpacity}
155+
onChange={onOverlayOpacityChange}
156+
min={0}
157+
max={1}
158+
step={0.05}
159+
/>
160+
</PanelBody>
161+
</InspectorControls>,
162+
<div className="cta-container" style={{
163+
backgroundImage: `url(${backgroundImage})`,
164+
backgroundSize: 'cover',
165+
backgroundPosition: 'center',
166+
backgroundRepeat: 'no-repeat'
167+
}}>
168+
<div className="cta-overlay" style={{ background: overlayColor, opacity: overlayOpacity }}></div>
169+
<div class="cta-content">
170+
<RichText
171+
key="editable"
172+
tagName="h3"
173+
className={className}
174+
placeholder="Your CTA title"
175+
onChange={onChangeTitle}
176+
value={title}
177+
style={{ color: titleColor }}
178+
/>
179+
<BlockControls>
180+
</BlockControls>
181+
<RichText
182+
key="editable"
183+
tagName="p"
184+
className={className}
185+
placeholder="Your CTA Description"
186+
onChange={onChangeBody}
187+
value={body}
188+
style={{ color: bodyColor }}
189+
/>
190+
<div class="cta-content-button">
191+
<RichText
192+
tagName="a"
193+
onChange={changeButtonText}
194+
title={buttonText}
195+
value={buttonText}
196+
target="_blank"
197+
/>
198+
</div>
199+
<PlainText
200+
style={{ color: '#333', fontSize: '12px', padding: '2px' }}
201+
value={url}
202+
onChange={onChangeUrl}
203+
placeholder={'http://'}
204+
/>
205+
</div>
206+
</div>
207+
]);
208+
},
209+
210+
save({ attributes }) {
211+
const {
212+
title,
213+
body,
214+
titleColor,
215+
bodyColor,
216+
overlayColor,
217+
overlayOpacity,
218+
backgroundImage,
219+
url,
220+
buttonText
221+
} = attributes;
222+
223+
return (
224+
<div className="cta-container" style={{
225+
backgroundImage: `url(${backgroundImage})`,
226+
backgroundSize: 'cover',
227+
backgroundPosition: 'center',
228+
backgroundRepeat: 'no-repeat'
229+
}}>
230+
<div className="cta-overlay" style={{ background: overlayColor, opacity: overlayOpacity }}></div>
231+
<div class="cta-content">
232+
<h3 style={{ color: titleColor }}>{title}</h3>
233+
<RichText.Content
234+
tagName="p"
235+
value={body}
236+
style={{ color: bodyColor }}
237+
/>
238+
<div class="cta-content-button">
239+
<RichText.Content
240+
tagName="a"
241+
href={url}
242+
title={buttonText}
243+
value={buttonText}
244+
target="_blank"
245+
/>
246+
</div>
247+
</div>
248+
</div>
249+
);
250+
}
251+
});

0 commit comments

Comments
 (0)