-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
edit.js
94 lines (88 loc) · 2.25 KB
/
edit.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
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* Internal dependencies
*/
import HeadingToolbar from './heading-toolbar';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { PanelBody, __experimentalText as Text } from '@wordpress/components';
import { createBlock } from '@wordpress/blocks';
import {
AlignmentToolbar,
BlockControls,
InspectorControls,
RichText,
__experimentalBlock as Block,
} from '@wordpress/block-editor';
import { Platform } from '@wordpress/element';
function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
const { align, content, level, placeholder } = attributes;
const tagName = 'h' + level;
return (
<>
<BlockControls>
<HeadingToolbar
minLevel={ Platform.OS === 'web' ? 2 : 1 }
maxLevel={ Platform.OS === 'web' ? 5 : 7 }
selectedLevel={ level }
onChange={ ( newLevel ) =>
setAttributes( { level: newLevel } )
}
/>
{ Platform.OS !== 'android' && (
<AlignmentToolbar
value={ align }
onChange={ ( nextAlign ) => {
setAttributes( { align: nextAlign } );
} }
/>
) }
</BlockControls>
{ Platform.OS === 'web' && (
<InspectorControls>
<PanelBody title={ __( 'Heading settings' ) }>
<Text variant="label">{ __( 'Level' ) }</Text>
<HeadingToolbar
isCollapsed={ false }
minLevel={ 1 }
maxLevel={ 7 }
selectedLevel={ level }
onChange={ ( newLevel ) =>
setAttributes( { level: newLevel } )
}
/>
</PanelBody>
</InspectorControls>
) }
<RichText
identifier="content"
tagName={ Block[ tagName ] }
value={ content }
onChange={ ( value ) => setAttributes( { content: value } ) }
onMerge={ mergeBlocks }
onSplit={ ( value ) => {
if ( ! value ) {
return createBlock( 'core/paragraph' );
}
return createBlock( 'core/heading', {
...attributes,
content: value,
} );
} }
onReplace={ onReplace }
onRemove={ () => onReplace( [] ) }
className={ classnames( {
[ `has-text-align-${ align }` ]: align,
} ) }
placeholder={ placeholder || __( 'Write heading…' ) }
textAlign={ align }
/>
</>
);
}
export default HeadingEdit;