-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.js
113 lines (101 loc) · 2.82 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
106
107
108
109
110
111
112
113
/**
* External dependencies
*/
import TextareaAutosize from 'react-autosize-textarea';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { getDefaultBlockName } from '@wordpress/blocks';
import { decodeEntities } from '@wordpress/html-entities';
import { withSelect, withDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import Inserter from '../inserter';
import { store as blockEditorStore } from '../../store';
export function DefaultBlockAppender( {
isLocked,
isVisible,
onAppend,
showPrompt,
placeholder,
rootClientId,
} ) {
if ( isLocked || ! isVisible ) {
return null;
}
const value =
decodeEntities( placeholder ) ||
__( 'Start writing or type / to choose a block' );
// The appender "button" is in-fact a text field so as to support
// transitions by WritingFlow occurring by arrow key press. WritingFlow
// only supports tab transitions into text fields and to the block focus
// boundary.
//
// See: https://github.com/WordPress/gutenberg/issues/4829#issuecomment-374213658
//
// If it were ever to be made to be a proper `button` element, it is
// important to note that `onFocus` alone would not be sufficient to
// capture click events, notably in Firefox.
//
// See: https://gist.github.com/cvrebert/68659d0333a578d75372
// The wp-block className is important for editor styles.
return (
<div
data-root-client-id={ rootClientId || '' }
className="wp-block block-editor-default-block-appender"
>
<TextareaAutosize
role="button"
aria-label={ __( 'Add block' ) }
className="block-editor-default-block-appender__content"
readOnly
onFocus={ onAppend }
value={ showPrompt ? value : '' }
/>
<Inserter
rootClientId={ rootClientId }
position="bottom right"
isAppender
__experimentalIsQuick
/>
</div>
);
}
export default compose(
withSelect( ( select, ownProps ) => {
const {
getBlockAttributes,
getBlockCount,
getBlockName,
getSettings,
getTemplateLock,
} = select( blockEditorStore );
const isEmpty = ! getBlockCount( ownProps.rootClientId );
const isLastBlockEmptyDefault =
getBlockName( ownProps.lastBlockClientId ) ===
getDefaultBlockName() &&
getBlockAttributes( ownProps.lastBlockClientId )?.content === '';
const { bodyPlaceholder } = getSettings();
return {
isVisible: isEmpty || ! isLastBlockEmptyDefault,
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 );