@wordpress/customize-widgets 4.22.0 → 4.24.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 +4 -0
- package/build/components/header/index.js +17 -3
- package/build/components/header/index.js.map +1 -1
- package/build-module/components/header/index.js +19 -5
- package/build-module/components/header/index.js.map +1 -1
- package/build-style/style-rtl.css +0 -25
- package/build-style/style.css +0 -25
- package/package.json +22 -22
- package/src/components/header/index.js +25 -4
- package/src/style.scss +0 -31
package/CHANGELOG.md
CHANGED
|
@@ -7,14 +7,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
var _element = require("@wordpress/element");
|
|
11
|
-
var _i18n = require("@wordpress/i18n");
|
|
12
10
|
var _components = require("@wordpress/components");
|
|
11
|
+
var _compose = require("@wordpress/compose");
|
|
13
12
|
var _blockEditor = require("@wordpress/block-editor");
|
|
13
|
+
var _element = require("@wordpress/element");
|
|
14
14
|
var _keycodes = require("@wordpress/keycodes");
|
|
15
|
+
var _i18n = require("@wordpress/i18n");
|
|
15
16
|
var _icons = require("@wordpress/icons");
|
|
16
17
|
var _inserter = _interopRequireDefault(require("../inserter"));
|
|
17
18
|
var _moreMenu = _interopRequireDefault(require("../more-menu"));
|
|
19
|
+
var _lockUnlock = require("../../lock-unlock");
|
|
18
20
|
/**
|
|
19
21
|
* External dependencies
|
|
20
22
|
*/
|
|
@@ -27,6 +29,9 @@ var _moreMenu = _interopRequireDefault(require("../more-menu"));
|
|
|
27
29
|
* Internal dependencies
|
|
28
30
|
*/
|
|
29
31
|
|
|
32
|
+
const {
|
|
33
|
+
BlockContextualToolbar
|
|
34
|
+
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
|
|
30
35
|
function Header({
|
|
31
36
|
sidebar,
|
|
32
37
|
inserter,
|
|
@@ -34,6 +39,8 @@ function Header({
|
|
|
34
39
|
setIsInserterOpened,
|
|
35
40
|
isFixedToolbarActive
|
|
36
41
|
}) {
|
|
42
|
+
const isLargeViewport = (0, _compose.useViewportMatch)('medium');
|
|
43
|
+
const blockToolbarRef = (0, _element.useRef)();
|
|
37
44
|
const [[hasUndo, hasRedo], setUndoRedo] = (0, _element.useState)([sidebar.hasUndo(), sidebar.hasRedo()]);
|
|
38
45
|
const shortcut = (0, _keycodes.isAppleOS)() ? _keycodes.displayShortcut.primaryShift('z') : _keycodes.displayShortcut.primary('y');
|
|
39
46
|
(0, _element.useEffect)(() => {
|
|
@@ -83,7 +90,14 @@ function Header({
|
|
|
83
90
|
}
|
|
84
91
|
}), (0, _react.createElement)(_moreMenu.default, null))), (0, _element.createPortal)((0, _react.createElement)(_inserter.default, {
|
|
85
92
|
setIsOpened: setIsInserterOpened
|
|
86
|
-
}), inserter.contentContainer[0]))
|
|
93
|
+
}), inserter.contentContainer[0]), isFixedToolbarActive && isLargeViewport && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("div", {
|
|
94
|
+
className: "selected-block-tools-wrapper"
|
|
95
|
+
}, (0, _react.createElement)(BlockContextualToolbar, {
|
|
96
|
+
isFixed: true
|
|
97
|
+
})), (0, _react.createElement)(_components.Popover.Slot, {
|
|
98
|
+
ref: blockToolbarRef,
|
|
99
|
+
name: "block-toolbar"
|
|
100
|
+
})));
|
|
87
101
|
}
|
|
88
102
|
var _default = Header;
|
|
89
103
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_classnames","_interopRequireDefault","require","
|
|
1
|
+
{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_compose","_blockEditor","_element","_keycodes","_i18n","_icons","_inserter","_moreMenu","_lockUnlock","BlockContextualToolbar","unlock","blockEditorPrivateApis","Header","sidebar","inserter","isInserterOpened","setIsInserterOpened","isFixedToolbarActive","isLargeViewport","useViewportMatch","blockToolbarRef","useRef","hasUndo","hasRedo","setUndoRedo","useState","shortcut","isAppleOS","displayShortcut","primaryShift","primary","useEffect","subscribeHistory","_react","createElement","Fragment","className","classnames","NavigableToolbar","__","ToolbarButton","icon","isRTL","undoIcon","redoIcon","label","onClick","undo","redo","isPressed","variant","plus","_x","isOpen","default","createPortal","setIsOpened","contentContainer","isFixed","Popover","Slot","ref","name","_default","exports"],"sources":["@wordpress/customize-widgets/src/components/header/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Popover, ToolbarButton } from '@wordpress/components';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tNavigableToolbar,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { createPortal, useEffect, useRef, useState } from '@wordpress/element';\nimport { displayShortcut, isAppleOS } from '@wordpress/keycodes';\nimport { __, _x, isRTL } from '@wordpress/i18n';\nimport { plus, undo as undoIcon, redo as redoIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Inserter from '../inserter';\nimport MoreMenu from '../more-menu';\nimport { unlock } from '../../lock-unlock';\n\nconst { BlockContextualToolbar } = unlock( blockEditorPrivateApis );\n\nfunction Header( {\n\tsidebar,\n\tinserter,\n\tisInserterOpened,\n\tsetIsInserterOpened,\n\tisFixedToolbarActive,\n} ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst blockToolbarRef = useRef();\n\tconst [ [ hasUndo, hasRedo ], setUndoRedo ] = useState( [\n\t\tsidebar.hasUndo(),\n\t\tsidebar.hasRedo(),\n\t] );\n\n\tconst shortcut = isAppleOS()\n\t\t? displayShortcut.primaryShift( 'z' )\n\t\t: displayShortcut.primary( 'y' );\n\n\tuseEffect( () => {\n\t\treturn sidebar.subscribeHistory( () => {\n\t\t\tsetUndoRedo( [ sidebar.hasUndo(), sidebar.hasRedo() ] );\n\t\t} );\n\t}, [ sidebar ] );\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclassName={ classnames( 'customize-widgets-header', {\n\t\t\t\t\t'is-fixed-toolbar-active': isFixedToolbarActive,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<NavigableToolbar\n\t\t\t\t\tclassName=\"customize-widgets-header-toolbar\"\n\t\t\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\t\t>\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\ticon={ ! isRTL() ? undoIcon : redoIcon }\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={ __( 'Undo' ) }\n\t\t\t\t\t\tshortcut={ displayShortcut.primary( 'z' ) }\n\t\t\t\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\t\t\t\taria-disabled={ ! hasUndo }\n\t\t\t\t\t\tonClick={ sidebar.undo }\n\t\t\t\t\t\tclassName=\"customize-widgets-editor-history-button undo-button\"\n\t\t\t\t\t/>\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\ticon={ ! isRTL() ? redoIcon : undoIcon }\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={ __( 'Redo' ) }\n\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\t\t\t\taria-disabled={ ! hasRedo }\n\t\t\t\t\t\tonClick={ sidebar.redo }\n\t\t\t\t\t\tclassName=\"customize-widgets-editor-history-button redo-button\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tclassName=\"customize-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\tisPressed={ isInserterOpened }\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t'Add block',\n\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetIsInserterOpened( ( isOpen ) => ! isOpen );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</NavigableToolbar>\n\t\t\t</div>\n\n\t\t\t{ createPortal(\n\t\t\t\t<Inserter setIsOpened={ setIsInserterOpened } />,\n\t\t\t\tinserter.contentContainer[ 0 ]\n\t\t\t) }\n\n\t\t\t{ isFixedToolbarActive && isLargeViewport && (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"selected-block-tools-wrapper\">\n\t\t\t\t\t\t<BlockContextualToolbar isFixed />\n\t\t\t\t\t</div>\n\t\t\t\t\t<Popover.Slot\n\t\t\t\t\t\tref={ blockToolbarRef }\n\t\t\t\t\t\tname=\"block-toolbar\"\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default Header;\n"],"mappings":"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"}
|
|
@@ -7,11 +7,12 @@ import classnames from 'classnames';
|
|
|
7
7
|
/**
|
|
8
8
|
* WordPress dependencies
|
|
9
9
|
*/
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
10
|
+
import { Popover, ToolbarButton } from '@wordpress/components';
|
|
11
|
+
import { useViewportMatch } from '@wordpress/compose';
|
|
12
|
+
import { NavigableToolbar, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
|
|
13
|
+
import { createPortal, useEffect, useRef, useState } from '@wordpress/element';
|
|
14
14
|
import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
|
|
15
|
+
import { __, _x, isRTL } from '@wordpress/i18n';
|
|
15
16
|
import { plus, undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
|
|
16
17
|
|
|
17
18
|
/**
|
|
@@ -19,6 +20,10 @@ import { plus, undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
|
|
|
19
20
|
*/
|
|
20
21
|
import Inserter from '../inserter';
|
|
21
22
|
import MoreMenu from '../more-menu';
|
|
23
|
+
import { unlock } from '../../lock-unlock';
|
|
24
|
+
const {
|
|
25
|
+
BlockContextualToolbar
|
|
26
|
+
} = unlock(blockEditorPrivateApis);
|
|
22
27
|
function Header({
|
|
23
28
|
sidebar,
|
|
24
29
|
inserter,
|
|
@@ -26,6 +31,8 @@ function Header({
|
|
|
26
31
|
setIsInserterOpened,
|
|
27
32
|
isFixedToolbarActive
|
|
28
33
|
}) {
|
|
34
|
+
const isLargeViewport = useViewportMatch('medium');
|
|
35
|
+
const blockToolbarRef = useRef();
|
|
29
36
|
const [[hasUndo, hasRedo], setUndoRedo] = useState([sidebar.hasUndo(), sidebar.hasRedo()]);
|
|
30
37
|
const shortcut = isAppleOS() ? displayShortcut.primaryShift('z') : displayShortcut.primary('y');
|
|
31
38
|
useEffect(() => {
|
|
@@ -75,7 +82,14 @@ function Header({
|
|
|
75
82
|
}
|
|
76
83
|
}), createElement(MoreMenu, null))), createPortal(createElement(Inserter, {
|
|
77
84
|
setIsOpened: setIsInserterOpened
|
|
78
|
-
}), inserter.contentContainer[0])
|
|
85
|
+
}), inserter.contentContainer[0]), isFixedToolbarActive && isLargeViewport && createElement(Fragment, null, createElement("div", {
|
|
86
|
+
className: "selected-block-tools-wrapper"
|
|
87
|
+
}, createElement(BlockContextualToolbar, {
|
|
88
|
+
isFixed: true
|
|
89
|
+
})), createElement(Popover.Slot, {
|
|
90
|
+
ref: blockToolbarRef,
|
|
91
|
+
name: "block-toolbar"
|
|
92
|
+
})));
|
|
79
93
|
}
|
|
80
94
|
export default Header;
|
|
81
95
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["classnames","
|
|
1
|
+
{"version":3,"names":["classnames","Popover","ToolbarButton","useViewportMatch","NavigableToolbar","privateApis","blockEditorPrivateApis","createPortal","useEffect","useRef","useState","displayShortcut","isAppleOS","__","_x","isRTL","plus","undo","undoIcon","redo","redoIcon","Inserter","MoreMenu","unlock","BlockContextualToolbar","Header","sidebar","inserter","isInserterOpened","setIsInserterOpened","isFixedToolbarActive","isLargeViewport","blockToolbarRef","hasUndo","hasRedo","setUndoRedo","shortcut","primaryShift","primary","subscribeHistory","createElement","Fragment","className","icon","label","onClick","isPressed","variant","isOpen","setIsOpened","contentContainer","isFixed","Slot","ref","name"],"sources":["@wordpress/customize-widgets/src/components/header/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Popover, ToolbarButton } from '@wordpress/components';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tNavigableToolbar,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { createPortal, useEffect, useRef, useState } from '@wordpress/element';\nimport { displayShortcut, isAppleOS } from '@wordpress/keycodes';\nimport { __, _x, isRTL } from '@wordpress/i18n';\nimport { plus, undo as undoIcon, redo as redoIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Inserter from '../inserter';\nimport MoreMenu from '../more-menu';\nimport { unlock } from '../../lock-unlock';\n\nconst { BlockContextualToolbar } = unlock( blockEditorPrivateApis );\n\nfunction Header( {\n\tsidebar,\n\tinserter,\n\tisInserterOpened,\n\tsetIsInserterOpened,\n\tisFixedToolbarActive,\n} ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst blockToolbarRef = useRef();\n\tconst [ [ hasUndo, hasRedo ], setUndoRedo ] = useState( [\n\t\tsidebar.hasUndo(),\n\t\tsidebar.hasRedo(),\n\t] );\n\n\tconst shortcut = isAppleOS()\n\t\t? displayShortcut.primaryShift( 'z' )\n\t\t: displayShortcut.primary( 'y' );\n\n\tuseEffect( () => {\n\t\treturn sidebar.subscribeHistory( () => {\n\t\t\tsetUndoRedo( [ sidebar.hasUndo(), sidebar.hasRedo() ] );\n\t\t} );\n\t}, [ sidebar ] );\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclassName={ classnames( 'customize-widgets-header', {\n\t\t\t\t\t'is-fixed-toolbar-active': isFixedToolbarActive,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<NavigableToolbar\n\t\t\t\t\tclassName=\"customize-widgets-header-toolbar\"\n\t\t\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\t\t>\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\ticon={ ! isRTL() ? undoIcon : redoIcon }\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={ __( 'Undo' ) }\n\t\t\t\t\t\tshortcut={ displayShortcut.primary( 'z' ) }\n\t\t\t\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\t\t\t\taria-disabled={ ! hasUndo }\n\t\t\t\t\t\tonClick={ sidebar.undo }\n\t\t\t\t\t\tclassName=\"customize-widgets-editor-history-button undo-button\"\n\t\t\t\t\t/>\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\ticon={ ! isRTL() ? redoIcon : undoIcon }\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={ __( 'Redo' ) }\n\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t// If there are no undo levels we don't want to actually disable this\n\t\t\t\t\t\t// button, because it will remove focus for keyboard users.\n\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/issues/3486\n\t\t\t\t\t\taria-disabled={ ! hasRedo }\n\t\t\t\t\t\tonClick={ sidebar.redo }\n\t\t\t\t\t\tclassName=\"customize-widgets-editor-history-button redo-button\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tclassName=\"customize-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\tisPressed={ isInserterOpened }\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t'Add block',\n\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetIsInserterOpened( ( isOpen ) => ! isOpen );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</NavigableToolbar>\n\t\t\t</div>\n\n\t\t\t{ createPortal(\n\t\t\t\t<Inserter setIsOpened={ setIsInserterOpened } />,\n\t\t\t\tinserter.contentContainer[ 0 ]\n\t\t\t) }\n\n\t\t\t{ isFixedToolbarActive && isLargeViewport && (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"selected-block-tools-wrapper\">\n\t\t\t\t\t\t<BlockContextualToolbar isFixed />\n\t\t\t\t\t</div>\n\t\t\t\t\t<Popover.Slot\n\t\t\t\t\t\tref={ blockToolbarRef }\n\t\t\t\t\t\tname=\"block-toolbar\"\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default Header;\n"],"mappings":"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"}
|
|
@@ -325,29 +325,4 @@
|
|
|
325
325
|
.customize-widgets-popover *::before,
|
|
326
326
|
.customize-widgets-popover *::after {
|
|
327
327
|
box-sizing: inherit;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
/**
|
|
331
|
-
Fixed bloock toolbar overrides. We can't detect each editor instance
|
|
332
|
-
in the styles of the block editor component so we need to override
|
|
333
|
-
the fixed styles here because the breakpoint css does not fire in the
|
|
334
|
-
customizer's left panel.
|
|
335
|
-
*/
|
|
336
|
-
.block-editor-block-contextual-toolbar.is-fixed {
|
|
337
|
-
position: sticky;
|
|
338
|
-
top: 0;
|
|
339
|
-
right: 0;
|
|
340
|
-
z-index: 6;
|
|
341
|
-
width: calc(100% + 2 * 12px);
|
|
342
|
-
overflow-y: hidden;
|
|
343
|
-
border: none;
|
|
344
|
-
border-bottom: 1px solid #e0e0e0;
|
|
345
|
-
border-radius: 0;
|
|
346
|
-
}
|
|
347
|
-
.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
|
|
348
|
-
.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
|
|
349
|
-
border-left-color: #e0e0e0;
|
|
350
|
-
}
|
|
351
|
-
.block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
|
|
352
|
-
margin-right: -12px;
|
|
353
328
|
}
|
package/build-style/style.css
CHANGED
|
@@ -325,29 +325,4 @@
|
|
|
325
325
|
.customize-widgets-popover *::before,
|
|
326
326
|
.customize-widgets-popover *::after {
|
|
327
327
|
box-sizing: inherit;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
/**
|
|
331
|
-
Fixed bloock toolbar overrides. We can't detect each editor instance
|
|
332
|
-
in the styles of the block editor component so we need to override
|
|
333
|
-
the fixed styles here because the breakpoint css does not fire in the
|
|
334
|
-
customizer's left panel.
|
|
335
|
-
*/
|
|
336
|
-
.block-editor-block-contextual-toolbar.is-fixed {
|
|
337
|
-
position: sticky;
|
|
338
|
-
top: 0;
|
|
339
|
-
left: 0;
|
|
340
|
-
z-index: 6;
|
|
341
|
-
width: calc(100% + 2 * 12px);
|
|
342
|
-
overflow-y: hidden;
|
|
343
|
-
border: none;
|
|
344
|
-
border-bottom: 1px solid #e0e0e0;
|
|
345
|
-
border-radius: 0;
|
|
346
|
-
}
|
|
347
|
-
.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
|
|
348
|
-
.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
|
|
349
|
-
border-right-color: #e0e0e0;
|
|
350
|
-
}
|
|
351
|
-
.block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
|
|
352
|
-
margin-left: -12px;
|
|
353
328
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/customize-widgets",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.24.0",
|
|
4
4
|
"description": "Widgets blocks in Customizer Module for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -24,26 +24,26 @@
|
|
|
24
24
|
"react-native": "src/index",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.16.0",
|
|
27
|
-
"@wordpress/block-editor": "^12.
|
|
28
|
-
"@wordpress/block-library": "^8.
|
|
29
|
-
"@wordpress/blocks": "^12.
|
|
30
|
-
"@wordpress/components": "^25.
|
|
31
|
-
"@wordpress/compose": "^6.
|
|
32
|
-
"@wordpress/core-data": "^6.
|
|
33
|
-
"@wordpress/data": "^9.
|
|
34
|
-
"@wordpress/dom": "^3.
|
|
35
|
-
"@wordpress/element": "^5.
|
|
36
|
-
"@wordpress/hooks": "^3.
|
|
37
|
-
"@wordpress/i18n": "^4.
|
|
38
|
-
"@wordpress/icons": "^9.
|
|
39
|
-
"@wordpress/interface": "^5.
|
|
40
|
-
"@wordpress/is-shallow-equal": "^4.
|
|
41
|
-
"@wordpress/keyboard-shortcuts": "^4.
|
|
42
|
-
"@wordpress/keycodes": "^3.
|
|
43
|
-
"@wordpress/media-utils": "^4.
|
|
44
|
-
"@wordpress/preferences": "^3.
|
|
45
|
-
"@wordpress/private-apis": "^0.
|
|
46
|
-
"@wordpress/widgets": "^3.
|
|
27
|
+
"@wordpress/block-editor": "^12.15.0",
|
|
28
|
+
"@wordpress/block-library": "^8.24.0",
|
|
29
|
+
"@wordpress/blocks": "^12.24.0",
|
|
30
|
+
"@wordpress/components": "^25.13.0",
|
|
31
|
+
"@wordpress/compose": "^6.24.0",
|
|
32
|
+
"@wordpress/core-data": "^6.24.0",
|
|
33
|
+
"@wordpress/data": "^9.17.0",
|
|
34
|
+
"@wordpress/dom": "^3.47.0",
|
|
35
|
+
"@wordpress/element": "^5.24.0",
|
|
36
|
+
"@wordpress/hooks": "^3.47.0",
|
|
37
|
+
"@wordpress/i18n": "^4.47.0",
|
|
38
|
+
"@wordpress/icons": "^9.38.0",
|
|
39
|
+
"@wordpress/interface": "^5.24.0",
|
|
40
|
+
"@wordpress/is-shallow-equal": "^4.47.0",
|
|
41
|
+
"@wordpress/keyboard-shortcuts": "^4.24.0",
|
|
42
|
+
"@wordpress/keycodes": "^3.47.0",
|
|
43
|
+
"@wordpress/media-utils": "^4.38.0",
|
|
44
|
+
"@wordpress/preferences": "^3.24.0",
|
|
45
|
+
"@wordpress/private-apis": "^0.29.0",
|
|
46
|
+
"@wordpress/widgets": "^3.24.0",
|
|
47
47
|
"classnames": "^2.3.1",
|
|
48
48
|
"fast-deep-equal": "^3.1.3"
|
|
49
49
|
},
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
|
|
58
58
|
}
|
|
@@ -6,11 +6,15 @@ import classnames from 'classnames';
|
|
|
6
6
|
/**
|
|
7
7
|
* WordPress dependencies
|
|
8
8
|
*/
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
9
|
+
import { Popover, ToolbarButton } from '@wordpress/components';
|
|
10
|
+
import { useViewportMatch } from '@wordpress/compose';
|
|
11
|
+
import {
|
|
12
|
+
NavigableToolbar,
|
|
13
|
+
privateApis as blockEditorPrivateApis,
|
|
14
|
+
} from '@wordpress/block-editor';
|
|
15
|
+
import { createPortal, useEffect, useRef, useState } from '@wordpress/element';
|
|
13
16
|
import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
|
|
17
|
+
import { __, _x, isRTL } from '@wordpress/i18n';
|
|
14
18
|
import { plus, undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
|
|
15
19
|
|
|
16
20
|
/**
|
|
@@ -18,6 +22,9 @@ import { plus, undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
|
|
|
18
22
|
*/
|
|
19
23
|
import Inserter from '../inserter';
|
|
20
24
|
import MoreMenu from '../more-menu';
|
|
25
|
+
import { unlock } from '../../lock-unlock';
|
|
26
|
+
|
|
27
|
+
const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
|
|
21
28
|
|
|
22
29
|
function Header( {
|
|
23
30
|
sidebar,
|
|
@@ -26,6 +33,8 @@ function Header( {
|
|
|
26
33
|
setIsInserterOpened,
|
|
27
34
|
isFixedToolbarActive,
|
|
28
35
|
} ) {
|
|
36
|
+
const isLargeViewport = useViewportMatch( 'medium' );
|
|
37
|
+
const blockToolbarRef = useRef();
|
|
29
38
|
const [ [ hasUndo, hasRedo ], setUndoRedo ] = useState( [
|
|
30
39
|
sidebar.hasUndo(),
|
|
31
40
|
sidebar.hasRedo(),
|
|
@@ -98,6 +107,18 @@ function Header( {
|
|
|
98
107
|
<Inserter setIsOpened={ setIsInserterOpened } />,
|
|
99
108
|
inserter.contentContainer[ 0 ]
|
|
100
109
|
) }
|
|
110
|
+
|
|
111
|
+
{ isFixedToolbarActive && isLargeViewport && (
|
|
112
|
+
<>
|
|
113
|
+
<div className="selected-block-tools-wrapper">
|
|
114
|
+
<BlockContextualToolbar isFixed />
|
|
115
|
+
</div>
|
|
116
|
+
<Popover.Slot
|
|
117
|
+
ref={ blockToolbarRef }
|
|
118
|
+
name="block-toolbar"
|
|
119
|
+
/>
|
|
120
|
+
</>
|
|
121
|
+
) }
|
|
101
122
|
</>
|
|
102
123
|
);
|
|
103
124
|
}
|
package/src/style.scss
CHANGED
|
@@ -17,34 +17,3 @@
|
|
|
17
17
|
.customize-widgets-popover {
|
|
18
18
|
@include reset;
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
Fixed bloock toolbar overrides. We can't detect each editor instance
|
|
23
|
-
in the styles of the block editor component so we need to override
|
|
24
|
-
the fixed styles here because the breakpoint css does not fire in the
|
|
25
|
-
customizer's left panel.
|
|
26
|
-
*/
|
|
27
|
-
.block-editor-block-contextual-toolbar {
|
|
28
|
-
&.is-fixed {
|
|
29
|
-
position: sticky;
|
|
30
|
-
top: 0;
|
|
31
|
-
left: 0;
|
|
32
|
-
z-index: z-index(".block-editor-block-list__insertion-point");
|
|
33
|
-
width: calc(100% + 2 * 12px); //12px is the padding of customizer sidebar content
|
|
34
|
-
|
|
35
|
-
overflow-y: hidden;
|
|
36
|
-
|
|
37
|
-
border: none;
|
|
38
|
-
border-bottom: $border-width solid $gray-200;
|
|
39
|
-
border-radius: 0;
|
|
40
|
-
|
|
41
|
-
.block-editor-block-toolbar .components-toolbar-group,
|
|
42
|
-
.block-editor-block-toolbar .components-toolbar {
|
|
43
|
-
border-right-color: $gray-200;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&.is-collapsed {
|
|
47
|
-
margin-left: -12px; //12px is the padding of customizer sidebar content
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}
|