Skip to content

Commit f922df2

Browse files
jorgefilipecostajorgefilipecosta
committed
Implemented nesting in cover image block.
1 parent a105592 commit f922df2

File tree

21 files changed

+648
-128
lines changed

21 files changed

+648
-128
lines changed

‎blocks/inner-blocks/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
*/
44
import { withContext } from '@wordpress/components';
55

6-
function InnerBlocks( { BlockList, layouts } ) {
7-
return <BlockList layouts={ layouts } />;
6+
function InnerBlocks( { BlockList, layouts, allowedBlocks, template } ) {
7+
return <BlockList { ...{ layouts, allowedBlocks, template } } />;
88
}
99

1010
InnerBlocks = withContext( 'BlockList' )()( InnerBlocks );

‎blocks/library/cover-image/editor.scss‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,52 @@
2222
}
2323

2424
&.has-left-content .block-rich-text__inline-toolbar {
25-
justify-content: flex-start;
25+
display: inline-block;
2626
}
2727

2828
&.has-right-content .block-rich-text__inline-toolbar{
29-
justify-content: flex-end;
29+
display: inline-block;
30+
}
31+
32+
.editor-block-list__layout {
33+
width: 100%;
34+
}
35+
36+
.wp-block-cover-image__inner-container {
37+
width: calc( 100% - 70px );
38+
margin-left: auto;
39+
margin-right: auto;
40+
// avoid text align inherit from cover image align.
41+
text-align: left;
42+
43+
.editor-inserter-with-shortcuts .components-icon-button,
44+
.editor-block-list__empty-block-inserter .components-icon-button {
45+
color: $white;
46+
}
47+
.editor-default-block-appender {
48+
&:hover {
49+
.components-icon-button {
50+
color: $white;
51+
}
52+
}
53+
54+
.components-icon-button {
55+
color: $light-gray-900;
56+
}
57+
}
58+
59+
60+
.editor-block-list__insertion-point-inserter:before {
61+
background: $white;
62+
}
63+
64+
p.wp-block-subhead {
65+
color: $light-gray-100;
66+
}
67+
68+
.components-draggable__clone > .editor-block-list__block > .editor-block-list__block-draggable,
69+
.editor-block-list__block-draggable > .editor-block-list__block-draggable-inner {
70+
background-color: rgba( $white, 0.3 );
71+
}
3072
}
3173
}

‎blocks/library/cover-image/index.js‎

Lines changed: 98 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* External dependencies
33
*/
4-
import { isEmpty } from 'lodash';
4+
import { omit } from 'lodash';
55

66
/**
77
* WordPress dependencies
@@ -17,32 +17,23 @@ import classnames from 'classnames';
1717
import './editor.scss';
1818
import './style.scss';
1919
import { createBlock } from '../../api';
20-
import RichText from '../../rich-text';
2120
import AlignmentToolbar from '../../alignment-toolbar';
2221
import MediaUpload from '../../media-upload';
2322
import ImagePlaceholder from '../../image-placeholder';
2423
import BlockControls from '../../block-controls';
2524
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
2625
import InspectorControls from '../../inspector-controls';
26+
import InnerBlocks from '../../inner-blocks';
2727

2828
const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
2929

3030
const blockAttributes = {
31-
title: {
32-
type: 'array',
33-
source: 'children',
34-
selector: 'p',
35-
},
3631
url: {
3732
type: 'string',
3833
},
3934
align: {
4035
type: 'string',
4136
},
42-
contentAlign: {
43-
type: 'string',
44-
default: 'center',
45-
},
4637
id: {
4738
type: 'number',
4839
},
@@ -97,8 +88,8 @@ export const settings = {
9788
}
9889
},
9990

100-
edit( { attributes, setAttributes, isSelected, className } ) {
101-
const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
91+
edit( { attributes, setAttributes, className } ) {
92+
const { align, url, id, hasParallax, dimRatio } = attributes;
10293
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
10394
const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
10495
const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
@@ -107,7 +98,6 @@ export const settings = {
10798
const style = backgroundImageStyles( url );
10899
const classes = classnames(
109100
className,
110-
contentAlign !== 'center' && `has-${ contentAlign }-content`,
111101
dimRatioToClass( dimRatio ),
112102
{
113103
'has-background-dim': dimRatio !== 0,
@@ -117,7 +107,6 @@ export const settings = {
117107

118108
const alignmentToolbar = (
119109
<AlignmentToolbar
120-
value={ contentAlign }
121110
onChange={ ( nextAlign ) => {
122111
setAttributes( { contentAlign: nextAlign } );
123112
} }
@@ -172,16 +161,8 @@ export const settings = {
172161
);
173162

174163
if ( ! url ) {
175-
const hasTitle = ! isEmpty( title );
176-
const icon = hasTitle ? undefined : 'format-image';
177-
const label = hasTitle ? (
178-
<RichText
179-
tagName="h2"
180-
value={ title }
181-
onChange={ ( value ) => setAttributes( { title: value } ) }
182-
inlineToolbar
183-
/>
184-
) : __( 'Cover Image' );
164+
const icon = 'format-image';
165+
const label = __( 'Cover Image' );
185166

186167
return (
187168
<Fragment>
@@ -201,74 +182,127 @@ export const settings = {
201182
style={ style }
202183
className={ classes }
203184
>
204-
{ title || isSelected ? (
205-
<RichText
206-
tagName="p"
207-
className="wp-block-cover-image-text"
208-
placeholder={ __( 'Write title…' ) }
209-
value={ title }
210-
onChange={ ( value ) => setAttributes( { title: value } ) }
211-
inlineToolbar
185+
<div className="wp-block-cover-image__inner-container">
186+
<InnerBlocks
187+
template={ [
188+
[ 'core/paragraph', {
189+
align: 'center',
190+
fontSize: 'large',
191+
placeholder: __( 'Write title…' ),
192+
textColor: '#fff',
193+
} ],
194+
] }
195+
allowedBlocks={ [ 'core/button', 'core/heading', 'core/paragraph', 'core/subhead' ] }
212196
/>
213-
) : null }
197+
</div>
214198
</div>
215199
</Fragment>
216200
);
217201
},
218202

219203
save( { attributes, className } ) {
220-
const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
204+
const { url, hasParallax, dimRatio, align } = attributes;
221205
const style = backgroundImageStyles( url );
222206
const classes = classnames(
223207
className,
224208
dimRatioToClass( dimRatio ),
225209
{
226210
'has-background-dim': dimRatio !== 0,
227211
'has-parallax': hasParallax,
228-
[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
229212
},
230213
align ? `align${ align }` : null,
231214
);
232215

233216
return (
234217
<div className={ classes } style={ style }>
235-
{ title && title.length > 0 && (
236-
<p className="wp-block-cover-image-text">{ title }</p>
237-
) }
218+
<div className="wp-block-cover-image__inner-container">
219+
<InnerBlocks.Content />
220+
</div>
238221
</div>
239222
);
240223
},
241224

242-
deprecated: [ {
243-
attributes: {
244-
...blockAttributes,
245-
title: {
246-
type: 'array',
247-
source: 'children',
248-
selector: 'h2',
225+
deprecated: [
226+
{
227+
attributes: {
228+
...blockAttributes,
229+
title: {
230+
type: 'array',
231+
source: 'children',
232+
selector: 'p',
233+
},
234+
contentAlign: {
235+
type: 'string',
236+
default: 'center',
237+
},
238+
},
239+
240+
save( { attributes, className } ) {
241+
const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
242+
const style = backgroundImageStyles( url );
243+
const classes = classnames(
244+
className,
245+
dimRatioToClass( dimRatio ),
246+
{
247+
'has-background-dim': dimRatio !== 0,
248+
'has-parallax': hasParallax,
249+
[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
250+
},
251+
align ? `align${ align }` : null,
252+
);
253+
254+
return (
255+
<div className={ classes } style={ style }>
256+
{ title && title.length > 0 && (
257+
<p className="wp-block-cover-image-text">{ title }</p>
258+
) }
259+
</div>
260+
);
249261
},
250-
},
251262

252-
save( { attributes, className } ) {
253-
const { url, title, hasParallax, dimRatio, align } = attributes;
254-
const style = backgroundImageStyles( url );
255-
const classes = classnames(
256-
className,
257-
dimRatioToClass( dimRatio ),
258-
{
259-
'has-background-dim': dimRatio !== 0,
260-
'has-parallax': hasParallax,
263+
migrate( attributes ) {
264+
return [
265+
omit( attributes, [ 'title', 'contentAlign' ] ),
266+
[ createBlock( 'core/paragraph', {
267+
content: attributes.title,
268+
align: attributes.contentAlign,
269+
fontSize: 'large',
270+
placeholder: __( 'Write title…' ),
271+
} ) ],
272+
];
273+
},
274+
},
275+
{
276+
attributes: {
277+
...blockAttributes,
278+
title: {
279+
type: 'array',
280+
source: 'children',
281+
selector: 'h2',
261282
},
262-
align ? `align${ align }` : null,
263-
);
283+
},
264284

265-
return (
266-
<section className={ classes } style={ style }>
267-
<h2>{ title }</h2>
268-
</section>
269-
);
285+
save( { attributes, className } ) {
286+
const { url, title, hasParallax, dimRatio, align } = attributes;
287+
const style = backgroundImageStyles( url );
288+
const classes = classnames(
289+
className,
290+
dimRatioToClass( dimRatio ),
291+
{
292+
'has-background-dim': dimRatio !== 0,
293+
'has-parallax': hasParallax,
294+
},
295+
align ? `align${ align }` : null,
296+
);
297+
298+
return (
299+
<section className={ classes } style={ style }>
300+
<h2>{ title }</h2>
301+
</section>
302+
);
303+
},
270304
},
271-
} ],
305+
],
272306
};
273307

274308
function dimRatioToClass( ratio ) {

‎blocks/library/cover-image/style.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,4 +79,18 @@
7979
max-width: $content-width / 2;
8080
width: 100%;
8181
}
82+
83+
.wp-block-cover-image__inner-container {
84+
width: calc( 100% - 70px );
85+
color: $light-gray-100;
86+
z-index: z-index( '.wp-block-cover-image__inner-container' );
87+
p {
88+
margin-top: 0;
89+
margin-bottom: 0;
90+
}
91+
}
92+
93+
h1, h2, h3, h4, h5, h6, .wp-block-subhead {
94+
color: inherit;
95+
}
8296
}

‎blocks/test/fixtures/core__cover-image.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
<!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
2-
<div class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
3-
<p class="wp-block-cover-image-text">Guten Berg!</p>
1+
<!-- wp:cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","id":8398,"dimRatio": 40} -->
2+
<div class="wp-block-cover-image has-background-dim has-background-dim-40" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
3+
<div class="wp-block-cover-image__inner-container">
4+
<!-- wp:paragraph {"align":"center","placeholder":"Write title…","textColor":"#fff","fontSize":"large"} -->
5+
<p style="color:#fff;text-align:center" class="is-large-text">Paragraph 1</p>
6+
<!-- /wp:paragraph -->
7+
</div>
48
</div>
5-
<!-- /wp:core/cover-image -->
9+
<!-- /wp:cover-image -->

‎blocks/test/fixtures/core__cover-image.json‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,30 @@
44
"name": "core/cover-image",
55
"isValid": true,
66
"attributes": {
7-
"title": [
8-
"Guten Berg!"
9-
],
107
"url": "https://cldup.com/uuUqE_dXzy.jpg",
11-
"contentAlign": "center",
8+
"id": 8398,
129
"hasParallax": false,
1310
"dimRatio": 40
1411
},
15-
"innerBlocks": [],
16-
"originalContent": "<div class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n <p class=\"wp-block-cover-image-text\">Guten Berg!</p>\n</div>"
12+
"innerBlocks": [
13+
{
14+
"uid": "_uid_0",
15+
"name": "core/paragraph",
16+
"isValid": true,
17+
"attributes": {
18+
"content": [
19+
"Paragraph 1"
20+
],
21+
"align": "center",
22+
"dropCap": false,
23+
"placeholder": "Write title…",
24+
"textColor": "#fff",
25+
"fontSize": "large"
26+
},
27+
"innerBlocks": [],
28+
"originalContent": "<p style=\"color:#fff;text-align:center\" class=\"is-large-text\">Paragraph 1</p>"
29+
}
30+
],
31+
"originalContent": "<div class=\"wp-block-cover-image has-background-dim has-background-dim-40\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n <div class=\"wp-block-cover-image__inner-container\">\n\t\t\n </div>\n</div>"
1732
}
1833
]

0 commit comments

Comments
 (0)