@wordpress/interface 5.29.0 → 5.31.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 CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 5.31.0 (2024-03-21)
6
+
7
+ ## 5.30.0 (2024-03-06)
8
+
9
+ ## Breaking Changes
10
+
11
+ - Removed `MoreMenuDropdown` component ([#59095](https://github.com/WordPress/gutenberg/pull/59095)).
12
+
5
13
  ## 5.29.0 (2024-02-21)
6
14
 
7
15
  ## 5.28.0 (2024-02-09)
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.
@@ -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","_moreMenuDropdown","_moreMenuFeatureToggle","_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 MoreMenuDropdown } from './more-menu-dropdown';\nexport { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';\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,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,sBAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,WAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,gBAAA,GAAAT,sBAAA,CAAAC,OAAA"}
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"}
@@ -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","MoreMenuDropdown","MoreMenuFeatureToggle","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 MoreMenuDropdown } from './more-menu-dropdown';\nexport { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';\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,gBAAgB,QAAQ,sBAAsB;AAClE,SAASN,OAAO,IAAIO,qBAAqB,QAAQ,4BAA4B;AAC7E,SAASP,OAAO,IAAIQ,UAAU,QAAQ,eAAe;AACrD,SAASR,OAAO,IAAIS,eAAe,QAAQ,oBAAoB"}
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"}
@@ -96,6 +96,7 @@
96
96
  --wp-admin-border-width-focus: 2px;
97
97
  --wp-block-synced-color: #7a00df;
98
98
  --wp-block-synced-color--rgb: 122, 0, 223;
99
+ --wp-bound-block-color: #9747ff;
99
100
  }
100
101
  @media (min-resolution: 192dpi) {
101
102
  :root {
@@ -438,38 +439,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
438
439
  }
439
440
  }
440
441
 
441
- .interface-more-menu-dropdown {
442
- margin-right: -4px;
443
- }
444
- .interface-more-menu-dropdown .components-button {
445
- width: auto;
446
- padding: 0 2px;
447
- }
448
- @media (min-width: 600px) {
449
- .interface-more-menu-dropdown {
450
- margin-right: 0;
451
- }
452
- .interface-more-menu-dropdown .components-button {
453
- padding: 0 4px;
454
- }
455
- }
456
-
457
- .interface-more-menu-dropdown__content .components-popover__content {
458
- min-width: 300px;
459
- }
460
- @media (min-width: 480px) {
461
- .interface-more-menu-dropdown__content .components-popover__content {
462
- max-width: 480px;
463
- }
464
- }
465
- .interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu {
466
- padding: 0;
467
- }
468
-
469
- .components-popover.interface-more-menu-dropdown__content {
470
- z-index: 99998;
471
- }
472
-
473
442
  .interface-pinned-items {
474
443
  display: flex;
475
444
  gap: 8px;
@@ -96,6 +96,7 @@
96
96
  --wp-admin-border-width-focus: 2px;
97
97
  --wp-block-synced-color: #7a00df;
98
98
  --wp-block-synced-color--rgb: 122, 0, 223;
99
+ --wp-bound-block-color: #9747ff;
99
100
  }
100
101
  @media (min-resolution: 192dpi) {
101
102
  :root {
@@ -438,38 +439,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
438
439
  }
439
440
  }
440
441
 
441
- .interface-more-menu-dropdown {
442
- margin-left: -4px;
443
- }
444
- .interface-more-menu-dropdown .components-button {
445
- width: auto;
446
- padding: 0 2px;
447
- }
448
- @media (min-width: 600px) {
449
- .interface-more-menu-dropdown {
450
- margin-left: 0;
451
- }
452
- .interface-more-menu-dropdown .components-button {
453
- padding: 0 4px;
454
- }
455
- }
456
-
457
- .interface-more-menu-dropdown__content .components-popover__content {
458
- min-width: 300px;
459
- }
460
- @media (min-width: 480px) {
461
- .interface-more-menu-dropdown__content .components-popover__content {
462
- max-width: 480px;
463
- }
464
- }
465
- .interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu {
466
- padding: 0;
467
- }
468
-
469
- .components-popover.interface-more-menu-dropdown__content {
470
- z-index: 99998;
471
- }
472
-
473
442
  .interface-pinned-items {
474
443
  display: flex;
475
444
  gap: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/interface",
3
- "version": "5.29.0",
3
+ "version": "5.31.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.52.0",
36
- "@wordpress/components": "^27.0.0",
37
- "@wordpress/compose": "^6.29.0",
38
- "@wordpress/data": "^9.22.0",
39
- "@wordpress/deprecated": "^3.52.0",
40
- "@wordpress/element": "^5.29.0",
41
- "@wordpress/i18n": "^4.52.0",
42
- "@wordpress/icons": "^9.43.0",
43
- "@wordpress/plugins": "^6.20.0",
44
- "@wordpress/preferences": "^3.29.0",
45
- "@wordpress/private-apis": "^0.34.0",
46
- "@wordpress/viewport": "^5.29.0",
35
+ "@wordpress/a11y": "^3.54.0",
36
+ "@wordpress/components": "^27.2.0",
37
+ "@wordpress/compose": "^6.31.0",
38
+ "@wordpress/data": "^9.24.0",
39
+ "@wordpress/deprecated": "^3.54.0",
40
+ "@wordpress/element": "^5.31.0",
41
+ "@wordpress/i18n": "^4.54.0",
42
+ "@wordpress/icons": "^9.45.0",
43
+ "@wordpress/plugins": "^6.22.0",
44
+ "@wordpress/preferences": "^3.31.0",
45
+ "@wordpress/private-apis": "^0.36.0",
46
+ "@wordpress/viewport": "^5.31.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": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
56
+ "gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
57
57
  }
@@ -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
@@ -2,5 +2,4 @@
2
2
  @import "./components/complementary-area/style.scss";
3
3
  @import "./components/fullscreen-mode/style.scss";
4
4
  @import "./components/interface-skeleton/style.scss";
5
- @import "./components/more-menu-dropdown/style.scss";
6
5
  @import "./components/pinned-items/style.scss";
@@ -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
- }