@wordpress/customize-widgets 2.0.1-next.5df0cd52b7.0 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/build/components/customize-widgets/index.js +4 -2
- package/build/components/customize-widgets/index.js.map +1 -1
- package/build/components/inserter/index.js +1 -1
- package/build/components/inserter/index.js.map +1 -1
- package/build/components/inserter/use-inserter.js +1 -1
- package/build/components/inserter/use-inserter.js.map +1 -1
- package/build/components/keyboard-shortcut-help-modal/dynamic-shortcut.js +1 -1
- package/build/components/keyboard-shortcut-help-modal/dynamic-shortcut.js.map +1 -1
- package/build/components/keyboard-shortcut-help-modal/index.js +1 -3
- package/build/components/keyboard-shortcut-help-modal/index.js.map +1 -1
- package/build/components/keyboard-shortcuts/index.js +0 -6
- package/build/components/keyboard-shortcuts/index.js.map +1 -1
- package/build/components/more-menu/index.js +12 -19
- package/build/components/more-menu/index.js.map +1 -1
- package/build/components/sidebar-block-editor/index.js +8 -5
- package/build/components/sidebar-block-editor/index.js.map +1 -1
- package/build/components/welcome-guide/index.js +4 -8
- package/build/components/welcome-guide/index.js.map +1 -1
- package/build/controls/inspector-section.js +45 -0
- package/build/controls/inspector-section.js.map +1 -1
- package/build/index.js +13 -1
- package/build/index.js.map +1 -1
- package/build/store/actions.js +0 -20
- package/build/store/actions.js.map +1 -1
- package/build/store/index.js +1 -2
- package/build/store/index.js.map +1 -1
- package/build/store/reducer.js +2 -51
- package/build/store/reducer.js.map +1 -1
- package/build/store/selectors.js +0 -24
- package/build/store/selectors.js.map +1 -1
- package/build-module/components/customize-widgets/index.js +3 -2
- package/build-module/components/customize-widgets/index.js.map +1 -1
- package/build-module/components/inserter/index.js +1 -1
- package/build-module/components/inserter/index.js.map +1 -1
- package/build-module/components/inserter/use-inserter.js +1 -1
- package/build-module/components/inserter/use-inserter.js.map +1 -1
- package/build-module/components/keyboard-shortcut-help-modal/dynamic-shortcut.js +1 -1
- package/build-module/components/keyboard-shortcut-help-modal/dynamic-shortcut.js.map +1 -1
- package/build-module/components/keyboard-shortcut-help-modal/index.js +1 -3
- package/build-module/components/keyboard-shortcut-help-modal/index.js.map +1 -1
- package/build-module/components/keyboard-shortcuts/index.js +0 -6
- package/build-module/components/keyboard-shortcuts/index.js.map +1 -1
- package/build-module/components/more-menu/index.js +14 -21
- package/build-module/components/more-menu/index.js.map +1 -1
- package/build-module/components/sidebar-block-editor/index.js +7 -4
- package/build-module/components/sidebar-block-editor/index.js.map +1 -1
- package/build-module/components/welcome-guide/index.js +4 -8
- package/build-module/components/welcome-guide/index.js.map +1 -1
- package/build-module/controls/inspector-section.js +45 -0
- package/build-module/controls/inspector-section.js.map +1 -1
- package/build-module/index.js +13 -3
- package/build-module/index.js.map +1 -1
- package/build-module/store/actions.js +0 -18
- package/build-module/store/actions.js.map +1 -1
- package/build-module/store/index.js +1 -2
- package/build-module/store/index.js.map +1 -1
- package/build-module/store/reducer.js +1 -46
- package/build-module/store/reducer.js.map +1 -1
- package/build-module/store/selectors.js +0 -21
- package/build-module/store/selectors.js.map +1 -1
- package/package.json +21 -20
- package/src/components/customize-widgets/index.js +17 -11
- package/src/components/inserter/index.js +4 -2
- package/src/components/inserter/style.scss +1 -1
- package/src/components/inserter/use-inserter.js +3 -2
- package/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js +15 -12
- package/src/components/keyboard-shortcut-help-modal/index.js +1 -3
- package/src/components/keyboard-shortcuts/index.js +12 -24
- package/src/components/more-menu/index.js +13 -20
- package/src/components/sidebar-block-editor/index.js +14 -10
- package/src/components/welcome-guide/index.js +5 -9
- package/src/controls/inspector-section.js +40 -0
- package/src/index.js +14 -1
- package/src/store/actions.js +0 -18
- package/src/store/index.js +0 -1
- package/src/store/reducer.js +0 -47
- package/src/store/selectors.js +0 -21
- package/build/components/more-menu/feature-toggle.js +0 -62
- package/build/components/more-menu/feature-toggle.js.map +0 -1
- package/build/store/defaults.js +0 -14
- package/build/store/defaults.js.map +0 -1
- package/build-module/components/more-menu/feature-toggle.js +0 -49
- package/build-module/components/more-menu/feature-toggle.js.map +0 -1
- package/build-module/store/defaults.js +0 -7
- package/build-module/store/defaults.js.map +0 -1
- package/src/components/more-menu/feature-toggle.js +0 -56
- package/src/store/defaults.js +0 -6
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { useState, useEffect, useRef, createPortal } from '@wordpress/element';
|
|
5
5
|
import { SlotFillProvider, Popover } from '@wordpress/components';
|
|
6
|
+
import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Internal dependencies
|
|
@@ -67,16 +68,21 @@ export default function CustomizeWidgets( {
|
|
|
67
68
|
);
|
|
68
69
|
|
|
69
70
|
return (
|
|
70
|
-
<
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
71
|
+
<ShortcutProvider>
|
|
72
|
+
<SlotFillProvider>
|
|
73
|
+
<SidebarControls
|
|
74
|
+
sidebarControls={ sidebarControls }
|
|
75
|
+
activeSidebarControl={ activeSidebarControl }
|
|
76
|
+
>
|
|
77
|
+
<FocusControl
|
|
78
|
+
api={ api }
|
|
79
|
+
sidebarControls={ sidebarControls }
|
|
80
|
+
>
|
|
81
|
+
{ activeSidebar }
|
|
82
|
+
{ popover }
|
|
83
|
+
</FocusControl>
|
|
84
|
+
</SidebarControls>
|
|
85
|
+
</SlotFillProvider>
|
|
86
|
+
</ShortcutProvider>
|
|
81
87
|
);
|
|
82
88
|
}
|
|
@@ -18,8 +18,10 @@ function Inserter( { setIsOpened } ) {
|
|
|
18
18
|
Inserter,
|
|
19
19
|
'customize-widget-layout__inserter-panel-title'
|
|
20
20
|
);
|
|
21
|
-
const insertionPoint = useSelect(
|
|
22
|
-
|
|
21
|
+
const insertionPoint = useSelect(
|
|
22
|
+
( select ) =>
|
|
23
|
+
select( customizeWidgetsStore ).__experimentalGetInsertionPoint(),
|
|
24
|
+
[]
|
|
23
25
|
);
|
|
24
26
|
|
|
25
27
|
return (
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
// Match the "wp-full-overlay-header" height in core, plus the 1px border.
|
|
26
26
|
height: 46px;
|
|
27
27
|
box-sizing: border-box;
|
|
28
|
-
border-bottom:
|
|
28
|
+
border-bottom: $border-width solid $gray-300;
|
|
29
29
|
|
|
30
30
|
.customize-widgets-layout__inserter-panel-header-title {
|
|
31
31
|
margin: 0;
|
|
@@ -10,8 +10,9 @@ import { useSelect, useDispatch, select as selectStore } from '@wordpress/data';
|
|
|
10
10
|
import { store as customizeWidgetsStore } from '../../store';
|
|
11
11
|
|
|
12
12
|
export default function useInserter( inserter ) {
|
|
13
|
-
const isInserterOpened = useSelect(
|
|
14
|
-
select( customizeWidgetsStore ).isInserterOpened()
|
|
13
|
+
const isInserterOpened = useSelect(
|
|
14
|
+
( select ) => select( customizeWidgetsStore ).isInserterOpened(),
|
|
15
|
+
[]
|
|
15
16
|
);
|
|
16
17
|
const { setIsInserterOpened } = useDispatch( customizeWidgetsStore );
|
|
17
18
|
|
|
@@ -10,19 +10,22 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
|
|
|
10
10
|
import Shortcut from './shortcut';
|
|
11
11
|
|
|
12
12
|
function DynamicShortcut( { name } ) {
|
|
13
|
-
const { keyCombination, description, aliases } = useSelect(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
const { keyCombination, description, aliases } = useSelect(
|
|
14
|
+
( select ) => {
|
|
15
|
+
const {
|
|
16
|
+
getShortcutKeyCombination,
|
|
17
|
+
getShortcutDescription,
|
|
18
|
+
getShortcutAliases,
|
|
19
|
+
} = select( keyboardShortcutsStore );
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
return {
|
|
22
|
+
keyCombination: getShortcutKeyCombination( name ),
|
|
23
|
+
aliases: getShortcutAliases( name ),
|
|
24
|
+
description: getShortcutDescription( name ),
|
|
25
|
+
};
|
|
26
|
+
},
|
|
27
|
+
[ name ]
|
|
28
|
+
);
|
|
26
29
|
|
|
27
30
|
if ( ! keyCombination ) {
|
|
28
31
|
return null;
|
|
@@ -101,9 +101,7 @@ export default function KeyboardShortcutHelpModal( {
|
|
|
101
101
|
},
|
|
102
102
|
} );
|
|
103
103
|
|
|
104
|
-
useShortcut( 'core/customize-widgets/keyboard-shortcuts', toggleModal
|
|
105
|
-
bindGlobal: true,
|
|
106
|
-
} );
|
|
104
|
+
useShortcut( 'core/customize-widgets/keyboard-shortcuts', toggleModal );
|
|
107
105
|
|
|
108
106
|
if ( ! isModalActive ) {
|
|
109
107
|
return null;
|
|
@@ -10,32 +10,20 @@ import { useDispatch } from '@wordpress/data';
|
|
|
10
10
|
import { __ } from '@wordpress/i18n';
|
|
11
11
|
|
|
12
12
|
function KeyboardShortcuts( { undo, redo, save } ) {
|
|
13
|
-
useShortcut(
|
|
14
|
-
|
|
15
|
-
(
|
|
16
|
-
|
|
17
|
-
event.preventDefault();
|
|
18
|
-
},
|
|
19
|
-
{ bindGlobal: true }
|
|
20
|
-
);
|
|
13
|
+
useShortcut( 'core/customize-widgets/undo', ( event ) => {
|
|
14
|
+
undo();
|
|
15
|
+
event.preventDefault();
|
|
16
|
+
} );
|
|
21
17
|
|
|
22
|
-
useShortcut(
|
|
23
|
-
|
|
24
|
-
(
|
|
25
|
-
|
|
26
|
-
event.preventDefault();
|
|
27
|
-
},
|
|
28
|
-
{ bindGlobal: true }
|
|
29
|
-
);
|
|
18
|
+
useShortcut( 'core/customize-widgets/redo', ( event ) => {
|
|
19
|
+
redo();
|
|
20
|
+
event.preventDefault();
|
|
21
|
+
} );
|
|
30
22
|
|
|
31
|
-
useShortcut(
|
|
32
|
-
|
|
33
|
-
(
|
|
34
|
-
|
|
35
|
-
save();
|
|
36
|
-
},
|
|
37
|
-
{ bindGlobal: true }
|
|
38
|
-
);
|
|
23
|
+
useShortcut( 'core/customize-widgets/save', ( event ) => {
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
save();
|
|
26
|
+
} );
|
|
39
27
|
|
|
40
28
|
return null;
|
|
41
29
|
}
|
|
@@ -2,29 +2,25 @@
|
|
|
2
2
|
* WordPress dependencies
|
|
3
3
|
*/
|
|
4
4
|
import {
|
|
5
|
-
ToolbarDropdownMenu,
|
|
6
5
|
MenuGroup,
|
|
7
6
|
MenuItem,
|
|
7
|
+
ToolbarDropdownMenu,
|
|
8
8
|
VisuallyHidden,
|
|
9
9
|
} from '@wordpress/components';
|
|
10
10
|
import { useState } from '@wordpress/element';
|
|
11
11
|
import { __, _x } from '@wordpress/i18n';
|
|
12
|
-
import { external
|
|
12
|
+
import { external } from '@wordpress/icons';
|
|
13
13
|
import { displayShortcut } from '@wordpress/keycodes';
|
|
14
14
|
import { useShortcut } from '@wordpress/keyboard-shortcuts';
|
|
15
|
+
import { MoreMenuDropdown, MoreMenuFeatureToggle } from '@wordpress/interface';
|
|
15
16
|
|
|
16
17
|
/**
|
|
17
18
|
* Internal dependencies
|
|
18
19
|
*/
|
|
19
|
-
import FeatureToggle from './feature-toggle';
|
|
20
20
|
import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
|
|
21
21
|
|
|
22
22
|
const POPOVER_PROPS = {
|
|
23
23
|
className: 'customize-widgets-more-menu__content',
|
|
24
|
-
position: 'bottom left',
|
|
25
|
-
};
|
|
26
|
-
const TOGGLE_PROPS = {
|
|
27
|
-
tooltipPosition: 'bottom',
|
|
28
24
|
};
|
|
29
25
|
|
|
30
26
|
export default function MoreMenu() {
|
|
@@ -37,26 +33,21 @@ export default function MoreMenu() {
|
|
|
37
33
|
|
|
38
34
|
useShortcut(
|
|
39
35
|
'core/customize-widgets/keyboard-shortcuts',
|
|
40
|
-
toggleKeyboardShortcutsModal
|
|
41
|
-
{
|
|
42
|
-
bindGlobal: true,
|
|
43
|
-
}
|
|
36
|
+
toggleKeyboardShortcutsModal
|
|
44
37
|
);
|
|
45
38
|
|
|
46
39
|
return (
|
|
47
40
|
<>
|
|
48
|
-
<
|
|
41
|
+
<MoreMenuDropdown
|
|
42
|
+
as={ ToolbarDropdownMenu }
|
|
49
43
|
className="customize-widgets-more-menu"
|
|
50
|
-
icon={ moreVertical }
|
|
51
|
-
/* translators: button label text should, if possible, be under 16 characters. */
|
|
52
|
-
label={ __( 'Options' ) }
|
|
53
44
|
popoverProps={ POPOVER_PROPS }
|
|
54
|
-
toggleProps={ TOGGLE_PROPS }
|
|
55
45
|
>
|
|
56
46
|
{ () => (
|
|
57
47
|
<>
|
|
58
48
|
<MenuGroup label={ _x( 'View', 'noun' ) }>
|
|
59
|
-
<
|
|
49
|
+
<MoreMenuFeatureToggle
|
|
50
|
+
scope="core/customize-widgets"
|
|
60
51
|
feature="fixedToolbar"
|
|
61
52
|
label={ __( 'Top toolbar' ) }
|
|
62
53
|
info={ __(
|
|
@@ -79,7 +70,8 @@ export default function MoreMenu() {
|
|
|
79
70
|
>
|
|
80
71
|
{ __( 'Keyboard shortcuts' ) }
|
|
81
72
|
</MenuItem>
|
|
82
|
-
<
|
|
73
|
+
<MoreMenuFeatureToggle
|
|
74
|
+
scope="core/customize-widgets"
|
|
83
75
|
feature="welcomeGuide"
|
|
84
76
|
label={ __( 'Welcome Guide' ) }
|
|
85
77
|
/>
|
|
@@ -102,7 +94,8 @@ export default function MoreMenu() {
|
|
|
102
94
|
</MenuItem>
|
|
103
95
|
</MenuGroup>
|
|
104
96
|
<MenuGroup label={ __( 'Preferences' ) }>
|
|
105
|
-
<
|
|
97
|
+
<MoreMenuFeatureToggle
|
|
98
|
+
scope="core/customize-widgets"
|
|
106
99
|
feature="keepCaretInsideBlock"
|
|
107
100
|
label={ __(
|
|
108
101
|
'Contain text cursor inside block'
|
|
@@ -120,7 +113,7 @@ export default function MoreMenu() {
|
|
|
120
113
|
</MenuGroup>
|
|
121
114
|
</>
|
|
122
115
|
) }
|
|
123
|
-
</
|
|
116
|
+
</MoreMenuDropdown>
|
|
124
117
|
<KeyboardShortcutHelpModal
|
|
125
118
|
isModalActive={ isKeyboardShortcutsModalActive }
|
|
126
119
|
toggleModal={ toggleKeyboardShortcutsModal }
|
|
@@ -21,6 +21,7 @@ import {
|
|
|
21
21
|
__unstableBlockSettingsMenuFirstItem,
|
|
22
22
|
} from '@wordpress/block-editor';
|
|
23
23
|
import { uploadMedia } from '@wordpress/media-utils';
|
|
24
|
+
import { store as interfaceStore } from '@wordpress/interface';
|
|
24
25
|
|
|
25
26
|
/**
|
|
26
27
|
* Internal dependencies
|
|
@@ -29,7 +30,6 @@ import BlockInspectorButton from '../block-inspector-button';
|
|
|
29
30
|
import Header from '../header';
|
|
30
31
|
import useInserter from '../inserter/use-inserter';
|
|
31
32
|
import SidebarEditorProvider from './sidebar-editor-provider';
|
|
32
|
-
import { store as customizeWidgetsStore } from '../../store';
|
|
33
33
|
import WelcomeGuide from '../welcome-guide';
|
|
34
34
|
import KeyboardShortcuts from '../keyboard-shortcuts';
|
|
35
35
|
import BlockAppender from '../block-appender';
|
|
@@ -47,20 +47,24 @@ export default function SidebarBlockEditor( {
|
|
|
47
47
|
keepCaretInsideBlock,
|
|
48
48
|
isWelcomeGuideActive,
|
|
49
49
|
} = useSelect( ( select ) => {
|
|
50
|
+
const { isFeatureActive } = select( interfaceStore );
|
|
50
51
|
return {
|
|
51
52
|
hasUploadPermissions: defaultTo(
|
|
52
53
|
select( coreStore ).canUser( 'create', 'media' ),
|
|
53
54
|
true
|
|
54
55
|
),
|
|
55
|
-
isFixedToolbarActive:
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
56
|
+
isFixedToolbarActive: isFeatureActive(
|
|
57
|
+
'core/customize-widgets',
|
|
58
|
+
'fixedToolbar'
|
|
59
|
+
),
|
|
60
|
+
keepCaretInsideBlock: isFeatureActive(
|
|
61
|
+
'core/customize-widgets',
|
|
62
|
+
'keepCaretInsideBlock'
|
|
63
|
+
),
|
|
64
|
+
isWelcomeGuideActive: isFeatureActive(
|
|
65
|
+
'core/customize-widgets',
|
|
66
|
+
'welcomeGuide'
|
|
67
|
+
),
|
|
64
68
|
};
|
|
65
69
|
}, [] );
|
|
66
70
|
const settings = useMemo( () => {
|
|
@@ -4,16 +4,10 @@
|
|
|
4
4
|
import { __ } from '@wordpress/i18n';
|
|
5
5
|
import { Button, ExternalLink } from '@wordpress/components';
|
|
6
6
|
import { useDispatch } from '@wordpress/data';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Internal dependencies
|
|
10
|
-
*/
|
|
11
|
-
import { store as customizeWidgetsStore } from '../../store';
|
|
7
|
+
import { store as interfaceStore } from '@wordpress/interface';
|
|
12
8
|
|
|
13
9
|
export default function WelcomeGuide( { sidebar } ) {
|
|
14
|
-
const {
|
|
15
|
-
customizeWidgetsStore
|
|
16
|
-
);
|
|
10
|
+
const { toggleFeature } = useDispatch( interfaceStore );
|
|
17
11
|
|
|
18
12
|
const isEntirelyBlockWidgets = sidebar
|
|
19
13
|
.getWidgets()
|
|
@@ -51,7 +45,9 @@ export default function WelcomeGuide( { sidebar } ) {
|
|
|
51
45
|
<Button
|
|
52
46
|
className="customize-widgets-welcome-guide__button"
|
|
53
47
|
variant="primary"
|
|
54
|
-
onClick={ () =>
|
|
48
|
+
onClick={ () =>
|
|
49
|
+
toggleFeature( 'core/customize-widgets', 'welcomeGuide' )
|
|
50
|
+
}
|
|
55
51
|
>
|
|
56
52
|
{ __( 'Got it' ) }
|
|
57
53
|
</Button>
|
|
@@ -10,12 +10,23 @@ export default function getInspectorSection() {
|
|
|
10
10
|
this.parentSection = options.parentSection;
|
|
11
11
|
|
|
12
12
|
this.returnFocusWhenClose = null;
|
|
13
|
+
this._isOpen = false;
|
|
14
|
+
}
|
|
15
|
+
get isOpen() {
|
|
16
|
+
return this._isOpen;
|
|
17
|
+
}
|
|
18
|
+
set isOpen( value ) {
|
|
19
|
+
this._isOpen = value;
|
|
20
|
+
this.triggerActiveCallbacks();
|
|
13
21
|
}
|
|
14
22
|
ready() {
|
|
15
23
|
this.contentContainer[ 0 ].classList.add(
|
|
16
24
|
'customize-widgets-layout__inspector'
|
|
17
25
|
);
|
|
18
26
|
}
|
|
27
|
+
isContextuallyActive() {
|
|
28
|
+
return this.isOpen;
|
|
29
|
+
}
|
|
19
30
|
onChangeExpanded( expanded, args ) {
|
|
20
31
|
super.onChangeExpanded( expanded, args );
|
|
21
32
|
|
|
@@ -43,6 +54,7 @@ export default function getInspectorSection() {
|
|
|
43
54
|
}
|
|
44
55
|
}
|
|
45
56
|
open( { returnFocusWhenClose } = {} ) {
|
|
57
|
+
this.isOpen = true;
|
|
46
58
|
this.returnFocusWhenClose = returnFocusWhenClose;
|
|
47
59
|
|
|
48
60
|
this.expand( {
|
|
@@ -54,5 +66,33 @@ export default function getInspectorSection() {
|
|
|
54
66
|
allowMultiple: true,
|
|
55
67
|
} );
|
|
56
68
|
}
|
|
69
|
+
collapse( options ) {
|
|
70
|
+
// Overridden collapse() function. Mostly call the parent collapse(), but also
|
|
71
|
+
// move our .isOpen to false.
|
|
72
|
+
// Initially, I tried tracking this with onChangeExpanded(), but it doesn't work
|
|
73
|
+
// because the block settings sidebar is a layer "on top of" the G editor sidebar.
|
|
74
|
+
//
|
|
75
|
+
// For example, when closing the block settings sidebar, the G
|
|
76
|
+
// editor sidebar would display, and onChangeExpanded in
|
|
77
|
+
// inspector-section would run with expanded=true, but I want
|
|
78
|
+
// isOpen to be false when the block settings is closed.
|
|
79
|
+
this.isOpen = false;
|
|
80
|
+
super.collapse( options );
|
|
81
|
+
}
|
|
82
|
+
triggerActiveCallbacks() {
|
|
83
|
+
// Manually fire the callbacks associated with moving this.active
|
|
84
|
+
// from false to true. "active" is always true for this section,
|
|
85
|
+
// and "isContextuallyActive" reflects if the block settings
|
|
86
|
+
// sidebar is currently visible, that is, it has replaced the main
|
|
87
|
+
// Gutenberg view.
|
|
88
|
+
// The WP customizer only checks ".isContextuallyActive()" when
|
|
89
|
+
// ".active" changes values. But our ".active" never changes value.
|
|
90
|
+
// The WP customizer never foresaw a section being used a way we
|
|
91
|
+
// fit the block settings sidebar into a section. By manually
|
|
92
|
+
// triggering the "this.active" callbacks, we force the WP
|
|
93
|
+
// customizer to query our .isContextuallyActive() function and
|
|
94
|
+
// update its view of our status.
|
|
95
|
+
this.active.callbacks.fireWith( this.active, [ false, true ] );
|
|
96
|
+
}
|
|
57
97
|
};
|
|
58
98
|
}
|
package/src/index.js
CHANGED
|
@@ -10,8 +10,14 @@ import {
|
|
|
10
10
|
import {
|
|
11
11
|
registerLegacyWidgetBlock,
|
|
12
12
|
registerLegacyWidgetVariations,
|
|
13
|
+
registerWidgetGroupBlock,
|
|
13
14
|
} from '@wordpress/widgets';
|
|
14
|
-
import {
|
|
15
|
+
import {
|
|
16
|
+
setFreeformContentHandlerName,
|
|
17
|
+
store as blocksStore,
|
|
18
|
+
} from '@wordpress/blocks';
|
|
19
|
+
import { dispatch } from '@wordpress/data';
|
|
20
|
+
import { store as interfaceStore } from '@wordpress/interface';
|
|
15
21
|
|
|
16
22
|
/**
|
|
17
23
|
* Internal dependencies
|
|
@@ -33,6 +39,12 @@ const ENABLE_EXPERIMENTAL_FSE_BLOCKS = false;
|
|
|
33
39
|
* @param {Object} blockEditorSettings Block editor settings.
|
|
34
40
|
*/
|
|
35
41
|
export function initialize( editorName, blockEditorSettings ) {
|
|
42
|
+
dispatch( interfaceStore ).setFeatureDefaults( 'core/customize-widgets', {
|
|
43
|
+
fixedToolbar: false,
|
|
44
|
+
welcomeGuide: true,
|
|
45
|
+
} );
|
|
46
|
+
|
|
47
|
+
dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
|
|
36
48
|
const coreBlocks = __experimentalGetCoreBlocks().filter( ( block ) => {
|
|
37
49
|
return ! (
|
|
38
50
|
DISABLED_BLOCKS.includes( block.name ) ||
|
|
@@ -49,6 +61,7 @@ export function initialize( editorName, blockEditorSettings ) {
|
|
|
49
61
|
} );
|
|
50
62
|
}
|
|
51
63
|
registerLegacyWidgetVariations( blockEditorSettings );
|
|
64
|
+
registerWidgetGroupBlock();
|
|
52
65
|
|
|
53
66
|
// As we are unregistering `core/freeform` to avoid the Classic block, we must
|
|
54
67
|
// replace it with something as the default freeform content handler. Failure to
|
package/src/store/actions.js
CHANGED
|
@@ -1,21 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Returns an action object used to toggle a feature flag.
|
|
3
|
-
*
|
|
4
|
-
* This function is unstable, as it is mostly copied from the edit-post
|
|
5
|
-
* package. Editor features and preferences have a lot of scope for
|
|
6
|
-
* being generalized and refactored.
|
|
7
|
-
*
|
|
8
|
-
* @param {string} feature Feature name.
|
|
9
|
-
*
|
|
10
|
-
* @return {Object} Action object.
|
|
11
|
-
*/
|
|
12
|
-
export function __unstableToggleFeature( feature ) {
|
|
13
|
-
return {
|
|
14
|
-
type: 'TOGGLE_FEATURE',
|
|
15
|
-
feature,
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
|
|
19
1
|
/**
|
|
20
2
|
* Returns an action object used to open/close the inserter.
|
|
21
3
|
*
|
package/src/store/index.js
CHANGED
package/src/store/reducer.js
CHANGED
|
@@ -1,30 +1,8 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { flow } from 'lodash';
|
|
5
|
-
|
|
6
1
|
/**
|
|
7
2
|
* WordPress dependencies
|
|
8
3
|
*/
|
|
9
4
|
import { combineReducers } from '@wordpress/data';
|
|
10
5
|
|
|
11
|
-
/**
|
|
12
|
-
* Internal dependencies
|
|
13
|
-
*/
|
|
14
|
-
import { PREFERENCES_DEFAULTS } from './defaults';
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Higher-order reducer creator which provides the given initial state for the
|
|
18
|
-
* original reducer.
|
|
19
|
-
*
|
|
20
|
-
* @param {*} initialState Initial state to provide to reducer.
|
|
21
|
-
*
|
|
22
|
-
* @return {Function} Higher-order reducer.
|
|
23
|
-
*/
|
|
24
|
-
const createWithInitialState = ( initialState ) => ( reducer ) => {
|
|
25
|
-
return ( state = initialState, action ) => reducer( state, action );
|
|
26
|
-
};
|
|
27
|
-
|
|
28
6
|
/**
|
|
29
7
|
* Reducer tracking whether the inserter is open.
|
|
30
8
|
*
|
|
@@ -39,31 +17,6 @@ function blockInserterPanel( state = false, action ) {
|
|
|
39
17
|
return state;
|
|
40
18
|
}
|
|
41
19
|
|
|
42
|
-
/**
|
|
43
|
-
* Reducer returning the user preferences.
|
|
44
|
-
*
|
|
45
|
-
* @param {Object} state Current state.
|
|
46
|
-
* @param {Object} action Dispatched action.
|
|
47
|
-
*
|
|
48
|
-
* @return {Object} Updated state.
|
|
49
|
-
*/
|
|
50
|
-
export const preferences = flow( [
|
|
51
|
-
combineReducers,
|
|
52
|
-
createWithInitialState( PREFERENCES_DEFAULTS ),
|
|
53
|
-
] )( {
|
|
54
|
-
features( state, action ) {
|
|
55
|
-
if ( action.type === 'TOGGLE_FEATURE' ) {
|
|
56
|
-
return {
|
|
57
|
-
...state,
|
|
58
|
-
[ action.feature ]: ! state[ action.feature ],
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
return state;
|
|
63
|
-
},
|
|
64
|
-
} );
|
|
65
|
-
|
|
66
20
|
export default combineReducers( {
|
|
67
21
|
blockInserterPanel,
|
|
68
|
-
preferences,
|
|
69
22
|
} );
|
package/src/store/selectors.js
CHANGED
|
@@ -1,24 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { get } from 'lodash';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Returns whether the given feature is enabled or not.
|
|
8
|
-
*
|
|
9
|
-
* This function is unstable, as it is mostly copied from the edit-post
|
|
10
|
-
* package. Editor features and preferences have a lot of scope for
|
|
11
|
-
* being generalized and refactored.
|
|
12
|
-
*
|
|
13
|
-
* @param {Object} state Global application state.
|
|
14
|
-
* @param {string} feature Feature slug.
|
|
15
|
-
*
|
|
16
|
-
* @return {boolean} Is active.
|
|
17
|
-
*/
|
|
18
|
-
export function __unstableIsFeatureActive( state, feature ) {
|
|
19
|
-
return get( state.preferences.features, [ feature ], false );
|
|
20
|
-
}
|
|
21
|
-
|
|
22
1
|
/**
|
|
23
2
|
* Returns true if the inserter is opened.
|
|
24
3
|
*
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = FeatureToggle;
|
|
7
|
-
|
|
8
|
-
var _element = require("@wordpress/element");
|
|
9
|
-
|
|
10
|
-
var _data = require("@wordpress/data");
|
|
11
|
-
|
|
12
|
-
var _components = require("@wordpress/components");
|
|
13
|
-
|
|
14
|
-
var _i18n = require("@wordpress/i18n");
|
|
15
|
-
|
|
16
|
-
var _icons = require("@wordpress/icons");
|
|
17
|
-
|
|
18
|
-
var _a11y = require("@wordpress/a11y");
|
|
19
|
-
|
|
20
|
-
var _store = require("../../store");
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* WordPress dependencies
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Internal dependencies
|
|
28
|
-
*/
|
|
29
|
-
function FeatureToggle({
|
|
30
|
-
label,
|
|
31
|
-
info,
|
|
32
|
-
messageActivated,
|
|
33
|
-
messageDeactivated,
|
|
34
|
-
shortcut,
|
|
35
|
-
feature
|
|
36
|
-
}) {
|
|
37
|
-
const isActive = (0, _data.useSelect)(select => select(_store.store).__unstableIsFeatureActive(feature), [feature]);
|
|
38
|
-
const {
|
|
39
|
-
__unstableToggleFeature: toggleFeature
|
|
40
|
-
} = (0, _data.useDispatch)(_store.store);
|
|
41
|
-
|
|
42
|
-
const speakMessage = () => {
|
|
43
|
-
if (isActive) {
|
|
44
|
-
(0, _a11y.speak)(messageDeactivated || (0, _i18n.__)('Feature deactivated'));
|
|
45
|
-
} else {
|
|
46
|
-
(0, _a11y.speak)(messageActivated || (0, _i18n.__)('Feature activated'));
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
return (0, _element.createElement)(_components.MenuItem, {
|
|
51
|
-
icon: isActive && _icons.check,
|
|
52
|
-
isSelected: isActive,
|
|
53
|
-
onClick: () => {
|
|
54
|
-
toggleFeature(feature);
|
|
55
|
-
speakMessage();
|
|
56
|
-
},
|
|
57
|
-
role: "menuitemcheckbox",
|
|
58
|
-
info: info,
|
|
59
|
-
shortcut: shortcut
|
|
60
|
-
}, label);
|
|
61
|
-
}
|
|
62
|
-
//# sourceMappingURL=feature-toggle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/customize-widgets/src/components/more-menu/feature-toggle.js"],"names":["FeatureToggle","label","info","messageActivated","messageDeactivated","shortcut","feature","isActive","select","customizeWidgetsStore","__unstableIsFeatureActive","__unstableToggleFeature","toggleFeature","speakMessage","check"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AAZA;AACA;AACA;;AAOA;AACA;AACA;AAGe,SAASA,aAAT,CAAwB;AACtCC,EAAAA,KADsC;AAEtCC,EAAAA,IAFsC;AAGtCC,EAAAA,gBAHsC;AAItCC,EAAAA,kBAJsC;AAKtCC,EAAAA,QALsC;AAMtCC,EAAAA;AANsC,CAAxB,EAOX;AACH,QAAMC,QAAQ,GAAG,qBACdC,MAAF,IACCA,MAAM,CAAEC,YAAF,CAAN,CAAgCC,yBAAhC,CACCJ,OADD,CAFe,EAKhB,CAAEA,OAAF,CALgB,CAAjB;AAOA,QAAM;AAAEK,IAAAA,uBAAuB,EAAEC;AAA3B,MAA6C,uBAClDH,YADkD,CAAnD;;AAGA,QAAMI,YAAY,GAAG,MAAM;AAC1B,QAAKN,QAAL,EAAgB;AACf,uBAAOH,kBAAkB,IAAI,cAAI,qBAAJ,CAA7B;AACA,KAFD,MAEO;AACN,uBAAOD,gBAAgB,IAAI,cAAI,mBAAJ,CAA3B;AACA;AACD,GAND;;AAQA,SACC,4BAAC,oBAAD;AACC,IAAA,IAAI,EAAGI,QAAQ,IAAIO,YADpB;AAEC,IAAA,UAAU,EAAGP,QAFd;AAGC,IAAA,OAAO,EAAG,MAAM;AACfK,MAAAA,aAAa,CAAEN,OAAF,CAAb;AACAO,MAAAA,YAAY;AACZ,KANF;AAOC,IAAA,IAAI,EAAC,kBAPN;AAQC,IAAA,IAAI,EAAGX,IARR;AASC,IAAA,QAAQ,EAAGG;AATZ,KAWGJ,KAXH,CADD;AAeA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { MenuItem } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { check } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { store as customizeWidgetsStore } from '../../store';\n\nexport default function FeatureToggle( {\n\tlabel,\n\tinfo,\n\tmessageActivated,\n\tmessageDeactivated,\n\tshortcut,\n\tfeature,\n} ) {\n\tconst isActive = useSelect(\n\t\t( select ) =>\n\t\t\tselect( customizeWidgetsStore ).__unstableIsFeatureActive(\n\t\t\t\tfeature\n\t\t\t),\n\t\t[ feature ]\n\t);\n\tconst { __unstableToggleFeature: toggleFeature } = useDispatch(\n\t\tcustomizeWidgetsStore\n\t);\n\tconst speakMessage = () => {\n\t\tif ( isActive ) {\n\t\t\tspeak( messageDeactivated || __( 'Feature deactivated' ) );\n\t\t} else {\n\t\t\tspeak( messageActivated || __( 'Feature activated' ) );\n\t\t}\n\t};\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive && check }\n\t\t\tisSelected={ isActive }\n\t\t\tonClick={ () => {\n\t\t\t\ttoggleFeature( feature );\n\t\t\t\tspeakMessage();\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tinfo={ info }\n\t\t\tshortcut={ shortcut }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"]}
|
package/build/store/defaults.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.PREFERENCES_DEFAULTS = void 0;
|
|
7
|
-
const PREFERENCES_DEFAULTS = {
|
|
8
|
-
features: {
|
|
9
|
-
fixedToolbar: false,
|
|
10
|
-
welcomeGuide: true
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
exports.PREFERENCES_DEFAULTS = PREFERENCES_DEFAULTS;
|
|
14
|
-
//# sourceMappingURL=defaults.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/customize-widgets/src/store/defaults.js"],"names":["PREFERENCES_DEFAULTS","features","fixedToolbar","welcomeGuide"],"mappings":";;;;;;AAAO,MAAMA,oBAAoB,GAAG;AACnCC,EAAAA,QAAQ,EAAE;AACTC,IAAAA,YAAY,EAAE,KADL;AAETC,IAAAA,YAAY,EAAE;AAFL;AADyB,CAA7B","sourcesContent":["export const PREFERENCES_DEFAULTS = {\n\tfeatures: {\n\t\tfixedToolbar: false,\n\t\twelcomeGuide: true,\n\t},\n};\n"]}
|