/
index.js
105 lines (94 loc) · 2.54 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
104
105
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { decodeEntities } from '@wordpress/html-entities';
import { withSelect, withDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import Inserter from '../inserter';
import { store as blockEditorStore } from '../../store';
/**
* Zero width non-breaking space, used as padding for the paragraph when it is
* empty.
*/
export const ZWNBSP = '\ufeff';
export function DefaultBlockAppender( {
isLocked,
onAppend,
showPrompt,
placeholder,
rootClientId,
} ) {
if ( isLocked ) {
return null;
}
const value =
decodeEntities( placeholder ) || __( 'Type / to choose a block' );
return (
<div
data-root-client-id={ rootClientId || '' }
className={ classnames( 'block-editor-default-block-appender', {
'has-visible-prompt': showPrompt,
} ) }
>
<p
tabIndex="0"
// Only necessary for `useCanvasClickRedirect` to consider it
// as a target. Ideally it should consider any tabbable target,
// but the inserter is rendered in place while it should be
// rendered in a popover, just like it does for an empty
// paragraph block.
contentEditable
suppressContentEditableWarning
// We want this element to be styled as a paragraph by themes.
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
role="button"
aria-label={ __( 'Add block' ) }
// A wrapping container for this one already has the wp-block className.
className="block-editor-default-block-appender__content"
onFocus={ onAppend }
>
{ showPrompt ? value : ZWNBSP }
</p>
<Inserter
rootClientId={ rootClientId }
position="bottom right"
isAppender
__experimentalIsQuick
/>
</div>
);
}
export default compose(
withSelect( ( select, ownProps ) => {
const { getBlockCount, getSettings, getTemplateLock } = select(
blockEditorStore
);
const isEmpty = ! getBlockCount( ownProps.rootClientId );
const { bodyPlaceholder } = getSettings();
return {
showPrompt: isEmpty,
isLocked: !! getTemplateLock( ownProps.rootClientId ),
placeholder: bodyPlaceholder,
};
} ),
withDispatch( ( dispatch, ownProps ) => {
const { insertDefaultBlock, startTyping } = dispatch(
blockEditorStore
);
return {
onAppend() {
const { rootClientId } = ownProps;
insertDefaultBlock( undefined, rootClientId );
startTyping();
},
};
} )
)( DefaultBlockAppender );