@wordpress/interface 5.28.4 → 5.30.0
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/CHANGELOG.md +8 -0
- package/README.md +0 -23
- package/build/components/complementary-area/index.js +3 -1
- package/build/components/complementary-area/index.js.map +1 -1
- package/build/components/complementary-area-header/index.js +1 -1
- package/build/components/complementary-area-header/index.js.map +1 -1
- package/build/components/index.js +0 -14
- package/build/components/index.js.map +1 -1
- package/build-module/components/complementary-area/index.js +3 -1
- package/build-module/components/complementary-area/index.js.map +1 -1
- package/build-module/components/complementary-area-header/index.js +1 -1
- package/build-module/components/complementary-area-header/index.js.map +1 -1
- package/build-module/components/index.js +0 -2
- package/build-module/components/index.js.map +1 -1
- package/build-style/style-rtl.css +4 -32
- package/build-style/style.css +4 -32
- package/package.json +14 -14
- package/src/components/complementary-area/index.js +3 -1
- package/src/components/complementary-area-header/index.js +2 -2
- package/src/components/complementary-area-header/style.scss +5 -0
- package/src/components/index.js +0 -2
- package/src/style.scss +0 -1
- package/build/components/more-menu-dropdown/index.js +0 -46
- package/build/components/more-menu-dropdown/index.js.map +0 -1
- package/build/components/more-menu-feature-toggle/index.js +0 -54
- package/build/components/more-menu-feature-toggle/index.js.map +0 -1
- package/build-module/components/more-menu-dropdown/index.js +0 -38
- package/build-module/components/more-menu-dropdown/index.js.map +0 -1
- package/build-module/components/more-menu-feature-toggle/index.js +0 -47
- package/build-module/components/more-menu-feature-toggle/index.js.map +0 -1
- package/src/components/more-menu-dropdown/README.md +0 -78
- package/src/components/more-menu-dropdown/index.js +0 -47
- package/src/components/more-menu-dropdown/style.scss +0 -34
- package/src/components/more-menu-feature-toggle/README.md +0 -59
- package/src/components/more-menu-feature-toggle/index.js +0 -53
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 5.30.0 (2024-03-06)
|
|
6
|
+
|
|
7
|
+
## Breaking Changes
|
|
8
|
+
|
|
9
|
+
- Removed `MoreMenuDropdown` component ([#59095](https://github.com/WordPress/gutenberg/pull/59095)).
|
|
10
|
+
|
|
11
|
+
## 5.29.0 (2024-02-21)
|
|
12
|
+
|
|
5
13
|
## 5.28.0 (2024-02-09)
|
|
6
14
|
|
|
7
15
|
## 5.27.0 (2024-01-24)
|
package/README.md
CHANGED
|
@@ -111,29 +111,6 @@ wp.data
|
|
|
111
111
|
.isFeatureActive( 'namespace/editor-or-plugin-name', 'myFeatureName' ); // false
|
|
112
112
|
```
|
|
113
113
|
|
|
114
|
-
The `MoreMenuDropdown` and `MoreMenuFeatureToggle` components help to implement an editor menu for changing preferences and feature values.
|
|
115
|
-
|
|
116
|
-
```jsx
|
|
117
|
-
function MyEditorMenu() {
|
|
118
|
-
return (
|
|
119
|
-
<MoreMenuDropdown>
|
|
120
|
-
{ () => (
|
|
121
|
-
<MenuGroup label={ __( 'Features' ) }>
|
|
122
|
-
<MoreMenuFeatureToggle
|
|
123
|
-
scope="namespace/editor-or-plugin-name"
|
|
124
|
-
feature="myFeatureName"
|
|
125
|
-
label={ __( 'My feature' ) }
|
|
126
|
-
info={ __( 'A really awesome feature' ) }
|
|
127
|
-
messageActivated={ __( 'My feature activated' ) }
|
|
128
|
-
messageDeactivated={ __( 'My feature deactivated' ) }
|
|
129
|
-
/>
|
|
130
|
-
</MenuGroup>
|
|
131
|
-
) }
|
|
132
|
-
</MoreMenuDropdown>
|
|
133
|
-
);
|
|
134
|
-
}
|
|
135
|
-
```
|
|
136
|
-
|
|
137
114
|
## Contributing to this package
|
|
138
115
|
|
|
139
116
|
This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
|
|
@@ -183,7 +183,9 @@ function ComplementaryArea({
|
|
|
183
183
|
scope,
|
|
184
184
|
identifier
|
|
185
185
|
}
|
|
186
|
-
}, header || (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("
|
|
186
|
+
}, header || (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("h2", {
|
|
187
|
+
className: "interface-complementary-area-header__title"
|
|
188
|
+
}, title), isPinnable && (0, _react.createElement)(_components.Button, {
|
|
187
189
|
className: "interface-complementary-area__pin-unpin-item",
|
|
188
190
|
icon: isPinned ? _icons.starFilled : _icons.starEmpty,
|
|
189
191
|
label: isPinned ? (0, _i18n.__)('Unpin from toolbar') : (0, _i18n.__)('Pin to toolbar'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_data","_i18n","_icons","_element","_viewport","_preferences","_complementaryAreaHeader","_complementaryAreaMoreMenuItem","_complementaryAreaToggle","_complementaryAreaContext","_pinnedItems","_store","ComplementaryAreaSlot","scope","props","_react","createElement","Slot","name","ComplementaryAreaFill","children","className","id","Fill","useAdjustComplementaryListener","identifier","activeArea","isActive","isSmall","previousIsSmall","useRef","shouldOpenWhenNotSmall","enableComplementaryArea","disableComplementaryArea","useDispatch","interfaceStore","useEffect","current","ComplementaryArea","closeLabel","__","header","headerClassName","icon","isPinnable","panelClassName","smallScreenTitle","title","toggleShortcut","isActiveByDefault","isLoading","isPinned","isLarge","showIconLabels","useSelect","select","getActiveComplementaryArea","isComplementaryAreaLoading","isItemPinned","get","preferencesStore","_activeArea","viewportStore","isViewportMatch","pinItem","unpinItem","undefined","Fragment","default","isPressed","label","check","showTooltip","variant","size","target","classnames","replace","onClose","toggleButtonProps","shortcut","Button","starFilled","starEmpty","onClick","Panel","ComplementaryAreaWrapped","withComplementaryAreaContext","_default","exports"],"sources":["@wordpress/interface/src/components/complementary-area/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Panel, Slot, Fill } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { check, starEmpty, starFilled } from '@wordpress/icons';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { store as viewportStore } from '@wordpress/viewport';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaHeader from '../complementary-area-header';\nimport ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport withComplementaryAreaContext from '../complementary-area-context';\nimport PinnedItems from '../pinned-items';\nimport { store as interfaceStore } from '../../store';\n\nfunction ComplementaryAreaSlot( { scope, ...props } ) {\n\treturn <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;\n}\n\nfunction ComplementaryAreaFill( { scope, children, className, id } ) {\n\treturn (\n\t\t<Fill name={ `ComplementaryArea/${ scope }` }>\n\t\t\t<div id={ id } className={ className }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Fill>\n\t);\n}\n\nfunction useAdjustComplementaryListener(\n\tscope,\n\tidentifier,\n\tactiveArea,\n\tisActive,\n\tisSmall\n) {\n\tconst previousIsSmall = useRef( false );\n\tconst shouldOpenWhenNotSmall = useRef( false );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\t// If the complementary area is active and the editor is switching from\n\t\t// a big to a small window size.\n\t\tif ( isActive && isSmall && ! previousIsSmall.current ) {\n\t\t\tdisableComplementaryArea( scope );\n\t\t\t// Flag the complementary area to be reopened when the window size\n\t\t\t// goes from small to big.\n\t\t\tshouldOpenWhenNotSmall.current = true;\n\t\t} else if (\n\t\t\t// If there is a flag indicating the complementary area should be\n\t\t\t// enabled when we go from small to big window size and we are going\n\t\t\t// from a small to big window size.\n\t\t\tshouldOpenWhenNotSmall.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmall.current\n\t\t) {\n\t\t\t// Remove the flag indicating the complementary area should be\n\t\t\t// enabled.\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if (\n\t\t\t// If the flag is indicating the current complementary should be\n\t\t\t// reopened but another complementary area becomes active, remove\n\t\t\t// the flag.\n\t\t\tshouldOpenWhenNotSmall.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmall.current ) {\n\t\t\tpreviousIsSmall.current = isSmall;\n\t\t}\n\t}, [\n\t\tisActive,\n\t\tisSmall,\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tdisableComplementaryArea,\n\t\tenableComplementaryArea,\n\t] );\n}\n\nfunction ComplementaryArea( {\n\tchildren,\n\tclassName,\n\tcloseLabel = __( 'Close plugin' ),\n\tidentifier,\n\theader,\n\theaderClassName,\n\ticon,\n\tisPinnable = true,\n\tpanelClassName,\n\tscope,\n\tname,\n\tsmallScreenTitle,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\n} ) {\n\tconst {\n\t\tisLoading,\n\t\tisActive,\n\t\tisPinned,\n\t\tactiveArea,\n\t\tisSmall,\n\t\tisLarge,\n\t\tshowIconLabels,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetActiveComplementaryArea,\n\t\t\t\tisComplementaryAreaLoading,\n\t\t\t\tisItemPinned,\n\t\t\t} = select( interfaceStore );\n\t\t\tconst { get } = select( preferencesStore );\n\n\t\t\tconst _activeArea = getActiveComplementaryArea( scope );\n\n\t\t\treturn {\n\t\t\t\tisLoading: isComplementaryAreaLoading( scope ),\n\t\t\t\tisActive: _activeArea === identifier,\n\t\t\t\tisPinned: isItemPinned( scope, identifier ),\n\t\t\t\tactiveArea: _activeArea,\n\t\t\t\tisSmall: select( viewportStore ).isViewportMatch( '< medium' ),\n\t\t\t\tisLarge: select( viewportStore ).isViewportMatch( 'large' ),\n\t\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\t};\n\t\t},\n\t\t[ identifier, scope ]\n\t);\n\tuseAdjustComplementaryListener(\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tisActive,\n\t\tisSmall\n\t);\n\tconst {\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t\tpinItem,\n\t\tunpinItem,\n\t} = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Set initial visibility: For large screens, enable if it's active by\n\t\t// default. For small screens, always initially disable.\n\t\tif ( isActiveByDefault && activeArea === undefined && ! isSmall ) {\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if ( activeArea === undefined && isSmall ) {\n\t\t\tdisableComplementaryArea( scope, identifier );\n\t\t}\n\t}, [\n\t\tactiveArea,\n\t\tisActiveByDefault,\n\t\tscope,\n\t\tidentifier,\n\t\tisSmall,\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t] );\n\n\treturn (\n\t\t<>\n\t\t\t{ isPinnable && (\n\t\t\t\t<PinnedItems scope={ scope }>\n\t\t\t\t\t{ isPinned && (\n\t\t\t\t\t\t<ComplementaryAreaToggle\n\t\t\t\t\t\t\tscope={ scope }\n\t\t\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisActive && ( ! showIconLabels || isLarge )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taria-expanded={ isActive }\n\t\t\t\t\t\t\taria-disabled={ isLoading }\n\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\ticon={ showIconLabels ? check : icon }\n\t\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PinnedItems>\n\t\t\t) }\n\t\t\t{ name && isPinnable && (\n\t\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\t\ttarget={ name }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t\t) }\n\t\t\t{ isActive && (\n\t\t\t\t<ComplementaryAreaFill\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'interface-complementary-area',\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\tid={ identifier.replace( '/', ':' ) }\n\t\t\t\t>\n\t\t\t\t\t<ComplementaryAreaHeader\n\t\t\t\t\t\tclassName={ headerClassName }\n\t\t\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\t\t\tonClose={ () => disableComplementaryArea( scope ) }\n\t\t\t\t\t\tsmallScreenTitle={ smallScreenTitle }\n\t\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\t\tshortcut: toggleShortcut,\n\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\tidentifier,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header || (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<strong>{ title }</strong>\n\t\t\t\t\t\t\t\t{ isPinnable && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tclassName=\"interface-complementary-area__pin-unpin-item\"\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisPinned ? starFilled : starEmpty\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tisPinned\n\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Unpin from toolbar' )\n\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Pin to toolbar' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t( isPinned ? unpinItem : pinItem )(\n\t\t\t\t\t\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\t\t\t\t\t\tidentifier\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tisPressed={ isPinned }\n\t\t\t\t\t\t\t\t\t\taria-expanded={ isPinned }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ComplementaryAreaHeader>\n\t\t\t\t\t<Panel className={ panelClassName }>{ children }</Panel>\n\t\t\t\t</ComplementaryAreaFill>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nconst ComplementaryAreaWrapped =\n\twithComplementaryAreaContext( ComplementaryArea );\n\nComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryAreaWrapped;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_data","_i18n","_icons","_element","_viewport","_preferences","_complementaryAreaHeader","_complementaryAreaMoreMenuItem","_complementaryAreaToggle","_complementaryAreaContext","_pinnedItems","_store","ComplementaryAreaSlot","scope","props","_react","createElement","Slot","name","ComplementaryAreaFill","children","className","id","Fill","useAdjustComplementaryListener","identifier","activeArea","isActive","isSmall","previousIsSmall","useRef","shouldOpenWhenNotSmall","enableComplementaryArea","disableComplementaryArea","useDispatch","interfaceStore","useEffect","current","ComplementaryArea","closeLabel","__","header","headerClassName","icon","isPinnable","panelClassName","smallScreenTitle","title","toggleShortcut","isActiveByDefault","isLoading","isPinned","isLarge","showIconLabels","useSelect","select","getActiveComplementaryArea","isComplementaryAreaLoading","isItemPinned","get","preferencesStore","_activeArea","viewportStore","isViewportMatch","pinItem","unpinItem","undefined","Fragment","default","isPressed","label","check","showTooltip","variant","size","target","classnames","replace","onClose","toggleButtonProps","shortcut","Button","starFilled","starEmpty","onClick","Panel","ComplementaryAreaWrapped","withComplementaryAreaContext","_default","exports"],"sources":["@wordpress/interface/src/components/complementary-area/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Panel, Slot, Fill } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { check, starEmpty, starFilled } from '@wordpress/icons';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { store as viewportStore } from '@wordpress/viewport';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaHeader from '../complementary-area-header';\nimport ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport withComplementaryAreaContext from '../complementary-area-context';\nimport PinnedItems from '../pinned-items';\nimport { store as interfaceStore } from '../../store';\n\nfunction ComplementaryAreaSlot( { scope, ...props } ) {\n\treturn <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;\n}\n\nfunction ComplementaryAreaFill( { scope, children, className, id } ) {\n\treturn (\n\t\t<Fill name={ `ComplementaryArea/${ scope }` }>\n\t\t\t<div id={ id } className={ className }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Fill>\n\t);\n}\n\nfunction useAdjustComplementaryListener(\n\tscope,\n\tidentifier,\n\tactiveArea,\n\tisActive,\n\tisSmall\n) {\n\tconst previousIsSmall = useRef( false );\n\tconst shouldOpenWhenNotSmall = useRef( false );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\t// If the complementary area is active and the editor is switching from\n\t\t// a big to a small window size.\n\t\tif ( isActive && isSmall && ! previousIsSmall.current ) {\n\t\t\tdisableComplementaryArea( scope );\n\t\t\t// Flag the complementary area to be reopened when the window size\n\t\t\t// goes from small to big.\n\t\t\tshouldOpenWhenNotSmall.current = true;\n\t\t} else if (\n\t\t\t// If there is a flag indicating the complementary area should be\n\t\t\t// enabled when we go from small to big window size and we are going\n\t\t\t// from a small to big window size.\n\t\t\tshouldOpenWhenNotSmall.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmall.current\n\t\t) {\n\t\t\t// Remove the flag indicating the complementary area should be\n\t\t\t// enabled.\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if (\n\t\t\t// If the flag is indicating the current complementary should be\n\t\t\t// reopened but another complementary area becomes active, remove\n\t\t\t// the flag.\n\t\t\tshouldOpenWhenNotSmall.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmall.current ) {\n\t\t\tpreviousIsSmall.current = isSmall;\n\t\t}\n\t}, [\n\t\tisActive,\n\t\tisSmall,\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tdisableComplementaryArea,\n\t\tenableComplementaryArea,\n\t] );\n}\n\nfunction ComplementaryArea( {\n\tchildren,\n\tclassName,\n\tcloseLabel = __( 'Close plugin' ),\n\tidentifier,\n\theader,\n\theaderClassName,\n\ticon,\n\tisPinnable = true,\n\tpanelClassName,\n\tscope,\n\tname,\n\tsmallScreenTitle,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\n} ) {\n\tconst {\n\t\tisLoading,\n\t\tisActive,\n\t\tisPinned,\n\t\tactiveArea,\n\t\tisSmall,\n\t\tisLarge,\n\t\tshowIconLabels,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetActiveComplementaryArea,\n\t\t\t\tisComplementaryAreaLoading,\n\t\t\t\tisItemPinned,\n\t\t\t} = select( interfaceStore );\n\t\t\tconst { get } = select( preferencesStore );\n\n\t\t\tconst _activeArea = getActiveComplementaryArea( scope );\n\n\t\t\treturn {\n\t\t\t\tisLoading: isComplementaryAreaLoading( scope ),\n\t\t\t\tisActive: _activeArea === identifier,\n\t\t\t\tisPinned: isItemPinned( scope, identifier ),\n\t\t\t\tactiveArea: _activeArea,\n\t\t\t\tisSmall: select( viewportStore ).isViewportMatch( '< medium' ),\n\t\t\t\tisLarge: select( viewportStore ).isViewportMatch( 'large' ),\n\t\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\t};\n\t\t},\n\t\t[ identifier, scope ]\n\t);\n\tuseAdjustComplementaryListener(\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tisActive,\n\t\tisSmall\n\t);\n\tconst {\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t\tpinItem,\n\t\tunpinItem,\n\t} = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Set initial visibility: For large screens, enable if it's active by\n\t\t// default. For small screens, always initially disable.\n\t\tif ( isActiveByDefault && activeArea === undefined && ! isSmall ) {\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if ( activeArea === undefined && isSmall ) {\n\t\t\tdisableComplementaryArea( scope, identifier );\n\t\t}\n\t}, [\n\t\tactiveArea,\n\t\tisActiveByDefault,\n\t\tscope,\n\t\tidentifier,\n\t\tisSmall,\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t] );\n\n\treturn (\n\t\t<>\n\t\t\t{ isPinnable && (\n\t\t\t\t<PinnedItems scope={ scope }>\n\t\t\t\t\t{ isPinned && (\n\t\t\t\t\t\t<ComplementaryAreaToggle\n\t\t\t\t\t\t\tscope={ scope }\n\t\t\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisActive && ( ! showIconLabels || isLarge )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taria-expanded={ isActive }\n\t\t\t\t\t\t\taria-disabled={ isLoading }\n\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\ticon={ showIconLabels ? check : icon }\n\t\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PinnedItems>\n\t\t\t) }\n\t\t\t{ name && isPinnable && (\n\t\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\t\ttarget={ name }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t\t) }\n\t\t\t{ isActive && (\n\t\t\t\t<ComplementaryAreaFill\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'interface-complementary-area',\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\tid={ identifier.replace( '/', ':' ) }\n\t\t\t\t>\n\t\t\t\t\t<ComplementaryAreaHeader\n\t\t\t\t\t\tclassName={ headerClassName }\n\t\t\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\t\t\tonClose={ () => disableComplementaryArea( scope ) }\n\t\t\t\t\t\tsmallScreenTitle={ smallScreenTitle }\n\t\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\t\tshortcut: toggleShortcut,\n\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\tidentifier,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header || (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t{ isPinnable && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tclassName=\"interface-complementary-area__pin-unpin-item\"\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisPinned ? starFilled : starEmpty\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tisPinned\n\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Unpin from toolbar' )\n\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Pin to toolbar' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t( isPinned ? unpinItem : pinItem )(\n\t\t\t\t\t\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\t\t\t\t\t\tidentifier\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tisPressed={ isPinned }\n\t\t\t\t\t\t\t\t\t\taria-expanded={ isPinned }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ComplementaryAreaHeader>\n\t\t\t\t\t<Panel className={ panelClassName }>{ children }</Panel>\n\t\t\t\t</ComplementaryAreaFill>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nconst ComplementaryAreaWrapped =\n\twithComplementaryAreaContext( ComplementaryArea );\n\nComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryAreaWrapped;\n"],"mappings":"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"}
|
|
@@ -33,7 +33,7 @@ const ComplementaryAreaHeader = ({
|
|
|
33
33
|
});
|
|
34
34
|
return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("div", {
|
|
35
35
|
className: "components-panel__header interface-complementary-area-header__small"
|
|
36
|
-
}, smallScreenTitle && (0, _react.createElement)("
|
|
36
|
+
}, smallScreenTitle && (0, _react.createElement)("h2", {
|
|
37
37
|
className: "interface-complementary-area-header__small-title"
|
|
38
38
|
}, smallScreenTitle), toggleButton), (0, _react.createElement)("div", {
|
|
39
39
|
className: (0, _classnames.default)('components-panel__header', 'interface-complementary-area-header', className),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_classnames","_interopRequireDefault","require","_icons","_complementaryAreaToggle","ComplementaryAreaHeader","smallScreenTitle","children","className","toggleButtonProps","toggleButton","_react","createElement","default","icon","closeSmall","Fragment","classnames","tabIndex","_default","exports"],"sources":["@wordpress/interface/src/components/complementary-area-header/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\n\nconst ComplementaryAreaHeader = ( {\n\tsmallScreenTitle,\n\tchildren,\n\tclassName,\n\ttoggleButtonProps,\n} ) => {\n\tconst toggleButton = (\n\t\t<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />\n\t);\n\treturn (\n\t\t<>\n\t\t\t<div className=\"components-panel__header interface-complementary-area-header__small\">\n\t\t\t\t{ smallScreenTitle && (\n\t\t\t\t\t<
|
|
1
|
+
{"version":3,"names":["_classnames","_interopRequireDefault","require","_icons","_complementaryAreaToggle","ComplementaryAreaHeader","smallScreenTitle","children","className","toggleButtonProps","toggleButton","_react","createElement","default","icon","closeSmall","Fragment","classnames","tabIndex","_default","exports"],"sources":["@wordpress/interface/src/components/complementary-area-header/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\n\nconst ComplementaryAreaHeader = ( {\n\tsmallScreenTitle,\n\tchildren,\n\tclassName,\n\ttoggleButtonProps,\n} ) => {\n\tconst toggleButton = (\n\t\t<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />\n\t);\n\treturn (\n\t\t<>\n\t\t\t<div className=\"components-panel__header interface-complementary-area-header__small\">\n\t\t\t\t{ smallScreenTitle && (\n\t\t\t\t\t<h2 className=\"interface-complementary-area-header__small-title\">\n\t\t\t\t\t\t{ smallScreenTitle }\n\t\t\t\t\t</h2>\n\t\t\t\t) }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-panel__header',\n\t\t\t\t\t'interface-complementary-area-header',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport default ComplementaryAreaHeader;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,wBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAMG,uBAAuB,GAAGA,CAAE;EACjCC,gBAAgB;EAChBC,QAAQ;EACRC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAMC,YAAY,GACjB,IAAAC,MAAA,CAAAC,aAAA,EAACR,wBAAA,CAAAS,OAAuB;IAACC,IAAI,EAAGC,iBAAY;IAAA,GAAMN;EAAiB,CAAI,CACvE;EACD,OACC,IAAAE,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAK,QAAA,QACC,IAAAL,MAAA,CAAAC,aAAA;IAAKJ,SAAS,EAAC;EAAqE,GACjFF,gBAAgB,IACjB,IAAAK,MAAA,CAAAC,aAAA;IAAIJ,SAAS,EAAC;EAAkD,GAC7DF,gBACC,CACJ,EACCI,YACE,CAAC,EACN,IAAAC,MAAA,CAAAC,aAAA;IACCJ,SAAS,EAAG,IAAAS,mBAAU,EACrB,0BAA0B,EAC1B,qCAAqC,EACrCT,SACD,CAAG;IACHU,QAAQ,EAAG,CAAC;EAAG,GAEbX,QAAQ,EACRG,YACE,CACJ,CAAC;AAEL,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAEaR,uBAAuB"}
|
|
@@ -34,18 +34,6 @@ Object.defineProperty(exports, "InterfaceSkeleton", {
|
|
|
34
34
|
return _interfaceSkeleton.default;
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
|
-
Object.defineProperty(exports, "MoreMenuDropdown", {
|
|
38
|
-
enumerable: true,
|
|
39
|
-
get: function () {
|
|
40
|
-
return _moreMenuDropdown.default;
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
Object.defineProperty(exports, "MoreMenuFeatureToggle", {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
get: function () {
|
|
46
|
-
return _moreMenuFeatureToggle.default;
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
37
|
Object.defineProperty(exports, "NavigableRegion", {
|
|
50
38
|
enumerable: true,
|
|
51
39
|
get: function () {
|
|
@@ -63,8 +51,6 @@ var _complementaryAreaMoreMenuItem = _interopRequireDefault(require("./complemen
|
|
|
63
51
|
var _fullscreenMode = _interopRequireDefault(require("./fullscreen-mode"));
|
|
64
52
|
var _interfaceSkeleton = _interopRequireDefault(require("./interface-skeleton"));
|
|
65
53
|
var _pinnedItems = _interopRequireDefault(require("./pinned-items"));
|
|
66
|
-
var _moreMenuDropdown = _interopRequireDefault(require("./more-menu-dropdown"));
|
|
67
|
-
var _moreMenuFeatureToggle = _interopRequireDefault(require("./more-menu-feature-toggle"));
|
|
68
54
|
var _actionItem = _interopRequireDefault(require("./action-item"));
|
|
69
55
|
var _navigableRegion = _interopRequireDefault(require("./navigable-region"));
|
|
70
56
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_complementaryArea","_interopRequireDefault","require","_complementaryAreaMoreMenuItem","_fullscreenMode","_interfaceSkeleton","_pinnedItems","
|
|
1
|
+
{"version":3,"names":["_complementaryArea","_interopRequireDefault","require","_complementaryAreaMoreMenuItem","_fullscreenMode","_interfaceSkeleton","_pinnedItems","_actionItem","_navigableRegion"],"sources":["@wordpress/interface/src/components/index.js"],"sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as ActionItem } from './action-item';\nexport { default as NavigableRegion } from './navigable-region';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,8BAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,eAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,kBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,YAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,WAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,gBAAA,GAAAP,sBAAA,CAAAC,OAAA"}
|
|
@@ -175,7 +175,9 @@ function ComplementaryArea({
|
|
|
175
175
|
scope,
|
|
176
176
|
identifier
|
|
177
177
|
}
|
|
178
|
-
}, header || createElement(Fragment, null, createElement("
|
|
178
|
+
}, header || createElement(Fragment, null, createElement("h2", {
|
|
179
|
+
className: "interface-complementary-area-header__title"
|
|
180
|
+
}, title), isPinnable && createElement(Button, {
|
|
179
181
|
className: "interface-complementary-area__pin-unpin-item",
|
|
180
182
|
icon: isPinned ? starFilled : starEmpty,
|
|
181
183
|
label: isPinned ? __('Unpin from toolbar') : __('Pin to toolbar'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["classnames","Button","Panel","Slot","Fill","useDispatch","useSelect","__","check","starEmpty","starFilled","useEffect","useRef","store","viewportStore","preferencesStore","ComplementaryAreaHeader","ComplementaryAreaMoreMenuItem","ComplementaryAreaToggle","withComplementaryAreaContext","PinnedItems","interfaceStore","ComplementaryAreaSlot","scope","props","createElement","name","ComplementaryAreaFill","children","className","id","useAdjustComplementaryListener","identifier","activeArea","isActive","isSmall","previousIsSmall","shouldOpenWhenNotSmall","enableComplementaryArea","disableComplementaryArea","current","ComplementaryArea","closeLabel","header","headerClassName","icon","isPinnable","panelClassName","smallScreenTitle","title","toggleShortcut","isActiveByDefault","isLoading","isPinned","isLarge","showIconLabels","select","getActiveComplementaryArea","isComplementaryAreaLoading","isItemPinned","get","_activeArea","isViewportMatch","pinItem","unpinItem","undefined","Fragment","isPressed","label","showTooltip","variant","size","target","replace","onClose","toggleButtonProps","shortcut","onClick","ComplementaryAreaWrapped"],"sources":["@wordpress/interface/src/components/complementary-area/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Panel, Slot, Fill } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { check, starEmpty, starFilled } from '@wordpress/icons';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { store as viewportStore } from '@wordpress/viewport';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaHeader from '../complementary-area-header';\nimport ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport withComplementaryAreaContext from '../complementary-area-context';\nimport PinnedItems from '../pinned-items';\nimport { store as interfaceStore } from '../../store';\n\nfunction ComplementaryAreaSlot( { scope, ...props } ) {\n\treturn <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;\n}\n\nfunction ComplementaryAreaFill( { scope, children, className, id } ) {\n\treturn (\n\t\t<Fill name={ `ComplementaryArea/${ scope }` }>\n\t\t\t<div id={ id } className={ className }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Fill>\n\t);\n}\n\nfunction useAdjustComplementaryListener(\n\tscope,\n\tidentifier,\n\tactiveArea,\n\tisActive,\n\tisSmall\n) {\n\tconst previousIsSmall = useRef( false );\n\tconst shouldOpenWhenNotSmall = useRef( false );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\t// If the complementary area is active and the editor is switching from\n\t\t// a big to a small window size.\n\t\tif ( isActive && isSmall && ! previousIsSmall.current ) {\n\t\t\tdisableComplementaryArea( scope );\n\t\t\t// Flag the complementary area to be reopened when the window size\n\t\t\t// goes from small to big.\n\t\t\tshouldOpenWhenNotSmall.current = true;\n\t\t} else if (\n\t\t\t// If there is a flag indicating the complementary area should be\n\t\t\t// enabled when we go from small to big window size and we are going\n\t\t\t// from a small to big window size.\n\t\t\tshouldOpenWhenNotSmall.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmall.current\n\t\t) {\n\t\t\t// Remove the flag indicating the complementary area should be\n\t\t\t// enabled.\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if (\n\t\t\t// If the flag is indicating the current complementary should be\n\t\t\t// reopened but another complementary area becomes active, remove\n\t\t\t// the flag.\n\t\t\tshouldOpenWhenNotSmall.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmall.current ) {\n\t\t\tpreviousIsSmall.current = isSmall;\n\t\t}\n\t}, [\n\t\tisActive,\n\t\tisSmall,\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tdisableComplementaryArea,\n\t\tenableComplementaryArea,\n\t] );\n}\n\nfunction ComplementaryArea( {\n\tchildren,\n\tclassName,\n\tcloseLabel = __( 'Close plugin' ),\n\tidentifier,\n\theader,\n\theaderClassName,\n\ticon,\n\tisPinnable = true,\n\tpanelClassName,\n\tscope,\n\tname,\n\tsmallScreenTitle,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\n} ) {\n\tconst {\n\t\tisLoading,\n\t\tisActive,\n\t\tisPinned,\n\t\tactiveArea,\n\t\tisSmall,\n\t\tisLarge,\n\t\tshowIconLabels,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetActiveComplementaryArea,\n\t\t\t\tisComplementaryAreaLoading,\n\t\t\t\tisItemPinned,\n\t\t\t} = select( interfaceStore );\n\t\t\tconst { get } = select( preferencesStore );\n\n\t\t\tconst _activeArea = getActiveComplementaryArea( scope );\n\n\t\t\treturn {\n\t\t\t\tisLoading: isComplementaryAreaLoading( scope ),\n\t\t\t\tisActive: _activeArea === identifier,\n\t\t\t\tisPinned: isItemPinned( scope, identifier ),\n\t\t\t\tactiveArea: _activeArea,\n\t\t\t\tisSmall: select( viewportStore ).isViewportMatch( '< medium' ),\n\t\t\t\tisLarge: select( viewportStore ).isViewportMatch( 'large' ),\n\t\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\t};\n\t\t},\n\t\t[ identifier, scope ]\n\t);\n\tuseAdjustComplementaryListener(\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tisActive,\n\t\tisSmall\n\t);\n\tconst {\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t\tpinItem,\n\t\tunpinItem,\n\t} = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Set initial visibility: For large screens, enable if it's active by\n\t\t// default. For small screens, always initially disable.\n\t\tif ( isActiveByDefault && activeArea === undefined && ! isSmall ) {\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if ( activeArea === undefined && isSmall ) {\n\t\t\tdisableComplementaryArea( scope, identifier );\n\t\t}\n\t}, [\n\t\tactiveArea,\n\t\tisActiveByDefault,\n\t\tscope,\n\t\tidentifier,\n\t\tisSmall,\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t] );\n\n\treturn (\n\t\t<>\n\t\t\t{ isPinnable && (\n\t\t\t\t<PinnedItems scope={ scope }>\n\t\t\t\t\t{ isPinned && (\n\t\t\t\t\t\t<ComplementaryAreaToggle\n\t\t\t\t\t\t\tscope={ scope }\n\t\t\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisActive && ( ! showIconLabels || isLarge )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taria-expanded={ isActive }\n\t\t\t\t\t\t\taria-disabled={ isLoading }\n\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\ticon={ showIconLabels ? check : icon }\n\t\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PinnedItems>\n\t\t\t) }\n\t\t\t{ name && isPinnable && (\n\t\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\t\ttarget={ name }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t\t) }\n\t\t\t{ isActive && (\n\t\t\t\t<ComplementaryAreaFill\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'interface-complementary-area',\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\tid={ identifier.replace( '/', ':' ) }\n\t\t\t\t>\n\t\t\t\t\t<ComplementaryAreaHeader\n\t\t\t\t\t\tclassName={ headerClassName }\n\t\t\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\t\t\tonClose={ () => disableComplementaryArea( scope ) }\n\t\t\t\t\t\tsmallScreenTitle={ smallScreenTitle }\n\t\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\t\tshortcut: toggleShortcut,\n\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\tidentifier,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header || (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<strong>{ title }</strong>\n\t\t\t\t\t\t\t\t{ isPinnable && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tclassName=\"interface-complementary-area__pin-unpin-item\"\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisPinned ? starFilled : starEmpty\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tisPinned\n\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Unpin from toolbar' )\n\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Pin to toolbar' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t( isPinned ? unpinItem : pinItem )(\n\t\t\t\t\t\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\t\t\t\t\t\tidentifier\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tisPressed={ isPinned }\n\t\t\t\t\t\t\t\t\t\taria-expanded={ isPinned }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ComplementaryAreaHeader>\n\t\t\t\t\t<Panel className={ panelClassName }>{ children }</Panel>\n\t\t\t\t</ComplementaryAreaFill>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nconst ComplementaryAreaWrapped =\n\twithComplementaryAreaContext( ComplementaryArea );\n\nComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryAreaWrapped;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["classnames","Button","Panel","Slot","Fill","useDispatch","useSelect","__","check","starEmpty","starFilled","useEffect","useRef","store","viewportStore","preferencesStore","ComplementaryAreaHeader","ComplementaryAreaMoreMenuItem","ComplementaryAreaToggle","withComplementaryAreaContext","PinnedItems","interfaceStore","ComplementaryAreaSlot","scope","props","createElement","name","ComplementaryAreaFill","children","className","id","useAdjustComplementaryListener","identifier","activeArea","isActive","isSmall","previousIsSmall","shouldOpenWhenNotSmall","enableComplementaryArea","disableComplementaryArea","current","ComplementaryArea","closeLabel","header","headerClassName","icon","isPinnable","panelClassName","smallScreenTitle","title","toggleShortcut","isActiveByDefault","isLoading","isPinned","isLarge","showIconLabels","select","getActiveComplementaryArea","isComplementaryAreaLoading","isItemPinned","get","_activeArea","isViewportMatch","pinItem","unpinItem","undefined","Fragment","isPressed","label","showTooltip","variant","size","target","replace","onClose","toggleButtonProps","shortcut","onClick","ComplementaryAreaWrapped"],"sources":["@wordpress/interface/src/components/complementary-area/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Panel, Slot, Fill } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { check, starEmpty, starFilled } from '@wordpress/icons';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { store as viewportStore } from '@wordpress/viewport';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaHeader from '../complementary-area-header';\nimport ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport withComplementaryAreaContext from '../complementary-area-context';\nimport PinnedItems from '../pinned-items';\nimport { store as interfaceStore } from '../../store';\n\nfunction ComplementaryAreaSlot( { scope, ...props } ) {\n\treturn <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;\n}\n\nfunction ComplementaryAreaFill( { scope, children, className, id } ) {\n\treturn (\n\t\t<Fill name={ `ComplementaryArea/${ scope }` }>\n\t\t\t<div id={ id } className={ className }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Fill>\n\t);\n}\n\nfunction useAdjustComplementaryListener(\n\tscope,\n\tidentifier,\n\tactiveArea,\n\tisActive,\n\tisSmall\n) {\n\tconst previousIsSmall = useRef( false );\n\tconst shouldOpenWhenNotSmall = useRef( false );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\t// If the complementary area is active and the editor is switching from\n\t\t// a big to a small window size.\n\t\tif ( isActive && isSmall && ! previousIsSmall.current ) {\n\t\t\tdisableComplementaryArea( scope );\n\t\t\t// Flag the complementary area to be reopened when the window size\n\t\t\t// goes from small to big.\n\t\t\tshouldOpenWhenNotSmall.current = true;\n\t\t} else if (\n\t\t\t// If there is a flag indicating the complementary area should be\n\t\t\t// enabled when we go from small to big window size and we are going\n\t\t\t// from a small to big window size.\n\t\t\tshouldOpenWhenNotSmall.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmall.current\n\t\t) {\n\t\t\t// Remove the flag indicating the complementary area should be\n\t\t\t// enabled.\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if (\n\t\t\t// If the flag is indicating the current complementary should be\n\t\t\t// reopened but another complementary area becomes active, remove\n\t\t\t// the flag.\n\t\t\tshouldOpenWhenNotSmall.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmall.current ) {\n\t\t\tpreviousIsSmall.current = isSmall;\n\t\t}\n\t}, [\n\t\tisActive,\n\t\tisSmall,\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tdisableComplementaryArea,\n\t\tenableComplementaryArea,\n\t] );\n}\n\nfunction ComplementaryArea( {\n\tchildren,\n\tclassName,\n\tcloseLabel = __( 'Close plugin' ),\n\tidentifier,\n\theader,\n\theaderClassName,\n\ticon,\n\tisPinnable = true,\n\tpanelClassName,\n\tscope,\n\tname,\n\tsmallScreenTitle,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\n} ) {\n\tconst {\n\t\tisLoading,\n\t\tisActive,\n\t\tisPinned,\n\t\tactiveArea,\n\t\tisSmall,\n\t\tisLarge,\n\t\tshowIconLabels,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetActiveComplementaryArea,\n\t\t\t\tisComplementaryAreaLoading,\n\t\t\t\tisItemPinned,\n\t\t\t} = select( interfaceStore );\n\t\t\tconst { get } = select( preferencesStore );\n\n\t\t\tconst _activeArea = getActiveComplementaryArea( scope );\n\n\t\t\treturn {\n\t\t\t\tisLoading: isComplementaryAreaLoading( scope ),\n\t\t\t\tisActive: _activeArea === identifier,\n\t\t\t\tisPinned: isItemPinned( scope, identifier ),\n\t\t\t\tactiveArea: _activeArea,\n\t\t\t\tisSmall: select( viewportStore ).isViewportMatch( '< medium' ),\n\t\t\t\tisLarge: select( viewportStore ).isViewportMatch( 'large' ),\n\t\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\t};\n\t\t},\n\t\t[ identifier, scope ]\n\t);\n\tuseAdjustComplementaryListener(\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tisActive,\n\t\tisSmall\n\t);\n\tconst {\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t\tpinItem,\n\t\tunpinItem,\n\t} = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Set initial visibility: For large screens, enable if it's active by\n\t\t// default. For small screens, always initially disable.\n\t\tif ( isActiveByDefault && activeArea === undefined && ! isSmall ) {\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if ( activeArea === undefined && isSmall ) {\n\t\t\tdisableComplementaryArea( scope, identifier );\n\t\t}\n\t}, [\n\t\tactiveArea,\n\t\tisActiveByDefault,\n\t\tscope,\n\t\tidentifier,\n\t\tisSmall,\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t] );\n\n\treturn (\n\t\t<>\n\t\t\t{ isPinnable && (\n\t\t\t\t<PinnedItems scope={ scope }>\n\t\t\t\t\t{ isPinned && (\n\t\t\t\t\t\t<ComplementaryAreaToggle\n\t\t\t\t\t\t\tscope={ scope }\n\t\t\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisActive && ( ! showIconLabels || isLarge )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taria-expanded={ isActive }\n\t\t\t\t\t\t\taria-disabled={ isLoading }\n\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\ticon={ showIconLabels ? check : icon }\n\t\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PinnedItems>\n\t\t\t) }\n\t\t\t{ name && isPinnable && (\n\t\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\t\ttarget={ name }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t\t) }\n\t\t\t{ isActive && (\n\t\t\t\t<ComplementaryAreaFill\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'interface-complementary-area',\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\tid={ identifier.replace( '/', ':' ) }\n\t\t\t\t>\n\t\t\t\t\t<ComplementaryAreaHeader\n\t\t\t\t\t\tclassName={ headerClassName }\n\t\t\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\t\t\tonClose={ () => disableComplementaryArea( scope ) }\n\t\t\t\t\t\tsmallScreenTitle={ smallScreenTitle }\n\t\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\t\tshortcut: toggleShortcut,\n\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\tidentifier,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header || (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t{ isPinnable && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tclassName=\"interface-complementary-area__pin-unpin-item\"\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisPinned ? starFilled : starEmpty\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tisPinned\n\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Unpin from toolbar' )\n\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Pin to toolbar' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t( isPinned ? unpinItem : pinItem )(\n\t\t\t\t\t\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\t\t\t\t\t\tidentifier\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tisPressed={ isPinned }\n\t\t\t\t\t\t\t\t\t\taria-expanded={ isPinned }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ComplementaryAreaHeader>\n\t\t\t\t\t<Panel className={ panelClassName }>{ children }</Panel>\n\t\t\t\t</ComplementaryAreaFill>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nconst ComplementaryAreaWrapped =\n\twithComplementaryAreaContext( ComplementaryArea );\n\nComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryAreaWrapped;\n"],"mappings":"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"}
|
|
@@ -25,7 +25,7 @@ const ComplementaryAreaHeader = ({
|
|
|
25
25
|
});
|
|
26
26
|
return createElement(Fragment, null, createElement("div", {
|
|
27
27
|
className: "components-panel__header interface-complementary-area-header__small"
|
|
28
|
-
}, smallScreenTitle && createElement("
|
|
28
|
+
}, smallScreenTitle && createElement("h2", {
|
|
29
29
|
className: "interface-complementary-area-header__small-title"
|
|
30
30
|
}, smallScreenTitle), toggleButton), createElement("div", {
|
|
31
31
|
className: classnames('components-panel__header', 'interface-complementary-area-header', className),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["classnames","closeSmall","ComplementaryAreaToggle","ComplementaryAreaHeader","smallScreenTitle","children","className","toggleButtonProps","toggleButton","createElement","icon","Fragment","tabIndex"],"sources":["@wordpress/interface/src/components/complementary-area-header/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\n\nconst ComplementaryAreaHeader = ( {\n\tsmallScreenTitle,\n\tchildren,\n\tclassName,\n\ttoggleButtonProps,\n} ) => {\n\tconst toggleButton = (\n\t\t<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />\n\t);\n\treturn (\n\t\t<>\n\t\t\t<div className=\"components-panel__header interface-complementary-area-header__small\">\n\t\t\t\t{ smallScreenTitle && (\n\t\t\t\t\t<
|
|
1
|
+
{"version":3,"names":["classnames","closeSmall","ComplementaryAreaToggle","ComplementaryAreaHeader","smallScreenTitle","children","className","toggleButtonProps","toggleButton","createElement","icon","Fragment","tabIndex"],"sources":["@wordpress/interface/src/components/complementary-area-header/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\n\nconst ComplementaryAreaHeader = ( {\n\tsmallScreenTitle,\n\tchildren,\n\tclassName,\n\ttoggleButtonProps,\n} ) => {\n\tconst toggleButton = (\n\t\t<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />\n\t);\n\treturn (\n\t\t<>\n\t\t\t<div className=\"components-panel__header interface-complementary-area-header__small\">\n\t\t\t\t{ smallScreenTitle && (\n\t\t\t\t\t<h2 className=\"interface-complementary-area-header__small-title\">\n\t\t\t\t\t\t{ smallScreenTitle }\n\t\t\t\t\t</h2>\n\t\t\t\t) }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-panel__header',\n\t\t\t\t\t'interface-complementary-area-header',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport default ComplementaryAreaHeader;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,kBAAkB;;AAE7C;AACA;AACA;AACA,OAAOC,uBAAuB,MAAM,8BAA8B;AAElE,MAAMC,uBAAuB,GAAGA,CAAE;EACjCC,gBAAgB;EAChBC,QAAQ;EACRC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAMC,YAAY,GACjBC,aAAA,CAACP,uBAAuB;IAACQ,IAAI,EAAGT,UAAY;IAAA,GAAMM;EAAiB,CAAI,CACvE;EACD,OACCE,aAAA,CAAAE,QAAA,QACCF,aAAA;IAAKH,SAAS,EAAC;EAAqE,GACjFF,gBAAgB,IACjBK,aAAA;IAAIH,SAAS,EAAC;EAAkD,GAC7DF,gBACC,CACJ,EACCI,YACE,CAAC,EACNC,aAAA;IACCH,SAAS,EAAGN,UAAU,CACrB,0BAA0B,EAC1B,qCAAqC,EACrCM,SACD,CAAG;IACHM,QAAQ,EAAG,CAAC;EAAG,GAEbP,QAAQ,EACRG,YACE,CACJ,CAAC;AAEL,CAAC;AAED,eAAeL,uBAAuB"}
|
|
@@ -3,8 +3,6 @@ export { default as ComplementaryAreaMoreMenuItem } from './complementary-area-m
|
|
|
3
3
|
export { default as FullscreenMode } from './fullscreen-mode';
|
|
4
4
|
export { default as InterfaceSkeleton } from './interface-skeleton';
|
|
5
5
|
export { default as PinnedItems } from './pinned-items';
|
|
6
|
-
export { default as MoreMenuDropdown } from './more-menu-dropdown';
|
|
7
|
-
export { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';
|
|
8
6
|
export { default as ActionItem } from './action-item';
|
|
9
7
|
export { default as NavigableRegion } from './navigable-region';
|
|
10
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","ComplementaryArea","ComplementaryAreaMoreMenuItem","FullscreenMode","InterfaceSkeleton","PinnedItems","
|
|
1
|
+
{"version":3,"names":["default","ComplementaryArea","ComplementaryAreaMoreMenuItem","FullscreenMode","InterfaceSkeleton","PinnedItems","ActionItem","NavigableRegion"],"sources":["@wordpress/interface/src/components/index.js"],"sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as ActionItem } from './action-item';\nexport { default as NavigableRegion } from './navigable-region';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAAiB,QAAQ,sBAAsB;AACnE,SAASD,OAAO,IAAIE,6BAA6B,QAAQ,qCAAqC;AAC9F,SAASF,OAAO,IAAIG,cAAc,QAAQ,mBAAmB;AAC7D,SAASH,OAAO,IAAII,iBAAiB,QAAQ,sBAAsB;AACnE,SAASJ,OAAO,IAAIK,WAAW,QAAQ,gBAAgB;AACvD,SAASL,OAAO,IAAIM,UAAU,QAAQ,eAAe;AACrD,SAASN,OAAO,IAAIO,eAAe,QAAQ,oBAAoB"}
|
|
@@ -113,6 +113,7 @@
|
|
|
113
113
|
text-overflow: ellipsis;
|
|
114
114
|
white-space: nowrap;
|
|
115
115
|
width: 100%;
|
|
116
|
+
margin: 0;
|
|
116
117
|
}
|
|
117
118
|
@media (min-width: 782px) {
|
|
118
119
|
.components-panel__header.interface-complementary-area-header__small {
|
|
@@ -124,6 +125,9 @@
|
|
|
124
125
|
background: #fff;
|
|
125
126
|
padding-left: 4px;
|
|
126
127
|
}
|
|
128
|
+
.interface-complementary-area-header .interface-complementary-area-header__title {
|
|
129
|
+
margin: 0;
|
|
130
|
+
}
|
|
127
131
|
.interface-complementary-area-header .components-button.has-icon {
|
|
128
132
|
display: none;
|
|
129
133
|
margin-right: auto;
|
|
@@ -435,38 +439,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
435
439
|
}
|
|
436
440
|
}
|
|
437
441
|
|
|
438
|
-
.interface-more-menu-dropdown {
|
|
439
|
-
margin-right: -4px;
|
|
440
|
-
}
|
|
441
|
-
.interface-more-menu-dropdown .components-button {
|
|
442
|
-
width: auto;
|
|
443
|
-
padding: 0 2px;
|
|
444
|
-
}
|
|
445
|
-
@media (min-width: 600px) {
|
|
446
|
-
.interface-more-menu-dropdown {
|
|
447
|
-
margin-right: 0;
|
|
448
|
-
}
|
|
449
|
-
.interface-more-menu-dropdown .components-button {
|
|
450
|
-
padding: 0 4px;
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
.interface-more-menu-dropdown__content .components-popover__content {
|
|
455
|
-
min-width: 300px;
|
|
456
|
-
}
|
|
457
|
-
@media (min-width: 480px) {
|
|
458
|
-
.interface-more-menu-dropdown__content .components-popover__content {
|
|
459
|
-
max-width: 480px;
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
.interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu {
|
|
463
|
-
padding: 0;
|
|
464
|
-
}
|
|
465
|
-
|
|
466
|
-
.components-popover.interface-more-menu-dropdown__content {
|
|
467
|
-
z-index: 99998;
|
|
468
|
-
}
|
|
469
|
-
|
|
470
442
|
.interface-pinned-items {
|
|
471
443
|
display: flex;
|
|
472
444
|
gap: 8px;
|
package/build-style/style.css
CHANGED
|
@@ -113,6 +113,7 @@
|
|
|
113
113
|
text-overflow: ellipsis;
|
|
114
114
|
white-space: nowrap;
|
|
115
115
|
width: 100%;
|
|
116
|
+
margin: 0;
|
|
116
117
|
}
|
|
117
118
|
@media (min-width: 782px) {
|
|
118
119
|
.components-panel__header.interface-complementary-area-header__small {
|
|
@@ -124,6 +125,9 @@
|
|
|
124
125
|
background: #fff;
|
|
125
126
|
padding-right: 4px;
|
|
126
127
|
}
|
|
128
|
+
.interface-complementary-area-header .interface-complementary-area-header__title {
|
|
129
|
+
margin: 0;
|
|
130
|
+
}
|
|
127
131
|
.interface-complementary-area-header .components-button.has-icon {
|
|
128
132
|
display: none;
|
|
129
133
|
margin-left: auto;
|
|
@@ -435,38 +439,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
435
439
|
}
|
|
436
440
|
}
|
|
437
441
|
|
|
438
|
-
.interface-more-menu-dropdown {
|
|
439
|
-
margin-left: -4px;
|
|
440
|
-
}
|
|
441
|
-
.interface-more-menu-dropdown .components-button {
|
|
442
|
-
width: auto;
|
|
443
|
-
padding: 0 2px;
|
|
444
|
-
}
|
|
445
|
-
@media (min-width: 600px) {
|
|
446
|
-
.interface-more-menu-dropdown {
|
|
447
|
-
margin-left: 0;
|
|
448
|
-
}
|
|
449
|
-
.interface-more-menu-dropdown .components-button {
|
|
450
|
-
padding: 0 4px;
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
.interface-more-menu-dropdown__content .components-popover__content {
|
|
455
|
-
min-width: 300px;
|
|
456
|
-
}
|
|
457
|
-
@media (min-width: 480px) {
|
|
458
|
-
.interface-more-menu-dropdown__content .components-popover__content {
|
|
459
|
-
max-width: 480px;
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
.interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu {
|
|
463
|
-
padding: 0;
|
|
464
|
-
}
|
|
465
|
-
|
|
466
|
-
.components-popover.interface-more-menu-dropdown__content {
|
|
467
|
-
z-index: 99998;
|
|
468
|
-
}
|
|
469
|
-
|
|
470
442
|
.interface-pinned-items {
|
|
471
443
|
display: flex;
|
|
472
444
|
gap: 8px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/interface",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.30.0",
|
|
4
4
|
"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -32,18 +32,18 @@
|
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.16.0",
|
|
35
|
-
"@wordpress/a11y": "^3.
|
|
36
|
-
"@wordpress/components": "^
|
|
37
|
-
"@wordpress/compose": "^6.
|
|
38
|
-
"@wordpress/data": "^9.
|
|
39
|
-
"@wordpress/deprecated": "^3.
|
|
40
|
-
"@wordpress/element": "^5.
|
|
41
|
-
"@wordpress/i18n": "^4.
|
|
42
|
-
"@wordpress/icons": "^9.
|
|
43
|
-
"@wordpress/plugins": "^6.
|
|
44
|
-
"@wordpress/preferences": "^3.
|
|
45
|
-
"@wordpress/private-apis": "^0.
|
|
46
|
-
"@wordpress/viewport": "^5.
|
|
35
|
+
"@wordpress/a11y": "^3.53.0",
|
|
36
|
+
"@wordpress/components": "^27.1.0",
|
|
37
|
+
"@wordpress/compose": "^6.30.0",
|
|
38
|
+
"@wordpress/data": "^9.23.0",
|
|
39
|
+
"@wordpress/deprecated": "^3.53.0",
|
|
40
|
+
"@wordpress/element": "^5.30.0",
|
|
41
|
+
"@wordpress/i18n": "^4.53.0",
|
|
42
|
+
"@wordpress/icons": "^9.44.0",
|
|
43
|
+
"@wordpress/plugins": "^6.21.0",
|
|
44
|
+
"@wordpress/preferences": "^3.30.0",
|
|
45
|
+
"@wordpress/private-apis": "^0.35.0",
|
|
46
|
+
"@wordpress/viewport": "^5.30.0",
|
|
47
47
|
"classnames": "^2.3.1"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"publishConfig": {
|
|
54
54
|
"access": "public"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
|
|
57
57
|
}
|
|
@@ -227,7 +227,9 @@ function ComplementaryArea( {
|
|
|
227
227
|
>
|
|
228
228
|
{ header || (
|
|
229
229
|
<>
|
|
230
|
-
<
|
|
230
|
+
<h2 className="interface-complementary-area-header__title">
|
|
231
|
+
{ title }
|
|
232
|
+
</h2>
|
|
231
233
|
{ isPinnable && (
|
|
232
234
|
<Button
|
|
233
235
|
className="interface-complementary-area__pin-unpin-item"
|
|
@@ -26,9 +26,9 @@ const ComplementaryAreaHeader = ( {
|
|
|
26
26
|
<>
|
|
27
27
|
<div className="components-panel__header interface-complementary-area-header__small">
|
|
28
28
|
{ smallScreenTitle && (
|
|
29
|
-
<
|
|
29
|
+
<h2 className="interface-complementary-area-header__small-title">
|
|
30
30
|
{ smallScreenTitle }
|
|
31
|
-
</
|
|
31
|
+
</h2>
|
|
32
32
|
) }
|
|
33
33
|
{ toggleButton }
|
|
34
34
|
</div>
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
text-overflow: ellipsis;
|
|
8
8
|
white-space: nowrap;
|
|
9
9
|
width: 100%;
|
|
10
|
+
margin: 0;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
@include break-medium() {
|
|
@@ -18,6 +19,10 @@
|
|
|
18
19
|
background: $white;
|
|
19
20
|
padding-right: $grid-unit-05;
|
|
20
21
|
|
|
22
|
+
.interface-complementary-area-header__title {
|
|
23
|
+
margin: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
21
26
|
.components-button.has-icon {
|
|
22
27
|
display: none;
|
|
23
28
|
margin-left: auto;
|
package/src/components/index.js
CHANGED
|
@@ -3,7 +3,5 @@ export { default as ComplementaryAreaMoreMenuItem } from './complementary-area-m
|
|
|
3
3
|
export { default as FullscreenMode } from './fullscreen-mode';
|
|
4
4
|
export { default as InterfaceSkeleton } from './interface-skeleton';
|
|
5
5
|
export { default as PinnedItems } from './pinned-items';
|
|
6
|
-
export { default as MoreMenuDropdown } from './more-menu-dropdown';
|
|
7
|
-
export { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';
|
|
8
6
|
export { default as ActionItem } from './action-item';
|
|
9
7
|
export { default as NavigableRegion } from './navigable-region';
|
package/src/style.scss
CHANGED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = MoreMenuDropdown;
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
var _components = require("@wordpress/components");
|
|
11
|
-
var _i18n = require("@wordpress/i18n");
|
|
12
|
-
var _icons = require("@wordpress/icons");
|
|
13
|
-
/**
|
|
14
|
-
* External dependencies
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* WordPress dependencies
|
|
19
|
-
*/
|
|
20
|
-
|
|
21
|
-
function MoreMenuDropdown({
|
|
22
|
-
as: DropdownComponent = _components.DropdownMenu,
|
|
23
|
-
className,
|
|
24
|
-
/* translators: button label text should, if possible, be under 16 characters. */
|
|
25
|
-
label = (0, _i18n.__)('Options'),
|
|
26
|
-
popoverProps,
|
|
27
|
-
toggleProps,
|
|
28
|
-
children
|
|
29
|
-
}) {
|
|
30
|
-
return (0, _react.createElement)(DropdownComponent, {
|
|
31
|
-
className: (0, _classnames.default)('interface-more-menu-dropdown', className),
|
|
32
|
-
icon: _icons.moreVertical,
|
|
33
|
-
label: label,
|
|
34
|
-
popoverProps: {
|
|
35
|
-
placement: 'bottom-end',
|
|
36
|
-
...popoverProps,
|
|
37
|
-
className: (0, _classnames.default)('interface-more-menu-dropdown__content', popoverProps?.className)
|
|
38
|
-
},
|
|
39
|
-
toggleProps: {
|
|
40
|
-
tooltipPosition: 'bottom',
|
|
41
|
-
...toggleProps,
|
|
42
|
-
size: 'compact'
|
|
43
|
-
}
|
|
44
|
-
}, onClose => children(onClose));
|
|
45
|
-
}
|
|
46
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_i18n","_icons","MoreMenuDropdown","as","DropdownComponent","DropdownMenu","className","label","__","popoverProps","toggleProps","children","_react","createElement","classnames","icon","moreVertical","placement","tooltipPosition","size","onClose"],"sources":["@wordpress/interface/src/components/more-menu-dropdown/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { DropdownMenu } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\n\nexport default function MoreMenuDropdown( {\n\tas: DropdownComponent = DropdownMenu,\n\tclassName,\n\t/* translators: button label text should, if possible, be under 16 characters. */\n\tlabel = __( 'Options' ),\n\tpopoverProps,\n\ttoggleProps,\n\tchildren,\n} ) {\n\treturn (\n\t\t<DropdownComponent\n\t\t\tclassName={ classnames(\n\t\t\t\t'interface-more-menu-dropdown',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ticon={ moreVertical }\n\t\t\tlabel={ label }\n\t\t\tpopoverProps={ {\n\t\t\t\tplacement: 'bottom-end',\n\t\t\t\t...popoverProps,\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'interface-more-menu-dropdown__content',\n\t\t\t\t\tpopoverProps?.className\n\t\t\t\t),\n\t\t\t} }\n\t\t\ttoggleProps={ {\n\t\t\t\ttooltipPosition: 'bottom',\n\t\t\t\t...toggleProps,\n\t\t\t\tsize: 'compact',\n\t\t\t} }\n\t\t>\n\t\t\t{ ( onClose ) => children( onClose ) }\n\t\t</DropdownComponent>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASI,gBAAgBA,CAAE;EACzCC,EAAE,EAAEC,iBAAiB,GAAGC,wBAAY;EACpCC,SAAS;EACT;EACAC,KAAK,GAAG,IAAAC,QAAE,EAAE,SAAU,CAAC;EACvBC,YAAY;EACZC,WAAW;EACXC;AACD,CAAC,EAAG;EACH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACT,iBAAiB;IACjBE,SAAS,EAAG,IAAAQ,mBAAU,EACrB,8BAA8B,EAC9BR,SACD,CAAG;IACHS,IAAI,EAAGC,mBAAc;IACrBT,KAAK,EAAGA,KAAO;IACfE,YAAY,EAAG;MACdQ,SAAS,EAAE,YAAY;MACvB,GAAGR,YAAY;MACfH,SAAS,EAAE,IAAAQ,mBAAU,EACpB,uCAAuC,EACvCL,YAAY,EAAEH,SACf;IACD,CAAG;IACHI,WAAW,EAAG;MACbQ,eAAe,EAAE,QAAQ;MACzB,GAAGR,WAAW;MACdS,IAAI,EAAE;IACP;EAAG,GAECC,OAAO,IAAMT,QAAQ,CAAES,OAAQ,CACjB,CAAC;AAEtB"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = MoreMenuFeatureToggle;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _data = require("@wordpress/data");
|
|
9
|
-
var _components = require("@wordpress/components");
|
|
10
|
-
var _i18n = require("@wordpress/i18n");
|
|
11
|
-
var _icons = require("@wordpress/icons");
|
|
12
|
-
var _a11y = require("@wordpress/a11y");
|
|
13
|
-
var _store = require("../../store");
|
|
14
|
-
/**
|
|
15
|
-
* WordPress dependencies
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Internal dependencies
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
function MoreMenuFeatureToggle({
|
|
23
|
-
scope,
|
|
24
|
-
label,
|
|
25
|
-
info,
|
|
26
|
-
messageActivated,
|
|
27
|
-
messageDeactivated,
|
|
28
|
-
shortcut,
|
|
29
|
-
feature
|
|
30
|
-
}) {
|
|
31
|
-
const isActive = (0, _data.useSelect)(select => select(_store.store).isFeatureActive(scope, feature), [feature, scope]);
|
|
32
|
-
const {
|
|
33
|
-
toggleFeature
|
|
34
|
-
} = (0, _data.useDispatch)(_store.store);
|
|
35
|
-
const speakMessage = () => {
|
|
36
|
-
if (isActive) {
|
|
37
|
-
(0, _a11y.speak)(messageDeactivated || (0, _i18n.__)('Feature deactivated'));
|
|
38
|
-
} else {
|
|
39
|
-
(0, _a11y.speak)(messageActivated || (0, _i18n.__)('Feature activated'));
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
return (0, _react.createElement)(_components.MenuItem, {
|
|
43
|
-
icon: isActive && _icons.check,
|
|
44
|
-
isSelected: isActive,
|
|
45
|
-
onClick: () => {
|
|
46
|
-
toggleFeature(scope, feature);
|
|
47
|
-
speakMessage();
|
|
48
|
-
},
|
|
49
|
-
role: "menuitemcheckbox",
|
|
50
|
-
info: info,
|
|
51
|
-
shortcut: shortcut
|
|
52
|
-
}, label);
|
|
53
|
-
}
|
|
54
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_data","require","_components","_i18n","_icons","_a11y","_store","MoreMenuFeatureToggle","scope","label","info","messageActivated","messageDeactivated","shortcut","feature","isActive","useSelect","select","interfaceStore","isFeatureActive","toggleFeature","useDispatch","speakMessage","speak","__","_react","createElement","MenuItem","icon","check","isSelected","onClick","role"],"sources":["@wordpress/interface/src/components/more-menu-feature-toggle/index.js"],"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 interfaceStore } from '../../store';\n\nexport default function MoreMenuFeatureToggle( {\n\tscope,\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( interfaceStore ).isFeatureActive( scope, feature ),\n\t\t[ feature, scope ]\n\t);\n\tconst { toggleFeature } = useDispatch( interfaceStore );\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( scope, 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"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAOA;AACA;AACA;;AAGe,SAASM,qBAAqBA,CAAE;EAC9CC,KAAK;EACLC,KAAK;EACLC,IAAI;EACJC,gBAAgB;EAChBC,kBAAkB;EAClBC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,MAAMC,QAAQ,GAAG,IAAAC,eAAS,EACvBC,MAAM,IACPA,MAAM,CAAEC,YAAe,CAAC,CAACC,eAAe,CAAEX,KAAK,EAAEM,OAAQ,CAAC,EAC3D,CAAEA,OAAO,EAAEN,KAAK,CACjB,CAAC;EACD,MAAM;IAAEY;EAAc,CAAC,GAAG,IAAAC,iBAAW,EAAEH,YAAe,CAAC;EACvD,MAAMI,YAAY,GAAGA,CAAA,KAAM;IAC1B,IAAKP,QAAQ,EAAG;MACf,IAAAQ,WAAK,EAAEX,kBAAkB,IAAI,IAAAY,QAAE,EAAE,qBAAsB,CAAE,CAAC;IAC3D,CAAC,MAAM;MACN,IAAAD,WAAK,EAAEZ,gBAAgB,IAAI,IAAAa,QAAE,EAAE,mBAAoB,CAAE,CAAC;IACvD;EACD,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAAyB,QAAQ;IACRC,IAAI,EAAGb,QAAQ,IAAIc,YAAO;IAC1BC,UAAU,EAAGf,QAAU;IACvBgB,OAAO,EAAGA,CAAA,KAAM;MACfX,aAAa,CAAEZ,KAAK,EAAEM,OAAQ,CAAC;MAC/BQ,YAAY,CAAC,CAAC;IACf,CAAG;IACHU,IAAI,EAAC,kBAAkB;IACvBtB,IAAI,EAAGA,IAAM;IACbG,QAAQ,EAAGA;EAAU,GAEnBJ,KACO,CAAC;AAEb"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { createElement } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* External dependencies
|
|
4
|
-
*/
|
|
5
|
-
import classnames from 'classnames';
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* WordPress dependencies
|
|
9
|
-
*/
|
|
10
|
-
import { DropdownMenu } from '@wordpress/components';
|
|
11
|
-
import { __ } from '@wordpress/i18n';
|
|
12
|
-
import { moreVertical } from '@wordpress/icons';
|
|
13
|
-
export default function MoreMenuDropdown({
|
|
14
|
-
as: DropdownComponent = DropdownMenu,
|
|
15
|
-
className,
|
|
16
|
-
/* translators: button label text should, if possible, be under 16 characters. */
|
|
17
|
-
label = __('Options'),
|
|
18
|
-
popoverProps,
|
|
19
|
-
toggleProps,
|
|
20
|
-
children
|
|
21
|
-
}) {
|
|
22
|
-
return createElement(DropdownComponent, {
|
|
23
|
-
className: classnames('interface-more-menu-dropdown', className),
|
|
24
|
-
icon: moreVertical,
|
|
25
|
-
label: label,
|
|
26
|
-
popoverProps: {
|
|
27
|
-
placement: 'bottom-end',
|
|
28
|
-
...popoverProps,
|
|
29
|
-
className: classnames('interface-more-menu-dropdown__content', popoverProps?.className)
|
|
30
|
-
},
|
|
31
|
-
toggleProps: {
|
|
32
|
-
tooltipPosition: 'bottom',
|
|
33
|
-
...toggleProps,
|
|
34
|
-
size: 'compact'
|
|
35
|
-
}
|
|
36
|
-
}, onClose => children(onClose));
|
|
37
|
-
}
|
|
38
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["classnames","DropdownMenu","__","moreVertical","MoreMenuDropdown","as","DropdownComponent","className","label","popoverProps","toggleProps","children","createElement","icon","placement","tooltipPosition","size","onClose"],"sources":["@wordpress/interface/src/components/more-menu-dropdown/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { DropdownMenu } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\n\nexport default function MoreMenuDropdown( {\n\tas: DropdownComponent = DropdownMenu,\n\tclassName,\n\t/* translators: button label text should, if possible, be under 16 characters. */\n\tlabel = __( 'Options' ),\n\tpopoverProps,\n\ttoggleProps,\n\tchildren,\n} ) {\n\treturn (\n\t\t<DropdownComponent\n\t\t\tclassName={ classnames(\n\t\t\t\t'interface-more-menu-dropdown',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ticon={ moreVertical }\n\t\t\tlabel={ label }\n\t\t\tpopoverProps={ {\n\t\t\t\tplacement: 'bottom-end',\n\t\t\t\t...popoverProps,\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'interface-more-menu-dropdown__content',\n\t\t\t\t\tpopoverProps?.className\n\t\t\t\t),\n\t\t\t} }\n\t\t\ttoggleProps={ {\n\t\t\t\ttooltipPosition: 'bottom',\n\t\t\t\t...toggleProps,\n\t\t\t\tsize: 'compact',\n\t\t\t} }\n\t\t>\n\t\t\t{ ( onClose ) => children( onClose ) }\n\t\t</DropdownComponent>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,eAAe,SAASC,gBAAgBA,CAAE;EACzCC,EAAE,EAAEC,iBAAiB,GAAGL,YAAY;EACpCM,SAAS;EACT;EACAC,KAAK,GAAGN,EAAE,CAAE,SAAU,CAAC;EACvBO,YAAY;EACZC,WAAW;EACXC;AACD,CAAC,EAAG;EACH,OACCC,aAAA,CAACN,iBAAiB;IACjBC,SAAS,EAAGP,UAAU,CACrB,8BAA8B,EAC9BO,SACD,CAAG;IACHM,IAAI,EAAGV,YAAc;IACrBK,KAAK,EAAGA,KAAO;IACfC,YAAY,EAAG;MACdK,SAAS,EAAE,YAAY;MACvB,GAAGL,YAAY;MACfF,SAAS,EAAEP,UAAU,CACpB,uCAAuC,EACvCS,YAAY,EAAEF,SACf;IACD,CAAG;IACHG,WAAW,EAAG;MACbK,eAAe,EAAE,QAAQ;MACzB,GAAGL,WAAW;MACdM,IAAI,EAAE;IACP;EAAG,GAECC,OAAO,IAAMN,QAAQ,CAAEM,OAAQ,CACjB,CAAC;AAEtB"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { createElement } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* WordPress dependencies
|
|
4
|
-
*/
|
|
5
|
-
import { useSelect, useDispatch } from '@wordpress/data';
|
|
6
|
-
import { MenuItem } from '@wordpress/components';
|
|
7
|
-
import { __ } from '@wordpress/i18n';
|
|
8
|
-
import { check } from '@wordpress/icons';
|
|
9
|
-
import { speak } from '@wordpress/a11y';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Internal dependencies
|
|
13
|
-
*/
|
|
14
|
-
import { store as interfaceStore } from '../../store';
|
|
15
|
-
export default function MoreMenuFeatureToggle({
|
|
16
|
-
scope,
|
|
17
|
-
label,
|
|
18
|
-
info,
|
|
19
|
-
messageActivated,
|
|
20
|
-
messageDeactivated,
|
|
21
|
-
shortcut,
|
|
22
|
-
feature
|
|
23
|
-
}) {
|
|
24
|
-
const isActive = useSelect(select => select(interfaceStore).isFeatureActive(scope, feature), [feature, scope]);
|
|
25
|
-
const {
|
|
26
|
-
toggleFeature
|
|
27
|
-
} = useDispatch(interfaceStore);
|
|
28
|
-
const speakMessage = () => {
|
|
29
|
-
if (isActive) {
|
|
30
|
-
speak(messageDeactivated || __('Feature deactivated'));
|
|
31
|
-
} else {
|
|
32
|
-
speak(messageActivated || __('Feature activated'));
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
return createElement(MenuItem, {
|
|
36
|
-
icon: isActive && check,
|
|
37
|
-
isSelected: isActive,
|
|
38
|
-
onClick: () => {
|
|
39
|
-
toggleFeature(scope, feature);
|
|
40
|
-
speakMessage();
|
|
41
|
-
},
|
|
42
|
-
role: "menuitemcheckbox",
|
|
43
|
-
info: info,
|
|
44
|
-
shortcut: shortcut
|
|
45
|
-
}, label);
|
|
46
|
-
}
|
|
47
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useSelect","useDispatch","MenuItem","__","check","speak","store","interfaceStore","MoreMenuFeatureToggle","scope","label","info","messageActivated","messageDeactivated","shortcut","feature","isActive","select","isFeatureActive","toggleFeature","speakMessage","createElement","icon","isSelected","onClick","role"],"sources":["@wordpress/interface/src/components/more-menu-feature-toggle/index.js"],"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 interfaceStore } from '../../store';\n\nexport default function MoreMenuFeatureToggle( {\n\tscope,\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( interfaceStore ).isFeatureActive( scope, feature ),\n\t\t[ feature, scope ]\n\t);\n\tconst { toggleFeature } = useDispatch( interfaceStore );\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( scope, 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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,KAAK,IAAIC,cAAc,QAAQ,aAAa;AAErD,eAAe,SAASC,qBAAqBA,CAAE;EAC9CC,KAAK;EACLC,KAAK;EACLC,IAAI;EACJC,gBAAgB;EAChBC,kBAAkB;EAClBC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,MAAMC,QAAQ,GAAGhB,SAAS,CACvBiB,MAAM,IACPA,MAAM,CAAEV,cAAe,CAAC,CAACW,eAAe,CAAET,KAAK,EAAEM,OAAQ,CAAC,EAC3D,CAAEA,OAAO,EAAEN,KAAK,CACjB,CAAC;EACD,MAAM;IAAEU;EAAc,CAAC,GAAGlB,WAAW,CAAEM,cAAe,CAAC;EACvD,MAAMa,YAAY,GAAGA,CAAA,KAAM;IAC1B,IAAKJ,QAAQ,EAAG;MACfX,KAAK,CAAEQ,kBAAkB,IAAIV,EAAE,CAAE,qBAAsB,CAAE,CAAC;IAC3D,CAAC,MAAM;MACNE,KAAK,CAAEO,gBAAgB,IAAIT,EAAE,CAAE,mBAAoB,CAAE,CAAC;IACvD;EACD,CAAC;EAED,OACCkB,aAAA,CAACnB,QAAQ;IACRoB,IAAI,EAAGN,QAAQ,IAAIZ,KAAO;IAC1BmB,UAAU,EAAGP,QAAU;IACvBQ,OAAO,EAAGA,CAAA,KAAM;MACfL,aAAa,CAAEV,KAAK,EAAEM,OAAQ,CAAC;MAC/BK,YAAY,CAAC,CAAC;IACf,CAAG;IACHK,IAAI,EAAC,kBAAkB;IACvBd,IAAI,EAAGA,IAAM;IACbG,QAAQ,EAAGA;EAAU,GAEnBJ,KACO,CAAC;AAEb"}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
# MoreMenuDropdown
|
|
2
|
-
|
|
3
|
-
`MoreMenuDropdown` is a convenient component for rendering an editor 'more' menu. This is typically a menu that provides:
|
|
4
|
-
|
|
5
|
-
- menu items for quick toggling editor preferences.
|
|
6
|
-
- a way to open dialogs for keyboard shortcuts and editor preferences.
|
|
7
|
-
- links to help.
|
|
8
|
-
|
|
9
|
-
This component implements a `DropdownMenu` component from the `@wordpress/components` package.
|
|
10
|
-
|
|
11
|
-
See also the `MoreMenuFeatureToggle` component in the `@wordpress/interface` package, which provides an easy way to implement a feature toggle as a child of this component. Use with the `MenuGroup`, `MenuItem`, `MenuItemsChoice` components from the `@wordpress/components` package to implement more advanced behaviors.
|
|
12
|
-
|
|
13
|
-
Note that just like the `DropdownMenu` component, this component accepts a render callback, which child elements should be returned from.
|
|
14
|
-
|
|
15
|
-
## Example
|
|
16
|
-
|
|
17
|
-
```jsx
|
|
18
|
-
function MyEditorMenu() {
|
|
19
|
-
return (
|
|
20
|
-
<MoreMenuDropdown>
|
|
21
|
-
{ () => (
|
|
22
|
-
<MenuGroup label={ __( 'Features' ) }>
|
|
23
|
-
<MoreMenuFeatureToggle
|
|
24
|
-
scope="namespace/editor-or-plugin-name"
|
|
25
|
-
feature="myFeatureName"
|
|
26
|
-
label={ __( 'My feature' ) }
|
|
27
|
-
info={ __( 'A really awesome feature' ) }
|
|
28
|
-
messageActivated={ __( 'My feature activated' )}
|
|
29
|
-
messageDeactivated={ __( 'My feature deactivated' )}
|
|
30
|
-
/>
|
|
31
|
-
</MenuGroup>
|
|
32
|
-
) }
|
|
33
|
-
</MoreMenuDropdown>
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## Props
|
|
39
|
-
|
|
40
|
-
### as
|
|
41
|
-
|
|
42
|
-
Provide a component that the dropdown should render as. This may be useful if you need `MoreMenuDropdown` to render a `ToolbarDropdownMenu` instead of a `DropdownMenu`. Defaults to `DropdownMenu`.
|
|
43
|
-
|
|
44
|
-
- Type: `Component`
|
|
45
|
-
- Required: No.
|
|
46
|
-
|
|
47
|
-
### className
|
|
48
|
-
|
|
49
|
-
Provide an additional class name to the dropdown component.
|
|
50
|
-
|
|
51
|
-
- Type: `String`
|
|
52
|
-
- Required: No
|
|
53
|
-
|
|
54
|
-
### label
|
|
55
|
-
|
|
56
|
-
Change the label of the button that opens the dropdown.
|
|
57
|
-
|
|
58
|
-
- Default: 'Options'
|
|
59
|
-
- Type: `String`
|
|
60
|
-
- Required: No
|
|
61
|
-
|
|
62
|
-
### popoverProps
|
|
63
|
-
|
|
64
|
-
Override or extend the dropdown's popover props.
|
|
65
|
-
|
|
66
|
-
See the documentation for the `DropdownMenu` and `Popover` components in the `@wordpress/components` package for more information.
|
|
67
|
-
|
|
68
|
-
- Type: `Object`
|
|
69
|
-
- Required: No
|
|
70
|
-
|
|
71
|
-
### toggleProps
|
|
72
|
-
|
|
73
|
-
Override or extend the dropdown's toggle props.
|
|
74
|
-
|
|
75
|
-
See the documentation for the `DropdownMenu` and `Button` components in the `@wordpress/components` package for more information.
|
|
76
|
-
|
|
77
|
-
- Type: `Object`
|
|
78
|
-
- Required: No
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import classnames from 'classnames';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* WordPress dependencies
|
|
8
|
-
*/
|
|
9
|
-
import { DropdownMenu } from '@wordpress/components';
|
|
10
|
-
import { __ } from '@wordpress/i18n';
|
|
11
|
-
import { moreVertical } from '@wordpress/icons';
|
|
12
|
-
|
|
13
|
-
export default function MoreMenuDropdown( {
|
|
14
|
-
as: DropdownComponent = DropdownMenu,
|
|
15
|
-
className,
|
|
16
|
-
/* translators: button label text should, if possible, be under 16 characters. */
|
|
17
|
-
label = __( 'Options' ),
|
|
18
|
-
popoverProps,
|
|
19
|
-
toggleProps,
|
|
20
|
-
children,
|
|
21
|
-
} ) {
|
|
22
|
-
return (
|
|
23
|
-
<DropdownComponent
|
|
24
|
-
className={ classnames(
|
|
25
|
-
'interface-more-menu-dropdown',
|
|
26
|
-
className
|
|
27
|
-
) }
|
|
28
|
-
icon={ moreVertical }
|
|
29
|
-
label={ label }
|
|
30
|
-
popoverProps={ {
|
|
31
|
-
placement: 'bottom-end',
|
|
32
|
-
...popoverProps,
|
|
33
|
-
className: classnames(
|
|
34
|
-
'interface-more-menu-dropdown__content',
|
|
35
|
-
popoverProps?.className
|
|
36
|
-
),
|
|
37
|
-
} }
|
|
38
|
-
toggleProps={ {
|
|
39
|
-
tooltipPosition: 'bottom',
|
|
40
|
-
...toggleProps,
|
|
41
|
-
size: 'compact',
|
|
42
|
-
} }
|
|
43
|
-
>
|
|
44
|
-
{ ( onClose ) => children( onClose ) }
|
|
45
|
-
</DropdownComponent>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
.interface-more-menu-dropdown {
|
|
2
|
-
margin-left: -4px;
|
|
3
|
-
|
|
4
|
-
// the padding and margin of the more menu is intentionally non-standard
|
|
5
|
-
.components-button {
|
|
6
|
-
width: auto;
|
|
7
|
-
padding: 0 2px;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
@include break-small() {
|
|
11
|
-
margin-left: 0;
|
|
12
|
-
|
|
13
|
-
.components-button {
|
|
14
|
-
padding: 0 4px;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.interface-more-menu-dropdown__content .components-popover__content {
|
|
20
|
-
min-width: 300px;
|
|
21
|
-
|
|
22
|
-
// Let the menu scale to fit items.
|
|
23
|
-
@include break-mobile() {
|
|
24
|
-
max-width: $break-mobile;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.components-dropdown-menu__menu {
|
|
28
|
-
padding: 0;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.components-popover.interface-more-menu-dropdown__content {
|
|
33
|
-
z-index: z-index(".components-popover.interface-more-menu__content");
|
|
34
|
-
}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
# MoreMenuFeatureToggle
|
|
2
|
-
|
|
3
|
-
`MoreMenuFeatureToggle` renders a menu item that can be used as a child of the `MoreMenuDropdown` component. The component
|
|
4
|
-
is connected to the interface package's store, and will toggle the value of a 'feature' between true and false.
|
|
5
|
-
|
|
6
|
-
This component implements a `MenuItem` component from the `@wordpress/components` package.
|
|
7
|
-
|
|
8
|
-
## Props
|
|
9
|
-
|
|
10
|
-
### scope
|
|
11
|
-
|
|
12
|
-
The 'scope' of the feature. This is usually a namespaced string that represents the name of the editor (e.g. 'core/edit-post'), and often matches the name of the store for the editor.
|
|
13
|
-
|
|
14
|
-
- Type: `String`
|
|
15
|
-
- Required: Yes
|
|
16
|
-
|
|
17
|
-
### feature
|
|
18
|
-
|
|
19
|
-
The name of the feature to toggle (e.g. 'fixedToolbar').
|
|
20
|
-
|
|
21
|
-
- Type: `String`
|
|
22
|
-
- Required: Yes
|
|
23
|
-
|
|
24
|
-
### label
|
|
25
|
-
|
|
26
|
-
A human readable label for the feature.
|
|
27
|
-
|
|
28
|
-
- Type: `String`
|
|
29
|
-
- Required: Yes
|
|
30
|
-
|
|
31
|
-
### info
|
|
32
|
-
|
|
33
|
-
A human readable description of what this toggle does.
|
|
34
|
-
|
|
35
|
-
- Type: `Object`
|
|
36
|
-
- Required: No
|
|
37
|
-
|
|
38
|
-
### messageActivated
|
|
39
|
-
|
|
40
|
-
A message read by a screen reader when the feature is activated. (e.g. 'Fixed toolbar activated')
|
|
41
|
-
|
|
42
|
-
- Type: `String`
|
|
43
|
-
- Required: No
|
|
44
|
-
|
|
45
|
-
### messageDeactivated
|
|
46
|
-
|
|
47
|
-
A message read by a screen reader when the feature is deactivated. (e.g. 'Fixed toolbar deactivated')
|
|
48
|
-
|
|
49
|
-
- Type: `String`
|
|
50
|
-
- Required: No
|
|
51
|
-
|
|
52
|
-
### shortcut
|
|
53
|
-
|
|
54
|
-
A keyboard shortcut for the feature. This is just used for display purposes and the implementation of the shortcut should be handled separately.
|
|
55
|
-
|
|
56
|
-
Consider using the `displayShortcut` helper from the `@wordpress/keycodes` package for this prop.
|
|
57
|
-
|
|
58
|
-
- Type: `Array`
|
|
59
|
-
- Required: No
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { useSelect, useDispatch } from '@wordpress/data';
|
|
5
|
-
import { MenuItem } from '@wordpress/components';
|
|
6
|
-
import { __ } from '@wordpress/i18n';
|
|
7
|
-
import { check } from '@wordpress/icons';
|
|
8
|
-
import { speak } from '@wordpress/a11y';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Internal dependencies
|
|
12
|
-
*/
|
|
13
|
-
import { store as interfaceStore } from '../../store';
|
|
14
|
-
|
|
15
|
-
export default function MoreMenuFeatureToggle( {
|
|
16
|
-
scope,
|
|
17
|
-
label,
|
|
18
|
-
info,
|
|
19
|
-
messageActivated,
|
|
20
|
-
messageDeactivated,
|
|
21
|
-
shortcut,
|
|
22
|
-
feature,
|
|
23
|
-
} ) {
|
|
24
|
-
const isActive = useSelect(
|
|
25
|
-
( select ) =>
|
|
26
|
-
select( interfaceStore ).isFeatureActive( scope, feature ),
|
|
27
|
-
[ feature, scope ]
|
|
28
|
-
);
|
|
29
|
-
const { toggleFeature } = useDispatch( interfaceStore );
|
|
30
|
-
const speakMessage = () => {
|
|
31
|
-
if ( isActive ) {
|
|
32
|
-
speak( messageDeactivated || __( 'Feature deactivated' ) );
|
|
33
|
-
} else {
|
|
34
|
-
speak( messageActivated || __( 'Feature activated' ) );
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
return (
|
|
39
|
-
<MenuItem
|
|
40
|
-
icon={ isActive && check }
|
|
41
|
-
isSelected={ isActive }
|
|
42
|
-
onClick={ () => {
|
|
43
|
-
toggleFeature( scope, feature );
|
|
44
|
-
speakMessage();
|
|
45
|
-
} }
|
|
46
|
-
role="menuitemcheckbox"
|
|
47
|
-
info={ info }
|
|
48
|
-
shortcut={ shortcut }
|
|
49
|
-
>
|
|
50
|
-
{ label }
|
|
51
|
-
</MenuItem>
|
|
52
|
-
);
|
|
53
|
-
}
|