@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
175 lines (174 loc) • 6.82 kB
JavaScript
// packages/editor/src/components/global-styles-sidebar/index.js
import { Button } from "@wordpress/components";
import { Stack } from "@wordpress/ui";
import { __ } from "@wordpress/i18n";
import { styles, seen, backup } from "@wordpress/icons";
import { useSelect, useDispatch } from "@wordpress/data";
import { useEffect } from "@wordpress/element";
import { store as preferencesStore } from "@wordpress/preferences";
import { useViewportMatch, usePrevious } from "@wordpress/compose";
import { store as coreStore } from "@wordpress/core-data";
import { store as interfaceStore } from "@wordpress/interface";
import { store as blockEditorStore } from "@wordpress/block-editor";
import GlobalStylesUI from "../global-styles/index.mjs";
import { GlobalStylesActionMenu } from "../global-styles/menu.mjs";
import { store as editorStore } from "../../store/index.mjs";
import { unlock } from "../../lock-unlock.mjs";
import PluginSidebar from "../plugin-sidebar/index.mjs";
import WelcomeGuideStyles from "./welcome-guide.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function GlobalStylesSidebar() {
const {
shouldResetNavigation,
stylesPath,
showStylebook,
showListViewByDefault,
hasRevisions,
activeComplementaryArea,
editorSettings,
styleStateViewport,
isDistractionFree
} = useSelect((select) => {
const { get } = select(preferencesStore);
const { getActiveComplementaryArea } = select(interfaceStore);
const {
getStylesPath,
getShowStylebook,
getEditorMode,
getEditorSettings
} = unlock(select(editorStore));
const _isVisualEditorMode = "visual" === getEditorMode();
const _showListViewByDefault = get("core", "showListViewByDefault");
const _isDistractionFree = get("core", "distractionFree");
const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(coreStore);
const globalStylesId = __experimentalGetCurrentGlobalStylesId();
const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
return {
stylesPath: getStylesPath(),
showStylebook: getShowStylebook(),
shouldResetNavigation: "edit-site/global-styles" !== getActiveComplementaryArea("core") || !_isVisualEditorMode,
showListViewByDefault: _showListViewByDefault,
hasRevisions: !!globalStyles?._links?.["version-history"]?.[0]?.count,
activeComplementaryArea: getActiveComplementaryArea("core"),
editorSettings: getEditorSettings(),
styleStateViewport: unlock(
select(blockEditorStore)
).getStyleStateViewport(),
isDistractionFree: _isDistractionFree
};
}, []);
const { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(
useDispatch(editorStore)
);
const isMobileViewport = useViewportMatch("medium", "<");
const isRevisionsOpened = stylesPath.startsWith("/revisions") && !showStylebook;
const isRevisionsStyleBookOpened = stylesPath.startsWith("/revisions") && showStylebook;
const previousActiveArea = usePrevious(activeComplementaryArea);
useEffect(() => {
if (activeComplementaryArea === "edit-site/global-styles" && previousActiveArea !== "edit-site/global-styles") {
resetStylesNavigation();
}
}, [activeComplementaryArea, previousActiveArea, resetStylesNavigation]);
useEffect(() => {
if (shouldResetNavigation) {
resetStylesNavigation();
}
}, [shouldResetNavigation, resetStylesNavigation]);
const { setIsListViewOpened } = useDispatch(editorStore);
const toggleRevisions = () => {
setIsListViewOpened(false);
if (isRevisionsOpened || isRevisionsStyleBookOpened) {
setStylesPath("/");
} else {
setStylesPath("/revisions");
}
};
const toggleStyleBook = () => {
setIsListViewOpened(showStylebook && showListViewByDefault);
setShowStylebook(!showStylebook);
};
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
PluginSidebar,
{
name: "global-styles",
identifier: "edit-site/global-styles",
title: __("Styles"),
icon: styles,
isPinnable: !isDistractionFree,
closeLabel: __("Close Styles"),
className: "editor-global-styles-sidebar__panel",
render: /* @__PURE__ */ jsx("div", { className: "editor-global-styles-sidebar" }),
header: /* @__PURE__ */ jsxs(
Stack,
{
className: "editor-global-styles-sidebar__header",
direction: "row",
align: "center",
gap: "xs",
children: [
/* @__PURE__ */ jsx("h2", { className: "editor-global-styles-sidebar__header-title", children: __("Styles") }),
/* @__PURE__ */ jsxs(
Stack,
{
className: "editor-global-styles-sidebar__header-actions",
direction: "row",
align: "center",
justify: "flex-end",
gap: "xs",
children: [
!isMobileViewport && /* @__PURE__ */ jsx(
Button,
{
icon: seen,
label: __("Style Book"),
isPressed: showStylebook,
accessibleWhenDisabled: true,
disabled: shouldResetNavigation,
onClick: toggleStyleBook,
size: "compact"
}
),
/* @__PURE__ */ jsx(
Button,
{
label: __("Revisions"),
icon: backup,
onClick: toggleRevisions,
accessibleWhenDisabled: true,
disabled: !hasRevisions,
isPressed: isRevisionsOpened || isRevisionsStyleBookOpened,
size: "compact"
}
),
/* @__PURE__ */ jsx(
GlobalStylesActionMenu,
{
onChangePath: setStylesPath
}
)
]
}
)
]
}
),
children: /* @__PURE__ */ jsx(
GlobalStylesUI,
{
path: stylesPath,
onPathChange: setStylesPath,
settings: editorSettings,
selectedViewport: styleStateViewport,
showResponsiveStateControls: false
}
)
}
),
/* @__PURE__ */ jsx(WelcomeGuideStyles, {})
] });
}
export {
GlobalStylesSidebar as default
};
//# sourceMappingURL=index.mjs.map