Skip to content

Commit b995440

Browse files
georgehgeorgeh
authored
Merge pull request #879 from WordPress/add/487-cover-image
Add cover image block Closes #487
2 parents c016d59 + 59f89b1 commit b995440

File tree

7 files changed

+183
-0
lines changed

7 files changed

+183
-0
lines changed

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

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { Placeholder } from 'components';
5+
import { __ } from 'i18n';
6+
7+
/**
8+
* Internal dependencies
9+
*/
10+
import './style.scss';
11+
import { registerBlockType, query } from '../../api';
12+
import Editable from '../../editable';
13+
import MediaUploadButton from '../../media-upload-button';
14+
import BlockControls from '../../block-controls';
15+
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
16+
17+
const { text } = query;
18+
19+
const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
20+
21+
registerBlockType( 'core/cover-image', {
22+
title: __( 'Cover Image' ),
23+
24+
icon: 'format-image',
25+
26+
category: 'common',
27+
28+
attributes: {
29+
title: text( 'h2' ),
30+
},
31+
32+
getEditWrapperProps( attributes ) {
33+
const { align } = attributes;
34+
if ( -1 !== validAlignments.indexOf( align ) ) {
35+
return { 'data-align': align };
36+
}
37+
},
38+
39+
edit( { attributes, setAttributes, focus, setFocus } ) {
40+
const { url, title, align } = attributes;
41+
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
42+
const controls = (
43+
focus && (
44+
<BlockControls key="controls">
45+
<BlockAlignmentToolbar
46+
value={ align }
47+
onChange={ updateAlignment }
48+
controls={ validAlignments }
49+
/>
50+
</BlockControls>
51+
)
52+
);
53+
54+
if ( ! url ) {
55+
const uploadButtonProps = { isLarge: true };
56+
const setMediaUrl = ( media ) => setAttributes( { url: media.url } );
57+
return [
58+
controls,
59+
<Placeholder
60+
key="placeholder"
61+
instructions={ __( 'Drag image here or insert from media library' ) }
62+
icon="format-image"
63+
label={ __( 'Image' ) }
64+
className="blocks-image">
65+
<MediaUploadButton
66+
buttonProps={ uploadButtonProps }
67+
onSelect={ setMediaUrl }
68+
type="image"
69+
autoOpen
70+
>
71+
{ __( 'Insert from Media Library' ) }
72+
</MediaUploadButton>
73+
</Placeholder>,
74+
];
75+
}
76+
77+
const style = { backgroundImage: `url(${ url })` };
78+
79+
return [
80+
controls,
81+
<section key="cover-image" className="blocks-cover-image">
82+
<section className="cover-image" data-url={ url } style={ style }>
83+
{ title || !! focus ? (
84+
<Editable
85+
tagName="h2"
86+
placeholder={ __( 'Write title' ) }
87+
value={ title }
88+
formattingControls={ [] }
89+
focus={ focus }
90+
onFocus={ setFocus }
91+
onChange={ ( value ) => setAttributes( { title: value } ) } />
92+
) : null }
93+
</section>
94+
</section>,
95+
];
96+
},
97+
98+
save( { attributes } ) {
99+
const { url, title } = attributes;
100+
const style = {
101+
backgroundImage: `url(${ url })`,
102+
};
103+
104+
return (
105+
<section className="blocks-cover-image">
106+
<section className="cover-image" style={ style }>
107+
<h2>{ title }</h2>
108+
</section>
109+
</section>
110+
);
111+
},
112+
} );

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

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.editor-visual-editor__block[data-type="core/cover-image"] {
2+
.blocks-editable__tinymce[data-is-empty="true"]:before {
3+
position: inherit;
4+
}
5+
6+
.blocks-cover-image {
7+
margin: 0;
8+
9+
h2 {
10+
color: white;
11+
font-size: 24pt;
12+
line-height: 1em;
13+
}
14+
15+
}
16+
17+
.cover-image {
18+
background-size: cover;
19+
height: 430px;
20+
width: 100%;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
background-attachment: fixed;
25+
}
26+
27+
.cover-image::before {
28+
content: '';
29+
position: absolute;
30+
top: $block-padding;
31+
right: $block-padding * 2 + $block-mover-margin;
32+
bottom: $block-padding;
33+
left: $block-padding * 2 + $block-mover-margin;
34+
background: rgba( 0,0,0,.5 );
35+
}
36+
37+
&[data-align="full"] .cover-image::before {
38+
right: 0;
39+
left: 0;
40+
}
41+
}

‎blocks/library/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@ import './preformatted';
1313
import './code';
1414
import './freeform';
1515
import './latest-posts';
16+
import './cover-image';

‎blocks/test/fixtures/core-cover-image.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- wp:core/cover-image url="https://cldup.com/uuUqE_dXzy.jpg" -->
2+
<section class="blocks-cover-image">
3+
<section class="cover-image" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
4+
<h2>Guten Berg!</h2>
5+
</section>
6+
</section>
7+
<!-- /wp:core/cover-image -->

‎blocks/test/fixtures/core-cover-image.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
[
2+
{
3+
"uid": "_uid_0",
4+
"name": "core/cover-image",
5+
"attributes": {
6+
"url": "https://cldup.com/uuUqE_dXzy.jpg",
7+
"title": "Guten Berg!"
8+
}
9+
}
10+
]

‎blocks/test/fixtures/core-cover-image.serialized.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!-- wp:core/cover-image url="https://cldup.com/uuUqE_dXzy.jpg" -->
2+
<section class="blocks-cover-image">
3+
<section class="cover-image" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
4+
<h2>Guten Berg!</h2>
5+
</section>
6+
</section>
7+
<!-- /wp:core/cover-image -->
8+

‎post-content.js

+4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ window._wpGutenbergPost = {
77
},
88
content: {
99
raw: [
10+
'<!-- wp:core/cover-image url="https://cldup.com/GCwahb3aOb.jpg" -->',
11+
'<section className="cover-image" style={ { backgroundImage: \'url("https://cldup.com/GCwahb3aOb.jpg");\' } }><h2>Gutenberg Editor</h2></section>',
12+
'<!-- /wp:core/cover-image -->',
13+
1014
'<!-- wp:core/text data="{\\"projectName\\":\\"gutenberg\\",\\"isAwesome\\":true}" -->',
1115
'<p>The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of <em>pieces of content</em>—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you\'ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.</p>',
1216
'<!-- /wp:core/text -->',

0 commit comments

Comments
 (0)