@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
93 lines (89 loc) • 4.01 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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 _blockEditor = require("@wordpress/block-editor");
var _ = _interopRequireWildcard(require("./"));
var _check = _interopRequireDefault(require("./check"));
var _postPanelRow = _interopRequireDefault(require("../post-panel-row"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Renders the Post Author Panel component.
*
* @return {Component} The component to be rendered.
*/function PostFormat() {
const {
postFormat
} = (0, _data.useSelect)(select => {
const {
getEditedPostAttribute
} = select(_store.store);
const _postFormat = getEditedPostAttribute('format');
return {
postFormat: _postFormat !== null && _postFormat !== void 0 ? _postFormat : 'standard'
};
}, []);
const activeFormat = _.POST_FORMATS.find(format => format.id === postFormat);
// Use internal state instead of a ref to make sure that the component
// re-renders when the popover's anchor updates.
const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
// Memoize popoverProps to avoid returning a new object every time.
const popoverProps = (0, _element.useMemo)(() => ({
// Anchor the popover to the middle of the entire row so that it doesn't
// move around when the label changes.
anchor: popoverAnchor,
placement: 'left-start',
offset: 36,
shift: true
}), [popoverAnchor]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_check.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_postPanelRow.default, {
label: (0, _i18n.__)('Format'),
ref: setPopoverAnchor,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
popoverProps: popoverProps,
contentClassName: "editor-post-format__dialog",
focusOnMount: true,
renderToggle: ({
isOpen,
onToggle
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
size: "compact",
variant: "tertiary",
"aria-expanded": isOpen,
"aria-label": (0, _i18n.sprintf)(
// translators: %s: Current post format.
(0, _i18n.__)('Change format: %s'), activeFormat?.caption),
onClick: onToggle,
children: activeFormat?.caption
}),
renderContent: ({
onClose
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "editor-post-format__dialog-content",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalInspectorPopoverHeader, {
title: (0, _i18n.__)('Format'),
onClose: onClose
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {})]
})
})
})
});
}
var _default = exports.default = PostFormat;
//# sourceMappingURL=panel.js.map