@wordpress/edit-widgets 5.26.0 → 5.27.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.
Files changed (21) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/header/document-tools/index.js +7 -2
  3. package/build/components/header/document-tools/index.js.map +1 -1
  4. package/build/components/header/undo-redo/redo.js +8 -3
  5. package/build/components/header/undo-redo/redo.js.map +1 -1
  6. package/build/components/header/undo-redo/undo.js +8 -3
  7. package/build/components/header/undo-redo/undo.js.map +1 -1
  8. package/build-module/components/header/document-tools/index.js +7 -2
  9. package/build-module/components/header/document-tools/index.js.map +1 -1
  10. package/build-module/components/header/undo-redo/redo.js +7 -3
  11. package/build-module/components/header/undo-redo/redo.js.map +1 -1
  12. package/build-module/components/header/undo-redo/undo.js +7 -3
  13. package/build-module/components/header/undo-redo/undo.js.map +1 -1
  14. package/build-style/style-rtl.css +11 -108
  15. package/build-style/style.css +11 -108
  16. package/package.json +28 -28
  17. package/src/components/header/document-tools/index.js +3 -2
  18. package/src/components/header/style.scss +2 -3
  19. package/src/components/header/undo-redo/redo.js +8 -3
  20. package/src/components/header/undo-redo/undo.js +8 -3
  21. package/src/components/notices/style.scss +0 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 5.27.0 (2024-01-24)
6
+
5
7
  ## 5.26.0 (2024-01-10)
6
8
 
7
9
  ## 5.25.0 (2023-12-13)
package/build/components/header/document-tools/index.js CHANGED
@@ -84,7 +84,8 @@ function DocumentTools() {
84
84
  return (0, _react.createElement)(_blockEditor.NavigableToolbar, {
85
85
  className: "edit-widgets-header-toolbar",
86
86
  "aria-label": (0, _i18n.__)('Document tools'),
87
- shouldUseKeyboardFocusShortcut: !blockToolbarCanBeFocused
87
+ shouldUseKeyboardFocusShortcut: !blockToolbarCanBeFocused,
88
+ variant: "unstyled"
88
89
  }, (0, _react.createElement)(_components.ToolbarItem, {
89
90
  ref: inserterButton,
90
91
  as: _components.Button,
@@ -99,7 +100,11 @@ function DocumentTools() {
99
100
  /* translators: button label text should, if possible, be under 16
100
101
  characters. */,
101
102
  label: (0, _i18n._x)('Toggle block inserter', 'Generic label for block inserter button')
102
- }), isMediumViewport && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_undo.default, null), (0, _react.createElement)(_redo.default, null), (0, _react.createElement)(_components.ToolbarItem, {
103
+ }), isMediumViewport && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.ToolbarItem, {
104
+ as: _undo.default
105
+ }), (0, _react.createElement)(_components.ToolbarItem, {
106
+ as: _redo.default
107
+ }), (0, _react.createElement)(_components.ToolbarItem, {
103
108
  as: _components.Button,
104
109
  className: "edit-widgets-header-toolbar__list-view-toggle",
105
110
  icon: _icons.listView,
package/build/components/header/document-tools/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_data","require","_i18n","_components","_blockEditor","_icons","_element","_compose","_undo","_interopRequireDefault","_redo","_useLastSelectedWidgetArea","_store","_lockUnlock","useCanBlockToolbarBeFocused","unlock","blockEditorPrivateApis","DocumentTools","isMediumViewport","useViewportMatch","inserterButton","useRef","widgetAreaClientId","useLastSelectedWidgetArea","isLastSelectedWidgetAreaOpen","useSelect","select","editWidgetsStore","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","listViewToggleRef","isInserterOpened","isListViewOpened","getListViewToggleRef","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","useDispatch","selectBlock","blockEditorStore","handleClick","window","requestAnimationFrame","toggleListView","useCallback","blockToolbarCanBeFocused","_react","createElement","NavigableToolbar","className","__","shouldUseKeyboardFocusShortcut","ToolbarItem","ref","as","Button","variant","isPressed","onMouseDown","event","preventDefault","onClick","icon","plus","label","_x","Fragment","default","listView","_default","exports"],"sources":["@wordpress/edit-widgets/src/components/header/document-tools/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport UndoButton from '../undo-redo/undo';\nimport RedoButton from '../undo-redo/redo';\nimport useLastSelectedWidgetArea from '../../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\n\nconst { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );\n\nfunction DocumentTools() {\n\tconst isMediumViewport = useViewportMatch( 'medium' );\n\tconst inserterButton = useRef();\n\tconst widgetAreaClientId = useLastSelectedWidgetArea();\n\tconst isLastSelectedWidgetAreaOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editWidgetsStore ).getIsWidgetAreaOpen(\n\t\t\t\twidgetAreaClientId\n\t\t\t),\n\t\t[ widgetAreaClientId ]\n\t);\n\tconst { isInserterOpen, isListViewOpen, listViewToggleRef } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { isInserterOpened, isListViewOpened, getListViewToggleRef } =\n\t\t\t\tunlock( select( editWidgetsStore ) );\n\t\t\treturn {\n\t\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\t\tisListViewOpen: isListViewOpened(),\n\t\t\t\tlistViewToggleRef: getListViewToggleRef(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =\n\t\tuseDispatch( editWidgetsStore );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst handleClick = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tsetIsInserterOpened( false );\n\t\t} else {\n\t\t\tif ( ! isLastSelectedWidgetAreaOpen ) {\n\t\t\t\t// Select the last selected block if hasn't already.\n\t\t\t\tselectBlock( widgetAreaClientId );\n\t\t\t\t// Open the last selected widget area when opening the inserter.\n\t\t\t\tsetIsWidgetAreaOpen( widgetAreaClientId, true );\n\t\t\t}\n\t\t\t// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the\n\t\t\t// same tick and pretty much in a random order. The inserter is closed if any other part of the\n\t\t\t// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then\n\t\t\t// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to\n\t\t\t// the selected block.\n\t\t\twindow.requestAnimationFrame( () => setIsInserterOpened( true ) );\n\t\t}\n\t};\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\t// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.\n\tconst blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();\n\n\treturn (\n\t\t<NavigableToolbar\n\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\tshouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }\n\t\t>\n\t\t\t<ToolbarItem\n\t\t\t\tref={ inserterButton }\n\t\t\t\tas={ Button }\n\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} }\n\t\t\t\tonClick={ handleClick }\n\t\t\t\ticon={ plus }\n\t\t\t\t/* translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. */\n\t\t\t\tlabel={ _x(\n\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ isMediumViewport && (\n\t\t\t\t<>\n\t\t\t\t\t<UndoButton />\n\t\t\t\t\t<RedoButton />\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\tref={ listViewToggleRef }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</NavigableToolbar>\n\t);\n}\n\nexport default DocumentTools;\n"],"mappings":"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"}
1
+ {"version":3,"names":["_data","require","_i18n","_components","_blockEditor","_icons","_element","_compose","_undo","_interopRequireDefault","_redo","_useLastSelectedWidgetArea","_store","_lockUnlock","useCanBlockToolbarBeFocused","unlock","blockEditorPrivateApis","DocumentTools","isMediumViewport","useViewportMatch","inserterButton","useRef","widgetAreaClientId","useLastSelectedWidgetArea","isLastSelectedWidgetAreaOpen","useSelect","select","editWidgetsStore","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","listViewToggleRef","isInserterOpened","isListViewOpened","getListViewToggleRef","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","useDispatch","selectBlock","blockEditorStore","handleClick","window","requestAnimationFrame","toggleListView","useCallback","blockToolbarCanBeFocused","_react","createElement","NavigableToolbar","className","__","shouldUseKeyboardFocusShortcut","variant","ToolbarItem","ref","as","Button","isPressed","onMouseDown","event","preventDefault","onClick","icon","plus","label","_x","Fragment","UndoButton","RedoButton","listView","_default","exports","default"],"sources":["@wordpress/edit-widgets/src/components/header/document-tools/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport UndoButton from '../undo-redo/undo';\nimport RedoButton from '../undo-redo/redo';\nimport useLastSelectedWidgetArea from '../../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\n\nconst { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );\n\nfunction DocumentTools() {\n\tconst isMediumViewport = useViewportMatch( 'medium' );\n\tconst inserterButton = useRef();\n\tconst widgetAreaClientId = useLastSelectedWidgetArea();\n\tconst isLastSelectedWidgetAreaOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editWidgetsStore ).getIsWidgetAreaOpen(\n\t\t\t\twidgetAreaClientId\n\t\t\t),\n\t\t[ widgetAreaClientId ]\n\t);\n\tconst { isInserterOpen, isListViewOpen, listViewToggleRef } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { isInserterOpened, isListViewOpened, getListViewToggleRef } =\n\t\t\t\tunlock( select( editWidgetsStore ) );\n\t\t\treturn {\n\t\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\t\tisListViewOpen: isListViewOpened(),\n\t\t\t\tlistViewToggleRef: getListViewToggleRef(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =\n\t\tuseDispatch( editWidgetsStore );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst handleClick = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tsetIsInserterOpened( false );\n\t\t} else {\n\t\t\tif ( ! isLastSelectedWidgetAreaOpen ) {\n\t\t\t\t// Select the last selected block if hasn't already.\n\t\t\t\tselectBlock( widgetAreaClientId );\n\t\t\t\t// Open the last selected widget area when opening the inserter.\n\t\t\t\tsetIsWidgetAreaOpen( widgetAreaClientId, true );\n\t\t\t}\n\t\t\t// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the\n\t\t\t// same tick and pretty much in a random order. The inserter is closed if any other part of the\n\t\t\t// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then\n\t\t\t// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to\n\t\t\t// the selected block.\n\t\t\twindow.requestAnimationFrame( () => setIsInserterOpened( true ) );\n\t\t}\n\t};\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\t// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.\n\tconst blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();\n\n\treturn (\n\t\t<NavigableToolbar\n\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\tshouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t<ToolbarItem\n\t\t\t\tref={ inserterButton }\n\t\t\t\tas={ Button }\n\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} }\n\t\t\t\tonClick={ handleClick }\n\t\t\t\ticon={ plus }\n\t\t\t\t/* translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. */\n\t\t\t\tlabel={ _x(\n\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ isMediumViewport && (\n\t\t\t\t<>\n\t\t\t\t\t<ToolbarItem as={ UndoButton } />\n\t\t\t\t\t<ToolbarItem as={ RedoButton } />\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\tref={ listViewToggleRef }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</NavigableToolbar>\n\t);\n}\n\nexport default DocumentTools;\n"],"mappings":"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"}
package/build/components/header/undo-redo/redo.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = RedoButton;
6
+ exports.default = void 0;
7
7
  var _react = require("react");
8
8
  var _i18n = require("@wordpress/i18n");
9
9
  var _components = require("@wordpress/components");
@@ -11,17 +11,20 @@ var _data = require("@wordpress/data");
11
11
  var _icons = require("@wordpress/icons");
12
12
  var _keycodes = require("@wordpress/keycodes");
13
13
  var _coreData = require("@wordpress/core-data");
14
+ var _element = require("@wordpress/element");
14
15
  /**
15
16
  * WordPress dependencies
16
17
  */
17
18
 
18
- function RedoButton() {
19
+ function RedoButton(props, ref) {
19
20
  const shortcut = (0, _keycodes.isAppleOS)() ? _keycodes.displayShortcut.primaryShift('z') : _keycodes.displayShortcut.primary('y');
20
21
  const hasRedo = (0, _data.useSelect)(select => select(_coreData.store).hasRedo(), []);
21
22
  const {
22
23
  redo
23
24
  } = (0, _data.useDispatch)(_coreData.store);
24
- return (0, _react.createElement)(_components.ToolbarButton, {
25
+ return (0, _react.createElement)(_components.Button, {
26
+ ...props,
27
+ ref: ref,
25
28
  icon: !(0, _i18n.isRTL)() ? _icons.redo : _icons.undo,
26
29
  label: (0, _i18n.__)('Redo'),
27
30
  shortcut: shortcut
@@ -33,4 +36,6 @@ function RedoButton() {
33
36
  onClick: hasRedo ? redo : undefined
34
37
  });
35
38
  }
39
+ var _default = (0, _element.forwardRef)(RedoButton);
40
+ exports.default = _default;
36
41
  //# sourceMappingURL=redo.js.map
package/build/components/header/undo-redo/redo.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_i18n","require","_components","_data","_icons","_keycodes","_coreData","RedoButton","shortcut","isAppleOS","displayShortcut","primaryShift","primary","hasRedo","useSelect","select","coreStore","redo","useDispatch","_react","createElement","ToolbarButton","icon","isRTL","redoIcon","undoIcon","label","__","onClick","undefined"],"sources":["@wordpress/edit-widgets/src/components/header/undo-redo/redo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { ToolbarButton } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';\nimport { displayShortcut, isAppleOS } from '@wordpress/keycodes';\nimport { store as coreStore } from '@wordpress/core-data';\n\nexport default function RedoButton() {\n\tconst shortcut = isAppleOS()\n\t\t? displayShortcut.primaryShift( 'z' )\n\t\t: displayShortcut.primary( 'y' );\n\n\tconst hasRedo = useSelect(\n\t\t( select ) => select( coreStore ).hasRedo(),\n\t\t[]\n\t);\n\tconst { redo } = useDispatch( coreStore );\n\treturn (\n\t\t<ToolbarButton\n\t\t\ticon={ ! isRTL() ? redoIcon : undoIcon }\n\t\t\tlabel={ __( 'Redo' ) }\n\t\t\tshortcut={ shortcut }\n\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\taria-disabled={ ! hasRedo }\n\t\t\tonClick={ hasRedo ? redo : undefined }\n\t\t/>\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,SAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AARA;AACA;AACA;;AAQe,SAASM,UAAUA,CAAA,EAAG;EACpC,MAAMC,QAAQ,GAAG,IAAAC,mBAAS,EAAC,CAAC,GACzBC,yBAAe,CAACC,YAAY,CAAE,GAAI,CAAC,GACnCD,yBAAe,CAACE,OAAO,CAAE,GAAI,CAAC;EAEjC,MAAMC,OAAO,GAAG,IAAAC,eAAS,EACtBC,MAAM,IAAMA,MAAM,CAAEC,eAAU,CAAC,CAACH,OAAO,CAAC,CAAC,EAC3C,EACD,CAAC;EACD,MAAM;IAAEI;EAAK,CAAC,GAAG,IAAAC,iBAAW,EAAEF,eAAU,CAAC;EACzC,OACC,IAAAG,MAAA,CAAAC,aAAA,EAAClB,WAAA,CAAAmB,aAAa;IACbC,IAAI,EAAG,CAAE,IAAAC,WAAK,EAAC,CAAC,GAAGC,WAAQ,GAAGC,WAAU;IACxCC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtBnB,QAAQ,EAAGA;IACX;IACA;IACA;IAAA;IACA,iBAAgB,CAAEK,OAAS;IAC3Be,OAAO,EAAGf,OAAO,GAAGI,IAAI,GAAGY;EAAW,CACtC,CAAC;AAEJ"}
1
+ {"version":3,"names":["_i18n","require","_components","_data","_icons","_keycodes","_coreData","_element","RedoButton","props","ref","shortcut","isAppleOS","displayShortcut","primaryShift","primary","hasRedo","useSelect","select","coreStore","redo","useDispatch","_react","createElement","Button","icon","isRTL","redoIcon","undoIcon","label","__","onClick","undefined","_default","forwardRef","exports","default"],"sources":["@wordpress/edit-widgets/src/components/header/undo-redo/redo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';\nimport { displayShortcut, isAppleOS } from '@wordpress/keycodes';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { forwardRef } from '@wordpress/element';\n\nfunction RedoButton( props, ref ) {\n\tconst shortcut = isAppleOS()\n\t\t? displayShortcut.primaryShift( 'z' )\n\t\t: displayShortcut.primary( 'y' );\n\n\tconst hasRedo = useSelect(\n\t\t( select ) => select( coreStore ).hasRedo(),\n\t\t[]\n\t);\n\tconst { redo } = useDispatch( coreStore );\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\ticon={ ! isRTL() ? redoIcon : undoIcon }\n\t\t\tlabel={ __( 'Redo' ) }\n\t\t\tshortcut={ shortcut }\n\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\taria-disabled={ ! hasRedo }\n\t\t\tonClick={ hasRedo ? redo : undefined }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( RedoButton );\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AATA;AACA;AACA;;AASA,SAASO,UAAUA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EACjC,MAAMC,QAAQ,GAAG,IAAAC,mBAAS,EAAC,CAAC,GACzBC,yBAAe,CAACC,YAAY,CAAE,GAAI,CAAC,GACnCD,yBAAe,CAACE,OAAO,CAAE,GAAI,CAAC;EAEjC,MAAMC,OAAO,GAAG,IAAAC,eAAS,EACtBC,MAAM,IAAMA,MAAM,CAAEC,eAAU,CAAC,CAACH,OAAO,CAAC,CAAC,EAC3C,EACD,CAAC;EACD,MAAM;IAAEI;EAAK,CAAC,GAAG,IAAAC,iBAAW,EAAEF,eAAU,CAAC;EACzC,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACrB,WAAA,CAAAsB,MAAM;IAAA,GACDf,KAAK;IACVC,GAAG,EAAGA,GAAK;IACXe,IAAI,EAAG,CAAE,IAAAC,WAAK,EAAC,CAAC,GAAGC,WAAQ,GAAGC,WAAU;IACxCC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtBnB,QAAQ,EAAGA;IACX;IACA;IACA;IAAA;IACA,iBAAgB,CAAEK,OAAS;IAC3Be,OAAO,EAAGf,OAAO,GAAGI,IAAI,GAAGY;EAAW,CACtC,CAAC;AAEJ;AAAC,IAAAC,QAAA,GAEc,IAAAC,mBAAU,EAAE1B,UAAW,CAAC;AAAA2B,OAAA,CAAAC,OAAA,GAAAH,QAAA"}
package/build/components/header/undo-redo/undo.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = UndoButton;
6
+ exports.default = void 0;
7
7
  var _react = require("react");
8
8
  var _i18n = require("@wordpress/i18n");
9
9
  var _components = require("@wordpress/components");
@@ -11,16 +11,19 @@ var _data = require("@wordpress/data");
11
11
  var _icons = require("@wordpress/icons");
12
12
  var _keycodes = require("@wordpress/keycodes");
13
13
  var _coreData = require("@wordpress/core-data");
14
+ var _element = require("@wordpress/element");
14
15
  /**
15
16
  * WordPress dependencies
16
17
  */
17
18
 
18
- function UndoButton() {
19
+ function UndoButton(props, ref) {
19
20
  const hasUndo = (0, _data.useSelect)(select => select(_coreData.store).hasUndo(), []);
20
21
  const {
21
22
  undo
22
23
  } = (0, _data.useDispatch)(_coreData.store);
23
- return (0, _react.createElement)(_components.ToolbarButton, {
24
+ return (0, _react.createElement)(_components.Button, {
25
+ ...props,
26
+ ref: ref,
24
27
  icon: !(0, _i18n.isRTL)() ? _icons.undo : _icons.redo,
25
28
  label: (0, _i18n.__)('Undo'),
26
29
  shortcut: _keycodes.displayShortcut.primary('z')
@@ -32,4 +35,6 @@ function UndoButton() {
32
35
  onClick: hasUndo ? undo : undefined
33
36
  });
34
37
  }
38
+ var _default = (0, _element.forwardRef)(UndoButton);
39
+ exports.default = _default;
35
40
  //# sourceMappingURL=undo.js.map
package/build/components/header/undo-redo/undo.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_i18n","require","_components","_data","_icons","_keycodes","_coreData","UndoButton","hasUndo","useSelect","select","coreStore","undo","useDispatch","_react","createElement","ToolbarButton","icon","isRTL","undoIcon","redoIcon","label","__","shortcut","displayShortcut","primary","onClick","undefined"],"sources":["@wordpress/edit-widgets/src/components/header/undo-redo/undo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { ToolbarButton } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { store as coreStore } from '@wordpress/core-data';\n\nexport default function UndoButton() {\n\tconst hasUndo = useSelect(\n\t\t( select ) => select( coreStore ).hasUndo(),\n\t\t[]\n\t);\n\tconst { undo } = useDispatch( coreStore );\n\treturn (\n\t\t<ToolbarButton\n\t\t\ticon={ ! isRTL() ? undoIcon : redoIcon }\n\t\t\tlabel={ __( 'Undo' ) }\n\t\t\tshortcut={ displayShortcut.primary( 'z' ) }\n\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\taria-disabled={ ! hasUndo }\n\t\t\tonClick={ hasUndo ? undo : undefined }\n\t\t/>\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,SAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AARA;AACA;AACA;;AAQe,SAASM,UAAUA,CAAA,EAAG;EACpC,MAAMC,OAAO,GAAG,IAAAC,eAAS,EACtBC,MAAM,IAAMA,MAAM,CAAEC,eAAU,CAAC,CAACH,OAAO,CAAC,CAAC,EAC3C,EACD,CAAC;EACD,MAAM;IAAEI;EAAK,CAAC,GAAG,IAAAC,iBAAW,EAAEF,eAAU,CAAC;EACzC,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACb,WAAA,CAAAc,aAAa;IACbC,IAAI,EAAG,CAAE,IAAAC,WAAK,EAAC,CAAC,GAAGC,WAAQ,GAAGC,WAAU;IACxCC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtBC,QAAQ,EAAGC,yBAAe,CAACC,OAAO,CAAE,GAAI;IACxC;IACA;IACA;IAAA;IACA,iBAAgB,CAAEjB,OAAS;IAC3BkB,OAAO,EAAGlB,OAAO,GAAGI,IAAI,GAAGe;EAAW,CACtC,CAAC;AAEJ"}
1
+ {"version":3,"names":["_i18n","require","_components","_data","_icons","_keycodes","_coreData","_element","UndoButton","props","ref","hasUndo","useSelect","select","coreStore","undo","useDispatch","_react","createElement","Button","icon","isRTL","undoIcon","redoIcon","label","__","shortcut","displayShortcut","primary","onClick","undefined","_default","forwardRef","exports","default"],"sources":["@wordpress/edit-widgets/src/components/header/undo-redo/undo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { forwardRef } from '@wordpress/element';\n\nfunction UndoButton( props, ref ) {\n\tconst hasUndo = useSelect(\n\t\t( select ) => select( coreStore ).hasUndo(),\n\t\t[]\n\t);\n\tconst { undo } = useDispatch( coreStore );\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\ticon={ ! isRTL() ? undoIcon : redoIcon }\n\t\t\tlabel={ __( 'Undo' ) }\n\t\t\tshortcut={ displayShortcut.primary( 'z' ) }\n\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\taria-disabled={ ! hasUndo }\n\t\t\tonClick={ hasUndo ? undo : undefined }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( UndoButton );\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AATA;AACA;AACA;;AASA,SAASO,UAAUA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EACjC,MAAMC,OAAO,GAAG,IAAAC,eAAS,EACtBC,MAAM,IAAMA,MAAM,CAAEC,eAAU,CAAC,CAACH,OAAO,CAAC,CAAC,EAC3C,EACD,CAAC;EACD,MAAM;IAAEI;EAAK,CAAC,GAAG,IAAAC,iBAAW,EAAEF,eAAU,CAAC;EACzC,OACC,IAAAG,MAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAiB,MAAM;IAAA,GACDV,KAAK;IACVC,GAAG,EAAGA,GAAK;IACXU,IAAI,EAAG,CAAE,IAAAC,WAAK,EAAC,CAAC,GAAGC,WAAQ,GAAGC,WAAU;IACxCC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtBC,QAAQ,EAAGC,yBAAe,CAACC,OAAO,CAAE,GAAI;IACxC;IACA;IACA;IAAA;IACA,iBAAgB,CAAEjB,OAAS;IAC3BkB,OAAO,EAAGlB,OAAO,GAAGI,IAAI,GAAGe;EAAW,CACtC,CAAC;AAEJ;AAAC,IAAAC,QAAA,GAEc,IAAAC,mBAAU,EAAExB,UAAW,CAAC;AAAAyB,OAAA,CAAAC,OAAA,GAAAH,QAAA"}
package/build-module/components/header/document-tools/index.js CHANGED
@@ -76,7 +76,8 @@ function DocumentTools() {
76
76
  return createElement(NavigableToolbar, {
77
77
  className: "edit-widgets-header-toolbar",
78
78
  "aria-label": __('Document tools'),
79
- shouldUseKeyboardFocusShortcut: !blockToolbarCanBeFocused
79
+ shouldUseKeyboardFocusShortcut: !blockToolbarCanBeFocused,
80
+ variant: "unstyled"
80
81
  }, createElement(ToolbarItem, {
81
82
  ref: inserterButton,
82
83
  as: Button,
@@ -91,7 +92,11 @@ function DocumentTools() {
91
92
  /* translators: button label text should, if possible, be under 16
92
93
  characters. */,
93
94
  label: _x('Toggle block inserter', 'Generic label for block inserter button')
94
- }), isMediumViewport && createElement(Fragment, null, createElement(UndoButton, null), createElement(RedoButton, null), createElement(ToolbarItem, {
95
+ }), isMediumViewport && createElement(Fragment, null, createElement(ToolbarItem, {
96
+ as: UndoButton
97
+ }), createElement(ToolbarItem, {
98
+ as: RedoButton
99
+ }), createElement(ToolbarItem, {
95
100
  as: Button,
96
101
  className: "edit-widgets-header-toolbar__list-view-toggle",
97
102
  icon: listView,
package/build-module/components/header/document-tools/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useSelect","useDispatch","__","_x","Button","ToolbarItem","NavigableToolbar","store","blockEditorStore","privateApis","blockEditorPrivateApis","listView","plus","useCallback","useRef","useViewportMatch","UndoButton","RedoButton","useLastSelectedWidgetArea","editWidgetsStore","unlock","useCanBlockToolbarBeFocused","DocumentTools","isMediumViewport","inserterButton","widgetAreaClientId","isLastSelectedWidgetAreaOpen","select","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","listViewToggleRef","isInserterOpened","isListViewOpened","getListViewToggleRef","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","selectBlock","handleClick","window","requestAnimationFrame","toggleListView","blockToolbarCanBeFocused","createElement","className","shouldUseKeyboardFocusShortcut","ref","as","variant","isPressed","onMouseDown","event","preventDefault","onClick","icon","label","Fragment"],"sources":["@wordpress/edit-widgets/src/components/header/document-tools/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport UndoButton from '../undo-redo/undo';\nimport RedoButton from '../undo-redo/redo';\nimport useLastSelectedWidgetArea from '../../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\n\nconst { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );\n\nfunction DocumentTools() {\n\tconst isMediumViewport = useViewportMatch( 'medium' );\n\tconst inserterButton = useRef();\n\tconst widgetAreaClientId = useLastSelectedWidgetArea();\n\tconst isLastSelectedWidgetAreaOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editWidgetsStore ).getIsWidgetAreaOpen(\n\t\t\t\twidgetAreaClientId\n\t\t\t),\n\t\t[ widgetAreaClientId ]\n\t);\n\tconst { isInserterOpen, isListViewOpen, listViewToggleRef } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { isInserterOpened, isListViewOpened, getListViewToggleRef } =\n\t\t\t\tunlock( select( editWidgetsStore ) );\n\t\t\treturn {\n\t\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\t\tisListViewOpen: isListViewOpened(),\n\t\t\t\tlistViewToggleRef: getListViewToggleRef(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =\n\t\tuseDispatch( editWidgetsStore );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst handleClick = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tsetIsInserterOpened( false );\n\t\t} else {\n\t\t\tif ( ! isLastSelectedWidgetAreaOpen ) {\n\t\t\t\t// Select the last selected block if hasn't already.\n\t\t\t\tselectBlock( widgetAreaClientId );\n\t\t\t\t// Open the last selected widget area when opening the inserter.\n\t\t\t\tsetIsWidgetAreaOpen( widgetAreaClientId, true );\n\t\t\t}\n\t\t\t// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the\n\t\t\t// same tick and pretty much in a random order. The inserter is closed if any other part of the\n\t\t\t// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then\n\t\t\t// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to\n\t\t\t// the selected block.\n\t\t\twindow.requestAnimationFrame( () => setIsInserterOpened( true ) );\n\t\t}\n\t};\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\t// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.\n\tconst blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();\n\n\treturn (\n\t\t<NavigableToolbar\n\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\tshouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }\n\t\t>\n\t\t\t<ToolbarItem\n\t\t\t\tref={ inserterButton }\n\t\t\t\tas={ Button }\n\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} }\n\t\t\t\tonClick={ handleClick }\n\t\t\t\ticon={ plus }\n\t\t\t\t/* translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. */\n\t\t\t\tlabel={ _x(\n\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ isMediumViewport && (\n\t\t\t\t<>\n\t\t\t\t\t<UndoButton />\n\t\t\t\t\t<RedoButton />\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\tref={ listViewToggleRef }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</NavigableToolbar>\n\t);\n}\n\nexport default DocumentTools;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,EAAE,EAAEC,EAAE,QAAQ,iBAAiB;AACxC,SAASC,MAAM,EAAEC,WAAW,QAAQ,uBAAuB;AAC3D,SACCC,gBAAgB,EAChBC,KAAK,IAAIC,gBAAgB,EACzBC,WAAW,IAAIC,sBAAsB,QAC/B,yBAAyB;AAChC,SAASC,QAAQ,EAAEC,IAAI,QAAQ,kBAAkB;AACjD,SAASC,WAAW,EAAEC,MAAM,QAAQ,oBAAoB;AACxD,SAASC,gBAAgB,QAAQ,oBAAoB;;AAErD;AACA;AACA;AACA,OAAOC,UAAU,MAAM,mBAAmB;AAC1C,OAAOC,UAAU,MAAM,mBAAmB;AAC1C,OAAOC,yBAAyB,MAAM,8CAA8C;AACpF,SAASX,KAAK,IAAIY,gBAAgB,QAAQ,gBAAgB;AAC1D,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,MAAM;EAAEC;AAA4B,CAAC,GAAGD,MAAM,CAAEV,sBAAuB,CAAC;AAExE,SAASY,aAAaA,CAAA,EAAG;EACxB,MAAMC,gBAAgB,GAAGR,gBAAgB,CAAE,QAAS,CAAC;EACrD,MAAMS,cAAc,GAAGV,MAAM,CAAC,CAAC;EAC/B,MAAMW,kBAAkB,GAAGP,yBAAyB,CAAC,CAAC;EACtD,MAAMQ,4BAA4B,GAAG1B,SAAS,CAC3C2B,MAAM,IACPA,MAAM,CAAER,gBAAiB,CAAC,CAACS,mBAAmB,CAC7CH,kBACD,CAAC,EACF,CAAEA,kBAAkB,CACrB,CAAC;EACD,MAAM;IAAEI,cAAc;IAAEC,cAAc;IAAEC;EAAkB,CAAC,GAAG/B,SAAS,CACpE2B,MAAM,IAAM;IACb,MAAM;MAAEK,gBAAgB;MAAEC,gBAAgB;MAAEC;IAAqB,CAAC,GACjEd,MAAM,CAAEO,MAAM,CAAER,gBAAiB,CAAE,CAAC;IACrC,OAAO;MACNU,cAAc,EAAEG,gBAAgB,CAAC,CAAC;MAClCF,cAAc,EAAEG,gBAAgB,CAAC,CAAC;MAClCF,iBAAiB,EAAEG,oBAAoB,CAAC;IACzC,CAAC;EACF,CAAC,EACD,EACD,CAAC;EACD,MAAM;IAAEC,mBAAmB;IAAEC,mBAAmB;IAAEC;EAAoB,CAAC,GACtEpC,WAAW,CAAEkB,gBAAiB,CAAC;EAChC,MAAM;IAAEmB;EAAY,CAAC,GAAGrC,WAAW,CAAEO,gBAAiB,CAAC;EACvD,MAAM+B,WAAW,GAAGA,CAAA,KAAM;IACzB,IAAKV,cAAc,EAAG;MACrB;MACAO,mBAAmB,CAAE,KAAM,CAAC;IAC7B,CAAC,MAAM;MACN,IAAK,CAAEV,4BAA4B,EAAG;QACrC;QACAY,WAAW,CAAEb,kBAAmB,CAAC;QACjC;QACAU,mBAAmB,CAAEV,kBAAkB,EAAE,IAAK,CAAC;MAChD;MACA;MACA;MACA;MACA;MACA;MACAe,MAAM,CAACC,qBAAqB,CAAE,MAAML,mBAAmB,CAAE,IAAK,CAAE,CAAC;IAClE;EACD,CAAC;EAED,MAAMM,cAAc,GAAG7B,WAAW,CACjC,MAAMwB,mBAAmB,CAAE,CAAEP,cAAe,CAAC,EAC7C,CAAEO,mBAAmB,EAAEP,cAAc,CACtC,CAAC;;EAED;EACA,MAAMa,wBAAwB,GAAGtB,2BAA2B,CAAC,CAAC;EAE9D,OACCuB,aAAA,CAACtC,gBAAgB;IAChBuC,SAAS,EAAC,6BAA6B;IACvC,cAAa3C,EAAE,CAAE,gBAAiB,CAAG;IACrC4C,8BAA8B,EAAG,CAAEH;EAA0B,GAE7DC,aAAA,CAACvC,WAAW;IACX0C,GAAG,EAAGvB,cAAgB;IACtBwB,EAAE,EAAG5C,MAAQ;IACbyC,SAAS,EAAC,8CAA8C;IACxDI,OAAO,EAAC,SAAS;IACjBC,SAAS,EAAGrB,cAAgB;IAC5BsB,WAAW,EAAKC,KAAK,IAAM;MAC1BA,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB,CAAG;IACHC,OAAO,EAAGf,WAAa;IACvBgB,IAAI,EAAG3C;IACP;AACJ,mBADI;IAEA4C,KAAK,EAAGrD,EAAE,CACT,uBAAuB,EACvB,yCACD;EAAG,CACH,CAAC,EACAoB,gBAAgB,IACjBqB,aAAA,CAAAa,QAAA,QACCb,aAAA,CAAC5B,UAAU,MAAE,CAAC,EACd4B,aAAA,CAAC3B,UAAU,MAAE,CAAC,EACd2B,aAAA,CAACvC,WAAW;IACX2C,EAAE,EAAG5C,MAAQ;IACbyC,SAAS,EAAC,+CAA+C;IACzDU,IAAI,EAAG5C,QAAU;IACjBuC,SAAS,EAAGpB;IACZ;IACA0B,KAAK,EAAGtD,EAAE,CAAE,WAAY,CAAG;IAC3BoD,OAAO,EAAGZ,cAAgB;IAC1BK,GAAG,EAAGhB;EAAmB,CACzB,CACA,CAEc,CAAC;AAErB;AAEA,eAAeT,aAAa"}
1
+ {"version":3,"names":["useSelect","useDispatch","__","_x","Button","ToolbarItem","NavigableToolbar","store","blockEditorStore","privateApis","blockEditorPrivateApis","listView","plus","useCallback","useRef","useViewportMatch","UndoButton","RedoButton","useLastSelectedWidgetArea","editWidgetsStore","unlock","useCanBlockToolbarBeFocused","DocumentTools","isMediumViewport","inserterButton","widgetAreaClientId","isLastSelectedWidgetAreaOpen","select","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","listViewToggleRef","isInserterOpened","isListViewOpened","getListViewToggleRef","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","selectBlock","handleClick","window","requestAnimationFrame","toggleListView","blockToolbarCanBeFocused","createElement","className","shouldUseKeyboardFocusShortcut","variant","ref","as","isPressed","onMouseDown","event","preventDefault","onClick","icon","label","Fragment"],"sources":["@wordpress/edit-widgets/src/components/header/document-tools/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport UndoButton from '../undo-redo/undo';\nimport RedoButton from '../undo-redo/redo';\nimport useLastSelectedWidgetArea from '../../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\n\nconst { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );\n\nfunction DocumentTools() {\n\tconst isMediumViewport = useViewportMatch( 'medium' );\n\tconst inserterButton = useRef();\n\tconst widgetAreaClientId = useLastSelectedWidgetArea();\n\tconst isLastSelectedWidgetAreaOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editWidgetsStore ).getIsWidgetAreaOpen(\n\t\t\t\twidgetAreaClientId\n\t\t\t),\n\t\t[ widgetAreaClientId ]\n\t);\n\tconst { isInserterOpen, isListViewOpen, listViewToggleRef } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { isInserterOpened, isListViewOpened, getListViewToggleRef } =\n\t\t\t\tunlock( select( editWidgetsStore ) );\n\t\t\treturn {\n\t\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\t\tisListViewOpen: isListViewOpened(),\n\t\t\t\tlistViewToggleRef: getListViewToggleRef(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =\n\t\tuseDispatch( editWidgetsStore );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst handleClick = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tsetIsInserterOpened( false );\n\t\t} else {\n\t\t\tif ( ! isLastSelectedWidgetAreaOpen ) {\n\t\t\t\t// Select the last selected block if hasn't already.\n\t\t\t\tselectBlock( widgetAreaClientId );\n\t\t\t\t// Open the last selected widget area when opening the inserter.\n\t\t\t\tsetIsWidgetAreaOpen( widgetAreaClientId, true );\n\t\t\t}\n\t\t\t// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the\n\t\t\t// same tick and pretty much in a random order. The inserter is closed if any other part of the\n\t\t\t// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then\n\t\t\t// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to\n\t\t\t// the selected block.\n\t\t\twindow.requestAnimationFrame( () => setIsInserterOpened( true ) );\n\t\t}\n\t};\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\t// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.\n\tconst blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();\n\n\treturn (\n\t\t<NavigableToolbar\n\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\tshouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t<ToolbarItem\n\t\t\t\tref={ inserterButton }\n\t\t\t\tas={ Button }\n\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} }\n\t\t\t\tonClick={ handleClick }\n\t\t\t\ticon={ plus }\n\t\t\t\t/* translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. */\n\t\t\t\tlabel={ _x(\n\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ isMediumViewport && (\n\t\t\t\t<>\n\t\t\t\t\t<ToolbarItem as={ UndoButton } />\n\t\t\t\t\t<ToolbarItem as={ RedoButton } />\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\tref={ listViewToggleRef }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</NavigableToolbar>\n\t);\n}\n\nexport default DocumentTools;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,EAAE,EAAEC,EAAE,QAAQ,iBAAiB;AACxC,SAASC,MAAM,EAAEC,WAAW,QAAQ,uBAAuB;AAC3D,SACCC,gBAAgB,EAChBC,KAAK,IAAIC,gBAAgB,EACzBC,WAAW,IAAIC,sBAAsB,QAC/B,yBAAyB;AAChC,SAASC,QAAQ,EAAEC,IAAI,QAAQ,kBAAkB;AACjD,SAASC,WAAW,EAAEC,MAAM,QAAQ,oBAAoB;AACxD,SAASC,gBAAgB,QAAQ,oBAAoB;;AAErD;AACA;AACA;AACA,OAAOC,UAAU,MAAM,mBAAmB;AAC1C,OAAOC,UAAU,MAAM,mBAAmB;AAC1C,OAAOC,yBAAyB,MAAM,8CAA8C;AACpF,SAASX,KAAK,IAAIY,gBAAgB,QAAQ,gBAAgB;AAC1D,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,MAAM;EAAEC;AAA4B,CAAC,GAAGD,MAAM,CAAEV,sBAAuB,CAAC;AAExE,SAASY,aAAaA,CAAA,EAAG;EACxB,MAAMC,gBAAgB,GAAGR,gBAAgB,CAAE,QAAS,CAAC;EACrD,MAAMS,cAAc,GAAGV,MAAM,CAAC,CAAC;EAC/B,MAAMW,kBAAkB,GAAGP,yBAAyB,CAAC,CAAC;EACtD,MAAMQ,4BAA4B,GAAG1B,SAAS,CAC3C2B,MAAM,IACPA,MAAM,CAAER,gBAAiB,CAAC,CAACS,mBAAmB,CAC7CH,kBACD,CAAC,EACF,CAAEA,kBAAkB,CACrB,CAAC;EACD,MAAM;IAAEI,cAAc;IAAEC,cAAc;IAAEC;EAAkB,CAAC,GAAG/B,SAAS,CACpE2B,MAAM,IAAM;IACb,MAAM;MAAEK,gBAAgB;MAAEC,gBAAgB;MAAEC;IAAqB,CAAC,GACjEd,MAAM,CAAEO,MAAM,CAAER,gBAAiB,CAAE,CAAC;IACrC,OAAO;MACNU,cAAc,EAAEG,gBAAgB,CAAC,CAAC;MAClCF,cAAc,EAAEG,gBAAgB,CAAC,CAAC;MAClCF,iBAAiB,EAAEG,oBAAoB,CAAC;IACzC,CAAC;EACF,CAAC,EACD,EACD,CAAC;EACD,MAAM;IAAEC,mBAAmB;IAAEC,mBAAmB;IAAEC;EAAoB,CAAC,GACtEpC,WAAW,CAAEkB,gBAAiB,CAAC;EAChC,MAAM;IAAEmB;EAAY,CAAC,GAAGrC,WAAW,CAAEO,gBAAiB,CAAC;EACvD,MAAM+B,WAAW,GAAGA,CAAA,KAAM;IACzB,IAAKV,cAAc,EAAG;MACrB;MACAO,mBAAmB,CAAE,KAAM,CAAC;IAC7B,CAAC,MAAM;MACN,IAAK,CAAEV,4BAA4B,EAAG;QACrC;QACAY,WAAW,CAAEb,kBAAmB,CAAC;QACjC;QACAU,mBAAmB,CAAEV,kBAAkB,EAAE,IAAK,CAAC;MAChD;MACA;MACA;MACA;MACA;MACA;MACAe,MAAM,CAACC,qBAAqB,CAAE,MAAML,mBAAmB,CAAE,IAAK,CAAE,CAAC;IAClE;EACD,CAAC;EAED,MAAMM,cAAc,GAAG7B,WAAW,CACjC,MAAMwB,mBAAmB,CAAE,CAAEP,cAAe,CAAC,EAC7C,CAAEO,mBAAmB,EAAEP,cAAc,CACtC,CAAC;;EAED;EACA,MAAMa,wBAAwB,GAAGtB,2BAA2B,CAAC,CAAC;EAE9D,OACCuB,aAAA,CAACtC,gBAAgB;IAChBuC,SAAS,EAAC,6BAA6B;IACvC,cAAa3C,EAAE,CAAE,gBAAiB,CAAG;IACrC4C,8BAA8B,EAAG,CAAEH,wBAA0B;IAC7DI,OAAO,EAAC;EAAU,GAElBH,aAAA,CAACvC,WAAW;IACX2C,GAAG,EAAGxB,cAAgB;IACtByB,EAAE,EAAG7C,MAAQ;IACbyC,SAAS,EAAC,8CAA8C;IACxDE,OAAO,EAAC,SAAS;IACjBG,SAAS,EAAGrB,cAAgB;IAC5BsB,WAAW,EAAKC,KAAK,IAAM;MAC1BA,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB,CAAG;IACHC,OAAO,EAAGf,WAAa;IACvBgB,IAAI,EAAG3C;IACP;AACJ,mBADI;IAEA4C,KAAK,EAAGrD,EAAE,CACT,uBAAuB,EACvB,yCACD;EAAG,CACH,CAAC,EACAoB,gBAAgB,IACjBqB,aAAA,CAAAa,QAAA,QACCb,aAAA,CAACvC,WAAW;IAAC4C,EAAE,EAAGjC;EAAY,CAAE,CAAC,EACjC4B,aAAA,CAACvC,WAAW;IAAC4C,EAAE,EAAGhC;EAAY,CAAE,CAAC,EACjC2B,aAAA,CAACvC,WAAW;IACX4C,EAAE,EAAG7C,MAAQ;IACbyC,SAAS,EAAC,+CAA+C;IACzDU,IAAI,EAAG5C,QAAU;IACjBuC,SAAS,EAAGpB;IACZ;IACA0B,KAAK,EAAGtD,EAAE,CAAE,WAAY,CAAG;IAC3BoD,OAAO,EAAGZ,cAAgB;IAC1BM,GAAG,EAAGjB;EAAmB,CACzB,CACA,CAEc,CAAC;AAErB;AAEA,eAAeT,aAAa"}
package/build-module/components/header/undo-redo/redo.js CHANGED
@@ -3,18 +3,21 @@ import { createElement } from "react";
3
3
  * WordPress dependencies
4
4
  */
5
5
  import { __, isRTL } from '@wordpress/i18n';
6
- import { ToolbarButton } from '@wordpress/components';
6
+ import { Button } from '@wordpress/components';
7
7
  import { useSelect, useDispatch } from '@wordpress/data';
8
8
  import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
9
9
  import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
10
10
  import { store as coreStore } from '@wordpress/core-data';
11
- export default function RedoButton() {
11
+ import { forwardRef } from '@wordpress/element';
12
+ function RedoButton(props, ref) {
12
13
  const shortcut = isAppleOS() ? displayShortcut.primaryShift('z') : displayShortcut.primary('y');
13
14
  const hasRedo = useSelect(select => select(coreStore).hasRedo(), []);
14
15
  const {
15
16
  redo
16
17
  } = useDispatch(coreStore);
17
- return createElement(ToolbarButton, {
18
+ return createElement(Button, {
19
+ ...props,
20
+ ref: ref,
18
21
  icon: !isRTL() ? redoIcon : undoIcon,
19
22
  label: __('Redo'),
20
23
  shortcut: shortcut
@@ -26,4 +29,5 @@ export default function RedoButton() {
26
29
  onClick: hasRedo ? redo : undefined
27
30
  });
28
31
  }
32
+ export default forwardRef(RedoButton);
29
33
  //# sourceMappingURL=redo.js.map
package/build-module/components/header/undo-redo/redo.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__","isRTL","ToolbarButton","useSelect","useDispatch","redo","redoIcon","undo","undoIcon","displayShortcut","isAppleOS","store","coreStore","RedoButton","shortcut","primaryShift","primary","hasRedo","select","createElement","icon","label","onClick","undefined"],"sources":["@wordpress/edit-widgets/src/components/header/undo-redo/redo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { ToolbarButton } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';\nimport { displayShortcut, isAppleOS } from '@wordpress/keycodes';\nimport { store as coreStore } from '@wordpress/core-data';\n\nexport default function RedoButton() {\n\tconst shortcut = isAppleOS()\n\t\t? displayShortcut.primaryShift( 'z' )\n\t\t: displayShortcut.primary( 'y' );\n\n\tconst hasRedo = useSelect(\n\t\t( select ) => select( coreStore ).hasRedo(),\n\t\t[]\n\t);\n\tconst { redo } = useDispatch( coreStore );\n\treturn (\n\t\t<ToolbarButton\n\t\t\ticon={ ! isRTL() ? redoIcon : undoIcon }\n\t\t\tlabel={ __( 'Redo' ) }\n\t\t\tshortcut={ shortcut }\n\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\taria-disabled={ ! hasRedo }\n\t\t\tonClick={ hasRedo ? redo : undefined }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,IAAI,IAAIC,QAAQ,EAAEC,IAAI,IAAIC,QAAQ,QAAQ,kBAAkB;AACrE,SAASC,eAAe,EAAEC,SAAS,QAAQ,qBAAqB;AAChE,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AAEzD,eAAe,SAASC,UAAUA,CAAA,EAAG;EACpC,MAAMC,QAAQ,GAAGJ,SAAS,CAAC,CAAC,GACzBD,eAAe,CAACM,YAAY,CAAE,GAAI,CAAC,GACnCN,eAAe,CAACO,OAAO,CAAE,GAAI,CAAC;EAEjC,MAAMC,OAAO,GAAGd,SAAS,CACtBe,MAAM,IAAMA,MAAM,CAAEN,SAAU,CAAC,CAACK,OAAO,CAAC,CAAC,EAC3C,EACD,CAAC;EACD,MAAM;IAAEZ;EAAK,CAAC,GAAGD,WAAW,CAAEQ,SAAU,CAAC;EACzC,OACCO,aAAA,CAACjB,aAAa;IACbkB,IAAI,EAAG,CAAEnB,KAAK,CAAC,CAAC,GAAGK,QAAQ,GAAGE,QAAU;IACxCa,KAAK,EAAGrB,EAAE,CAAE,MAAO,CAAG;IACtBc,QAAQ,EAAGA;IACX;IACA;IACA;IAAA;IACA,iBAAgB,CAAEG,OAAS;IAC3BK,OAAO,EAAGL,OAAO,GAAGZ,IAAI,GAAGkB;EAAW,CACtC,CAAC;AAEJ"}
1
+ {"version":3,"names":["__","isRTL","Button","useSelect","useDispatch","redo","redoIcon","undo","undoIcon","displayShortcut","isAppleOS","store","coreStore","forwardRef","RedoButton","props","ref","shortcut","primaryShift","primary","hasRedo","select","createElement","icon","label","onClick","undefined"],"sources":["@wordpress/edit-widgets/src/components/header/undo-redo/redo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';\nimport { displayShortcut, isAppleOS } from '@wordpress/keycodes';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { forwardRef } from '@wordpress/element';\n\nfunction RedoButton( props, ref ) {\n\tconst shortcut = isAppleOS()\n\t\t? displayShortcut.primaryShift( 'z' )\n\t\t: displayShortcut.primary( 'y' );\n\n\tconst hasRedo = useSelect(\n\t\t( select ) => select( coreStore ).hasRedo(),\n\t\t[]\n\t);\n\tconst { redo } = useDispatch( coreStore );\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\ticon={ ! isRTL() ? redoIcon : undoIcon }\n\t\t\tlabel={ __( 'Redo' ) }\n\t\t\tshortcut={ shortcut }\n\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\taria-disabled={ ! hasRedo }\n\t\t\tonClick={ hasRedo ? redo : undefined }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( RedoButton );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,IAAI,IAAIC,QAAQ,EAAEC,IAAI,IAAIC,QAAQ,QAAQ,kBAAkB;AACrE,SAASC,eAAe,EAAEC,SAAS,QAAQ,qBAAqB;AAChE,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AACzD,SAASC,UAAU,QAAQ,oBAAoB;AAE/C,SAASC,UAAUA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EACjC,MAAMC,QAAQ,GAAGP,SAAS,CAAC,CAAC,GACzBD,eAAe,CAACS,YAAY,CAAE,GAAI,CAAC,GACnCT,eAAe,CAACU,OAAO,CAAE,GAAI,CAAC;EAEjC,MAAMC,OAAO,GAAGjB,SAAS,CACtBkB,MAAM,IAAMA,MAAM,CAAET,SAAU,CAAC,CAACQ,OAAO,CAAC,CAAC,EAC3C,EACD,CAAC;EACD,MAAM;IAAEf;EAAK,CAAC,GAAGD,WAAW,CAAEQ,SAAU,CAAC;EACzC,OACCU,aAAA,CAACpB,MAAM;IAAA,GACDa,KAAK;IACVC,GAAG,EAAGA,GAAK;IACXO,IAAI,EAAG,CAAEtB,KAAK,CAAC,CAAC,GAAGK,QAAQ,GAAGE,QAAU;IACxCgB,KAAK,EAAGxB,EAAE,CAAE,MAAO,CAAG;IACtBiB,QAAQ,EAAGA;IACX;IACA;IACA;IAAA;IACA,iBAAgB,CAAEG,OAAS;IAC3BK,OAAO,EAAGL,OAAO,GAAGf,IAAI,GAAGqB;EAAW,CACtC,CAAC;AAEJ;AAEA,eAAeb,UAAU,CAAEC,UAAW,CAAC"}
package/build-module/components/header/undo-redo/undo.js CHANGED
@@ -3,17 +3,20 @@ import { createElement } from "react";
3
3
  * WordPress dependencies
4
4
  */
5
5
  import { __, isRTL } from '@wordpress/i18n';
6
- import { ToolbarButton } from '@wordpress/components';
6
+ import { Button } from '@wordpress/components';
7
7
  import { useSelect, useDispatch } from '@wordpress/data';
8
8
  import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
9
9
  import { displayShortcut } from '@wordpress/keycodes';
10
10
  import { store as coreStore } from '@wordpress/core-data';
11
- export default function UndoButton() {
11
+ import { forwardRef } from '@wordpress/element';
12
+ function UndoButton(props, ref) {
12
13
  const hasUndo = useSelect(select => select(coreStore).hasUndo(), []);
13
14
  const {
14
15
  undo
15
16
  } = useDispatch(coreStore);
16
- return createElement(ToolbarButton, {
17
+ return createElement(Button, {
18
+ ...props,
19
+ ref: ref,
17
20
  icon: !isRTL() ? undoIcon : redoIcon,
18
21
  label: __('Undo'),
19
22
  shortcut: displayShortcut.primary('z')
@@ -25,4 +28,5 @@ export default function UndoButton() {
25
28
  onClick: hasUndo ? undo : undefined
26
29
  });
27
30
  }
31
+ export default forwardRef(UndoButton);
28
32
  //# sourceMappingURL=undo.js.map
package/build-module/components/header/undo-redo/undo.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__","isRTL","ToolbarButton","useSelect","useDispatch","undo","undoIcon","redo","redoIcon","displayShortcut","store","coreStore","UndoButton","hasUndo","select","createElement","icon","label","shortcut","primary","onClick","undefined"],"sources":["@wordpress/edit-widgets/src/components/header/undo-redo/undo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { ToolbarButton } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { store as coreStore } from '@wordpress/core-data';\n\nexport default function UndoButton() {\n\tconst hasUndo = useSelect(\n\t\t( select ) => select( coreStore ).hasUndo(),\n\t\t[]\n\t);\n\tconst { undo } = useDispatch( coreStore );\n\treturn (\n\t\t<ToolbarButton\n\t\t\ticon={ ! isRTL() ? undoIcon : redoIcon }\n\t\t\tlabel={ __( 'Undo' ) }\n\t\t\tshortcut={ displayShortcut.primary( 'z' ) }\n\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\taria-disabled={ ! hasUndo }\n\t\t\tonClick={ hasUndo ? undo : undefined }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,IAAI,IAAIC,QAAQ,EAAEC,IAAI,IAAIC,QAAQ,QAAQ,kBAAkB;AACrE,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AAEzD,eAAe,SAASC,UAAUA,CAAA,EAAG;EACpC,MAAMC,OAAO,GAAGV,SAAS,CACtBW,MAAM,IAAMA,MAAM,CAAEH,SAAU,CAAC,CAACE,OAAO,CAAC,CAAC,EAC3C,EACD,CAAC;EACD,MAAM;IAAER;EAAK,CAAC,GAAGD,WAAW,CAAEO,SAAU,CAAC;EACzC,OACCI,aAAA,CAACb,aAAa;IACbc,IAAI,EAAG,CAAEf,KAAK,CAAC,CAAC,GAAGK,QAAQ,GAAGE,QAAU;IACxCS,KAAK,EAAGjB,EAAE,CAAE,MAAO,CAAG;IACtBkB,QAAQ,EAAGT,eAAe,CAACU,OAAO,CAAE,GAAI;IACxC;IACA;IACA;IAAA;IACA,iBAAgB,CAAEN,OAAS;IAC3BO,OAAO,EAAGP,OAAO,GAAGR,IAAI,GAAGgB;EAAW,CACtC,CAAC;AAEJ"}
1
+ {"version":3,"names":["__","isRTL","Button","useSelect","useDispatch","undo","undoIcon","redo","redoIcon","displayShortcut","store","coreStore","forwardRef","UndoButton","props","ref","hasUndo","select","createElement","icon","label","shortcut","primary","onClick","undefined"],"sources":["@wordpress/edit-widgets/src/components/header/undo-redo/undo.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { forwardRef } from '@wordpress/element';\n\nfunction UndoButton( props, ref ) {\n\tconst hasUndo = useSelect(\n\t\t( select ) => select( coreStore ).hasUndo(),\n\t\t[]\n\t);\n\tconst { undo } = useDispatch( coreStore );\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\ticon={ ! isRTL() ? undoIcon : redoIcon }\n\t\t\tlabel={ __( 'Undo' ) }\n\t\t\tshortcut={ displayShortcut.primary( 'z' ) }\n\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\taria-disabled={ ! hasUndo }\n\t\t\tonClick={ hasUndo ? undo : undefined }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( UndoButton );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,IAAI,IAAIC,QAAQ,EAAEC,IAAI,IAAIC,QAAQ,QAAQ,kBAAkB;AACrE,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AACzD,SAASC,UAAU,QAAQ,oBAAoB;AAE/C,SAASC,UAAUA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EACjC,MAAMC,OAAO,GAAGb,SAAS,CACtBc,MAAM,IAAMA,MAAM,CAAEN,SAAU,CAAC,CAACK,OAAO,CAAC,CAAC,EAC3C,EACD,CAAC;EACD,MAAM;IAAEX;EAAK,CAAC,GAAGD,WAAW,CAAEO,SAAU,CAAC;EACzC,OACCO,aAAA,CAAChB,MAAM;IAAA,GACDY,KAAK;IACVC,GAAG,EAAGA,GAAK;IACXI,IAAI,EAAG,CAAElB,KAAK,CAAC,CAAC,GAAGK,QAAQ,GAAGE,QAAU;IACxCY,KAAK,EAAGpB,EAAE,CAAE,MAAO,CAAG;IACtBqB,QAAQ,EAAGZ,eAAe,CAACa,OAAO,CAAE,GAAI;IACxC;IACA;IACA;IAAA;IACA,iBAAgB,CAAEN,OAAS;IAC3BO,OAAO,EAAGP,OAAO,GAAGX,IAAI,GAAGmB;EAAW,CACtC,CAAC;AAEJ;AAEA,eAAeZ,UAAU,CAAEC,UAAW,CAAC"}
package/build-style/style-rtl.css CHANGED
@@ -97,7 +97,7 @@
97
97
  --wp-block-synced-color: #7a00df;
98
98
  --wp-block-synced-color--rgb: 122, 0, 223;
99
99
  }
100
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
100
+ @media (min-resolution: 192dpi) {
101
101
  :root {
102
102
  --wp-admin-border-width-focus: 1.5px;
103
103
  }
@@ -469,7 +469,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
469
469
  .interface-pinned-items {
470
470
  display: flex;
471
471
  gap: 8px;
472
- margin-left: -4px;
473
472
  }
474
473
  .interface-pinned-items .components-button {
475
474
  display: none;
@@ -488,99 +487,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
488
487
  }
489
488
  }
490
489
 
491
- @media (min-width: 600px) {
492
- .interface-preferences-modal {
493
- width: calc(100% - 32px);
494
- height: calc(100% - 120px);
495
- }
496
- }
497
- @media (min-width: 782px) {
498
- .interface-preferences-modal {
499
- width: 750px;
500
- }
501
- }
502
- @media (min-width: 960px) {
503
- .interface-preferences-modal {
504
- height: 70%;
505
- }
506
- }
507
- @media (max-width: 781px) {
508
- .interface-preferences-modal .components-modal__content {
509
- padding: 0;
510
- }
511
- }
512
-
513
- .interface-preferences__tabs .components-tab-panel__tabs {
514
- position: absolute;
515
- top: 84px;
516
- right: 16px;
517
- width: 160px;
518
- }
519
- .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
520
- border-radius: 2px;
521
- font-weight: 400;
522
- }
523
- .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active {
524
- background: #f0f0f0;
525
- box-shadow: none;
526
- font-weight: 500;
527
- }
528
- .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active::after {
529
- content: none;
530
- }
531
- .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
532
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
533
- outline: 2px solid transparent;
534
- }
535
- .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus-visible::before {
536
- content: none;
537
- }
538
- .interface-preferences__tabs .components-tab-panel__tab-content {
539
- padding-right: 24px;
540
- margin-right: 160px;
541
- }
542
-
543
- @media (max-width: 781px) {
544
- .interface-preferences__provider {
545
- height: 100%;
546
- }
547
- }
548
- .interface-preferences-modal__section {
549
- margin: 0 0 2.5rem 0;
550
- }
551
- .interface-preferences-modal__section:last-child {
552
- margin: 0;
553
- }
554
-
555
- .interface-preferences-modal__section-legend {
556
- margin-bottom: 8px;
557
- }
558
-
559
- .interface-preferences-modal__section-title {
560
- font-size: 0.9rem;
561
- font-weight: 600;
562
- margin-top: 0;
563
- }
564
-
565
- .interface-preferences-modal__section-description {
566
- margin: -8px 0 8px 0;
567
- font-size: 12px;
568
- font-style: normal;
569
- color: #757575;
570
- }
571
-
572
- .interface-preferences-modal__section:has(.interface-preferences-modal__section-content:empty) {
573
- display: none;
574
- }
575
-
576
- .interface-preferences-modal__option + .interface-preferences-modal__option {
577
- margin-top: 16px;
578
- }
579
- .interface-preferences-modal__option .components-base-control__help {
580
- margin-top: 0;
581
- margin-right: 48px;
582
- }
583
-
584
490
  .wp-block[data-type="core/widget-area"] {
585
491
  max-width: 700px;
586
492
  margin-right: auto;
@@ -678,7 +584,6 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
678
584
  align-items: center;
679
585
  justify-content: center;
680
586
  flex-shrink: 2;
681
- overflow-x: hidden;
682
587
  padding-right: 16px;
683
588
  }
684
589
 
@@ -701,7 +606,7 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
701
606
  }
702
607
 
703
608
  .edit-widgets-header-toolbar {
704
- border: none;
609
+ gap: 8px;
705
610
  }
706
611
  .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon,
707
612
  .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon {
@@ -940,7 +845,6 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
940
845
  .edit-widgets-notices__dismissible .components-notice,
941
846
  .edit-widgets-notices__pinned .components-notice {
942
847
  box-sizing: border-box;
943
- margin: 0;
944
848
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
945
849
  padding: 0 12px;
946
850
  min-height: 60px;
@@ -985,8 +889,7 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
985
889
  .edit-widgets-welcome-guide__image > img {
986
890
  display: block;
987
891
  max-width: 100%;
988
- -o-object-fit: cover;
989
- object-fit: cover;
892
+ object-fit: cover;
990
893
  }
991
894
  .edit-widgets-welcome-guide__heading {
992
895
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1146,7 +1049,7 @@ body.admin-color-light {
1146
1049
  --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
1147
1050
  --wp-admin-border-width-focus: 2px;
1148
1051
  }
1149
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1052
+ @media (min-resolution: 192dpi) {
1150
1053
  body.admin-color-light {
1151
1054
  --wp-admin-border-width-focus: 1.5px;
1152
1055
  }
@@ -1161,7 +1064,7 @@ body.admin-color-modern {
1161
1064
  --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
1162
1065
  --wp-admin-border-width-focus: 2px;
1163
1066
  }
1164
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1067
+ @media (min-resolution: 192dpi) {
1165
1068
  body.admin-color-modern {
1166
1069
  --wp-admin-border-width-focus: 1.5px;
1167
1070
  }
@@ -1176,7 +1079,7 @@ body.admin-color-blue {
1176
1079
  --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
1177
1080
  --wp-admin-border-width-focus: 2px;
1178
1081
  }
1179
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1082
+ @media (min-resolution: 192dpi) {
1180
1083
  body.admin-color-blue {
1181
1084
  --wp-admin-border-width-focus: 1.5px;
1182
1085
  }
@@ -1191,7 +1094,7 @@ body.admin-color-coffee {
1191
1094
  --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
1192
1095
  --wp-admin-border-width-focus: 2px;
1193
1096
  }
1194
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1097
+ @media (min-resolution: 192dpi) {
1195
1098
  body.admin-color-coffee {
1196
1099
  --wp-admin-border-width-focus: 1.5px;
1197
1100
  }
@@ -1206,7 +1109,7 @@ body.admin-color-ectoplasm {
1206
1109
  --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
1207
1110
  --wp-admin-border-width-focus: 2px;
1208
1111
  }
1209
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1112
+ @media (min-resolution: 192dpi) {
1210
1113
  body.admin-color-ectoplasm {
1211
1114
  --wp-admin-border-width-focus: 1.5px;
1212
1115
  }
@@ -1221,7 +1124,7 @@ body.admin-color-midnight {
1221
1124
  --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
1222
1125
  --wp-admin-border-width-focus: 2px;
1223
1126
  }
1224
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1127
+ @media (min-resolution: 192dpi) {
1225
1128
  body.admin-color-midnight {
1226
1129
  --wp-admin-border-width-focus: 1.5px;
1227
1130
  }
@@ -1236,7 +1139,7 @@ body.admin-color-ocean {
1236
1139
  --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
1237
1140
  --wp-admin-border-width-focus: 2px;
1238
1141
  }
1239
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1142
+ @media (min-resolution: 192dpi) {
1240
1143
  body.admin-color-ocean {
1241
1144
  --wp-admin-border-width-focus: 1.5px;
1242
1145
  }
@@ -1251,7 +1154,7 @@ body.admin-color-sunrise {
1251
1154
  --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
1252
1155
  --wp-admin-border-width-focus: 2px;
1253
1156
  }
1254
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1157
+ @media (min-resolution: 192dpi) {
1255
1158
  body.admin-color-sunrise {
1256
1159
  --wp-admin-border-width-focus: 1.5px;
1257
1160
  }
package/build-style/style.css CHANGED
@@ -97,7 +97,7 @@
97
97
  --wp-block-synced-color: #7a00df;
98
98
  --wp-block-synced-color--rgb: 122, 0, 223;
99
99
  }
100
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
100
+ @media (min-resolution: 192dpi) {
101
101
  :root {
102
102
  --wp-admin-border-width-focus: 1.5px;
103
103
  }
@@ -469,7 +469,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
469
469
  .interface-pinned-items {
470
470
  display: flex;
471
471
  gap: 8px;
472
- margin-right: -4px;
473
472
  }
474
473
  .interface-pinned-items .components-button {
475
474
  display: none;
@@ -488,99 +487,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
488
487
  }
489
488
  }
490
489
 
491
- @media (min-width: 600px) {
492
- .interface-preferences-modal {
493
- width: calc(100% - 32px);
494
- height: calc(100% - 120px);
495
- }
496
- }
497
- @media (min-width: 782px) {
498
- .interface-preferences-modal {
499
- width: 750px;
500
- }
501
- }
502
- @media (min-width: 960px) {
503
- .interface-preferences-modal {
504
- height: 70%;
505
- }
506
- }
507
- @media (max-width: 781px) {
508
- .interface-preferences-modal .components-modal__content {
509
- padding: 0;
510
- }
511
- }
512
-
513
- .interface-preferences__tabs .components-tab-panel__tabs {
514
- position: absolute;
515
- top: 84px;
516
- left: 16px;
517
- width: 160px;
518
- }
519
- .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
520
- border-radius: 2px;
521
- font-weight: 400;
522
- }
523
- .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active {
524
- background: #f0f0f0;
525
- box-shadow: none;
526
- font-weight: 500;
527
- }
528
- .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active::after {
529
- content: none;
530
- }
531
- .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
532
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
533
- outline: 2px solid transparent;
534
- }
535
- .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus-visible::before {
536
- content: none;
537
- }
538
- .interface-preferences__tabs .components-tab-panel__tab-content {
539
- padding-left: 24px;
540
- margin-left: 160px;
541
- }
542
-
543
- @media (max-width: 781px) {
544
- .interface-preferences__provider {
545
- height: 100%;
546
- }
547
- }
548
- .interface-preferences-modal__section {
549
- margin: 0 0 2.5rem 0;
550
- }
551
- .interface-preferences-modal__section:last-child {
552
- margin: 0;
553
- }
554
-
555
- .interface-preferences-modal__section-legend {
556
- margin-bottom: 8px;
557
- }
558
-
559
- .interface-preferences-modal__section-title {
560
- font-size: 0.9rem;
561
- font-weight: 600;
562
- margin-top: 0;
563
- }
564
-
565
- .interface-preferences-modal__section-description {
566
- margin: -8px 0 8px 0;
567
- font-size: 12px;
568
- font-style: normal;
569
- color: #757575;
570
- }
571
-
572
- .interface-preferences-modal__section:has(.interface-preferences-modal__section-content:empty) {
573
- display: none;
574
- }
575
-
576
- .interface-preferences-modal__option + .interface-preferences-modal__option {
577
- margin-top: 16px;
578
- }
579
- .interface-preferences-modal__option .components-base-control__help {
580
- margin-top: 0;
581
- margin-left: 48px;
582
- }
583
-
584
490
  .wp-block[data-type="core/widget-area"] {
585
491
  max-width: 700px;
586
492
  margin-left: auto;
@@ -678,7 +584,6 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
678
584
  align-items: center;
679
585
  justify-content: center;
680
586
  flex-shrink: 2;
681
- overflow-x: hidden;
682
587
  padding-left: 16px;
683
588
  }
684
589
 
@@ -701,7 +606,7 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
701
606
  }
702
607
 
703
608
  .edit-widgets-header-toolbar {
704
- border: none;
609
+ gap: 8px;
705
610
  }
706
611
  .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon,
707
612
  .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon {
@@ -940,7 +845,6 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
940
845
  .edit-widgets-notices__dismissible .components-notice,
941
846
  .edit-widgets-notices__pinned .components-notice {
942
847
  box-sizing: border-box;
943
- margin: 0;
944
848
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
945
849
  padding: 0 12px;
946
850
  min-height: 60px;
@@ -985,8 +889,7 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
985
889
  .edit-widgets-welcome-guide__image > img {
986
890
  display: block;
987
891
  max-width: 100%;
988
- -o-object-fit: cover;
989
- object-fit: cover;
892
+ object-fit: cover;
990
893
  }
991
894
  .edit-widgets-welcome-guide__heading {
992
895
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1146,7 +1049,7 @@ body.admin-color-light {
1146
1049
  --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
1147
1050
  --wp-admin-border-width-focus: 2px;
1148
1051
  }
1149
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1052
+ @media (min-resolution: 192dpi) {
1150
1053
  body.admin-color-light {
1151
1054
  --wp-admin-border-width-focus: 1.5px;
1152
1055
  }
@@ -1161,7 +1064,7 @@ body.admin-color-modern {
1161
1064
  --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
1162
1065
  --wp-admin-border-width-focus: 2px;
1163
1066
  }
1164
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1067
+ @media (min-resolution: 192dpi) {
1165
1068
  body.admin-color-modern {
1166
1069
  --wp-admin-border-width-focus: 1.5px;
1167
1070
  }
@@ -1176,7 +1079,7 @@ body.admin-color-blue {
1176
1079
  --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
1177
1080
  --wp-admin-border-width-focus: 2px;
1178
1081
  }
1179
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1082
+ @media (min-resolution: 192dpi) {
1180
1083
  body.admin-color-blue {
1181
1084
  --wp-admin-border-width-focus: 1.5px;
1182
1085
  }
@@ -1191,7 +1094,7 @@ body.admin-color-coffee {
1191
1094
  --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
1192
1095
  --wp-admin-border-width-focus: 2px;
1193
1096
  }
1194
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1097
+ @media (min-resolution: 192dpi) {
1195
1098
  body.admin-color-coffee {
1196
1099
  --wp-admin-border-width-focus: 1.5px;
1197
1100
  }
@@ -1206,7 +1109,7 @@ body.admin-color-ectoplasm {
1206
1109
  --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
1207
1110
  --wp-admin-border-width-focus: 2px;
1208
1111
  }
1209
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1112
+ @media (min-resolution: 192dpi) {
1210
1113
  body.admin-color-ectoplasm {
1211
1114
  --wp-admin-border-width-focus: 1.5px;
1212
1115
  }
@@ -1221,7 +1124,7 @@ body.admin-color-midnight {
1221
1124
  --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
1222
1125
  --wp-admin-border-width-focus: 2px;
1223
1126
  }
1224
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1127
+ @media (min-resolution: 192dpi) {
1225
1128
  body.admin-color-midnight {
1226
1129
  --wp-admin-border-width-focus: 1.5px;
1227
1130
  }
@@ -1236,7 +1139,7 @@ body.admin-color-ocean {
1236
1139
  --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
1237
1140
  --wp-admin-border-width-focus: 2px;
1238
1141
  }
1239
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1142
+ @media (min-resolution: 192dpi) {
1240
1143
  body.admin-color-ocean {
1241
1144
  --wp-admin-border-width-focus: 1.5px;
1242
1145
  }
@@ -1251,7 +1154,7 @@ body.admin-color-sunrise {
1251
1154
  --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
1252
1155
  --wp-admin-border-width-focus: 2px;
1253
1156
  }
1254
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1157
+ @media (min-resolution: 192dpi) {
1255
1158
  body.admin-color-sunrise {
1256
1159
  --wp-admin-border-width-focus: 1.5px;
1257
1160
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/edit-widgets",
3
- "version": "5.26.0",
3
+ "version": "5.27.0",
4
4
  "description": "Widgets Page module for WordPress..",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -27,32 +27,32 @@
27
27
  "react-native": "src/index",
28
28
  "dependencies": {
29
29
  "@babel/runtime": "^7.16.0",
30
- "@wordpress/api-fetch": "^6.46.0",
31
- "@wordpress/block-editor": "^12.17.0",
32
- "@wordpress/block-library": "^8.26.0",
33
- "@wordpress/blocks": "^12.26.0",
34
- "@wordpress/components": "^25.15.0",
35
- "@wordpress/compose": "^6.26.0",
36
- "@wordpress/core-data": "^6.26.0",
37
- "@wordpress/data": "^9.19.0",
38
- "@wordpress/deprecated": "^3.49.0",
39
- "@wordpress/dom": "^3.49.0",
40
- "@wordpress/element": "^5.26.0",
41
- "@wordpress/hooks": "^3.49.0",
42
- "@wordpress/i18n": "^4.49.0",
43
- "@wordpress/icons": "^9.40.0",
44
- "@wordpress/interface": "^5.26.0",
45
- "@wordpress/keyboard-shortcuts": "^4.26.0",
46
- "@wordpress/keycodes": "^3.49.0",
47
- "@wordpress/media-utils": "^4.40.0",
48
- "@wordpress/notices": "^4.17.0",
49
- "@wordpress/patterns": "^1.10.0",
50
- "@wordpress/plugins": "^6.17.0",
51
- "@wordpress/preferences": "^3.26.0",
52
- "@wordpress/private-apis": "^0.31.0",
53
- "@wordpress/reusable-blocks": "^4.26.0",
54
- "@wordpress/url": "^3.50.0",
55
- "@wordpress/widgets": "^3.26.0",
30
+ "@wordpress/api-fetch": "^6.47.0",
31
+ "@wordpress/block-editor": "^12.18.0",
32
+ "@wordpress/block-library": "^8.27.0",
33
+ "@wordpress/blocks": "^12.27.0",
34
+ "@wordpress/components": "^25.16.0",
35
+ "@wordpress/compose": "^6.27.0",
36
+ "@wordpress/core-data": "^6.27.0",
37
+ "@wordpress/data": "^9.20.0",
38
+ "@wordpress/deprecated": "^3.50.0",
39
+ "@wordpress/dom": "^3.50.0",
40
+ "@wordpress/element": "^5.27.0",
41
+ "@wordpress/hooks": "^3.50.0",
42
+ "@wordpress/i18n": "^4.50.0",
43
+ "@wordpress/icons": "^9.41.0",
44
+ "@wordpress/interface": "^5.27.0",
45
+ "@wordpress/keyboard-shortcuts": "^4.27.0",
46
+ "@wordpress/keycodes": "^3.50.0",
47
+ "@wordpress/media-utils": "^4.41.0",
48
+ "@wordpress/notices": "^4.18.0",
49
+ "@wordpress/patterns": "^1.11.0",
50
+ "@wordpress/plugins": "^6.18.0",
51
+ "@wordpress/preferences": "^3.27.0",
52
+ "@wordpress/private-apis": "^0.32.0",
53
+ "@wordpress/reusable-blocks": "^4.27.0",
54
+ "@wordpress/url": "^3.51.0",
55
+ "@wordpress/widgets": "^3.27.0",
56
56
  "classnames": "^2.3.1",
57
57
  "rememo": "^4.0.2"
58
58
  },
@@ -63,5 +63,5 @@
63
63
  "publishConfig": {
64
64
  "access": "public"
65
65
  },
66
- "gitHead": "5e6f9caa205d3bfdbac131952b7bf9c6ec60569b"
66
+ "gitHead": "45de2cb4212fed7f2763e95f10300d1ff9d0ec08"
67
67
  }
package/src/components/header/document-tools/index.js CHANGED
@@ -83,6 +83,7 @@ function DocumentTools() {
83
83
  className="edit-widgets-header-toolbar"
84
84
  aria-label={ __( 'Document tools' ) }
85
85
  shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
86
+ variant="unstyled"
86
87
  >
87
88
  <ToolbarItem
88
89
  ref={ inserterButton }
@@ -104,8 +105,8 @@ function DocumentTools() {
104
105
  />
105
106
  { isMediumViewport && (
106
107
  <>
107
- <UndoButton />
108
- <RedoButton />
108
+ <ToolbarItem as={ UndoButton } />
109
+ <ToolbarItem as={ RedoButton } />
109
110
  <ToolbarItem
110
111
  as={ Button }
111
112
  className="edit-widgets-header-toolbar__list-view-toggle"
package/src/components/header/style.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  border-bottom: 0;
18
18
  }
19
19
 
20
- // Modified group borders
20
+ // Modified group borders.
21
21
  .components-toolbar-group,
22
22
  .components-toolbar {
23
23
  border-right: none;
@@ -45,7 +45,6 @@
45
45
  align-items: center;
46
46
  justify-content: center;
47
47
  flex-shrink: 2;
48
- overflow-x: hidden;
49
48
  padding-left: $grid-unit-20;
50
49
  }
51
50
 
@@ -67,7 +66,7 @@
67
66
  }
68
67
 
69
68
  .edit-widgets-header-toolbar {
70
- border: none;
69
+ gap: $grid-unit-10;
71
70
 
72
71
  // The Toolbar component adds different styles to buttons, so we reset them
73
72
  // here to the original button styles
package/src/components/header/undo-redo/redo.js CHANGED
@@ -2,13 +2,14 @@
2
2
  * WordPress dependencies
3
3
  */
4
4
  import { __, isRTL } from '@wordpress/i18n';
5
- import { ToolbarButton } from '@wordpress/components';
5
+ import { Button } from '@wordpress/components';
6
6
  import { useSelect, useDispatch } from '@wordpress/data';
7
7
  import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
8
8
  import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
9
9
  import { store as coreStore } from '@wordpress/core-data';
10
+ import { forwardRef } from '@wordpress/element';
10
11
 
11
- export default function RedoButton() {
12
+ function RedoButton( props, ref ) {
12
13
  const shortcut = isAppleOS()
13
14
  ? displayShortcut.primaryShift( 'z' )
14
15
  : displayShortcut.primary( 'y' );
@@ -19,7 +20,9 @@ export default function RedoButton() {
19
20
  );
20
21
  const { redo } = useDispatch( coreStore );
21
22
  return (
22
- <ToolbarButton
23
+ <Button
24
+ { ...props }
25
+ ref={ ref }
23
26
  icon={ ! isRTL() ? redoIcon : undoIcon }
24
27
  label={ __( 'Redo' ) }
25
28
  shortcut={ shortcut }
@@ -31,3 +34,5 @@ export default function RedoButton() {
31
34
  />
32
35
  );
33
36
  }
37
+
38
+ export default forwardRef( RedoButton );
package/src/components/header/undo-redo/undo.js CHANGED
@@ -2,20 +2,23 @@
2
2
  * WordPress dependencies
3
3
  */
4
4
  import { __, isRTL } from '@wordpress/i18n';
5
- import { ToolbarButton } from '@wordpress/components';
5
+ import { Button } from '@wordpress/components';
6
6
  import { useSelect, useDispatch } from '@wordpress/data';
7
7
  import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
8
8
  import { displayShortcut } from '@wordpress/keycodes';
9
9
  import { store as coreStore } from '@wordpress/core-data';
10
+ import { forwardRef } from '@wordpress/element';
10
11
 
11
- export default function UndoButton() {
12
+ function UndoButton( props, ref ) {
12
13
  const hasUndo = useSelect(
13
14
  ( select ) => select( coreStore ).hasUndo(),
14
15
  []
15
16
  );
16
17
  const { undo } = useDispatch( coreStore );
17
18
  return (
18
- <ToolbarButton
19
+ <Button
20
+ { ...props }
21
+ ref={ ref }
19
22
  icon={ ! isRTL() ? undoIcon : redoIcon }
20
23
  label={ __( 'Undo' ) }
21
24
  shortcut={ displayShortcut.primary( 'z' ) }
@@ -27,3 +30,5 @@ export default function UndoButton() {
27
30
  />
28
31
  );
29
32
  }
33
+
34
+ export default forwardRef( UndoButton );
package/src/components/notices/style.scss CHANGED
@@ -11,7 +11,6 @@
11
11
  .edit-widgets-notices__pinned {
12
12
  .components-notice {
13
13
  box-sizing: border-box;
14
- margin: 0;
15
14
  border-bottom: $border-width solid rgba(0, 0, 0, 0.2);
16
15
  padding: 0 $grid-unit-15;
17
16