-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
index.js
105 lines (93 loc) · 1.99 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
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
import { createBlock } from '@wordpress/blocks';
import {
RichText,
BlockControls,
AlignmentToolbar,
} from '@wordpress/editor';
export const name = 'core/subhead';
export const settings = {
title: __( 'Subheading' ),
description: __( 'What’s a subhead? Smaller than a headline, bigger than basic text.' ),
icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.1 6l-.5 3h4.5L9.4 19h3l1.8-10h4.5l.5-3H7.1z" /></svg>,
category: 'common',
supports: {
multiple: false,
},
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'p',
},
align: {
type: 'string',
},
},
transforms: {
from: [
{
type: 'block',
blocks: [ 'core/paragraph' ],
transform: ( { content } ) => {
return createBlock( 'core/subhead', {
content,
} );
},
},
],
to: [
{
type: 'block',
blocks: [ 'core/paragraph' ],
transform: ( { content } ) => {
return createBlock( 'core/paragraph', {
content,
} );
},
},
],
},
edit( { attributes, setAttributes, className } ) {
const { align, content, placeholder } = attributes;
return (
<Fragment>
<BlockControls>
<AlignmentToolbar
value={ align }
onChange={ ( nextAlign ) => {
setAttributes( { align: nextAlign } );
} }
/>
</BlockControls>
<RichText
tagName="p"
value={ content }
onChange={ ( nextContent ) => {
setAttributes( {
content: nextContent,
} );
} }
style={ { textAlign: align } }
className={ className }
placeholder={ placeholder || __( 'Write subheading…' ) }
/>
</Fragment>
);
},
save( { attributes, className } ) {
const { align, content } = attributes;
return (
<RichText.Content
tagName="p"
className={ className }
style={ { textAlign: align } }
value={ content }
/>
);
},
};