-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.js
88 lines (76 loc) · 1.96 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
/**
* WordPress dependencies
*/
import { RawHTML } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { withInstanceId, Dashicon } from '@wordpress/components';
/**
* Internal dependencies
*/
import './editor.scss';
import PlainText from '../../plain-text';
export const name = 'core/shortcode';
export const settings = {
title: __( 'Shortcode' ),
description: __( 'A shortcode is a WordPress-specific code snippet that is written between square brackets as [shortcode]. ' ),
icon: 'shortcode',
category: 'widgets',
attributes: {
text: {
type: 'string',
source: 'text',
},
},
transforms: {
from: [
{
type: 'shortcode',
// Per "Shortcode names should be all lowercase and use all
// letters, but numbers and underscores should work fine too.
// Be wary of using hyphens (dashes), you'll be better off not
// using them." in https://codex.wordpress.org/Shortcode_API
// Require that the first character be a letter. This notably
// prevents footnote markings ([1]) from being caught as
// shortcodes.
tag: '[a-z][a-z0-9_-]*',
attributes: {
text: {
type: 'string',
shortcode: ( attrs, { content } ) => {
return content;
},
},
},
priority: 20,
},
],
},
supports: {
customClassName: false,
className: false,
html: false,
},
edit: withInstanceId(
( { attributes, setAttributes, instanceId } ) => {
const inputId = `blocks-shortcode-input-${ instanceId }`;
return (
<div className="wp-block-shortcode">
<label htmlFor={ inputId }>
<Dashicon icon="shortcode" />
{ __( 'Shortcode' ) }
</label>
<PlainText
className="input-control"
id={ inputId }
value={ attributes.text }
placeholder={ __( 'Write shortcode here…' ) }
onChange={ ( text ) => setAttributes( { text } ) }
/>
</div>
);
}
),
save( { attributes } ) {
return <RawHTML>{ attributes.text }</RawHTML>;
},
};