-
Notifications
You must be signed in to change notification settings - Fork 116
/
index.js
executable file
·115 lines (107 loc) · 3.43 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
108
109
110
111
112
113
114
115
/**
* Block dependencies
*/
import classnames from 'classnames';
import icon from './icon';
/**
* Internal block libraries
*/
const { __ } = wp.i18n;
const { Fragment } = wp.element;
const {
registerBlockType,
} = wp.blocks;
const {
UrlInput,
} = wp.editor;
const {
IconButton,
Tooltip,
TextControl,
} = wp.components;
/**
* Register example block
*/
export default registerBlockType(
'jsforwpblocks/url-input',
{
title: __( 'Example - URL Input', 'jsforwpblocks' ),
description: __( 'An example of how to use the UrlInput component.', 'jsforwpblocks'),
category: 'common',
icon: {
background: 'rgba(254, 243, 224, 0.52)',
src: icon,
},
keywords: [
__( 'Link', 'jsforwpblocks' ),
__( 'Post', 'jsforwpblocks' ),
__( 'Search', 'jsforwpblocks' ),
],
attributes: {
text: {
type: 'string',
source: 'text',
selector: 'a',
},
url: {
type: 'string',
source: 'attribute',
attribute: 'href',
selector: 'a',
},
},
edit: props => {
const { attributes: { text, url },
className, isSelected, setAttributes } = props;
return (
<div className={ className }>
{ isSelected ? (
<Fragment>
<TextControl
id="example-input-field"
label={ __( 'Link Text', 'jsforwpblocks' ) }
value={ text }
onChange={ text => setAttributes( { text } ) }
/>
<p>{ __( 'Link URL', 'jsforwpblocks' ) }</p>
<form
className="blocks-format-toolbar__link-modal-line blocks-format-toolbar__link-modal-line"
onSubmit={ event => event.preventDefault() }
>
<Tooltip text="Add Link">
{icon}
</Tooltip>
<UrlInput
className="url"
value={ url }
onChange={ url => setAttributes( { url } ) }
/>
<IconButton
icon="editor-break"
label={ __( 'Apply', 'jsforwpblocks' ) }
type="submit"
/>
</form>
</Fragment>
) : (
<p>
<a href={ url }>
{ text || __( 'Edit link', 'jsforwpblocks' ) }
</a>
</p>
)}
</div>
);
},
save: props => {
const { attributes: { text, url } } = props;
return (
<p>
<a href={ url }>
{ text }
</a>
</p>
);
},
},
);