/
edit.js
123 lines (119 loc) · 2.87 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/**
* WordPress dependencies
*/
import {
RichText,
useBlockProps,
useInnerBlocksProps,
BlockControls,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { isRTL, __ } from '@wordpress/i18n';
import { ToolbarButton } from '@wordpress/components';
import {
formatOutdent,
formatOutdentRTL,
formatIndentRTL,
formatIndent,
} from '@wordpress/icons';
import { useMergeRefs } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import {
useEnter,
useSpace,
useIndentListItem,
useOutdentListItem,
useSplit,
useMerge,
} from './hooks';
import { convertToListItems } from './utils';
export function IndentUI( { clientId } ) {
const indentListItem = useIndentListItem( clientId );
const outdentListItem = useOutdentListItem();
const { canIndent, canOutdent } = useSelect(
( select ) => {
const { getBlockIndex, getBlockRootClientId, getBlockName } =
select( blockEditorStore );
return {
canIndent: getBlockIndex( clientId ) > 0,
canOutdent:
getBlockName(
getBlockRootClientId( getBlockRootClientId( clientId ) )
) === 'core/list-item',
};
},
[ clientId ]
);
return (
<>
<ToolbarButton
icon={ isRTL() ? formatOutdentRTL : formatOutdent }
title={ __( 'Outdent' ) }
describedBy={ __( 'Outdent list item' ) }
disabled={ ! canOutdent }
onClick={ () => outdentListItem() }
/>
<ToolbarButton
icon={ isRTL() ? formatIndentRTL : formatIndent }
title={ __( 'Indent' ) }
describedBy={ __( 'Indent list item' ) }
isDisabled={ ! canIndent }
onClick={ () => indentListItem() }
/>
</>
);
}
export default function ListItemEdit( {
attributes,
setAttributes,
onReplace,
clientId,
mergeBlocks,
} ) {
const { placeholder, content } = attributes;
const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps( blockProps, {
renderAppender: false,
__unstableDisableDropZone: true,
} );
const useEnterRef = useEnter( { content, clientId } );
const useSpaceRef = useSpace( clientId );
const onSplit = useSplit( clientId );
const onMerge = useMerge( clientId, mergeBlocks );
return (
<>
<li { ...innerBlocksProps }>
<RichText
ref={ useMergeRefs( [ useEnterRef, useSpaceRef ] ) }
identifier="content"
tagName="div"
onChange={ ( nextContent ) =>
setAttributes( { content: nextContent } )
}
value={ content }
aria-label={ __( 'List text' ) }
placeholder={ placeholder || __( 'List' ) }
onSplit={ onSplit }
onMerge={ onMerge }
onReplace={
onReplace
? ( blocks, ...args ) => {
onReplace(
convertToListItems( blocks ),
...args
);
}
: undefined
}
/>
{ innerBlocksProps.children }
</li>
<BlockControls group="block">
<IndentUI clientId={ clientId } />
</BlockControls>
</>
);
}