@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
97 lines (96 loc) • 2.68 kB
JavaScript
// packages/editor/src/components/styles-canvas/style-book.js
import { useMemo, forwardRef } from "@wordpress/element";
import { useGlobalStylesRevisions } from "@wordpress/global-styles-ui";
import StyleBook from "../style-book/index.mjs";
import { STYLE_BOOK_COLOR_GROUPS } from "../style-book/constants.mjs";
import { useGlobalStyles } from "../global-styles/hooks.mjs";
import { jsx } from "react/jsx-runtime";
function StyleBookWithNavigation({
path,
onPathChange,
userConfig,
forwardedRef
}) {
return /* @__PURE__ */ jsx(
StyleBook,
{
ref: forwardedRef,
path,
userConfig,
isSelected: (blockName) => (
// Match '/blocks/core%2Fbutton' and
// '/blocks/core%2Fbutton/typography', but not
// '/blocks/core%2Fbuttons'.
path === `/blocks/${encodeURIComponent(blockName)}` || path?.startsWith(
`/blocks/${encodeURIComponent(blockName)}/`
)
),
onSelect: (blockName) => {
if (STYLE_BOOK_COLOR_GROUPS.find(
(group) => group.slug === blockName
)) {
onPathChange?.("/colors/palette");
return;
}
if (blockName === "typography") {
onPathChange?.("/typography");
return;
}
onPathChange?.("/blocks/" + encodeURIComponent(blockName));
}
}
);
}
function StylesCanvasRevisionStyleBook({ path, onPathChange, forwardedRef }) {
const { user: userConfig } = useGlobalStyles();
const { revisions, isLoading } = useGlobalStylesRevisions();
const revisionId = useMemo(() => {
const match = path?.match(/^\/revisions\/(.+)$/);
return match ? match[1] : null;
}, [path]);
const selectedRevision = useMemo(() => {
if (!revisionId || !revisions.length) {
return null;
}
return revisions.find(
(revision) => String(revision.id) === String(revisionId)
);
}, [revisionId, revisions]);
if (isLoading) {
return null;
}
return /* @__PURE__ */ jsx(
StyleBookWithNavigation,
{
forwardedRef,
path,
onPathChange,
userConfig: selectedRevision || userConfig
}
);
}
function StylesCanvasStyleBook({ path, onPathChange }, ref) {
if (path?.startsWith("/revisions")) {
return /* @__PURE__ */ jsx(
StylesCanvasRevisionStyleBook,
{
forwardedRef: ref,
path,
onPathChange
}
);
}
return /* @__PURE__ */ jsx(
StyleBookWithNavigation,
{
forwardedRef: ref,
path,
onPathChange
}
);
}
var style_book_default = forwardRef(StylesCanvasStyleBook);
export {
style_book_default as default
};
//# sourceMappingURL=style-book.mjs.map