-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
site-editor-canvas.js
99 lines (90 loc) · 2.68 KB
/
site-editor-canvas.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
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
/**
* Internal dependencies
*/
import ResizableEditor from './resizable-editor';
import EditorCanvas from './editor-canvas';
import EditorCanvasContainer from '../editor-canvas-container';
import useSiteEditorSettings from './use-site-editor-settings';
import { store as editSiteStore } from '../../store';
import {
FOCUSABLE_ENTITIES,
NAVIGATION_POST_TYPE,
TEMPLATE_POST_TYPE,
} from '../../utils/constants';
import { unlock } from '../../lock-unlock';
import { privateApis as routerPrivateApis } from '@wordpress/router';
const { useLocation } = unlock( routerPrivateApis );
export default function SiteEditorCanvas() {
const location = useLocation();
const { templateType, isFocusableEntity, isViewMode } = useSelect(
( select ) => {
const { getEditedPostType, getCanvasMode } = unlock(
select( editSiteStore )
);
const _templateType = getEditedPostType();
return {
templateType: _templateType,
isFocusableEntity: FOCUSABLE_ENTITIES.includes( _templateType ),
isViewMode: getCanvasMode() === 'view',
};
},
[]
);
const isFocusMode = location.params.focusMode || isFocusableEntity;
const [ resizeObserver, sizes ] = useResizeObserver();
const settings = useSiteEditorSettings();
const isMobileViewport = useViewportMatch( 'small', '<' );
const enableResizing =
isFocusMode &&
! isViewMode &&
// Disable resizing in mobile viewport.
! isMobileViewport &&
// Disable resizing when editing a template in focus mode.
templateType !== TEMPLATE_POST_TYPE;
const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
const forceFullHeight = isNavigationFocusMode;
return (
<EditorCanvasContainer.Slot>
{ ( [ editorCanvasView ] ) =>
editorCanvasView ? (
<div className="edit-site-visual-editor is-focus-mode">
{ editorCanvasView }
</div>
) : (
<div
className={ classnames( 'edit-site-visual-editor', {
'is-focus-mode': isFocusMode || !! editorCanvasView,
'is-view-mode': isViewMode,
} ) }
>
<ResizableEditor
enableResizing={ enableResizing }
height={
sizes.height && ! forceFullHeight
? sizes.height
: '100%'
}
>
<EditorCanvas
enableResizing={ enableResizing }
settings={ settings }
>
{ resizeObserver }
</EditorCanvas>
</ResizableEditor>
</div>
)
}
</EditorCanvasContainer.Slot>
);
}