-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.js
152 lines (142 loc) · 4.05 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
/**
* WordPress dependencies
*/
import { useViewportMatch } from '@wordpress/compose';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { useMemo, createPortal } from '@wordpress/element';
import {
BlockList,
BlockToolbar,
BlockInspector,
privateApis as blockEditorPrivateApis,
__unstableBlockSettingsMenuFirstItem,
} from '@wordpress/block-editor';
import { BlockKeyboardShortcuts } from '@wordpress/block-library';
import { uploadMedia } from '@wordpress/media-utils';
import { store as preferencesStore } from '@wordpress/preferences';
/**
* Internal dependencies
*/
import BlockInspectorButton from '../block-inspector-button';
import Header from '../header';
import useInserter from '../inserter/use-inserter';
import SidebarEditorProvider from './sidebar-editor-provider';
import WelcomeGuide from '../welcome-guide';
import KeyboardShortcuts from '../keyboard-shortcuts';
import BlockAppender from '../block-appender';
import { unlock } from '../../lock-unlock';
const { ExperimentalBlockCanvas: BlockCanvas } = unlock(
blockEditorPrivateApis
);
export default function SidebarBlockEditor( {
blockEditorSettings,
sidebar,
inserter,
inspector,
} ) {
const [ isInserterOpened, setIsInserterOpened ] = useInserter( inserter );
const isMediumViewport = useViewportMatch( 'small' );
const {
hasUploadPermissions,
isFixedToolbarActive,
keepCaretInsideBlock,
isWelcomeGuideActive,
} = useSelect( ( select ) => {
const { get } = select( preferencesStore );
return {
hasUploadPermissions:
select( coreStore ).canUser( 'create', 'media' ) ?? true,
isFixedToolbarActive: !! get(
'core/customize-widgets',
'fixedToolbar'
),
keepCaretInsideBlock: !! get(
'core/customize-widgets',
'keepCaretInsideBlock'
),
isWelcomeGuideActive: !! get(
'core/customize-widgets',
'welcomeGuide'
),
};
}, [] );
const settings = useMemo( () => {
let mediaUploadBlockEditor;
if ( hasUploadPermissions ) {
mediaUploadBlockEditor = ( { onError, ...argumentsObject } ) => {
uploadMedia( {
wpAllowedMimeTypes: blockEditorSettings.allowedMimeTypes,
onError: ( { message } ) => onError( message ),
...argumentsObject,
} );
};
}
return {
...blockEditorSettings,
__experimentalSetIsInserterOpened: setIsInserterOpened,
mediaUpload: mediaUploadBlockEditor,
hasFixedToolbar: isFixedToolbarActive || ! isMediumViewport,
keepCaretInsideBlock,
__unstableHasCustomAppender: true,
};
}, [
hasUploadPermissions,
blockEditorSettings,
isFixedToolbarActive,
isMediumViewport,
keepCaretInsideBlock,
setIsInserterOpened,
] );
if ( isWelcomeGuideActive ) {
return <WelcomeGuide sidebar={ sidebar } />;
}
return (
<>
<KeyboardShortcuts.Register />
<BlockKeyboardShortcuts />
<SidebarEditorProvider sidebar={ sidebar } settings={ settings }>
<KeyboardShortcuts
undo={ sidebar.undo }
redo={ sidebar.redo }
save={ sidebar.save }
/>
<Header
sidebar={ sidebar }
inserter={ inserter }
isInserterOpened={ isInserterOpened }
setIsInserterOpened={ setIsInserterOpened }
isFixedToolbarActive={
isFixedToolbarActive || ! isMediumViewport
}
/>
{ ( isFixedToolbarActive || ! isMediumViewport ) && (
<BlockToolbar hideDragHandle />
) }
<BlockCanvas
shouldIframe={ false }
styles={ settings.defaultEditorStyles }
height="100%"
>
<BlockList renderAppender={ BlockAppender } />
</BlockCanvas>
{ createPortal(
// This is a temporary hack to prevent button component inside <BlockInspector>
// from submitting form when type="button" is not specified.
<form onSubmit={ ( event ) => event.preventDefault() }>
<BlockInspector />
</form>,
inspector.contentContainer[ 0 ]
) }
</SidebarEditorProvider>
<__unstableBlockSettingsMenuFirstItem>
{ ( { onClose } ) => (
<BlockInspectorButton
inspector={ inspector }
closeMenu={ onClose }
/>
) }
</__unstableBlockSettingsMenuFirstItem>
</>
);
}