-
Notifications
You must be signed in to change notification settings - Fork 29
/
index.js
103 lines (91 loc) · 3.5 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
import './style.scss'
import './editor.scss'
import Tools from './tools'
import List from './list'
import deprecated from './deprecated'
import { __ } from '@wordpress/i18n'
const { registerBlockType } = wp.blocks
const { RichText } = wp.blockEditor
const { Fragment } = wp.element
const { withSelect, withDispatch } = wp.data
const { compose } = wp.compose
export default registerBlockType(
'advanced-gutenberg-blocks/summary',
{
title: __( 'Table of contents', 'advanced-gutenberg-blocks' ),
description: __( 'Display an auto generated, dynamic table of contents', 'advanced-gutenberg-blocks' ),
category: 'agb',
icon: { background: '#2F313A', foreground: '#DEBB8F', src: 'book-alt' },
keywords: [ __('summary', 'advanced-gutenberg-blocks' ) ],
attributes: {
title: {
source: 'text',
type: 'string',
selector: '.wp-block-advanced-gutenberg-blocks-summary__title',
default: advancedGutenbergBlocksSummary.title,
},
summary: {
source: 'html',
selector: '.wp-block-advanced-gutenberg-blocks-summary__list',
},
ordered: {
type: 'boolean',
default: true,
},
},
edit: compose(
withSelect( ( select ) => ({
blocks: select( 'core/editor' ).getBlocks()
})),
withDispatch( dispatch => ({
updateBlockAttributes: dispatch( 'core/editor' ).updateBlockAttributes
}))
) ( props => {
const { attributes, setAttributes, blocks, updateBlockAttributes } = props
const { title, ordered } = attributes
return (
<Fragment>
<Tools { ...{ attributes, setAttributes } } />
<div className="wp-block-advanced-gutenberg-blocks-summary">
<RichText
tagName="p"
value={ title }
className='wp-block-advanced-gutenberg-blocks-summary__title'
onChange={ title => setAttributes( { title } ) }
/>
<div className="wp-block-advanced-gutenberg-blocks-summary__fold">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
</div>
<List { ...{ ordered, setAttributes, blocks, updateBlockAttributes } } />
</div>
</Fragment>
)
} ),
save: props => {
const { title, summary, ordered } = props.attributes
return (
<div>
<p className="wp-block-advanced-gutenberg-blocks-summary__title">{title}</p>
<div className="wp-block-advanced-gutenberg-blocks-summary__fold">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
</div>
{ ordered && (
<ol
role='directory'
className='wp-block-advanced-gutenberg-blocks-summary__list'
dangerouslySetInnerHTML={ {__html: summary} }
/>
) || (
<ul
role='directory'
className='wp-block-advanced-gutenberg-blocks-summary__list'
dangerouslySetInnerHTML={ {__html: summary} }
/>
)
}
</div>
)
},
deprecated: deprecated
}
)