-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
index.js
107 lines (103 loc) · 2.88 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
/**
* WordPress dependencies
*/
import { Panel, ToggleControl, RangeControl } from '@wordpress/components';
import { compose, ifCondition } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import { BlockInspector, __experimentalSimulateMediaQuery } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import Sidebar from '../';
import SettingsHeader from '../settings-header';
import PostStatus from '../post-status';
import LastRevision from '../last-revision';
import PostTaxonomies from '../post-taxonomies';
import FeaturedImage from '../featured-image';
import PostExcerpt from '../post-excerpt';
import PostLink from '../post-link';
import DiscussionPanel from '../discussion-panel';
import PageAttributes from '../page-attributes';
import MetaBoxes from '../../meta-boxes';
import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
const PARTIAL_PATHS = [
//'block-editor/style.css',
'block-library/style.css',
'block-library/theme.css',
'block-library/editor.css',
//'format-library/style.css',
];
function TestSimulateMediaQuery() {
const [ simulationWidth, setSimulationWidth ] = useState( 400 );
const [ isSimulationEnabled, setIsSimulationEnabled ] = useState( true );
const toggleUI = (
<ToggleControl
label={ __( 'Enabled width simulation' ) }
checked={ isSimulationEnabled }
onChange={ ( newValue ) => setIsSimulationEnabled( newValue ) }
/>
);
if ( ! isSimulationEnabled ) {
return toggleUI;
}
return (
<>
{ toggleUI }
<RangeControl
value={ simulationWidth }
label={ __( 'Simulated width value' ) }
min={ 0 }
max={ 2000 }
allowReset
onChange={ ( newValue ) => ( setSimulationWidth( newValue ) ) }
/>
<__experimentalSimulateMediaQuery
value={ simulationWidth }
partialPaths={ PARTIAL_PATHS }
/>
</>
);
}
const SettingsSidebar = ( { sidebarName } ) => (
<Sidebar
name={ sidebarName }
label={ __( 'Editor settings' ) }
>
<SettingsHeader sidebarName={ sidebarName } />
<Panel>
{ sidebarName === 'edit-post/document' && (
<>
<PostStatus />
<PluginDocumentSettingPanel.Slot />
<LastRevision />
<PostLink />
<PostTaxonomies />
<FeaturedImage />
<PostExcerpt />
<DiscussionPanel />
<PageAttributes />
<MetaBoxes location="side" />
</>
) }
{ sidebarName === 'edit-post/block' && (
<BlockInspector />
) }
<TestSimulateMediaQuery />
</Panel>
</Sidebar>
);
export default compose(
withSelect( ( select ) => {
const {
getActiveGeneralSidebarName,
isEditorSidebarOpened,
} = select( 'core/edit-post' );
return {
isEditorSidebarOpened: isEditorSidebarOpened(),
sidebarName: getActiveGeneralSidebarName(),
};
} ),
ifCondition( ( { isEditorSidebarOpened } ) => isEditorSidebarOpened ),
)( SettingsSidebar );