@wordpress/boot 0.15.0 → 0.15.2-next.v.202606191442.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.
- package/CHANGELOG.md +11 -0
- package/build-module/components/app/use-route-title.mjs +1 -1
- package/build-module/components/app/use-route-title.mjs.map +2 -2
- package/build-module/components/canvas/back-button.mjs +3 -3
- package/build-module/components/canvas/back-button.mjs.map +2 -2
- package/build-module/components/navigation/index.mjs +2 -2
- package/build-module/components/navigation/index.mjs.map +2 -2
- package/build-module/components/navigation/navigation-item/index.mjs +3 -3
- package/build-module/components/navigation/navigation-item/index.mjs.map +2 -2
- package/build-module/components/navigation/navigation-screen/index.mjs +3 -3
- package/build-module/components/navigation/navigation-screen/index.mjs.map +2 -2
- package/build-module/components/root/index.mjs +121 -100
- package/build-module/components/root/index.mjs.map +2 -2
- package/build-module/components/root/single-page.mjs +45 -25
- package/build-module/components/root/single-page.mjs.map +2 -2
- package/build-module/components/save-button/index.mjs +35 -29
- package/build-module/components/save-button/index.mjs.map +2 -2
- package/build-module/components/site-hub/index.mjs +3 -3
- package/build-module/components/site-hub/index.mjs.map +2 -2
- package/build-module/components/site-icon/index.mjs +3 -3
- package/build-module/components/site-icon/index.mjs.map +2 -2
- package/build-module/components/site-icon-link/index.mjs +28 -20
- package/build-module/components/site-icon-link/index.mjs.map +2 -2
- package/build-module/index.mjs +6 -6
- package/build-module/index.mjs.map +2 -2
- package/build-style/style-rtl.css +180 -187
- package/build-style/style.css +180 -187
- package/build-style/view-transitions-rtl.css +7 -4
- package/build-style/view-transitions.css +7 -4
- package/build-types/components/root/index.d.ts.map +1 -1
- package/build-types/components/root/single-page.d.ts.map +1 -1
- package/build-types/components/save-button/index.d.ts.map +1 -1
- package/build-types/components/site-icon-link/index.d.ts.map +1 -1
- package/package.json +31 -25
- package/src/components/canvas/back-button.scss +2 -2
- package/src/components/navigation/index.tsx +2 -2
- package/src/components/navigation/navigation-item/style.scss +3 -3
- package/src/components/navigation/navigation-screen/style.scss +2 -2
- package/src/components/root/index.tsx +140 -120
- package/src/components/root/single-page.tsx +20 -7
- package/src/components/root/style.scss +10 -10
- package/src/components/save-button/index.tsx +30 -20
- package/src/components/save-button/style.scss +6 -0
- package/src/components/site-hub/style.scss +4 -4
- package/src/components/site-icon/style.scss +1 -1
- package/src/components/site-icon-link/index.tsx +26 -18
- package/src/components/site-icon-link/style.scss +2 -2
- package/src/{experimental-admin-bar-in-editor.scss → experimental-omnibar.scss} +1 -1
- package/src/style.scss +1 -1
- package/src/view-transitions.scss +1 -1
- package/build-module/components/user-theme-provider/index.mjs +0 -33
- package/build-module/components/user-theme-provider/index.mjs.map +0 -7
- package/build-types/components/user-theme-provider/index.d.ts +0 -6
- package/build-types/components/user-theme-provider/index.d.ts.map +0 -1
- package/src/components/user-theme-provider/index.tsx +0 -35
- package/src/components/user-theme-provider/test/index.test.ts +0 -11
- /package/build-style/{experimental-admin-bar-in-editor-rtl.css → experimental-omnibar-rtl.css} +0 -0
- /package/build-style/{experimental-admin-bar-in-editor.css → experimental-omnibar.css} +0 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
|
|
2
|
+
|
|
3
|
+
## Unreleased
|
|
4
|
+
|
|
5
|
+
## 0.15.1 (2026-06-16)
|
|
6
|
+
|
|
7
|
+
## 0.15.0 (2026-06-10)
|
|
8
|
+
|
|
9
|
+
### Code Quality
|
|
10
|
+
|
|
11
|
+
- Add missing `@types/react` dependency. [#78882](https://github.com/WordPress/gutenberg/pull/78882).
|
|
@@ -33,7 +33,7 @@ function useRouteTitle() {
|
|
|
33
33
|
const decodedSiteTitle = decodeEntities(siteTitle);
|
|
34
34
|
const formattedTitle = sprintf(
|
|
35
35
|
/* translators: Admin document title. 1: Admin screen name, 2: Site name. */
|
|
36
|
-
__("%1$s
|
|
36
|
+
__("%1$s ‹ %2$s — WordPress"),
|
|
37
37
|
decodedRouteTitle,
|
|
38
38
|
decodedSiteTitle
|
|
39
39
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/app/use-route-title.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore, type UnstableBase } from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { privateApis as routePrivateApis } from '@wordpress/route';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useLocation, useMatches } = unlock( routePrivateApis );\n\n/**\n * Hook that manages document title updates based on route changes.\n * Formats titles with WordPress conventions and announces them to screen readers.\n *\n * This hook should be called from the Root component to ensure it runs on every route.\n */\nexport default function useRouteTitle() {\n\tconst location = useLocation();\n\tconst matches = useMatches();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst routeTitle = ( currentMatch?.loaderData as any )?.title as\n\t\t| string\n\t\t| undefined;\n\n\tconst siteTitle = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityRecord< UnstableBase >(\n\t\t\t\t'root',\n\t\t\t\t'__unstableBase'\n\t\t\t)?.name,\n\t\t[]\n\t);\n\n\tconst isInitialLocationRef = useRef( true );\n\n\tuseEffect( () => {\n\t\tisInitialLocationRef.current = false;\n\t}, [ location ] );\n\n\tuseEffect( () => {\n\t\t// Don't update or announce the title for initial page load.\n\t\tif ( isInitialLocationRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\trouteTitle &&\n\t\t\ttypeof routeTitle === 'string' &&\n\t\t\tsiteTitle &&\n\t\t\ttypeof siteTitle === 'string'\n\t\t) {\n\t\t\t// Decode entities for display\n\t\t\tconst decodedRouteTitle = decodeEntities( routeTitle );\n\t\t\tconst decodedSiteTitle = decodeEntities( siteTitle );\n\n\t\t\t// Format title following WordPress admin conventions\n\t\t\tconst formattedTitle = sprintf(\n\t\t\t\t/* translators: Admin document title. 1: Admin screen name, 2: Site name. */\n\t\t\t\t__( '%1$s
|
|
5
|
-
"mappings": ";AAGA,SAAS,WAAW,cAAc;AAClC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAoC;AACtD,SAAS,IAAI,eAAe;AAC5B,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAC/B,SAAS,eAAe,wBAAwB;AAKhD,SAAS,cAAc;AAEvB,IAAM,EAAE,aAAa,WAAW,IAAI,OAAQ,gBAAiB;AAQ9C,SAAR,gBAAiC;AACvC,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,WAAW;AAC3B,QAAM,eAAe,QAAS,QAAQ,SAAS,CAAE;AACjD,QAAM,aAAe,cAAc,YAAqB;AAIxD,QAAM,YAAY;AAAA,IACjB,CAAE,WACD,OAAQ,SAAU,EAAE;AAAA,MACnB;AAAA,MACA;AAAA,IACD,GAAG;AAAA,IACJ,CAAC;AAAA,EACF;AAEA,QAAM,uBAAuB,OAAQ,IAAK;AAE1C,YAAW,MAAM;AAChB,yBAAqB,UAAU;AAAA,EAChC,GAAG,CAAE,QAAS,CAAE;AAEhB,YAAW,MAAM;AAEhB,QAAK,qBAAqB,SAAU;AACnC;AAAA,IACD;AAEA,QACC,cACA,OAAO,eAAe,YACtB,aACA,OAAO,cAAc,UACpB;AAED,YAAM,oBAAoB,eAAgB,UAAW;AACrD,YAAM,mBAAmB,eAAgB,SAAU;AAGnD,YAAM,iBAAiB;AAAA;AAAA,QAEtB,GAAI,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore, type UnstableBase } from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { privateApis as routePrivateApis } from '@wordpress/route';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useLocation, useMatches } = unlock( routePrivateApis );\n\n/**\n * Hook that manages document title updates based on route changes.\n * Formats titles with WordPress conventions and announces them to screen readers.\n *\n * This hook should be called from the Root component to ensure it runs on every route.\n */\nexport default function useRouteTitle() {\n\tconst location = useLocation();\n\tconst matches = useMatches();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst routeTitle = ( currentMatch?.loaderData as any )?.title as\n\t\t| string\n\t\t| undefined;\n\n\tconst siteTitle = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityRecord< UnstableBase >(\n\t\t\t\t'root',\n\t\t\t\t'__unstableBase'\n\t\t\t)?.name,\n\t\t[]\n\t);\n\n\tconst isInitialLocationRef = useRef( true );\n\n\tuseEffect( () => {\n\t\tisInitialLocationRef.current = false;\n\t}, [ location ] );\n\n\tuseEffect( () => {\n\t\t// Don't update or announce the title for initial page load.\n\t\tif ( isInitialLocationRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\trouteTitle &&\n\t\t\ttypeof routeTitle === 'string' &&\n\t\t\tsiteTitle &&\n\t\t\ttypeof siteTitle === 'string'\n\t\t) {\n\t\t\t// Decode entities for display\n\t\t\tconst decodedRouteTitle = decodeEntities( routeTitle );\n\t\t\tconst decodedSiteTitle = decodeEntities( siteTitle );\n\n\t\t\t// Format title following WordPress admin conventions\n\t\t\tconst formattedTitle = sprintf(\n\t\t\t\t/* translators: Admin document title. 1: Admin screen name, 2: Site name. */\n\t\t\t\t__( '%1$s ‹ %2$s — WordPress' ),\n\t\t\t\tdecodedRouteTitle,\n\t\t\t\tdecodedSiteTitle\n\t\t\t);\n\n\t\t\tdocument.title = formattedTitle;\n\n\t\t\t// Announce title on route change for screen readers.\n\t\t\tif ( decodedRouteTitle ) {\n\t\t\t\tspeak( decodedRouteTitle, 'assertive' );\n\t\t\t}\n\t\t}\n\t}, [ routeTitle, siteTitle, location ] );\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,WAAW,cAAc;AAClC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAoC;AACtD,SAAS,IAAI,eAAe;AAC5B,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAC/B,SAAS,eAAe,wBAAwB;AAKhD,SAAS,cAAc;AAEvB,IAAM,EAAE,aAAa,WAAW,IAAI,OAAQ,gBAAiB;AAQ9C,SAAR,gBAAiC;AACvC,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,WAAW;AAC3B,QAAM,eAAe,QAAS,QAAQ,SAAS,CAAE;AACjD,QAAM,aAAe,cAAc,YAAqB;AAIxD,QAAM,YAAY;AAAA,IACjB,CAAE,WACD,OAAQ,SAAU,EAAE;AAAA,MACnB;AAAA,MACA;AAAA,IACD,GAAG;AAAA,IACJ,CAAC;AAAA,EACF;AAEA,QAAM,uBAAuB,OAAQ,IAAK;AAE1C,YAAW,MAAM;AAChB,yBAAqB,UAAU;AAAA,EAChC,GAAG,CAAE,QAAS,CAAE;AAEhB,YAAW,MAAM;AAEhB,QAAK,qBAAqB,SAAU;AACnC;AAAA,IACD;AAEA,QACC,cACA,OAAO,eAAe,YACtB,aACA,OAAO,cAAc,UACpB;AAED,YAAM,oBAAoB,eAAgB,UAAW;AACrD,YAAM,mBAAmB,eAAgB,SAAU;AAGnD,YAAM,iBAAiB;AAAA;AAAA,QAEtB,GAAI,yBAA0B;AAAA,QAC9B;AAAA,QACA;AAAA,MACD;AAEA,eAAS,QAAQ;AAGjB,UAAK,mBAAoB;AACxB,cAAO,mBAAmB,WAAY;AAAA,MACvC;AAAA,IACD;AAAA,EACD,GAAG,CAAE,YAAY,WAAW,QAAS,CAAE;AACxC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,10 +10,10 @@ import { __, isRTL } from "@wordpress/i18n";
|
|
|
10
10
|
import SiteIcon from "../site-icon/index.mjs";
|
|
11
11
|
|
|
12
12
|
// packages/boot/src/components/canvas/back-button.scss
|
|
13
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
13
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='2e0c99a4a7']")) {
|
|
14
14
|
const style = document.createElement("style");
|
|
15
|
-
style.setAttribute("data-wp-hash", "
|
|
16
|
-
style.appendChild(document.createTextNode(".boot-canvas-back-button{height:64px;left:0;position:absolute;top:0;width:64px;z-index:100}.boot-canvas-back-button__container{height:100%;position:relative;width:100%}.boot-canvas-back-button__link.components-button{align-items:center;background:var(--wpds-color-
|
|
15
|
+
style.setAttribute("data-wp-hash", "2e0c99a4a7");
|
|
16
|
+
style.appendChild(document.createTextNode(".boot-canvas-back-button{height:64px;left:0;position:absolute;top:0;width:64px;z-index:100}.boot-canvas-back-button__container{height:100%;position:relative;width:100%}.boot-canvas-back-button__link.components-button{align-items:center;background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);border-radius:0;display:inline-flex;height:64px;justify-content:center;padding:0;text-decoration:none;width:64px}@media not (prefers-reduced-motion){.boot-canvas-back-button__link.components-button{transition:outline .1s ease-out}}.boot-canvas-back-button__link.components-button: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-canvas-back-button__icon{align-items:center;background-color:#ccc;display:flex;height:64px;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:64px}.boot-canvas-back-button__icon svg{fill:currentColor}.boot-canvas-back-button__icon.has-site-icon{-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px);background-color:hsla(0,0%,100%,.6)}.interface-interface-skeleton__header{margin-top:0!important}"));
|
|
17
17
|
document.head.appendChild(style);
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/canvas/back-button.tsx", "../../../src/components/canvas/back-button.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon as WCIcon,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { arrowUpLeft, arrowUpRight } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __, isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport SiteIcon from '../site-icon';\nimport './back-button.scss';\n\ndeclare global {\n\tinterface Window {\n\t\t__experimentalAdminBarInEditor?: boolean;\n\t}\n}\n\n/**\n * Overlay arrow animation that appears on hover.\n * Matches next-admin implementation with clip-path.\n */\nconst toggleHomeIconVariants = {\n\tedit: {\n\t\topacity: 0,\n\t\tscale: 0.2,\n\t},\n\thover: {\n\t\topacity: 1,\n\t\tscale: 1,\n\t\tclipPath: 'inset( 22% round 2px )',\n\t},\n};\n\n/**\n * Back button component that appears in full-screen canvas mode.\n * Matches next-admin's SiteIconBackButton design.\n *\n * @param {Object} props Component props\n * @param {number} props.length Number of BackButton fills (from Slot)\n * @return Back button with slide and hover animations\n */\nexport default function BootBackButton( { length }: { length: number } ) {\n\tconst disableMotion = useReducedMotion();\n\tconst hasAdminBarInEditor = window.__experimentalAdminBarInEditor;\n\n\tconst handleBack = () => {\n\t\twindow.history.back();\n\t};\n\n\t// Only render if this is the only back button\n\tif ( length > 1 ) {\n\t\treturn null;\n\t}\n\n\tconst transition = {\n\t\tduration: disableMotion ? 0 : 0.3,\n\t};\n\n\tconst arrowIcon = isRTL() ? arrowUpRight : arrowUpLeft;\n\n\treturn (\n\t\t<motion.div\n\t\t\tclassName=\"boot-canvas-back-button\"\n\t\t\tanimate=\"edit\"\n\t\t\tinitial=\"edit\"\n\t\t\twhileHover=\"hover\"\n\t\t\twhileTap=\"tap\"\n\t\t\ttransition={ transition }\n\t\t>\n\t\t\t<Button\n\t\t\t\tclassName=\"boot-canvas-back-button__link\"\n\t\t\t\tonClick={ handleBack }\n\t\t\t\taria-label={ __( 'Go back' ) }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t>\n\t\t\t\t{ ! hasAdminBarInEditor && <SiteIcon /> }\n\t\t\t</Button>\n\n\t\t\t{ hasAdminBarInEditor ? (\n\t\t\t\t<div className=\"boot-canvas-back-button__icon\">\n\t\t\t\t\t<WCIcon icon={ arrowIcon } />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t/* Overlay arrow that appears on hover */\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"boot-canvas-back-button__icon\"\n\t\t\t\t\tvariants={ toggleHomeIconVariants }\n\t\t\t\t>\n\t\t\t\t\t<WCIcon icon={ arrowIcon } />\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</motion.div>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,OACd;AACP,SAAS,aAAa,oBAAoB;AAC1C,SAAS,wBAAwB;AACjC,SAAS,IAAI,aAAa;AAK1B,OAAO,cAAc;;;ACfrB,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,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon as WCIcon,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { arrowUpLeft, arrowUpRight } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __, isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport SiteIcon from '../site-icon';\nimport './back-button.scss';\n\ndeclare global {\n\tinterface Window {\n\t\t__experimentalAdminBarInEditor?: boolean;\n\t}\n}\n\n/**\n * Overlay arrow animation that appears on hover.\n * Matches next-admin implementation with clip-path.\n */\nconst toggleHomeIconVariants = {\n\tedit: {\n\t\topacity: 0,\n\t\tscale: 0.2,\n\t},\n\thover: {\n\t\topacity: 1,\n\t\tscale: 1,\n\t\tclipPath: 'inset( 22% round 2px )',\n\t},\n};\n\n/**\n * Back button component that appears in full-screen canvas mode.\n * Matches next-admin's SiteIconBackButton design.\n *\n * @param {Object} props Component props\n * @param {number} props.length Number of BackButton fills (from Slot)\n * @return Back button with slide and hover animations\n */\nexport default function BootBackButton( { length }: { length: number } ) {\n\tconst disableMotion = useReducedMotion();\n\tconst hasAdminBarInEditor = window.__experimentalAdminBarInEditor;\n\n\tconst handleBack = () => {\n\t\twindow.history.back();\n\t};\n\n\t// Only render if this is the only back button\n\tif ( length > 1 ) {\n\t\treturn null;\n\t}\n\n\tconst transition = {\n\t\tduration: disableMotion ? 0 : 0.3,\n\t};\n\n\tconst arrowIcon = isRTL() ? arrowUpRight : arrowUpLeft;\n\n\treturn (\n\t\t<motion.div\n\t\t\tclassName=\"boot-canvas-back-button\"\n\t\t\tanimate=\"edit\"\n\t\t\tinitial=\"edit\"\n\t\t\twhileHover=\"hover\"\n\t\t\twhileTap=\"tap\"\n\t\t\ttransition={ transition }\n\t\t>\n\t\t\t<Button\n\t\t\t\tclassName=\"boot-canvas-back-button__link\"\n\t\t\t\tonClick={ handleBack }\n\t\t\t\taria-label={ __( 'Go back' ) }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t>\n\t\t\t\t{ ! hasAdminBarInEditor && <SiteIcon /> }\n\t\t\t</Button>\n\n\t\t\t{ hasAdminBarInEditor ? (\n\t\t\t\t<div className=\"boot-canvas-back-button__icon\">\n\t\t\t\t\t<WCIcon icon={ arrowIcon } />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t/* Overlay arrow that appears on hover */\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"boot-canvas-back-button__icon\"\n\t\t\t\t\tvariants={ toggleHomeIconVariants }\n\t\t\t\t>\n\t\t\t\t\t<WCIcon icon={ arrowIcon } />\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</motion.div>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='2e0c99a4a7']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"2e0c99a4a7\");\n\tstyle.appendChild(document.createTextNode(\".boot-canvas-back-button{height:64px;left:0;position:absolute;top:0;width:64px;z-index:100}.boot-canvas-back-button__container{height:100%;position:relative;width:100%}.boot-canvas-back-button__link.components-button{align-items:center;background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);border-radius:0;display:inline-flex;height:64px;justify-content:center;padding:0;text-decoration:none;width:64px}@media not (prefers-reduced-motion){.boot-canvas-back-button__link.components-button{transition:outline .1s ease-out}}.boot-canvas-back-button__link.components-button: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-canvas-back-button__icon{align-items:center;background-color:#ccc;display:flex;height:64px;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:64px}.boot-canvas-back-button__icon svg{fill:currentColor}.boot-canvas-back-button__icon.has-site-icon{-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px);background-color:hsla(0,0%,100%,.6)}.interface-interface-skeleton__header{margin-top:0!important}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,OACd;AACP,SAAS,aAAa,oBAAoB;AAC1C,SAAS,wBAAwB;AACjC,SAAS,IAAI,aAAa;AAK1B,OAAO,cAAc;;;ACfrB,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,0yCAA0yC,CAAC;AACr1C,WAAS,KAAK,YAAY,KAAK;AAChC;;;AD+DE,SAc6B,KAd7B;AAxCF,IAAM,yBAAyB;AAAA,EAC9B,MAAM;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EACR;AAAA,EACA,OAAO;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,EACX;AACD;AAUe,SAAR,eAAiC,EAAE,OAAO,GAAwB;AACxE,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,sBAAsB,OAAO;AAEnC,QAAM,aAAa,MAAM;AACxB,WAAO,QAAQ,KAAK;AAAA,EACrB;AAGA,MAAK,SAAS,GAAI;AACjB,WAAO;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IAClB,UAAU,gBAAgB,IAAI;AAAA,EAC/B;AAEA,QAAM,YAAY,MAAM,IAAI,eAAe;AAE3C,SACC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,UAAS;AAAA,MACT;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAU;AAAA,YACV,cAAa,GAAI,SAAU;AAAA,YAC3B,uBAAqB;AAAA,YAEnB,WAAE,uBAAuB,oBAAC,YAAS;AAAA;AAAA,QACtC;AAAA,QAEE,sBACD,oBAAC,SAAI,WAAU,iCACd,8BAAC,UAAO,MAAO,WAAY,GAC5B;AAAA;AAAA,UAGA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACA,WAAU;AAAA,cACV,UAAW;AAAA,cAEX,8BAAC,UAAO,MAAO,WAAY;AAAA;AAAA,UAC5B;AAAA;AAAA;AAAA;AAAA,EAEF;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,7 +7,7 @@ import DrilldownItem from "./drilldown-item/index.mjs";
|
|
|
7
7
|
import DropdownItem from "./dropdown-item/index.mjs";
|
|
8
8
|
import NavigationScreen from "./navigation-screen/index.mjs";
|
|
9
9
|
import { useSidebarParent } from "./use-sidebar-parent.mjs";
|
|
10
|
-
import {
|
|
10
|
+
import { jsx } from "react/jsx-runtime";
|
|
11
11
|
function Navigation() {
|
|
12
12
|
const backButtonRef = useRef(null);
|
|
13
13
|
const [animationDirection, setAnimationDirection] = useState(null);
|
|
@@ -51,7 +51,7 @@ function Navigation() {
|
|
|
51
51
|
animationDirection: animationDirection || void 0,
|
|
52
52
|
navigationKey,
|
|
53
53
|
onNavigate: handleNavigate,
|
|
54
|
-
content: /* @__PURE__ */ jsx(
|
|
54
|
+
content: /* @__PURE__ */ jsx("div", { role: "list", children: items.map((item) => {
|
|
55
55
|
if (item.parent_type === "dropdown") {
|
|
56
56
|
return /* @__PURE__ */ jsx(
|
|
57
57
|
DropdownItem,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/navigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { STORE_NAME } from '../../store';\nimport NavigationItem from './navigation-item';\nimport DrilldownItem from './drilldown-item';\nimport DropdownItem from './dropdown-item';\nimport NavigationScreen from './navigation-screen';\nimport { useSidebarParent } from './use-sidebar-parent';\nimport type { MenuItem } from '../../store/types';\n\nfunction Navigation() {\n\tconst backButtonRef = useRef< HTMLButtonElement >( null );\n\tconst [ animationDirection, setAnimationDirection ] = useState<\n\t\t'forward' | 'backward' | null\n\t>( null );\n\tconst [ parentId, setParentId, parentDropdownId, setParentDropdownId ] =\n\t\tuseSidebarParent();\n\tconst menuItems = useSelect(\n\t\t( select ) =>\n\t\t\t// @ts-ignore\n\t\t\tselect( STORE_NAME ).getMenuItems() as MenuItem[],\n\t\t[]\n\t);\n\tconst parent = useMemo(\n\t\t() => menuItems.find( ( item ) => item.id === parentId ),\n\t\t[ menuItems, parentId ]\n\t);\n\t// Create a unique key for the current navigation state\n\t// The sidebar will animate when the key changes.\n\tconst navigationKey = parent ? `drilldown-${ parent.id }` : 'root';\n\n\t// We use transitions to handle navigation clicks\n\t// This allows smooth animations and non blocking navigation.\n\tconst handleNavigate = ( {\n\t\tid,\n\t\tdirection,\n\t}: {\n\t\tid?: string;\n\t\tdirection: 'forward' | 'backward';\n\t} ) => {\n\t\tsetAnimationDirection( direction );\n\t\tsetParentId( id );\n\t};\n\n\tconst handleDropdownToggle = ( dropdownId: string ) => {\n\t\tsetParentDropdownId(\n\t\t\tparentDropdownId === dropdownId ? undefined : dropdownId\n\t\t);\n\t};\n\n\tconst items = useMemo(\n\t\t() => menuItems.filter( ( item ) => item.parent === parentId ),\n\t\t[ menuItems, parentId ]\n\t);\n\n\tconst hasRealIcons = items.some( ( item ) => !! item.icon );\n\n\treturn (\n\t\t<NavigationScreen\n\t\t\tisRoot={ ! parent }\n\t\t\ttitle={ parent ? parent.label : '' }\n\t\t\tbackMenuItem={ parent?.parent }\n\t\t\tbackButtonRef={ backButtonRef }\n\t\t\tanimationDirection={ animationDirection || undefined }\n\t\t\tnavigationKey={ navigationKey }\n\t\t\tonNavigate={ handleNavigate }\n\t\t\tcontent={\n\t\t\t\t
|
|
5
|
-
"mappings": ";AAGA,SAAS,UAAU,SAAS,cAAc;AAC1C,SAAS,iBAAiB;AAK1B,SAAS,kBAAkB;AAC3B,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAC7B,SAAS,wBAAwB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { STORE_NAME } from '../../store';\nimport NavigationItem from './navigation-item';\nimport DrilldownItem from './drilldown-item';\nimport DropdownItem from './dropdown-item';\nimport NavigationScreen from './navigation-screen';\nimport { useSidebarParent } from './use-sidebar-parent';\nimport type { MenuItem } from '../../store/types';\n\nfunction Navigation() {\n\tconst backButtonRef = useRef< HTMLButtonElement >( null );\n\tconst [ animationDirection, setAnimationDirection ] = useState<\n\t\t'forward' | 'backward' | null\n\t>( null );\n\tconst [ parentId, setParentId, parentDropdownId, setParentDropdownId ] =\n\t\tuseSidebarParent();\n\tconst menuItems = useSelect(\n\t\t( select ) =>\n\t\t\t// @ts-ignore\n\t\t\tselect( STORE_NAME ).getMenuItems() as MenuItem[],\n\t\t[]\n\t);\n\tconst parent = useMemo(\n\t\t() => menuItems.find( ( item ) => item.id === parentId ),\n\t\t[ menuItems, parentId ]\n\t);\n\t// Create a unique key for the current navigation state\n\t// The sidebar will animate when the key changes.\n\tconst navigationKey = parent ? `drilldown-${ parent.id }` : 'root';\n\n\t// We use transitions to handle navigation clicks\n\t// This allows smooth animations and non blocking navigation.\n\tconst handleNavigate = ( {\n\t\tid,\n\t\tdirection,\n\t}: {\n\t\tid?: string;\n\t\tdirection: 'forward' | 'backward';\n\t} ) => {\n\t\tsetAnimationDirection( direction );\n\t\tsetParentId( id );\n\t};\n\n\tconst handleDropdownToggle = ( dropdownId: string ) => {\n\t\tsetParentDropdownId(\n\t\t\tparentDropdownId === dropdownId ? undefined : dropdownId\n\t\t);\n\t};\n\n\tconst items = useMemo(\n\t\t() => menuItems.filter( ( item ) => item.parent === parentId ),\n\t\t[ menuItems, parentId ]\n\t);\n\n\tconst hasRealIcons = items.some( ( item ) => !! item.icon );\n\n\treturn (\n\t\t<NavigationScreen\n\t\t\tisRoot={ ! parent }\n\t\t\ttitle={ parent ? parent.label : '' }\n\t\t\tbackMenuItem={ parent?.parent }\n\t\t\tbackButtonRef={ backButtonRef }\n\t\t\tanimationDirection={ animationDirection || undefined }\n\t\t\tnavigationKey={ navigationKey }\n\t\t\tonNavigate={ handleNavigate }\n\t\t\tcontent={\n\t\t\t\t<div role=\"list\">\n\t\t\t\t\t{ items.map( ( item: MenuItem ) => {\n\t\t\t\t\t\tif ( item.parent_type === 'dropdown' ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DropdownItem\n\t\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\t\tid={ item.id }\n\t\t\t\t\t\t\t\t\tclassName=\"boot-navigation-item\"\n\t\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t\t\tisExpanded={ parentDropdownId === item.id }\n\t\t\t\t\t\t\t\t\tonToggle={ () =>\n\t\t\t\t\t\t\t\t\t\thandleDropdownToggle( item.id )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t</DropdownItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif ( item.parent_type === 'drilldown' ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DrilldownItem\n\t\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\t\tid={ item.id }\n\t\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t\t\tonNavigate={ handleNavigate }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t</DrilldownItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavigationItem\n\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\tto={ item.to }\n\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t</NavigationItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t}\n\t\t/>\n\t);\n}\n\nexport default Navigation;\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,UAAU,SAAS,cAAc;AAC1C,SAAS,iBAAiB;AAK1B,SAAS,kBAAkB;AAC3B,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAC7B,SAAS,wBAAwB;AAgEzB;AA7DR,SAAS,aAAa;AACrB,QAAM,gBAAgB,OAA6B,IAAK;AACxD,QAAM,CAAE,oBAAoB,qBAAsB,IAAI,SAEnD,IAAK;AACR,QAAM,CAAE,UAAU,aAAa,kBAAkB,mBAAoB,IACpE,iBAAiB;AAClB,QAAM,YAAY;AAAA,IACjB,CAAE;AAAA;AAAA,MAED,OAAQ,UAAW,EAAE,aAAa;AAAA;AAAA,IACnC,CAAC;AAAA,EACF;AACA,QAAM,SAAS;AAAA,IACd,MAAM,UAAU,KAAM,CAAE,SAAU,KAAK,OAAO,QAAS;AAAA,IACvD,CAAE,WAAW,QAAS;AAAA,EACvB;AAGA,QAAM,gBAAgB,SAAS,aAAc,OAAO,EAAG,KAAK;AAI5D,QAAM,iBAAiB,CAAE;AAAA,IACxB;AAAA,IACA;AAAA,EACD,MAGO;AACN,0BAAuB,SAAU;AACjC,gBAAa,EAAG;AAAA,EACjB;AAEA,QAAM,uBAAuB,CAAE,eAAwB;AACtD;AAAA,MACC,qBAAqB,aAAa,SAAY;AAAA,IAC/C;AAAA,EACD;AAEA,QAAM,QAAQ;AAAA,IACb,MAAM,UAAU,OAAQ,CAAE,SAAU,KAAK,WAAW,QAAS;AAAA,IAC7D,CAAE,WAAW,QAAS;AAAA,EACvB;AAEA,QAAM,eAAe,MAAM,KAAM,CAAE,SAAU,CAAC,CAAE,KAAK,IAAK;AAE1D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS,CAAE;AAAA,MACX,OAAQ,SAAS,OAAO,QAAQ;AAAA,MAChC,cAAe,QAAQ;AAAA,MACvB;AAAA,MACA,oBAAqB,sBAAsB;AAAA,MAC3C;AAAA,MACA,YAAa;AAAA,MACb,SACC,oBAAC,SAAI,MAAK,QACP,gBAAM,IAAK,CAAE,SAAoB;AAClC,YAAK,KAAK,gBAAgB,YAAa;AACtC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,IAAK,KAAK;AAAA,cACV,WAAU;AAAA,cACV,MAAO,KAAK;AAAA,cACZ,uBAAwB;AAAA,cACxB,YAAa,qBAAqB,KAAK;AAAA,cACvC,UAAW,MACV,qBAAsB,KAAK,EAAG;AAAA,cAG7B,eAAK;AAAA;AAAA,YAVD,KAAK;AAAA,UAWZ;AAAA,QAEF;AAEA,YAAK,KAAK,gBAAgB,aAAc;AACvC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,IAAK,KAAK;AAAA,cACV,MAAO,KAAK;AAAA,cACZ,uBAAwB;AAAA,cACxB,YAAa;AAAA,cAEX,eAAK;AAAA;AAAA,YAND,KAAK;AAAA,UAOZ;AAAA,QAEF;AAEA,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,IAAK,KAAK;AAAA,YACV,MAAO,KAAK;AAAA,YACZ,uBAAwB;AAAA,YAEtB,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEF,CAAE,GACH;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,qBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,10 +9,10 @@ import RouterLinkItem from "../router-link-item.mjs";
|
|
|
9
9
|
import { wrapIcon } from "../items.mjs";
|
|
10
10
|
|
|
11
11
|
// packages/boot/src/components/navigation/navigation-item/style.scss
|
|
12
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
12
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='4ccd27ec79']")) {
|
|
13
13
|
const style = document.createElement("style");
|
|
14
|
-
style.setAttribute("data-wp-hash", "
|
|
15
|
-
style.appendChild(document.createTextNode('.boot-navigation-item.components-item{align-items:center;border:none;color:var(--wpds-color-
|
|
14
|
+
style.setAttribute("data-wp-hash", "4ccd27ec79");
|
|
15
|
+
style.appendChild(document.createTextNode('.boot-navigation-item.components-item{align-items:center;border:none;color:var(--wpds-color-foreground-interactive-neutral,#1e1e1e);display:flex;font-family:-apple-system,"system-ui",Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;font-weight:400;line-height:20px;margin-block-end:4px;margin-inline:12px;min-height:32px;padding-block:0;padding-inline:4px;width:calc(100% - 24px)}.boot-dropdown-item__children .boot-navigation-item.components-item{min-height:24px}.boot-navigation-item.components-item{border-radius:var(--wpds-border-radius-sm,2px)}.boot-navigation-item.components-item.active,.boot-navigation-item.components-item:focus,.boot-navigation-item.components-item:hover,.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-foreground-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 52%,#000))}.boot-navigation-item.components-item.active{font-weight:499}.boot-navigation-item.components-item svg:last-child{padding:4px}.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-foreground-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 52%,#000));font-weight:499}.boot-navigation-item.components-item:focus-visible{transform:translateZ(0)}.boot-navigation-item.components-item.with-suffix{padding-right:16px}'));
|
|
16
16
|
document.head.appendChild(style);
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/navigation/navigation-item/index.tsx", "../../../../src/components/navigation/navigation-item/style.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlexBlock,\n\t__experimentalItem as Item,\n\t// @ts-ignore\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport RouterLinkItem from '../router-link-item';\nimport { wrapIcon } from '../items';\nimport type { IconType } from '../../../store/types';\nimport './style.scss';\n\ninterface NavigationItemProps {\n\t/**\n\t * Optional CSS class name.\n\t */\n\tclassName?: string;\n\t/**\n\t * Icon to display with the navigation item.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Whether to show placeholder icons for alignment.\n\t */\n\tshouldShowPlaceholder?: boolean;\n\t/**\n\t * Content to display inside the navigation item.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The path to navigate to.\n\t */\n\tto: string;\n}\n\nexport default function NavigationItem( {\n\tclassName,\n\ticon,\n\tshouldShowPlaceholder = true,\n\tchildren,\n\tto,\n}: NavigationItemProps ) {\n\t// Check if the 'to' prop is an external URL\n\tconst isExternal = ! String(\n\t\tnew URL( to, window.location.origin )\n\t).startsWith( window.location.origin );\n\n\tconst content = (\n\t\t<HStack justify=\"flex-start\" spacing={ 2 } style={ { flexGrow: '1' } }>\n\t\t\t{ wrapIcon( icon, shouldShowPlaceholder ) }\n\t\t\t<FlexBlock>{ children }</FlexBlock>\n\t\t</HStack>\n\t);\n\n\tif ( isExternal ) {\n\t\t// Render as a regular anchor tag for external URLs\n\t\treturn (\n\t\t\t<Item\n\t\t\t\tas=\"a\"\n\t\t\t\thref={ to }\n\t\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t\t>\n\t\t\t\t{ content }\n\t\t\t</Item>\n\t\t);\n\t}\n\n\treturn (\n\t\t<RouterLinkItem\n\t\t\tto={ to }\n\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t>\n\t\t\t{ content }\n\t\t</RouterLinkItem>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;AAMjB;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EAEtB,wBAAwB;AAAA,OAClB;AAKP,OAAO,oBAAoB;AAC3B,SAAS,gBAAgB;;;ACpBzB,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,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlexBlock,\n\t__experimentalItem as Item,\n\t// @ts-ignore\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport RouterLinkItem from '../router-link-item';\nimport { wrapIcon } from '../items';\nimport type { IconType } from '../../../store/types';\nimport './style.scss';\n\ninterface NavigationItemProps {\n\t/**\n\t * Optional CSS class name.\n\t */\n\tclassName?: string;\n\t/**\n\t * Icon to display with the navigation item.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Whether to show placeholder icons for alignment.\n\t */\n\tshouldShowPlaceholder?: boolean;\n\t/**\n\t * Content to display inside the navigation item.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The path to navigate to.\n\t */\n\tto: string;\n}\n\nexport default function NavigationItem( {\n\tclassName,\n\ticon,\n\tshouldShowPlaceholder = true,\n\tchildren,\n\tto,\n}: NavigationItemProps ) {\n\t// Check if the 'to' prop is an external URL\n\tconst isExternal = ! String(\n\t\tnew URL( to, window.location.origin )\n\t).startsWith( window.location.origin );\n\n\tconst content = (\n\t\t<HStack justify=\"flex-start\" spacing={ 2 } style={ { flexGrow: '1' } }>\n\t\t\t{ wrapIcon( icon, shouldShowPlaceholder ) }\n\t\t\t<FlexBlock>{ children }</FlexBlock>\n\t\t</HStack>\n\t);\n\n\tif ( isExternal ) {\n\t\t// Render as a regular anchor tag for external URLs\n\t\treturn (\n\t\t\t<Item\n\t\t\t\tas=\"a\"\n\t\t\t\thref={ to }\n\t\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t\t>\n\t\t\t\t{ content }\n\t\t\t</Item>\n\t\t);\n\t}\n\n\treturn (\n\t\t<RouterLinkItem\n\t\t\tto={ to }\n\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t>\n\t\t\t{ content }\n\t\t</RouterLinkItem>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='4ccd27ec79']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"4ccd27ec79\");\n\tstyle.appendChild(document.createTextNode(\".boot-navigation-item.components-item{align-items:center;border:none;color:var(--wpds-color-foreground-interactive-neutral,#1e1e1e);display:flex;font-family:-apple-system,\\\"system-ui\\\",Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;font-weight:400;line-height:20px;margin-block-end:4px;margin-inline:12px;min-height:32px;padding-block:0;padding-inline:4px;width:calc(100% - 24px)}.boot-dropdown-item__children .boot-navigation-item.components-item{min-height:24px}.boot-navigation-item.components-item{border-radius:var(--wpds-border-radius-sm,2px)}.boot-navigation-item.components-item.active,.boot-navigation-item.components-item:focus,.boot-navigation-item.components-item:hover,.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-foreground-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 52%,#000))}.boot-navigation-item.components-item.active{font-weight:499}.boot-navigation-item.components-item svg:last-child{padding:4px}.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-foreground-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 52%,#000));font-weight:499}.boot-navigation-item.components-item:focus-visible{transform:translateZ(0)}.boot-navigation-item.components-item.with-suffix{padding-right:16px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,OAAO,UAAU;AAMjB;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EAEtB,wBAAwB;AAAA,OAClB;AAKP,OAAO,oBAAoB;AAC3B,SAAS,gBAAgB;;;ACpBzB,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,41CAA81C,CAAC;AACz4C,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuDE,SAEC,KAFD;AAba,SAAR,eAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB;AAAA,EACA;AACD,GAAyB;AAExB,QAAM,aAAa,CAAE;AAAA,IACpB,IAAI,IAAK,IAAI,OAAO,SAAS,MAAO;AAAA,EACrC,EAAE,WAAY,OAAO,SAAS,MAAO;AAErC,QAAM,UACL,qBAAC,UAAO,SAAQ,cAAa,SAAU,GAAI,OAAQ,EAAE,UAAU,IAAI,GAChE;AAAA,aAAU,MAAM,qBAAsB;AAAA,IACxC,oBAAC,aAAY,UAAU;AAAA,KACxB;AAGD,MAAK,YAAa;AAEjB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAG;AAAA,QACH,MAAO;AAAA,QACP,WAAY,KAAM,wBAAwB,SAAU;AAAA,QAElD;AAAA;AAAA,IACH;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAY,KAAM,wBAAwB,SAAU;AAAA,MAElD;AAAA;AAAA,EACH;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,10 +11,10 @@ import { chevronRight, chevronLeft } from "@wordpress/icons";
|
|
|
11
11
|
import { useReducedMotion } from "@wordpress/compose";
|
|
12
12
|
|
|
13
13
|
// packages/boot/src/components/navigation/navigation-screen/style.scss
|
|
14
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
14
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='db54ac7e93']")) {
|
|
15
15
|
const style = document.createElement("style");
|
|
16
|
-
style.setAttribute("data-wp-hash", "
|
|
17
|
-
style.appendChild(document.createTextNode(".boot-navigation-screen{padding-block-end:4px}.boot-navigation-screen .components-text{color:var(--wpds-color-
|
|
16
|
+
style.setAttribute("data-wp-hash", "db54ac7e93");
|
|
17
|
+
style.appendChild(document.createTextNode(".boot-navigation-screen{padding-block-end:4px}.boot-navigation-screen .components-text{color:var(--wpds-color-foreground-content-neutral,#1e1e1e)}.boot-navigation-screen__title-icon{padding:12px 16px 8px;position:sticky;top:0}.boot-navigation-screen__title{flex-grow:1;overflow-wrap:break-word}.boot-navigation-screen__title.boot-navigation-screen__title,.boot-navigation-screen__title.boot-navigation-screen__title .boot-navigation-screen__title{color:var(--wpds-color-foreground-content-neutral,#1e1e1e);line-height:32px}.boot-navigation-screen__actions{display:flex;flex-shrink:0}"));
|
|
18
18
|
document.head.appendChild(style);
|
|
19
19
|
}
|
|
20
20
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/navigation/navigation-screen/index.tsx", "../../../../src/components/navigation/navigation-screen/style.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\tButton,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport './style.scss';\n\nconst ANIMATION_DURATION = 0.3;\nconst slideVariants = {\n\tinitial: ( direction: 'forward' | 'backward' ) => ( {\n\t\tx: direction === 'forward' ? 100 : -100,\n\t\topacity: 0,\n\t} ),\n\tanimate: {\n\t\tx: 0,\n\t\topacity: 1,\n\t},\n\texit: ( direction: 'forward' | 'backward' ) => ( {\n\t\tx: direction === 'forward' ? 100 : -100,\n\t\topacity: 0,\n\t} ),\n};\n\nexport default function NavigationScreen( {\n\tisRoot,\n\ttitle,\n\tactions,\n\tcontent,\n\tdescription,\n\tanimationDirection,\n\tbackMenuItem,\n\tbackButtonRef,\n\tnavigationKey,\n\tonNavigate,\n}: {\n\tisRoot?: boolean;\n\ttitle: string;\n\tactions?: ReactNode;\n\tcontent: ReactNode;\n\tdescription?: ReactNode;\n\tbackMenuItem?: string;\n\tbackButtonRef?: RefObject< HTMLButtonElement | null >;\n\tanimationDirection?: 'forward' | 'backward';\n\tnavigationKey?: string;\n\tonNavigate: ( {\n\t\tid,\n\t\tdirection,\n\t}: {\n\t\tid?: string;\n\t\tdirection: 'forward' | 'backward';\n\t} ) => void;\n} ) {\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\tconst disableMotion = useReducedMotion();\n\n\tconst handleBackClick = ( e: React.MouseEvent ) => {\n\t\te.preventDefault();\n\t\tonNavigate( { id: backMenuItem, direction: 'backward' } );\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"boot-navigation-screen\"\n\t\t\tstyle={ {\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tposition: 'relative',\n\t\t\t\tdisplay: 'grid',\n\t\t\t\tgridTemplateColumns: '1fr',\n\t\t\t\tgridTemplateRows: '1fr',\n\t\t\t} }\n\t\t>\n\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ navigationKey }\n\t\t\t\t\tcustom={ animationDirection }\n\t\t\t\t\tvariants={ slideVariants }\n\t\t\t\t\tinitial=\"initial\"\n\t\t\t\t\tanimate=\"animate\"\n\t\t\t\t\texit=\"exit\"\n\t\t\t\t\ttransition={ {\n\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\t\t\t\t\tease: [ 0.33, 0, 0, 1 ],\n\t\t\t\t\t} }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tgridColumn: '1',\n\t\t\t\t\t\tgridRow: '1',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t\tclassName=\"boot-navigation-screen__title-icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isRoot && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ backButtonRef }\n\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\tonClick={ handleBackClick }\n\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\tclassName=\"boot-navigation-screen__title\"\n\t\t\t\t\t\t\tlevel={ 1 }\n\t\t\t\t\t\t\tsize=\"15px\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t{ actions && (\n\t\t\t\t\t\t\t<div className=\"boot-navigation-screen__actions\">\n\t\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\n\t\t\t\t\t{ description && (\n\t\t\t\t\t\t<div className=\"boot-navigation-screen__description\">\n\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ content }\n\t\t\t\t</motion.div>\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAQA;AAAA,EACC,yBAAyB;AAAA,EACzB,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,EAC7B;AAAA,EACA,wBAAwB;AAAA,OAClB;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,wBAAwB;;;ACjBjC,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,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\tButton,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport './style.scss';\n\nconst ANIMATION_DURATION = 0.3;\nconst slideVariants = {\n\tinitial: ( direction: 'forward' | 'backward' ) => ( {\n\t\tx: direction === 'forward' ? 100 : -100,\n\t\topacity: 0,\n\t} ),\n\tanimate: {\n\t\tx: 0,\n\t\topacity: 1,\n\t},\n\texit: ( direction: 'forward' | 'backward' ) => ( {\n\t\tx: direction === 'forward' ? 100 : -100,\n\t\topacity: 0,\n\t} ),\n};\n\nexport default function NavigationScreen( {\n\tisRoot,\n\ttitle,\n\tactions,\n\tcontent,\n\tdescription,\n\tanimationDirection,\n\tbackMenuItem,\n\tbackButtonRef,\n\tnavigationKey,\n\tonNavigate,\n}: {\n\tisRoot?: boolean;\n\ttitle: string;\n\tactions?: ReactNode;\n\tcontent: ReactNode;\n\tdescription?: ReactNode;\n\tbackMenuItem?: string;\n\tbackButtonRef?: RefObject< HTMLButtonElement | null >;\n\tanimationDirection?: 'forward' | 'backward';\n\tnavigationKey?: string;\n\tonNavigate: ( {\n\t\tid,\n\t\tdirection,\n\t}: {\n\t\tid?: string;\n\t\tdirection: 'forward' | 'backward';\n\t} ) => void;\n} ) {\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\tconst disableMotion = useReducedMotion();\n\n\tconst handleBackClick = ( e: React.MouseEvent ) => {\n\t\te.preventDefault();\n\t\tonNavigate( { id: backMenuItem, direction: 'backward' } );\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"boot-navigation-screen\"\n\t\t\tstyle={ {\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tposition: 'relative',\n\t\t\t\tdisplay: 'grid',\n\t\t\t\tgridTemplateColumns: '1fr',\n\t\t\t\tgridTemplateRows: '1fr',\n\t\t\t} }\n\t\t>\n\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ navigationKey }\n\t\t\t\t\tcustom={ animationDirection }\n\t\t\t\t\tvariants={ slideVariants }\n\t\t\t\t\tinitial=\"initial\"\n\t\t\t\t\tanimate=\"animate\"\n\t\t\t\t\texit=\"exit\"\n\t\t\t\t\ttransition={ {\n\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\t\t\t\t\tease: [ 0.33, 0, 0, 1 ],\n\t\t\t\t\t} }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tgridColumn: '1',\n\t\t\t\t\t\tgridRow: '1',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t\tclassName=\"boot-navigation-screen__title-icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isRoot && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ backButtonRef }\n\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\tonClick={ handleBackClick }\n\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\tclassName=\"boot-navigation-screen__title\"\n\t\t\t\t\t\t\tlevel={ 1 }\n\t\t\t\t\t\t\tsize=\"15px\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t{ actions && (\n\t\t\t\t\t\t\t<div className=\"boot-navigation-screen__actions\">\n\t\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\n\t\t\t\t\t{ description && (\n\t\t\t\t\t\t<div className=\"boot-navigation-screen__description\">\n\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ content }\n\t\t\t\t</motion.div>\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='db54ac7e93']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"db54ac7e93\");\n\tstyle.appendChild(document.createTextNode(\".boot-navigation-screen{padding-block-end:4px}.boot-navigation-screen .components-text{color:var(--wpds-color-foreground-content-neutral,#1e1e1e)}.boot-navigation-screen__title-icon{padding:12px 16px 8px;position:sticky;top:0}.boot-navigation-screen__title{flex-grow:1;overflow-wrap:break-word}.boot-navigation-screen__title.boot-navigation-screen__title,.boot-navigation-screen__title.boot-navigation-screen__title .boot-navigation-screen__title{color:var(--wpds-color-foreground-content-neutral,#1e1e1e);line-height:32px}.boot-navigation-screen__actions{display:flex;flex-shrink:0}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
|
+
"mappings": ";AAQA;AAAA,EACC,yBAAyB;AAAA,EACzB,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,EAC7B;AAAA,EACA,wBAAwB;AAAA,OAClB;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,wBAAwB;;;ACjBjC,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,ykBAAykB,CAAC;AACpnB,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADsGK,SAKE,KALF;AAnFL,IAAM,qBAAqB;AAC3B,IAAM,gBAAgB;AAAA,EACrB,SAAS,CAAE,eAAyC;AAAA,IACnD,GAAG,cAAc,YAAY,MAAM;AAAA,IACnC,SAAS;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACR,GAAG;AAAA,IACH,SAAS;AAAA,EACV;AAAA,EACA,MAAM,CAAE,eAAyC;AAAA,IAChD,GAAG,cAAc,YAAY,MAAM;AAAA,IACnC,SAAS;AAAA,EACV;AACD;AAEe,SAAR,iBAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAiBI;AACH,QAAM,OAAO,MAAM,IAAI,eAAe;AACtC,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,kBAAkB,CAAE,MAAyB;AAClD,MAAE,eAAe;AACjB,eAAY,EAAE,IAAI,cAAc,WAAW,WAAW,CAAE;AAAA,EACzD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,kBAAkB;AAAA,MACnB;AAAA,MAEA,8BAAC,mBAAgB,SAAU,OAC1B;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UAEA,QAAS;AAAA,UACT,UAAW;AAAA,UACX,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,YAAa;AAAA,YACZ,MAAM;AAAA,YACN,UAAU,gBAAgB,IAAI;AAAA,YAC9B,MAAM,CAAE,MAAM,GAAG,GAAG,CAAE;AAAA,UACvB;AAAA,UACA,OAAQ;AAAA,YACP,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,SAAS;AAAA,UACV;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,SAAU;AAAA,gBACV,WAAU;AAAA,gBAER;AAAA,mBAAE,UACH;AAAA,oBAAC;AAAA;AAAA,sBACA,KAAM;AAAA,sBACN;AAAA,sBACA,SAAU;AAAA,sBACV,OAAQ,GAAI,MAAO;AAAA,sBACnB,MAAK;AAAA,sBACL,SAAQ;AAAA;AAAA,kBACT;AAAA,kBAED;AAAA,oBAAC;AAAA;AAAA,sBACA,WAAU;AAAA,sBACV,OAAQ;AAAA,sBACR,MAAK;AAAA,sBAEH;AAAA;AAAA,kBACH;AAAA,kBACE,WACD,oBAAC,SAAI,WAAU,mCACZ,mBACH;AAAA;AAAA;AAAA,YAEF;AAAA,YAEE,eACD,oBAAC,SAAI,WAAU,uCACZ,uBACH;AAAA,YAGC;AAAA;AAAA;AAAA,QAnDI;AAAA,MAoDP,GACD;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,9 +10,11 @@ import {
|
|
|
10
10
|
SlotFillProvider
|
|
11
11
|
} from "@wordpress/components";
|
|
12
12
|
import { menu } from "@wordpress/icons";
|
|
13
|
-
import { useState, useEffect } from "@wordpress/element";
|
|
13
|
+
import { useState, useEffect, useMemo } from "@wordpress/element";
|
|
14
14
|
import { __ } from "@wordpress/i18n";
|
|
15
|
-
import { Page } from "@wordpress/admin-ui";
|
|
15
|
+
import { Page, getAdminThemeColors } from "@wordpress/admin-ui";
|
|
16
|
+
import { Tooltip } from "@wordpress/ui";
|
|
17
|
+
import { privateApis as themePrivateApis } from "@wordpress/theme";
|
|
16
18
|
import Sidebar from "../sidebar/index.mjs";
|
|
17
19
|
import SavePanel from "../save-panel/index.mjs";
|
|
18
20
|
import CanvasRenderer from "../canvas-renderer/index.mjs";
|
|
@@ -20,17 +22,17 @@ import useRouteTitle from "../app/use-route-title.mjs";
|
|
|
20
22
|
import { unlock } from "../../lock-unlock.mjs";
|
|
21
23
|
|
|
22
24
|
// packages/boot/src/components/root/style.scss
|
|
23
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
25
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='a66cc68f6f']")) {
|
|
24
26
|
const style = document.createElement("style");
|
|
25
|
-
style.setAttribute("data-wp-hash", "
|
|
26
|
-
style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-
|
|
27
|
+
style.setAttribute("data-wp-hash", "a66cc68f6f");
|
|
28
|
+
style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);color:var(--wpds-color-foreground-content-neutral,#1e1e1e);display:flex;flex-direction:row;height:100%;isolation:isolate;width:100%}.boot-layout__sidebar-backdrop{background-color:rgba(0,0,0,.5);bottom:0;cursor:var(--wpds-cursor-control,pointer);left:0;position:fixed;right:0;top:0;z-index:100002}.boot-layout__sidebar{flex-shrink:0;height:100%;overflow:hidden;position:relative;width:240px}.boot-layout__sidebar.is-mobile{background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);bottom:0;box-shadow:2px 0 8px rgba(0,0,0,.2);inset-inline-start:0;max-width:85vw;position:fixed;top:0;width:300px;z-index:100003}.boot-layout__mobile-sidebar-drawer{left:0;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout__mobile-sidebar-drawer{top:46px}.boot-layout__mobile-sidebar-drawer{align-items:center;background:var(--wpds-color-background-surface-neutral,#fcfcfc);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);display:flex;justify-content:flex-start;padding:16px;z-index:3}.boot-layout__canvas.has-mobile-drawer{padding-top:65px;position:relative}.boot-layout__surfaces{display:flex;flex-grow:1;gap:8px;margin:0}@media (min-width:782px){.boot-layout__surfaces{margin:8px}.boot-layout--single-page .boot-layout__surfaces{margin-top:0;margin-inline-start:0}}.boot-layout__inspector,.boot-layout__stage{background:var(--wpds-color-background-surface-neutral,#fcfcfc);border-radius:0;bottom:0;color:var(--wpds-color-foreground-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__inspector,.boot-layout__stage{border-radius:var(--wpds-border-radius-xl,12px);height:auto;margin:0;position:static;width:auto}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:auto}}.boot-layout__stage{z-index:2}@media (min-width:782px){.boot-layout__stage{z-index:auto}}.boot-layout__inspector{z-index:3}@media (min-width:782px){.boot-layout__inspector{z-index:auto}}.boot-layout__canvas{background:var(--wpds-color-background-surface-neutral,#fcfcfc);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);border-radius:0;bottom:0;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--wpds-color-foreground-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw;z-index:1}.boot-layout--single-page .boot-layout__canvas{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__canvas{border-radius:var(--wpds-border-radius-xl,12px);height:auto;position:static;width:auto;z-index:auto}.boot-layout--single-page .boot-layout__canvas{height:auto}.boot-layout.has-canvas .boot-layout__stage,.boot-layout__inspector{max-width:400px}}.boot-layout__canvas .interface-interface-skeleton{height:100%;left:0!important;position:relative;top:0!important}.boot-layout.has-full-canvas .boot-layout__surfaces{gap:0;margin:0}.boot-layout.has-full-canvas .boot-layout__inspector,.boot-layout.has-full-canvas .boot-layout__stage{display:none}.boot-layout.has-full-canvas .boot-layout__canvas{border:none;border-radius:0;bottom:0;box-shadow:none;left:0;margin:0;max-width:none;overflow:hidden;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:46px}@media (min-width:782px){.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:32px}}"));
|
|
27
29
|
document.head.appendChild(style);
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
// packages/boot/src/components/root/index.tsx
|
|
31
|
-
import { UserThemeProvider } from "../user-theme-provider/index.mjs";
|
|
32
33
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
33
34
|
var { useLocation, useMatches, Outlet } = unlock(routePrivateApis);
|
|
35
|
+
var { ThemeProvider } = unlock(themePrivateApis);
|
|
34
36
|
function Root() {
|
|
35
37
|
const matches = useMatches();
|
|
36
38
|
const location = useLocation();
|
|
@@ -45,105 +47,124 @@ function Root() {
|
|
|
45
47
|
useEffect(() => {
|
|
46
48
|
setIsMobileSidebarOpen(false);
|
|
47
49
|
}, [location.pathname, isMobileViewport]);
|
|
48
|
-
|
|
49
|
-
|
|
50
|
+
const themeColors = useMemo(getAdminThemeColors, []);
|
|
51
|
+
return /* @__PURE__ */ jsx(SlotFillProvider, { children: /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsx(
|
|
52
|
+
ThemeProvider,
|
|
50
53
|
{
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
initial: { opacity: 0 },
|
|
71
|
-
animate: { opacity: 1 },
|
|
72
|
-
exit: { opacity: 0 },
|
|
73
|
-
transition: {
|
|
74
|
-
type: "tween",
|
|
75
|
-
duration: disableMotion ? 0 : 0.2,
|
|
76
|
-
ease: "easeOut"
|
|
77
|
-
},
|
|
78
|
-
className: "boot-layout__sidebar-backdrop",
|
|
79
|
-
onClick: () => setIsMobileSidebarOpen(false),
|
|
80
|
-
onKeyDown: (event) => {
|
|
81
|
-
if (event.key === "Escape") {
|
|
82
|
-
setIsMobileSidebarOpen(false);
|
|
54
|
+
isRoot: true,
|
|
55
|
+
color: { ...themeColors, background: "#f8f8f8" },
|
|
56
|
+
children: /* @__PURE__ */ jsx(ThemeProvider, { color: themeColors, children: /* @__PURE__ */ jsxs(
|
|
57
|
+
"div",
|
|
58
|
+
{
|
|
59
|
+
className: clsx("boot-layout", {
|
|
60
|
+
"has-canvas": !!canvas || canvas === null,
|
|
61
|
+
"has-full-canvas": isFullScreen
|
|
62
|
+
}),
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ jsx(SavePanel, {}),
|
|
65
|
+
/* @__PURE__ */ jsx(SnackbarNotices, { className: "boot-notices__snackbar" }),
|
|
66
|
+
isMobileViewport && /* @__PURE__ */ jsx(Page.SidebarToggleFill, { children: /* @__PURE__ */ jsx(
|
|
67
|
+
Button,
|
|
68
|
+
{
|
|
69
|
+
icon: menu,
|
|
70
|
+
onClick: () => setIsMobileSidebarOpen(true),
|
|
71
|
+
label: __("Open navigation panel"),
|
|
72
|
+
size: "compact"
|
|
83
73
|
}
|
|
84
|
-
},
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
className: "boot-layout__sidebar is-mobile",
|
|
104
|
-
children: /* @__PURE__ */ jsx(Sidebar, {})
|
|
105
|
-
}
|
|
106
|
-
) }),
|
|
107
|
-
!isMobileViewport && !isFullScreen && /* @__PURE__ */ jsx("div", { className: "boot-layout__sidebar", children: /* @__PURE__ */ jsx(Sidebar, {}) }),
|
|
108
|
-
/* @__PURE__ */ jsx("div", { className: "boot-layout__surfaces", children: /* @__PURE__ */ jsxs(UserThemeProvider, { color: { bg: "#ffffff" }, children: [
|
|
109
|
-
/* @__PURE__ */ jsx(Outlet, {}),
|
|
110
|
-
(canvas || canvas === null) && /* @__PURE__ */ jsxs(
|
|
111
|
-
"div",
|
|
112
|
-
{
|
|
113
|
-
className: clsx(
|
|
114
|
-
"boot-layout__canvas",
|
|
115
|
-
{
|
|
116
|
-
"has-mobile-drawer": canvas?.isPreview && isMobileViewport
|
|
117
|
-
}
|
|
118
|
-
),
|
|
119
|
-
children: [
|
|
120
|
-
canvas?.isPreview && isMobileViewport && /* @__PURE__ */ jsx("div", { className: "boot-layout__mobile-sidebar-drawer", children: /* @__PURE__ */ jsx(
|
|
121
|
-
Button,
|
|
122
|
-
{
|
|
123
|
-
icon: menu,
|
|
124
|
-
onClick: () => setIsMobileSidebarOpen(
|
|
125
|
-
true
|
|
126
|
-
),
|
|
127
|
-
label: __(
|
|
128
|
-
"Open navigation panel"
|
|
129
|
-
),
|
|
130
|
-
size: "compact"
|
|
131
|
-
}
|
|
132
|
-
) }),
|
|
133
|
-
/* @__PURE__ */ jsx(
|
|
134
|
-
CanvasRenderer,
|
|
135
|
-
{
|
|
136
|
-
canvas,
|
|
137
|
-
routeContentModule
|
|
74
|
+
) }),
|
|
75
|
+
/* @__PURE__ */ jsx(AnimatePresence, { children: isMobileViewport && isMobileSidebarOpen && !isFullScreen && /* @__PURE__ */ jsx(
|
|
76
|
+
motion.div,
|
|
77
|
+
{
|
|
78
|
+
initial: { opacity: 0 },
|
|
79
|
+
animate: { opacity: 1 },
|
|
80
|
+
exit: { opacity: 0 },
|
|
81
|
+
transition: {
|
|
82
|
+
type: "tween",
|
|
83
|
+
duration: disableMotion ? 0 : 0.2,
|
|
84
|
+
ease: "easeOut"
|
|
85
|
+
},
|
|
86
|
+
className: "boot-layout__sidebar-backdrop",
|
|
87
|
+
onClick: () => setIsMobileSidebarOpen(false),
|
|
88
|
+
onKeyDown: (event) => {
|
|
89
|
+
if (event.key === "Escape") {
|
|
90
|
+
setIsMobileSidebarOpen(
|
|
91
|
+
false
|
|
92
|
+
);
|
|
138
93
|
}
|
|
94
|
+
},
|
|
95
|
+
role: "button",
|
|
96
|
+
tabIndex: -1,
|
|
97
|
+
"aria-label": __(
|
|
98
|
+
"Close navigation panel"
|
|
139
99
|
)
|
|
140
|
-
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
100
|
+
}
|
|
101
|
+
) }),
|
|
102
|
+
/* @__PURE__ */ jsx(AnimatePresence, { children: isMobileViewport && isMobileSidebarOpen && !isFullScreen && /* @__PURE__ */ jsx(
|
|
103
|
+
motion.div,
|
|
104
|
+
{
|
|
105
|
+
initial: { x: "-100%" },
|
|
106
|
+
animate: { x: 0 },
|
|
107
|
+
exit: { x: "-100%" },
|
|
108
|
+
transition: {
|
|
109
|
+
type: "tween",
|
|
110
|
+
duration: disableMotion ? 0 : 0.2,
|
|
111
|
+
ease: "easeOut"
|
|
112
|
+
},
|
|
113
|
+
className: "boot-layout__sidebar is-mobile",
|
|
114
|
+
children: /* @__PURE__ */ jsx(Sidebar, {})
|
|
115
|
+
}
|
|
116
|
+
) }),
|
|
117
|
+
!isMobileViewport && !isFullScreen && /* @__PURE__ */ jsx("div", { className: "boot-layout__sidebar", children: /* @__PURE__ */ jsx(Sidebar, {}) }),
|
|
118
|
+
/* @__PURE__ */ jsx("div", { className: "boot-layout__surfaces", children: /* @__PURE__ */ jsxs(
|
|
119
|
+
ThemeProvider,
|
|
120
|
+
{
|
|
121
|
+
color: {
|
|
122
|
+
...themeColors,
|
|
123
|
+
background: "#ffffff"
|
|
124
|
+
},
|
|
125
|
+
children: [
|
|
126
|
+
/* @__PURE__ */ jsx(Outlet, {}),
|
|
127
|
+
(canvas || canvas === null) && /* @__PURE__ */ jsxs(
|
|
128
|
+
"div",
|
|
129
|
+
{
|
|
130
|
+
className: clsx(
|
|
131
|
+
"boot-layout__canvas",
|
|
132
|
+
{
|
|
133
|
+
"has-mobile-drawer": canvas?.isPreview && isMobileViewport
|
|
134
|
+
}
|
|
135
|
+
),
|
|
136
|
+
children: [
|
|
137
|
+
canvas?.isPreview && isMobileViewport && /* @__PURE__ */ jsx("div", { className: "boot-layout__mobile-sidebar-drawer", children: /* @__PURE__ */ jsx(
|
|
138
|
+
Button,
|
|
139
|
+
{
|
|
140
|
+
icon: menu,
|
|
141
|
+
onClick: () => setIsMobileSidebarOpen(
|
|
142
|
+
true
|
|
143
|
+
),
|
|
144
|
+
label: __(
|
|
145
|
+
"Open navigation panel"
|
|
146
|
+
),
|
|
147
|
+
size: "compact"
|
|
148
|
+
}
|
|
149
|
+
) }),
|
|
150
|
+
/* @__PURE__ */ jsx(
|
|
151
|
+
CanvasRenderer,
|
|
152
|
+
{
|
|
153
|
+
canvas,
|
|
154
|
+
routeContentModule
|
|
155
|
+
}
|
|
156
|
+
)
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
)
|
|
160
|
+
]
|
|
161
|
+
}
|
|
162
|
+
) })
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
) })
|
|
145
166
|
}
|
|
146
|
-
) }) })
|
|
167
|
+
) }) });
|
|
147
168
|
}
|
|
148
169
|
export {
|
|
149
170
|
Root as default
|