@wordpress/boot 0.16.1 → 0.17.1-next.v.202607070741.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build-module/components/canvas/back-button.mjs +17 -62
  3. package/build-module/components/canvas/back-button.mjs.map +2 -2
  4. package/build-module/components/root/index.mjs +6 -3
  5. package/build-module/components/root/index.mjs.map +2 -2
  6. package/build-module/components/root/single-page.mjs +6 -3
  7. package/build-module/components/root/single-page.mjs.map +2 -2
  8. package/build-module/components/root/use-sync-body-background.mjs +26 -0
  9. package/build-module/components/root/use-sync-body-background.mjs.map +7 -0
  10. package/build-module/components/sidebar/index.mjs +4 -6
  11. package/build-module/components/sidebar/index.mjs.map +2 -2
  12. package/build-module/index.mjs +6 -6
  13. package/build-module/index.mjs.map +2 -2
  14. package/build-style/style-rtl.css +19 -51
  15. package/build-style/style.css +19 -51
  16. package/build-style/view-transitions-rtl.css +0 -13
  17. package/build-style/view-transitions.css +0 -13
  18. package/build-types/components/canvas/back-button.d.ts +4 -7
  19. package/build-types/components/canvas/back-button.d.ts.map +1 -1
  20. package/build-types/components/root/index.d.ts.map +1 -1
  21. package/build-types/components/root/single-page.d.ts.map +1 -1
  22. package/build-types/components/root/use-sync-body-background.d.ts +13 -0
  23. package/build-types/components/root/use-sync-body-background.d.ts.map +1 -0
  24. package/build-types/components/sidebar/index.d.ts +0 -5
  25. package/build-types/components/sidebar/index.d.ts.map +1 -1
  26. package/package.json +25 -25
  27. package/src/components/canvas/back-button.scss +0 -8
  28. package/src/components/canvas/back-button.tsx +9 -67
  29. package/src/components/root/index.tsx +4 -0
  30. package/src/components/root/single-page.tsx +4 -0
  31. package/src/components/root/style.scss +15 -1
  32. package/src/components/root/use-sync-body-background.ts +41 -0
  33. package/src/components/sidebar/index.tsx +1 -9
  34. package/src/components/sidebar/style.scss +1 -1
  35. package/src/style.scss +0 -1
  36. package/src/view-transitions.scss +0 -18
  37. package/build-module/components/site-hub/index.mjs +0 -78
  38. package/build-module/components/site-hub/index.mjs.map +0 -7
  39. package/build-module/components/site-icon/index.mjs +0 -57
  40. package/build-module/components/site-icon/index.mjs.map +0 -7
  41. package/build-module/components/site-icon-link/index.mjs +0 -53
  42. package/build-module/components/site-icon-link/index.mjs.map +0 -7
  43. package/build-style/experimental-omnibar-rtl.css +0 -37
  44. package/build-style/experimental-omnibar.css +0 -37
  45. package/build-types/components/site-hub/index.d.ts +0 -4
  46. package/build-types/components/site-hub/index.d.ts.map +0 -1
  47. package/build-types/components/site-icon/index.d.ts +0 -9
  48. package/build-types/components/site-icon/index.d.ts.map +0 -1
  49. package/build-types/components/site-icon-link/index.d.ts +0 -8
  50. package/build-types/components/site-icon-link/index.d.ts.map +0 -1
  51. package/src/components/site-hub/index.tsx +0 -77
  52. package/src/components/site-hub/style.scss +0 -69
  53. package/src/components/site-icon/index.tsx +0 -60
  54. package/src/components/site-icon/style.scss +0 -19
  55. package/src/components/site-icon-link/index.tsx +0 -57
  56. package/src/components/site-icon-link/style.scss +0 -24
  57. package/src/experimental-omnibar.scss +0 -48
@@ -20,6 +20,7 @@ import SavePanel from '../save-panel';
20
20
  import CanvasRenderer from '../canvas-renderer';
21
21
  import { unlock } from '../../lock-unlock';
22
22
  import type { CanvasData } from '../../store/types';
23
+ import useSyncBodyBackground from './use-sync-body-background';
23
24
  import './style.scss';
24
25
  import useRouteTitle from '../app/use-route-title';
25
26
 
@@ -44,6 +45,8 @@ export default function RootSinglePage() {
44
45
 
45
46
  const themeColors = useMemo( getAdminThemeColors, [] );
46
47
 
48
+ const layoutRef = useSyncBodyBackground();
49
+
47
50
  return (
48
51
  <SlotFillProvider>
49
52
  <ThemeProvider
@@ -52,6 +55,7 @@ export default function RootSinglePage() {
52
55
  >
53
56
  <ThemeProvider color={ themeColors }>
54
57
  <div
58
+ ref={ layoutRef }
55
59
  className={ clsx(
56
60
  'boot-layout boot-layout--single-page',
57
61
  {
@@ -1,3 +1,4 @@
1
+ @use "@wordpress/base-styles/breakpoints";
1
2
  @use "@wordpress/base-styles/variables";
2
3
  @use "@wordpress/base-styles/mixins";
3
4
 
@@ -203,7 +204,7 @@
203
204
 
204
205
  .boot-layout.has-full-canvas .boot-layout__canvas {
205
206
  position: fixed;
206
- top: 0;
207
+ top: var(--wp-admin--admin-bar--height, 0);
207
208
  left: 0;
208
209
  right: 0;
209
210
  bottom: 0;
@@ -223,3 +224,16 @@
223
224
  }
224
225
  }
225
226
  }
227
+
228
+ @media (max-width: #{breakpoints.$break-medium}) {
229
+ .boot-layout__stage,
230
+ .boot-layout__inspector,
231
+ .boot-layout__canvas:not(.has-mobile-drawer) {
232
+ top: var(--wp-admin--admin-bar--height, 0);
233
+ height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
234
+ }
235
+
236
+ .boot-layout__mobile-sidebar-drawer {
237
+ top: var(--wp-admin--admin-bar--height, 0);
238
+ }
239
+ }
@@ -0,0 +1,41 @@
1
+ /**
2
+ * WordPress dependencies
3
+ */
4
+ import { useRef } from '@wordpress/element';
5
+ import { useIsomorphicLayoutEffect } from '@wordpress/compose';
6
+
7
+ /**
8
+ * Reads the boot layout's computed background-color and mirrors it onto
9
+ * `document.body` to avoid a jarring flash on macOS elastic-scroll bounce.
10
+ * Snapshots and restores the previous inline value on unmount.
11
+ *
12
+ * TODO: Once the two top-level `ThemeProvider` instances can be merged, this
13
+ * hook can be replaced with a CSS rule on `<body>`.
14
+ * See https://github.com/WordPress/gutenberg/pull/78587#discussion_r3481698286
15
+ *
16
+ * @return Ref to attach to the `.boot-layout` div.
17
+ */
18
+ export default function useSyncBodyBackground() {
19
+ const layoutRef = useRef< HTMLDivElement | null >( null );
20
+
21
+ useIsomorphicLayoutEffect( () => {
22
+ if ( ! layoutRef.current ) {
23
+ return;
24
+ }
25
+
26
+ const body = layoutRef.current.ownerDocument.body;
27
+ const bg = getComputedStyle( layoutRef.current ).backgroundColor;
28
+ if ( ! bg ) {
29
+ return;
30
+ }
31
+
32
+ const previousBackground = body.style.background;
33
+ body.style.background = bg;
34
+
35
+ return () => {
36
+ body.style.background = previousBackground;
37
+ };
38
+ }, [] );
39
+
40
+ return layoutRef;
41
+ }
@@ -9,18 +9,11 @@ import { chevronLeft, chevronRight } from '@wordpress/icons';
9
9
  /**
10
10
  * Internal dependencies
11
11
  */
12
- import SiteHub from '../site-hub';
13
12
  import Navigation from '../navigation';
14
13
  import SaveButton from '../save-button';
15
14
  import { store as bootStore } from '../../store';
16
15
  import './style.scss';
17
16
 
18
- declare global {
19
- interface Window {
20
- __experimentalAdminBarInEditor?: boolean;
21
- }
22
- }
23
-
24
17
  function DashboardBackButton() {
25
18
  const dashboardLink = useSelect(
26
19
  ( select ) => select( bootStore ).getDashboardLink(),
@@ -40,10 +33,9 @@ function DashboardBackButton() {
40
33
  }
41
34
 
42
35
  export default function Sidebar() {
43
- const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
44
36
  return (
45
37
  <div className="boot-sidebar__scrollable">
46
- { hasAdminBarInEditor ? <DashboardBackButton /> : <SiteHub /> }
38
+ <DashboardBackButton />
47
39
  <div className="boot-sidebar__content">
48
40
  <Navigation />
49
41
  </div>
@@ -19,5 +19,5 @@
19
19
  }
20
20
 
21
21
  .boot-sidebar__back-button {
22
- margin: variables.$grid-unit-10 variables.$grid-unit-15;
22
+ margin: variables.$grid-unit-20 variables.$grid-unit-15 variables.$grid-unit-10 variables.$grid-unit-15;
23
23
  }
package/src/style.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  @use "@wordpress/theme/src/prebuilt/css/design-tokens.css" as *;
2
2
  @use "@wordpress/base-styles/mixins" as *;
3
3
  @use "@wordpress/base-styles/variables" as *;
4
- @use "./experimental-omnibar.scss" as *;
5
4
 
6
5
  .boot-layout-container .boot-layout {
7
6
  // On mobile the main content area has to scroll, otherwise you can invoke
@@ -22,15 +22,6 @@
22
22
  view-transition-name: boot--canvas-sidebar;
23
23
  }
24
24
 
25
- .boot-layout.has-full-canvas
26
- .boot-layout__canvas
27
- .boot-site-icon-link,
28
- .boot-layout:not(.has-full-canvas)
29
- .boot-site-hub
30
- .boot-site-icon-link {
31
- view-transition-name: boot--site-icon-link;
32
- }
33
-
34
25
  // Default (non-Safari) view transition names
35
26
  .boot-layout__stage {
36
27
  view-transition-name: boot--stage;
@@ -78,15 +69,6 @@
78
69
  z-index: 1;
79
70
  }
80
71
 
81
- ::view-transition-group(boot--site-icon-link) {
82
- z-index: 2;
83
- }
84
-
85
- ::view-transition-new(boot--site-icon-link),
86
- ::view-transition-old(boot--site-icon-link) {
87
- animation: none;
88
- }
89
-
90
72
  // Safari-specific pseudo-element styles with width: auto fix
91
73
  ::view-transition-new(boot-safari--canvas),
92
74
  ::view-transition-old(boot-safari--canvas),
@@ -1,78 +0,0 @@
1
- // packages/boot/src/components/site-hub/index.tsx
2
- import { useSelect, useDispatch } from "@wordpress/data";
3
- import {
4
- ExternalLink,
5
- Button,
6
- __experimentalHStack as HStack
7
- } from "@wordpress/components";
8
- import { __ } from "@wordpress/i18n";
9
- import { store as coreStore } from "@wordpress/core-data";
10
- import { decodeEntities } from "@wordpress/html-entities";
11
- import { search } from "@wordpress/icons";
12
- import { displayShortcut } from "@wordpress/keycodes";
13
- import { store as commandsStore } from "@wordpress/commands";
14
- import { filterURLForDisplay } from "@wordpress/url";
15
- import SiteIconLink from "../site-icon-link/index.mjs";
16
- import { store as bootStore } from "../../store/index.mjs";
17
-
18
- // packages/boot/src/components/site-hub/style.scss
19
- if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='74d234ae17']")) {
20
- const style = document.createElement("style");
21
- style.setAttribute("data-wp-hash", "74d234ae17");
22
- style.appendChild(document.createTextNode(".boot-site-hub{align-items:center;background-color:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);display:grid;flex-shrink:0;grid-template-columns:60px 1fr auto;padding-right:16px;position:sticky;top:0;z-index:1}.boot-site-hub__actions{flex-shrink:0}.boot-site-hub__title{align-items:center;display:flex;text-decoration:none}.boot-site-hub__title .components-external-link__contents{margin-inline-start:4px;max-width:140px;overflow:hidden;text-decoration:none}.boot-site-hub__title .components-external-link__icon{opacity:0;transition:opacity .1s ease-out}.boot-site-hub__title:hover .components-external-link__icon{opacity:1}@media not (prefers-reduced-motion){.boot-site-hub__title{transition:outline .1s ease-out}}.boot-site-hub__title:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}.boot-site-hub__title-text{color:var(--wpds-color-foreground-content-neutral,#1e1e1e);font-size:13px;font-weight:499}.boot-site-hub__title-text,.boot-site-hub__url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.boot-site-hub__url{color:var(--wpds-color-foreground-content-neutral-weak,#707070);font-size:12px}"));
23
- document.head.appendChild(style);
24
- }
25
-
26
- // packages/boot/src/components/site-hub/index.tsx
27
- import { jsx, jsxs } from "react/jsx-runtime";
28
- function SiteHub() {
29
- const { dashboardLink, homeUrl, siteTitle } = useSelect((select) => {
30
- const { getEntityRecord } = select(coreStore);
31
- const _base = getEntityRecord(
32
- "root",
33
- "__unstableBase"
34
- );
35
- return {
36
- dashboardLink: select(bootStore).getDashboardLink(),
37
- homeUrl: _base?.home,
38
- siteTitle: !_base?.name && !!_base?.url ? filterURLForDisplay(_base?.url) : _base?.name
39
- };
40
- }, []);
41
- const { open: openCommandCenter } = useDispatch(commandsStore);
42
- return /* @__PURE__ */ jsxs("div", { className: "boot-site-hub", children: [
43
- /* @__PURE__ */ jsx(
44
- SiteIconLink,
45
- {
46
- to: dashboardLink || "/",
47
- "aria-label": __("Go to the Dashboard")
48
- }
49
- ),
50
- /* @__PURE__ */ jsxs(
51
- ExternalLink,
52
- {
53
- href: homeUrl ?? "/",
54
- className: "boot-site-hub__title",
55
- children: [
56
- /* @__PURE__ */ jsx("div", { className: "boot-site-hub__title-text", children: siteTitle && decodeEntities(siteTitle) }),
57
- /* @__PURE__ */ jsx("div", { className: "boot-site-hub__url", children: filterURLForDisplay(homeUrl ?? "") })
58
- ]
59
- }
60
- ),
61
- /* @__PURE__ */ jsx(HStack, { className: "boot-site-hub__actions", children: /* @__PURE__ */ jsx(
62
- Button,
63
- {
64
- variant: "tertiary",
65
- icon: search,
66
- onClick: () => openCommandCenter(),
67
- size: "compact",
68
- label: __("Open command palette"),
69
- shortcut: displayShortcut.primary("k")
70
- }
71
- ) })
72
- ] });
73
- }
74
- var site_hub_default = SiteHub;
75
- export {
76
- site_hub_default as default
77
- };
78
- //# sourceMappingURL=index.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/site-hub/index.tsx", "../../../src/components/site-hub/style.scss"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tExternalLink,\n\tButton,\n\t// @ts-ignore\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { search } from '@wordpress/icons';\nimport { displayShortcut } from '@wordpress/keycodes';\n// @ts-expect-error Commands is not typed properly.\nimport { store as commandsStore } from '@wordpress/commands';\nimport { filterURLForDisplay } from '@wordpress/url';\nimport type { UnstableBase } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport SiteIconLink from '../site-icon-link';\nimport { store as bootStore } from '../../store';\nimport './style.scss';\n\nfunction SiteHub() {\n\tconst { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord } = select( coreStore );\n\t\tconst _base = getEntityRecord< UnstableBase >(\n\t\t\t'root',\n\t\t\t'__unstableBase'\n\t\t);\n\t\treturn {\n\t\t\tdashboardLink: select( bootStore ).getDashboardLink(),\n\t\t\thomeUrl: _base?.home,\n\t\t\tsiteTitle:\n\t\t\t\t! _base?.name && !! _base?.url\n\t\t\t\t\t? filterURLForDisplay( _base?.url )\n\t\t\t\t\t: _base?.name,\n\t\t};\n\t}, [] );\n\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\n\treturn (\n\t\t<div className=\"boot-site-hub\">\n\t\t\t<SiteIconLink\n\t\t\t\tto={ dashboardLink || '/' }\n\t\t\t\taria-label={ __( 'Go to the Dashboard' ) }\n\t\t\t/>\n\t\t\t<ExternalLink\n\t\t\t\thref={ homeUrl ?? '/' }\n\t\t\t\tclassName=\"boot-site-hub__title\"\n\t\t\t>\n\t\t\t\t<div className=\"boot-site-hub__title-text\">\n\t\t\t\t\t{ siteTitle && decodeEntities( siteTitle ) }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"boot-site-hub__url\">\n\t\t\t\t\t{ filterURLForDisplay( homeUrl ?? '' ) }\n\t\t\t\t</div>\n\t\t\t</ExternalLink>\n\t\t\t<HStack className=\"boot-site-hub__actions\">\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ search }\n\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tlabel={ __( 'Open command palette' ) }\n\t\t\t\t\tshortcut={ displayShortcut.primary( 'k' ) }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</div>\n\t);\n}\n\nexport default SiteHub;\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='74d234ae17']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"74d234ae17\");\n\tstyle.appendChild(document.createTextNode(\".boot-site-hub{align-items:center;background-color:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);display:grid;flex-shrink:0;grid-template-columns:60px 1fr auto;padding-right:16px;position:sticky;top:0;z-index:1}.boot-site-hub__actions{flex-shrink:0}.boot-site-hub__title{align-items:center;display:flex;text-decoration:none}.boot-site-hub__title .components-external-link__contents{margin-inline-start:4px;max-width:140px;overflow:hidden;text-decoration:none}.boot-site-hub__title .components-external-link__icon{opacity:0;transition:opacity .1s ease-out}.boot-site-hub__title:hover .components-external-link__icon{opacity:1}@media not (prefers-reduced-motion){.boot-site-hub__title{transition:outline .1s ease-out}}.boot-site-hub__title:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}.boot-site-hub__title-text{color:var(--wpds-color-foreground-content-neutral,#1e1e1e);font-size:13px;font-weight:499}.boot-site-hub__title-text,.boot-site-hub__url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.boot-site-hub__url{color:var(--wpds-color-foreground-content-neutral-weak,#707070);font-size:12px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
5
- "mappings": ";AAGA,SAAS,WAAW,mBAAmB;AACvC;AAAA,EACC;AAAA,EACA;AAAA,EAEA,wBAAwB;AAAA,OAClB;AACP,SAAS,UAAU;AACnB,SAAS,SAAS,iBAAiB;AACnC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,uBAAuB;AAEhC,SAAS,SAAS,qBAAqB;AACvC,SAAS,2BAA2B;AAMpC,OAAO,kBAAkB;AACzB,SAAS,SAAS,iBAAiB;;;ACxBnC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,2zCAA2zC,CAAC;AACt2C,WAAS,KAAK,YAAY,KAAK;AAChC;;;AD0CG,cAIA,YAJA;AApBH,SAAS,UAAU;AAClB,QAAM,EAAE,eAAe,SAAS,UAAU,IAAI,UAAW,CAAE,WAAY;AACtE,UAAM,EAAE,gBAAgB,IAAI,OAAQ,SAAU;AAC9C,UAAM,QAAQ;AAAA,MACb;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,MACN,eAAe,OAAQ,SAAU,EAAE,iBAAiB;AAAA,MACpD,SAAS,OAAO;AAAA,MAChB,WACC,CAAE,OAAO,QAAQ,CAAC,CAAE,OAAO,MACxB,oBAAqB,OAAO,GAAI,IAChC,OAAO;AAAA,IACZ;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,EAAE,MAAM,kBAAkB,IAAI,YAAa,aAAc;AAE/D,SACC,qBAAC,SAAI,WAAU,iBACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,IAAK,iBAAiB;AAAA,QACtB,cAAa,GAAI,qBAAsB;AAAA;AAAA,IACxC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAO,WAAW;AAAA,QAClB,WAAU;AAAA,QAEV;AAAA,8BAAC,SAAI,WAAU,6BACZ,uBAAa,eAAgB,SAAU,GAC1C;AAAA,UACA,oBAAC,SAAI,WAAU,sBACZ,8BAAqB,WAAW,EAAG,GACtC;AAAA;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,UAAO,WAAU,0BACjB;AAAA,MAAC;AAAA;AAAA,QACA,SAAQ;AAAA,QACR,MAAO;AAAA,QACP,SAAU,MAAM,kBAAkB;AAAA,QAClC,MAAK;AAAA,QACL,OAAQ,GAAI,sBAAuB;AAAA,QACnC,UAAW,gBAAgB,QAAS,GAAI;AAAA;AAAA,IACzC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,mBAAQ;",
6
- "names": []
7
- }
@@ -1,57 +0,0 @@
1
- // packages/boot/src/components/site-icon/index.tsx
2
- import clsx from "clsx";
3
- import { useSelect } from "@wordpress/data";
4
- import { Icon, wordpress } from "@wordpress/icons";
5
- import { __ } from "@wordpress/i18n";
6
- import { store as coreDataStore } from "@wordpress/core-data";
7
-
8
- // packages/boot/src/components/site-icon/style.scss
9
- if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='8cdddce491']")) {
10
- const style = document.createElement("style");
11
- style.setAttribute("data-wp-hash", "8cdddce491");
12
- style.appendChild(document.createTextNode(".boot-site-icon{display:flex}.boot-site-icon__icon{fill:var(--wpds-color-foreground-content-neutral,#1e1e1e);height:32px;width:32px}.boot-site-icon__image{aspect-ratio:1/1;border-radius:var(--wpds-border-radius-md,4px);height:32px;object-fit:cover;width:32px}"));
13
- document.head.appendChild(style);
14
- }
15
-
16
- // packages/boot/src/components/site-icon/index.tsx
17
- import { jsx } from "react/jsx-runtime";
18
- function SiteIcon({ className }) {
19
- const { isRequestingSite, siteIconUrl } = useSelect((select) => {
20
- const { getEntityRecord } = select(coreDataStore);
21
- const siteData = getEntityRecord(
22
- "root",
23
- "__unstableBase",
24
- void 0
25
- );
26
- return {
27
- isRequestingSite: !siteData,
28
- siteIconUrl: siteData?.site_icon_url
29
- };
30
- }, []);
31
- let icon = null;
32
- if (isRequestingSite && !siteIconUrl) {
33
- icon = /* @__PURE__ */ jsx("div", { className: "boot-site-icon__image" });
34
- } else {
35
- icon = siteIconUrl ? /* @__PURE__ */ jsx(
36
- "img",
37
- {
38
- className: "boot-site-icon__image",
39
- alt: __("Site Icon"),
40
- src: siteIconUrl
41
- }
42
- ) : /* @__PURE__ */ jsx(
43
- Icon,
44
- {
45
- className: "boot-site-icon__icon",
46
- icon: wordpress,
47
- size: 48
48
- }
49
- );
50
- }
51
- return /* @__PURE__ */ jsx("div", { className: clsx(className, "boot-site-icon"), children: icon });
52
- }
53
- var site_icon_default = SiteIcon;
54
- export {
55
- site_icon_default as default
56
- };
57
- //# sourceMappingURL=index.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/site-icon/index.tsx", "../../../src/components/site-icon/style.scss"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { Icon, wordpress } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { store as coreDataStore } from '@wordpress/core-data';\nimport type { UnstableBase } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport './style.scss';\n\nfunction SiteIcon( { className }: { className?: string } ) {\n\tconst { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord } = select( coreDataStore );\n\t\tconst siteData = getEntityRecord< UnstableBase >(\n\t\t\t'root',\n\t\t\t'__unstableBase',\n\t\t\tundefined\n\t\t);\n\n\t\treturn {\n\t\t\tisRequestingSite: ! siteData,\n\t\t\tsiteIconUrl: siteData?.site_icon_url,\n\t\t};\n\t}, [] );\n\n\tlet icon = null;\n\n\tif ( isRequestingSite && ! siteIconUrl ) {\n\t\ticon = <div className=\"boot-site-icon__image\" />;\n\t} else {\n\t\ticon = siteIconUrl ? (\n\t\t\t<img\n\t\t\t\tclassName=\"boot-site-icon__image\"\n\t\t\t\talt={ __( 'Site Icon' ) }\n\t\t\t\tsrc={ siteIconUrl }\n\t\t\t/>\n\t\t) : (\n\t\t\t<Icon\n\t\t\t\tclassName=\"boot-site-icon__icon\"\n\t\t\t\ticon={ wordpress }\n\t\t\t\tsize={ 48 }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className={ clsx( className, 'boot-site-icon' ) }>{ icon }</div>\n\t);\n}\n\nexport default SiteIcon;\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='8cdddce491']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"8cdddce491\");\n\tstyle.appendChild(document.createTextNode(\".boot-site-icon{display:flex}.boot-site-icon__icon{fill:var(--wpds-color-foreground-content-neutral,#1e1e1e);height:32px;width:32px}.boot-site-icon__image{aspect-ratio:1/1;border-radius:var(--wpds-border-radius-md,4px);height:32px;object-fit:cover;width:32px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
5
- "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,iBAAiB;AAC1B,SAAS,MAAM,iBAAiB;AAChC,SAAS,UAAU;AACnB,SAAS,SAAS,qBAAqB;;;ACXvC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,qQAAqQ,CAAC;AAChT,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADgCS;AAlBT,SAAS,SAAU,EAAE,UAAU,GAA4B;AAC1D,QAAM,EAAE,kBAAkB,YAAY,IAAI,UAAW,CAAE,WAAY;AAClE,UAAM,EAAE,gBAAgB,IAAI,OAAQ,aAAc;AAClD,UAAM,WAAW;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAEA,WAAO;AAAA,MACN,kBAAkB,CAAE;AAAA,MACpB,aAAa,UAAU;AAAA,IACxB;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,MAAI,OAAO;AAEX,MAAK,oBAAoB,CAAE,aAAc;AACxC,WAAO,oBAAC,SAAI,WAAU,yBAAwB;AAAA,EAC/C,OAAO;AACN,WAAO,cACN;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,KAAM,GAAI,WAAY;AAAA,QACtB,KAAM;AAAA;AAAA,IACP,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,MAAO;AAAA,QACP,MAAO;AAAA;AAAA,IACR;AAAA,EAEF;AAEA,SACC,oBAAC,SAAI,WAAY,KAAM,WAAW,gBAAiB,GAAM,gBAAM;AAEjE;AAEA,IAAO,oBAAQ;",
6
- "names": []
7
- }
@@ -1,53 +0,0 @@
1
- // packages/boot/src/components/site-icon-link/index.tsx
2
- import { Link, privateApis as routePrivateApis } from "@wordpress/route";
3
- import { Tooltip } from "@wordpress/ui";
4
- import { unlock } from "../../lock-unlock.mjs";
5
- import SiteIcon from "../site-icon/index.mjs";
6
-
7
- // packages/boot/src/components/site-icon-link/style.scss
8
- if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='6b58df5c9e']")) {
9
- const style = document.createElement("style");
10
- style.setAttribute("data-wp-hash", "6b58df5c9e");
11
- style.appendChild(document.createTextNode(".boot-site-icon-link{align-items:center;background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);display:inline-flex;height:64px;justify-content:center;text-decoration:none;width:64px}@media not (prefers-reduced-motion){.boot-site-icon-link{transition:outline .1s ease-out}}.boot-site-icon-link:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}"));
12
- document.head.appendChild(style);
13
- }
14
-
15
- // packages/boot/src/components/site-icon-link/index.tsx
16
- import { jsx, jsxs } from "react/jsx-runtime";
17
- var { useCanGoBack, useRouter } = unlock(routePrivateApis);
18
- function SiteIconLink({
19
- to,
20
- isBackButton,
21
- ...props
22
- }) {
23
- const router = useRouter();
24
- const canGoBack = useCanGoBack();
25
- return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
26
- /* @__PURE__ */ jsx(
27
- Tooltip.Trigger,
28
- {
29
- render: /* @__PURE__ */ jsx(
30
- Link,
31
- {
32
- to,
33
- "aria-label": props["aria-label"],
34
- className: "boot-site-icon-link",
35
- onClick: (event) => {
36
- if (canGoBack && isBackButton) {
37
- event.preventDefault();
38
- router.history.back();
39
- }
40
- },
41
- children: /* @__PURE__ */ jsx(SiteIcon, {})
42
- }
43
- )
44
- }
45
- ),
46
- /* @__PURE__ */ jsx(Tooltip.Popup, { positioner: /* @__PURE__ */ jsx(Tooltip.Positioner, { side: "right" }), children: props["aria-label"] })
47
- ] });
48
- }
49
- var site_icon_link_default = SiteIconLink;
50
- export {
51
- site_icon_link_default as default
52
- };
53
- //# sourceMappingURL=index.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/site-icon-link/index.tsx", "../../../src/components/site-icon-link/style.scss"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Link, privateApis as routePrivateApis } from '@wordpress/route';\nimport { Tooltip } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nimport SiteIcon from '../site-icon';\nimport './style.scss';\n\nconst { useCanGoBack, useRouter } = unlock( routePrivateApis );\n\nfunction SiteIconLink( {\n\tto,\n\tisBackButton,\n\t...props\n}: {\n\tto: string;\n\t'aria-label': string;\n\tisBackButton?: boolean;\n} ) {\n\tconst router = useRouter();\n\tconst canGoBack = useCanGoBack();\n\n\treturn (\n\t\t<Tooltip.Root>\n\t\t\t<Tooltip.Trigger\n\t\t\t\trender={\n\t\t\t\t\t<Link\n\t\t\t\t\t\tto={ to }\n\t\t\t\t\t\taria-label={ props[ 'aria-label' ] }\n\t\t\t\t\t\tclassName=\"boot-site-icon-link\"\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t// If possible, restore the previous page with\n\t\t\t\t\t\t\t// filters etc.\n\t\t\t\t\t\t\tif ( canGoBack && isBackButton ) {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\trouter.history.back();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<SiteIcon />\n\t\t\t\t\t</Link>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Tooltip.Popup positioner={ <Tooltip.Positioner side=\"right\" /> }>\n\t\t\t\t{ props[ 'aria-label' ] }\n\t\t\t</Tooltip.Popup>\n\t\t</Tooltip.Root>\n\t);\n}\n\nexport default SiteIconLink;\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='6b58df5c9e']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"6b58df5c9e\");\n\tstyle.appendChild(document.createTextNode(\".boot-site-icon-link{align-items:center;background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);display:inline-flex;height:64px;justify-content:center;text-decoration:none;width:64px}@media not (prefers-reduced-motion){.boot-site-icon-link{transition:outline .1s ease-out}}.boot-site-icon-link:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}\"));\n\tdocument.head.appendChild(style);\n}\n"],
5
- "mappings": ";AAGA,SAAS,MAAM,eAAe,wBAAwB;AACtD,SAAS,eAAe;AAKxB,SAAS,cAAc;AAEvB,OAAO,cAAc;;;ACXrB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,+jBAA+jB,CAAC;AAC1mB,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADwBE,SAgBI,KAhBJ;AAfF,IAAM,EAAE,cAAc,UAAU,IAAI,OAAQ,gBAAiB;AAE7D,SAAS,aAAc;AAAA,EACtB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAII;AACH,QAAM,SAAS,UAAU;AACzB,QAAM,YAAY,aAAa;AAE/B,SACC,qBAAC,QAAQ,MAAR,EACA;AAAA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACA,QACC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,cAAa,MAAO,YAAa;AAAA,YACjC,WAAU;AAAA,YACV,SAAU,CAAE,UAAW;AAGtB,kBAAK,aAAa,cAAe;AAChC,sBAAM,eAAe;AACrB,uBAAO,QAAQ,KAAK;AAAA,cACrB;AAAA,YACD;AAAA,YAEA,8BAAC,YAAS;AAAA;AAAA,QACX;AAAA;AAAA,IAEF;AAAA,IACA,oBAAC,QAAQ,OAAR,EAAc,YAAa,oBAAC,QAAQ,YAAR,EAAmB,MAAK,SAAQ,GAC1D,gBAAO,YAAa,GACvB;AAAA,KACD;AAEF;AAEA,IAAO,yBAAQ;",
6
- "names": []
7
- }
@@ -1,37 +0,0 @@
1
- body.has-admin-bar-in-editor #wpadminbar {
2
- display: block;
3
- }
4
- body.has-admin-bar-in-editor .boot-canvas-back-button__link {
5
- background: transparent;
6
- }
7
- body.has-admin-bar-in-editor .boot-canvas-back-button__icon {
8
- background-color: transparent;
9
- }
10
- body.has-admin-bar-in-editor #site-editor-v2-app {
11
- position: fixed;
12
- top: 32px;
13
- right: 0;
14
- left: 0;
15
- bottom: 0;
16
- height: calc(100vh - 32px) !important;
17
- }
18
- body.has-admin-bar-in-editor .boot-layout.has-full-canvas .boot-layout__canvas {
19
- top: 32px;
20
- height: calc(100vh - 32px);
21
- }
22
- @media (max-width: 782px) {
23
- body.has-admin-bar-in-editor #site-editor-v2-app {
24
- top: 46px;
25
- height: calc(100vh - 46px) !important;
26
- }
27
- body.has-admin-bar-in-editor .boot-layout__stage,
28
- body.has-admin-bar-in-editor .boot-layout__inspector,
29
- body.has-admin-bar-in-editor .boot-layout__canvas:not(.has-mobile-drawer),
30
- body.has-admin-bar-in-editor .boot-layout.has-full-canvas .boot-layout__canvas {
31
- top: 46px;
32
- height: calc(100vh - 46px);
33
- }
34
- body.has-admin-bar-in-editor .boot-layout__mobile-sidebar-drawer {
35
- top: 46px;
36
- }
37
- }
@@ -1,37 +0,0 @@
1
- body.has-admin-bar-in-editor #wpadminbar {
2
- display: block;
3
- }
4
- body.has-admin-bar-in-editor .boot-canvas-back-button__link {
5
- background: transparent;
6
- }
7
- body.has-admin-bar-in-editor .boot-canvas-back-button__icon {
8
- background-color: transparent;
9
- }
10
- body.has-admin-bar-in-editor #site-editor-v2-app {
11
- position: fixed;
12
- top: 32px;
13
- left: 0;
14
- right: 0;
15
- bottom: 0;
16
- height: calc(100vh - 32px) !important;
17
- }
18
- body.has-admin-bar-in-editor .boot-layout.has-full-canvas .boot-layout__canvas {
19
- top: 32px;
20
- height: calc(100vh - 32px);
21
- }
22
- @media (max-width: 782px) {
23
- body.has-admin-bar-in-editor #site-editor-v2-app {
24
- top: 46px;
25
- height: calc(100vh - 46px) !important;
26
- }
27
- body.has-admin-bar-in-editor .boot-layout__stage,
28
- body.has-admin-bar-in-editor .boot-layout__inspector,
29
- body.has-admin-bar-in-editor .boot-layout__canvas:not(.has-mobile-drawer),
30
- body.has-admin-bar-in-editor .boot-layout.has-full-canvas .boot-layout__canvas {
31
- top: 46px;
32
- height: calc(100vh - 46px);
33
- }
34
- body.has-admin-bar-in-editor .boot-layout__mobile-sidebar-drawer {
35
- top: 46px;
36
- }
37
- }
@@ -1,4 +0,0 @@
1
- import './style.scss';
2
- declare function SiteHub(): import("react").JSX.Element;
3
- export default SiteHub;
4
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/site-hub/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,cAAc,CAAC;AAEtB,iBAAS,OAAO,gCA+Cf;eAEc,OAAO"}
@@ -1,9 +0,0 @@
1
- /**
2
- * Internal dependencies
3
- */
4
- import './style.scss';
5
- declare function SiteIcon({ className }: {
6
- className?: string;
7
- }): import("react").JSX.Element;
8
- export default SiteIcon;
9
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/site-icon/index.tsx"],"names":[],"mappings":"AAcA;;GAEG;AACH,OAAO,cAAc,CAAC;AAEtB,iBAAS,QAAQ,CAAE,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAsCvD;eAEc,QAAQ"}
@@ -1,8 +0,0 @@
1
- import './style.scss';
2
- declare function SiteIconLink({ to, isBackButton, ...props }: {
3
- to: string;
4
- 'aria-label': string;
5
- isBackButton?: boolean;
6
- }): import("react").JSX.Element;
7
- export default SiteIconLink;
8
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/site-icon-link/index.tsx"],"names":[],"mappings":"AAYA,OAAO,cAAc,CAAC;AAItB,iBAAS,YAAY,CAAE,EACtB,EAAE,EACF,YAAY,EACZ,GAAG,KAAK,EACR,EAAE;IACF,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,+BA8BA;eAEc,YAAY"}
@@ -1,77 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { useSelect, useDispatch } from '@wordpress/data';
5
- import {
6
- ExternalLink,
7
- Button,
8
- // @ts-ignore
9
- __experimentalHStack as HStack,
10
- } from '@wordpress/components';
11
- import { __ } from '@wordpress/i18n';
12
- import { store as coreStore } from '@wordpress/core-data';
13
- import { decodeEntities } from '@wordpress/html-entities';
14
- import { search } from '@wordpress/icons';
15
- import { displayShortcut } from '@wordpress/keycodes';
16
- // @ts-expect-error Commands is not typed properly.
17
- import { store as commandsStore } from '@wordpress/commands';
18
- import { filterURLForDisplay } from '@wordpress/url';
19
- import type { UnstableBase } from '@wordpress/core-data';
20
-
21
- /**
22
- * Internal dependencies
23
- */
24
- import SiteIconLink from '../site-icon-link';
25
- import { store as bootStore } from '../../store';
26
- import './style.scss';
27
-
28
- function SiteHub() {
29
- const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
30
- const { getEntityRecord } = select( coreStore );
31
- const _base = getEntityRecord< UnstableBase >(
32
- 'root',
33
- '__unstableBase'
34
- );
35
- return {
36
- dashboardLink: select( bootStore ).getDashboardLink(),
37
- homeUrl: _base?.home,
38
- siteTitle:
39
- ! _base?.name && !! _base?.url
40
- ? filterURLForDisplay( _base?.url )
41
- : _base?.name,
42
- };
43
- }, [] );
44
- const { open: openCommandCenter } = useDispatch( commandsStore );
45
-
46
- return (
47
- <div className="boot-site-hub">
48
- <SiteIconLink
49
- to={ dashboardLink || '/' }
50
- aria-label={ __( 'Go to the Dashboard' ) }
51
- />
52
- <ExternalLink
53
- href={ homeUrl ?? '/' }
54
- className="boot-site-hub__title"
55
- >
56
- <div className="boot-site-hub__title-text">
57
- { siteTitle && decodeEntities( siteTitle ) }
58
- </div>
59
- <div className="boot-site-hub__url">
60
- { filterURLForDisplay( homeUrl ?? '' ) }
61
- </div>
62
- </ExternalLink>
63
- <HStack className="boot-site-hub__actions">
64
- <Button
65
- variant="tertiary"
66
- icon={ search }
67
- onClick={ () => openCommandCenter() }
68
- size="compact"
69
- label={ __( 'Open command palette' ) }
70
- shortcut={ displayShortcut.primary( 'k' ) }
71
- />
72
- </HStack>
73
- </div>
74
- );
75
- }
76
-
77
- export default SiteHub;