@wordpress/block-editor
Version:
90 lines (87 loc) • 3.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const selectIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SVG, {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
d: "M9.4 20.5L5.2 3.8l14.6 9-2 .3c-.2 0-.4.1-.7.1-.9.2-1.6.3-2.2.5-.8.3-1.4.5-1.8.8-.4.3-.8.8-1.3 1.5-.4.5-.8 1.2-1.2 2l-.3.6-.9 1.9zM7.6 7.1l2.4 9.3c.2-.4.5-.8.7-1.1.6-.8 1.1-1.4 1.6-1.8.5-.4 1.3-.8 2.2-1.1l1.2-.3-8.1-5z"
})
});
function ToolSelector(props, ref) {
const mode = (0, _data.useSelect)(select => select(_store.store).__unstableGetEditorMode(), []);
const {
__unstableSetEditorMode
} = (0, _data.useDispatch)(_store.store);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
renderToggle: ({
isOpen,
onToggle
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
size: "compact",
...props,
ref: ref,
icon: mode === 'navigation' ? _icons.edit : selectIcon,
"aria-expanded": isOpen,
"aria-haspopup": "true",
onClick: onToggle
/* translators: button label text should, if possible, be under 16 characters. */,
label: (0, _i18n.__)('Tools')
}),
popoverProps: {
placement: 'bottom-start'
},
renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.NavigableMenu, {
className: "block-editor-tool-selector__menu",
role: "menu",
"aria-label": (0, _i18n.__)('Tools'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItemsChoice, {
value: mode === 'navigation' ? 'navigation' : 'edit',
onSelect: newMode => {
__unstableSetEditorMode(newMode);
},
choices: [{
value: 'navigation',
label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.edit
}), (0, _i18n.__)('Write')]
}),
info: (0, _i18n.__)('Focus on content.'),
'aria-label': (0, _i18n.__)('Write')
}, {
value: 'edit',
label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [selectIcon, (0, _i18n.__)('Design')]
}),
info: (0, _i18n.__)('Edit layout and styles.'),
'aria-label': (0, _i18n.__)('Design')
}]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-tool-selector__help",
children: (0, _i18n.__)('Tools provide different sets of interactions for blocks. Choose between simplified content tools (Write) and advanced visual editing tools (Design).')
})]
})
});
}
var _default = exports.default = (0, _element.forwardRef)(ToolSelector);
//# sourceMappingURL=index.js.map