[Summary view] [Print] [Text view]

   1  var __create = Object.create;
   2  var __defProp = Object.defineProperty;
   3  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
   4  var __getOwnPropNames = Object.getOwnPropertyNames;
   5  var __getProtoOf = Object.getPrototypeOf;
   6  var __hasOwnProp = Object.prototype.hasOwnProperty;
   7  var __commonJS = (cb, mod) => function __require() {
   8    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
   9  };
  10  var __copyProps = (to, from, except, desc) => {
  11    if (from && typeof from === "object" || typeof from === "function") {
  12      for (let key of __getOwnPropNames(from))
  13        if (!__hasOwnProp.call(to, key) && key !== except)
  14          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  15    }
  16    return to;
  17  };
  18  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  19    // If the importer is in node compatibility mode or this is not an ESM
  20    // file that has been converted to a CommonJS file using a Babel-
  21    // compatible transform (i.e. "__esModule" has not been set), then set
  22    // "default" to the CommonJS "module.exports" for node compatibility.
  23    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  24    mod
  25  ));
  26  
  27  // package-external:@wordpress/i18n
  28  var require_i18n = __commonJS({
  29    "package-external:@wordpress/i18n"(exports, module) {
  30      module.exports = window.wp.i18n;
  31    }
  32  });
  33  
  34  // package-external:@wordpress/components
  35  var require_components = __commonJS({
  36    "package-external:@wordpress/components"(exports, module) {
  37      module.exports = window.wp.components;
  38    }
  39  });
  40  
  41  // vendor-external:react/jsx-runtime
  42  var require_jsx_runtime = __commonJS({
  43    "vendor-external:react/jsx-runtime"(exports, module) {
  44      module.exports = window.ReactJSXRuntime;
  45    }
  46  });
  47  
  48  // package-external:@wordpress/element
  49  var require_element = __commonJS({
  50    "package-external:@wordpress/element"(exports, module) {
  51      module.exports = window.wp.element;
  52    }
  53  });
  54  
  55  // package-external:@wordpress/editor
  56  var require_editor = __commonJS({
  57    "package-external:@wordpress/editor"(exports, module) {
  58      module.exports = window.wp.editor;
  59    }
  60  });
  61  
  62  // package-external:@wordpress/compose
  63  var require_compose = __commonJS({
  64    "package-external:@wordpress/compose"(exports, module) {
  65      module.exports = window.wp.compose;
  66    }
  67  });
  68  
  69  // package-external:@wordpress/primitives
  70  var require_primitives = __commonJS({
  71    "package-external:@wordpress/primitives"(exports, module) {
  72      module.exports = window.wp.primitives;
  73    }
  74  });
  75  
  76  // package-external:@wordpress/private-apis
  77  var require_private_apis = __commonJS({
  78    "package-external:@wordpress/private-apis"(exports, module) {
  79      module.exports = window.wp.privateApis;
  80    }
  81  });
  82  
  83  // routes/styles/stage.tsx
  84  import { useNavigate, useSearch } from "@wordpress/route";
  85  
  86  // node_modules/clsx/dist/clsx.mjs
  87  function r(e) {
  88    var t, f, n = "";
  89    if ("string" == typeof e || "number" == typeof e) n += e;
  90    else if ("object" == typeof e) if (Array.isArray(e)) {
  91      var o = e.length;
  92      for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
  93    } else for (f in e) e[f] && (n && (n += " "), n += f);
  94    return n;
  95  }
  96  function clsx() {
  97    for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
  98    return n;
  99  }
 100  var clsx_default = clsx;
 101  
 102  // packages/admin-ui/build-module/navigable-region/index.js
 103  var import_element = __toESM(require_element());
 104  var import_jsx_runtime = __toESM(require_jsx_runtime());
 105  var NavigableRegion = (0, import_element.forwardRef)(
 106    ({ children, className, ariaLabel, as: Tag = "div", ...props }, ref) => {
 107      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 108        Tag,
 109        {
 110          ref,
 111          className: clsx_default("admin-ui-navigable-region", className),
 112          "aria-label": ariaLabel,
 113          role: "region",
 114          tabIndex: "-1",
 115          ...props,
 116          children
 117        }
 118      );
 119    }
 120  );
 121  NavigableRegion.displayName = "NavigableRegion";
 122  var navigable_region_default = NavigableRegion;
 123  
 124  // packages/admin-ui/build-module/page/header.js
 125  var import_components2 = __toESM(require_components());
 126  
 127  // packages/admin-ui/build-module/page/sidebar-toggle-slot.js
 128  var import_components = __toESM(require_components());
 129  var { Fill: SidebarToggleFill, Slot: SidebarToggleSlot } = (0, import_components.createSlotFill)("SidebarToggle");
 130  
 131  // packages/admin-ui/build-module/page/header.js
 132  var import_jsx_runtime2 = __toESM(require_jsx_runtime());
 133  function Header({
 134    breadcrumbs,
 135    badges,
 136    title,
 137    subTitle,
 138    actions,
 139    showSidebarToggle = true
 140  }) {
 141    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_components2.__experimentalVStack, { className: "admin-ui-page__header", as: "header", children: [
 142      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_components2.__experimentalHStack, { justify: "space-between", spacing: 2, children: [
 143        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_components2.__experimentalHStack, { spacing: 2, justify: "left", children: [
 144          showSidebarToggle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
 145            SidebarToggleSlot,
 146            {
 147              bubblesVirtually: true,
 148              className: "admin-ui-page__sidebar-toggle-slot"
 149            }
 150          ),
 151          title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_components2.__experimentalHeading, { as: "h2", level: 3, weight: 500, truncate: true, children: title }),
 152          breadcrumbs,
 153          badges
 154        ] }),
 155        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
 156          import_components2.__experimentalHStack,
 157          {
 158            style: { width: "auto", flexShrink: 0 },
 159            spacing: 2,
 160            className: "admin-ui-page__header-actions",
 161            children: actions
 162          }
 163        )
 164      ] }),
 165      subTitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "admin-ui-page__header-subtitle", children: subTitle })
 166    ] });
 167  }
 168  
 169  // packages/admin-ui/build-module/page/index.js
 170  var import_jsx_runtime3 = __toESM(require_jsx_runtime());
 171  function Page({
 172    breadcrumbs,
 173    badges,
 174    title,
 175    subTitle,
 176    children,
 177    className,
 178    actions,
 179    hasPadding = false,
 180    showSidebarToggle = true
 181  }) {
 182    const classes = clsx_default("admin-ui-page", className);
 183    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(navigable_region_default, { className: classes, ariaLabel: title, children: [
 184      (title || breadcrumbs || badges) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
 185        Header,
 186        {
 187          breadcrumbs,
 188          badges,
 189          title,
 190          subTitle,
 191          actions,
 192          showSidebarToggle
 193        }
 194      ),
 195      hasPadding ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "admin-ui-page__content has-padding", children }) : children
 196    ] });
 197  }
 198  Page.SidebarToggleFill = SidebarToggleFill;
 199  var page_default = Page;
 200  
 201  // routes/styles/stage.tsx
 202  var import_i18n = __toESM(require_i18n());
 203  var import_editor = __toESM(require_editor());
 204  var import_compose = __toESM(require_compose());
 205  var import_components3 = __toESM(require_components());
 206  
 207  // packages/icons/build-module/library/seen.js
 208  var import_primitives = __toESM(require_primitives());
 209  var import_jsx_runtime4 = __toESM(require_jsx_runtime());
 210  var seen_default = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_primitives.SVG, { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_primitives.Path, { d: "M3.99961 13C4.67043 13.3354 4.6703 13.3357 4.67017 13.3359L4.67298 13.3305C4.67621 13.3242 4.68184 13.3135 4.68988 13.2985C4.70595 13.2686 4.7316 13.2218 4.76695 13.1608C4.8377 13.0385 4.94692 12.8592 5.09541 12.6419C5.39312 12.2062 5.84436 11.624 6.45435 11.0431C7.67308 9.88241 9.49719 8.75 11.9996 8.75C14.502 8.75 16.3261 9.88241 17.5449 11.0431C18.1549 11.624 18.6061 12.2062 18.9038 12.6419C19.0523 12.8592 19.1615 13.0385 19.2323 13.1608C19.2676 13.2218 19.2933 13.2686 19.3093 13.2985C19.3174 13.3135 19.323 13.3242 19.3262 13.3305L19.3291 13.3359C19.3289 13.3357 19.3288 13.3354 19.9996 13C20.6704 12.6646 20.6703 12.6643 20.6701 12.664L20.6697 12.6632L20.6688 12.6614L20.6662 12.6563L20.6583 12.6408C20.6517 12.6282 20.6427 12.6108 20.631 12.5892C20.6078 12.5459 20.5744 12.4852 20.5306 12.4096C20.4432 12.2584 20.3141 12.0471 20.1423 11.7956C19.7994 11.2938 19.2819 10.626 18.5794 9.9569C17.1731 8.61759 14.9972 7.25 11.9996 7.25C9.00203 7.25 6.82614 8.61759 5.41987 9.9569C4.71736 10.626 4.19984 11.2938 3.85694 11.7956C3.68511 12.0471 3.55605 12.2584 3.4686 12.4096C3.42484 12.4852 3.39142 12.5459 3.36818 12.5892C3.35656 12.6108 3.34748 12.6282 3.34092 12.6408L3.33297 12.6563L3.33041 12.6614L3.32948 12.6632L3.32911 12.664C3.32894 12.6643 3.32879 12.6646 3.99961 13ZM11.9996 16C13.9326 16 15.4996 14.433 15.4996 12.5C15.4996 10.567 13.9326 9 11.9996 9C10.0666 9 8.49961 10.567 8.49961 12.5C8.49961 14.433 10.0666 16 11.9996 16Z" }) });
 211  
 212  // routes/styles/stage.tsx
 213  var import_element2 = __toESM(require_element());
 214  
 215  // routes/styles/style.scss
 216  var css = `/**
 217   * Colors
 218   */
 219  /**
 220   * SCSS Variables.
 221   *
 222   * Please use variables from this sheet to ensure consistency across the UI.
 223   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 224   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
 225   */
 226  /**
 227   * Fonts & basic variables.
 228   */
 229  /**
 230   * Typography
 231   */
 232  /**
 233   * Grid System.
 234   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 235   */
 236  /**
 237   * Radius scale.
 238   */
 239  /**
 240   * Elevation scale.
 241   */
 242  /**
 243   * Dimensions.
 244   */
 245  /**
 246   * Mobile specific styles
 247   */
 248  /**
 249   * Editor styles.
 250   */
 251  /**
 252   * Block & Editor UI.
 253   */
 254  /**
 255   * Block paddings.
 256   */
 257  /**
 258   * React Native specific.
 259   * These variables do not appear to be used anywhere else.
 260   */
 261  .routes-styles__page .global-styles-ui-screen-root {
 262    box-shadow: none;
 263  }
 264  .routes-styles__page .global-styles-ui-screen-root > div > hr {
 265    display: none;
 266  }
 267  .routes-styles__page .global-styles-ui-sidebar__navigator-provider .components-tools-panel {
 268    border-top: none;
 269  }
 270  .routes-styles__page .global-styles-ui-sidebar__navigator-provider {
 271    overflow-y: auto;
 272    padding-left: 0;
 273    padding-right: 0;
 274  }`;
 275  document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 276  
 277  // routes/lock-unlock.ts
 278  var import_private_apis = __toESM(require_private_apis());
 279  var { lock, unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)(
 280    "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
 281    "@wordpress/routes"
 282  );
 283  
 284  // routes/styles/stage.tsx
 285  var { GlobalStylesUIWrapper, GlobalStylesActionMenu } = unlock(import_editor.privateApis);
 286  function Stage() {
 287    const navigate = useNavigate();
 288    const search = useSearch({ strict: false });
 289    const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
 290    const section = search.section ?? "/";
 291    const [isStyleBookOpened, setIsStyleBookOpened] = (0, import_element2.useState)(
 292      search.preview === "stylebook"
 293    );
 294    const onChangeSection = (updatedSection) => {
 295      navigate({
 296        search: {
 297          ...search,
 298          section: updatedSection
 299        }
 300      });
 301    };
 302    return /* @__PURE__ */ React.createElement(
 303      page_default,
 304      {
 305        actions: !isMobileViewport ? /* @__PURE__ */ React.createElement(import_components3.__experimentalHStack, null, /* @__PURE__ */ React.createElement(
 306          import_components3.Button,
 307          {
 308            size: "compact",
 309            isPressed: isStyleBookOpened,
 310            icon: seen_default,
 311            label: (0, import_i18n.__)("Style Book"),
 312            onClick: () => {
 313              const newIsStyleBookOpened = !isStyleBookOpened;
 314              setIsStyleBookOpened(newIsStyleBookOpened);
 315              navigate({
 316                search: newIsStyleBookOpened ? { ...search, preview: "stylebook" } : (() => {
 317                  const {
 318                    preview,
 319                    ...restSearch
 320                  } = search;
 321                  return restSearch;
 322                })()
 323              });
 324            }
 325          }
 326        ), /* @__PURE__ */ React.createElement(
 327          GlobalStylesActionMenu,
 328          {
 329            hideWelcomeGuide: true,
 330            onChangePath: onChangeSection
 331          }
 332        )) : null,
 333        className: "routes-styles__page",
 334        title: (0, import_i18n.__)("Styles")
 335      },
 336      /* @__PURE__ */ React.createElement(
 337        GlobalStylesUIWrapper,
 338        {
 339          path: section,
 340          onPathChange: onChangeSection
 341        }
 342      )
 343    );
 344  }
 345  var stage = Stage;
 346  
 347  // routes/styles/canvas.tsx
 348  var import_editor2 = __toESM(require_editor());
 349  var import_components4 = __toESM(require_components());
 350  import { useNavigate as useNavigate2, useSearch as useSearch2 } from "@wordpress/route";
 351  import { useEditorAssets } from "@wordpress/lazy-editor";
 352  var { StyleBookPreview } = unlock(import_editor2.privateApis);
 353  function Canvas() {
 354    const { isReady: assetsReady } = useEditorAssets();
 355    const navigate = useNavigate2();
 356    const search = useSearch2({ strict: false });
 357    const section = search.section ?? "/";
 358    const onChangeSection = (updatedSection) => {
 359      navigate({
 360        search: {
 361          ...search,
 362          section: updatedSection
 363        }
 364      });
 365    };
 366    if (!assetsReady) {
 367      return /* @__PURE__ */ React.createElement(
 368        "div",
 369        {
 370          style: {
 371            display: "flex",
 372            justifyContent: "center",
 373            alignItems: "center",
 374            height: "100%"
 375          }
 376        },
 377        /* @__PURE__ */ React.createElement(import_components4.Spinner, null)
 378      );
 379    }
 380    return /* @__PURE__ */ React.createElement(StyleBookPreview, { path: section, onPathChange: onChangeSection });
 381  }
 382  var canvas = Canvas;
 383  export {
 384    canvas,
 385    stage
 386  };