-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.js
73 lines (65 loc) · 1.58 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
/**
* External dependencies
*/
import { orderBy } from 'lodash';
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { ToolbarItem, DropdownMenu, Slot } from '@wordpress/components';
import { chevronDown } from '@wordpress/icons';
const POPOVER_PROPS = {
position: 'bottom right',
isAlternate: true,
};
const FormatToolbar = () => {
return (
<>
{ [ 'bold', 'italic', 'link', 'unknown' ].map( ( format ) => (
<Slot
name={ `RichText.ToolbarControls.${ format }` }
key={ format }
/>
) ) }
<Slot name="RichText.ToolbarControls">
{ ( fills ) => {
if ( ! fills.length ) {
return null;
}
const allProps = fills.map( ( [ { props } ] ) => props );
const hasActive = allProps.some(
( { isActive } ) => isActive
);
return (
<ToolbarItem>
{ ( toggleProps ) => (
<DropdownMenu
icon={ chevronDown }
/* translators: button label text should, if possible, be under 16 characters. */
label={ __( 'More' ) }
toggleProps={ {
...toggleProps,
className: classnames(
toggleProps.className,
{ 'is-pressed': hasActive }
),
describedBy: __(
'Displays more block tools'
),
} }
controls={ orderBy(
fills.map( ( [ { props } ] ) => props ),
'title'
) }
popoverProps={ POPOVER_PROPS }
/>
) }
</ToolbarItem>
);
} }
</Slot>
</>
);
};
export default FormatToolbar;