@wordpress/boot 0.15.1 → 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/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/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 +3 -3
- package/build-module/components/root/index.mjs.map +2 -2
- package/build-module/components/root/single-page.mjs +3 -3
- package/build-module/components/root/single-page.mjs.map +2 -2
- package/build-module/components/save-button/index.mjs +2 -2
- 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 +3 -3
- 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 +159 -75
- package/build-style/style.css +159 -75
- package/build-style/view-transitions-rtl.css +1 -1
- package/build-style/view-transitions.css +1 -1
- package/build-types/components/root/index.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 -26
- package/src/components/canvas/back-button.scss +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 +0 -1
- package/src/components/root/style.scss +10 -10
- package/src/components/save-button/index.tsx +0 -1
- 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 +0 -1
- 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-types/components/user-theme-provider/index.d.ts +0 -6
- package/build-types/components/user-theme-provider/index.d.ts.map +0 -1
- /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
|
@@ -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
|
}
|
|
@@ -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
|
}
|
|
@@ -22,10 +22,10 @@ import useRouteTitle from "../app/use-route-title.mjs";
|
|
|
22
22
|
import { unlock } from "../../lock-unlock.mjs";
|
|
23
23
|
|
|
24
24
|
// packages/boot/src/components/root/style.scss
|
|
25
|
-
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']")) {
|
|
26
26
|
const style = document.createElement("style");
|
|
27
|
-
style.setAttribute("data-wp-hash", "
|
|
28
|
-
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}}"));
|
|
29
29
|
document.head.appendChild(style);
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/root/index.tsx", "../../../src/components/root/style.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as routePrivateApis } from '@wordpress/route';\nimport { SnackbarNotices } from '@wordpress/notices';\nimport { useViewportMatch, useReducedMotion } from '@wordpress/compose';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\tButton,\n\tSlotFillProvider,\n} from '@wordpress/components';\nimport { menu } from '@wordpress/icons';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Page, getAdminThemeColors } from '@wordpress/admin-ui';\n// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.\nimport { Tooltip } from '@wordpress/ui';\nimport { privateApis as themePrivateApis } from '@wordpress/theme';\n\n/**\n * Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport SavePanel from '../save-panel';\nimport CanvasRenderer from '../canvas-renderer';\nimport useRouteTitle from '../app/use-route-title';\nimport { unlock } from '../../lock-unlock';\nimport type { CanvasData } from '../../store/types';\nimport './style.scss';\n\nconst { useLocation, useMatches, Outlet } = unlock( routePrivateApis );\nconst { ThemeProvider } = unlock( themePrivateApis );\n\nexport default function Root() {\n\tconst matches = useMatches();\n\tconst location = useLocation();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst canvas = ( currentMatch?.loaderData as any )?.canvas as\n\t\t| CanvasData\n\t\t| null\n\t\t| undefined;\n\tconst routeContentModule = ( currentMatch?.loaderData as any )\n\t\t?.routeContentModule as string | undefined;\n\tconst isFullScreen = canvas && ! canvas.isPreview;\n\n\tuseRouteTitle();\n\n\t// Mobile sidebar state\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst [ isMobileSidebarOpen, setIsMobileSidebarOpen ] = useState( false );\n\tconst disableMotion = useReducedMotion();\n\t// Close mobile sidebar on viewport resize and path change\n\tuseEffect( () => {\n\t\tsetIsMobileSidebarOpen( false );\n\t}, [ location.pathname, isMobileViewport ] );\n\n\tconst themeColors = useMemo( getAdminThemeColors, [] );\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<Tooltip.Provider>\n\t\t\t\t<ThemeProvider\n\t\t\t\t\tisRoot\n\t\t\t\t\tcolor={ { ...themeColors, background: '#f8f8f8' } }\n\t\t\t\t>\n\t\t\t\t\t<ThemeProvider color={ themeColors }>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ clsx( 'boot-layout', {\n\t\t\t\t\t\t\t\t'has-canvas': !! canvas || canvas === null,\n\t\t\t\t\t\t\t\t'has-full-canvas': isFullScreen,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SavePanel />\n\t\t\t\t\t\t\t<SnackbarNotices className=\"boot-notices__snackbar\" />\n\t\t\t\t\t\t\t{ isMobileViewport && (\n\t\t\t\t\t\t\t\t<Page.SidebarToggleFill>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ticon={ menu }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( true )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Open navigation panel' ) }\n\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Page.SidebarToggleFill>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ /* Mobile Sidebar Backdrop */ }\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"boot-layout__sidebar-backdrop\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( false )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif ( event.key === 'Escape' ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Close navigation panel'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t{ /* Mobile Sidebar */ }\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\tinitial={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\t\tanimate={ { x: 0 } }\n\t\t\t\t\t\t\t\t\t\t\texit={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"boot-layout__sidebar is-mobile\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t{ /* Desktop Sidebar */ }\n\t\t\t\t\t\t\t{ ! isMobileViewport && ! isFullScreen && (\n\t\t\t\t\t\t\t\t<div className=\"boot-layout__sidebar\">\n\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<div className=\"boot-layout__surfaces\">\n\t\t\t\t\t\t\t\t<ThemeProvider\n\t\t\t\t\t\t\t\t\tcolor={ {\n\t\t\t\t\t\t\t\t\t\t...themeColors,\n\t\t\t\t\t\t\t\t\t\tbackground: '#ffffff',\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<Outlet />\n\t\t\t\t\t\t\t\t\t{ /* Render Canvas in Root to prevent remounting on route changes */ }\n\t\t\t\t\t\t\t\t\t{ ( canvas || canvas === null ) && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t\t'boot-layout__canvas',\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t'has-mobile-drawer':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcanvas?.isPreview &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport,\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ canvas?.isPreview &&\n\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"boot-layout__mobile-sidebar-drawer\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ menu }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttrue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Open navigation panel'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t<CanvasRenderer\n\t\t\t\t\t\t\t\t\t\t\t\tcanvas={ canvas }\n\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule={\n\t\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ThemeProvider>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</ThemeProvider>\n\t\t\t</Tooltip.Provider>\n\t\t</SlotFillProvider>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='80382f1901']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"80382f1901\");\n\tstyle.appendChild(document.createTextNode(\".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);color:var(--wpds-color-fg-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-bg-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-bg-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-bg-surface-neutral,#fcfcfc);border-radius:0;bottom:0;color:var(--wpds-color-fg-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:8px;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-bg-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-fg-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:8px;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}}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe,wBAAwB;AAChD,SAAS,uBAAuB;AAChC,SAAS,kBAAkB,wBAAwB;AACnD;AAAA,EACC,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,EAC7B;AAAA,EACA;AAAA,OACM;AACP,SAAS,YAAY;AACrB,SAAS,UAAU,WAAW,eAAe;AAC7C,SAAS,UAAU;AACnB,SAAS,MAAM,2BAA2B;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as routePrivateApis } from '@wordpress/route';\nimport { SnackbarNotices } from '@wordpress/notices';\nimport { useViewportMatch, useReducedMotion } from '@wordpress/compose';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\tButton,\n\tSlotFillProvider,\n} from '@wordpress/components';\nimport { menu } from '@wordpress/icons';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Page, getAdminThemeColors } from '@wordpress/admin-ui';\nimport { Tooltip } from '@wordpress/ui';\nimport { privateApis as themePrivateApis } from '@wordpress/theme';\n\n/**\n * Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport SavePanel from '../save-panel';\nimport CanvasRenderer from '../canvas-renderer';\nimport useRouteTitle from '../app/use-route-title';\nimport { unlock } from '../../lock-unlock';\nimport type { CanvasData } from '../../store/types';\nimport './style.scss';\n\nconst { useLocation, useMatches, Outlet } = unlock( routePrivateApis );\nconst { ThemeProvider } = unlock( themePrivateApis );\n\nexport default function Root() {\n\tconst matches = useMatches();\n\tconst location = useLocation();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst canvas = ( currentMatch?.loaderData as any )?.canvas as\n\t\t| CanvasData\n\t\t| null\n\t\t| undefined;\n\tconst routeContentModule = ( currentMatch?.loaderData as any )\n\t\t?.routeContentModule as string | undefined;\n\tconst isFullScreen = canvas && ! canvas.isPreview;\n\n\tuseRouteTitle();\n\n\t// Mobile sidebar state\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst [ isMobileSidebarOpen, setIsMobileSidebarOpen ] = useState( false );\n\tconst disableMotion = useReducedMotion();\n\t// Close mobile sidebar on viewport resize and path change\n\tuseEffect( () => {\n\t\tsetIsMobileSidebarOpen( false );\n\t}, [ location.pathname, isMobileViewport ] );\n\n\tconst themeColors = useMemo( getAdminThemeColors, [] );\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<Tooltip.Provider>\n\t\t\t\t<ThemeProvider\n\t\t\t\t\tisRoot\n\t\t\t\t\tcolor={ { ...themeColors, background: '#f8f8f8' } }\n\t\t\t\t>\n\t\t\t\t\t<ThemeProvider color={ themeColors }>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ clsx( 'boot-layout', {\n\t\t\t\t\t\t\t\t'has-canvas': !! canvas || canvas === null,\n\t\t\t\t\t\t\t\t'has-full-canvas': isFullScreen,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SavePanel />\n\t\t\t\t\t\t\t<SnackbarNotices className=\"boot-notices__snackbar\" />\n\t\t\t\t\t\t\t{ isMobileViewport && (\n\t\t\t\t\t\t\t\t<Page.SidebarToggleFill>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ticon={ menu }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( true )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Open navigation panel' ) }\n\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Page.SidebarToggleFill>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ /* Mobile Sidebar Backdrop */ }\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"boot-layout__sidebar-backdrop\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( false )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif ( event.key === 'Escape' ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Close navigation panel'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t{ /* Mobile Sidebar */ }\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\tinitial={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\t\tanimate={ { x: 0 } }\n\t\t\t\t\t\t\t\t\t\t\texit={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"boot-layout__sidebar is-mobile\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t{ /* Desktop Sidebar */ }\n\t\t\t\t\t\t\t{ ! isMobileViewport && ! isFullScreen && (\n\t\t\t\t\t\t\t\t<div className=\"boot-layout__sidebar\">\n\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<div className=\"boot-layout__surfaces\">\n\t\t\t\t\t\t\t\t<ThemeProvider\n\t\t\t\t\t\t\t\t\tcolor={ {\n\t\t\t\t\t\t\t\t\t\t...themeColors,\n\t\t\t\t\t\t\t\t\t\tbackground: '#ffffff',\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<Outlet />\n\t\t\t\t\t\t\t\t\t{ /* Render Canvas in Root to prevent remounting on route changes */ }\n\t\t\t\t\t\t\t\t\t{ ( canvas || canvas === null ) && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t\t'boot-layout__canvas',\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t'has-mobile-drawer':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcanvas?.isPreview &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport,\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ canvas?.isPreview &&\n\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"boot-layout__mobile-sidebar-drawer\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ menu }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttrue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Open navigation panel'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t<CanvasRenderer\n\t\t\t\t\t\t\t\t\t\t\t\tcanvas={ canvas }\n\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule={\n\t\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ThemeProvider>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</ThemeProvider>\n\t\t\t</Tooltip.Provider>\n\t\t</SlotFillProvider>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='a66cc68f6f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"a66cc68f6f\");\n\tstyle.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}}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,10 +11,10 @@ import CanvasRenderer from "../canvas-renderer/index.mjs";
|
|
|
11
11
|
import { unlock } from "../../lock-unlock.mjs";
|
|
12
12
|
|
|
13
13
|
// packages/boot/src/components/root/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='a66cc68f6f']")) {
|
|
15
15
|
const style = document.createElement("style");
|
|
16
|
-
style.setAttribute("data-wp-hash", "
|
|
17
|
-
style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-
|
|
16
|
+
style.setAttribute("data-wp-hash", "a66cc68f6f");
|
|
17
|
+
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}}"));
|
|
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/root/single-page.tsx", "../../../src/components/root/style.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as routePrivateApis } from '@wordpress/route';\nimport { SnackbarNotices } from '@wordpress/notices';\nimport { SlotFillProvider } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { getAdminThemeColors } from '@wordpress/admin-ui';\nimport { privateApis as themePrivateApis } from '@wordpress/theme';\n\n/**\n * Internal dependencies\n */\nimport SavePanel from '../save-panel';\nimport CanvasRenderer from '../canvas-renderer';\nimport { unlock } from '../../lock-unlock';\nimport type { CanvasData } from '../../store/types';\nimport './style.scss';\nimport useRouteTitle from '../app/use-route-title';\n\nconst { useMatches, Outlet } = unlock( routePrivateApis );\nconst { ThemeProvider } = unlock( themePrivateApis );\n\n/**\n * Root component for single page mode (no sidebar).\n * Used when rendering pages within wp-admin without taking over the full page.\n */\nexport default function RootSinglePage() {\n\tconst matches = useMatches();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst canvas = ( currentMatch?.loaderData as any )?.canvas as\n\t\t| CanvasData\n\t\t| null\n\t\t| undefined;\n\tconst routeContentModule = ( currentMatch?.loaderData as any )\n\t\t?.routeContentModule as string | undefined;\n\tconst isFullScreen = canvas && ! canvas.isPreview;\n\n\tuseRouteTitle();\n\n\tconst themeColors = useMemo( getAdminThemeColors, [] );\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<ThemeProvider\n\t\t\t\tisRoot\n\t\t\t\tcolor={ { ...themeColors, background: '#f8f8f8' } }\n\t\t\t>\n\t\t\t\t<ThemeProvider color={ themeColors }>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'boot-layout boot-layout--single-page',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-canvas': !! canvas || canvas === null,\n\t\t\t\t\t\t\t\t'has-full-canvas': isFullScreen,\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<SavePanel />\n\t\t\t\t\t\t<SnackbarNotices className=\"boot-notices__snackbar\" />\n\t\t\t\t\t\t<div className=\"boot-layout__surfaces\">\n\t\t\t\t\t\t\t<ThemeProvider\n\t\t\t\t\t\t\t\tcolor={ {\n\t\t\t\t\t\t\t\t\t...themeColors,\n\t\t\t\t\t\t\t\t\tbackground: '#ffffff',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Outlet />\n\t\t\t\t\t\t\t\t{ /* Render Canvas in Root to prevent remounting on route changes */ }\n\t\t\t\t\t\t\t\t{ ( canvas || canvas === null ) && (\n\t\t\t\t\t\t\t\t\t<div className=\"boot-layout__canvas\">\n\t\t\t\t\t\t\t\t\t\t<CanvasRenderer\n\t\t\t\t\t\t\t\t\t\t\tcanvas={ canvas }\n\t\t\t\t\t\t\t\t\t\t\trouteContentModule={\n\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</ThemeProvider>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</ThemeProvider>\n\t\t\t</ThemeProvider>\n\t\t</SlotFillProvider>\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;AAKjB,SAAS,eAAe,wBAAwB;AAChD,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,2BAA2B;AACpC,SAAS,eAAe,wBAAwB;AAKhD,OAAO,eAAe;AACtB,OAAO,oBAAoB;AAC3B,SAAS,cAAc;;;ACpBvB,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';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as routePrivateApis } from '@wordpress/route';\nimport { SnackbarNotices } from '@wordpress/notices';\nimport { SlotFillProvider } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { getAdminThemeColors } from '@wordpress/admin-ui';\nimport { privateApis as themePrivateApis } from '@wordpress/theme';\n\n/**\n * Internal dependencies\n */\nimport SavePanel from '../save-panel';\nimport CanvasRenderer from '../canvas-renderer';\nimport { unlock } from '../../lock-unlock';\nimport type { CanvasData } from '../../store/types';\nimport './style.scss';\nimport useRouteTitle from '../app/use-route-title';\n\nconst { useMatches, Outlet } = unlock( routePrivateApis );\nconst { ThemeProvider } = unlock( themePrivateApis );\n\n/**\n * Root component for single page mode (no sidebar).\n * Used when rendering pages within wp-admin without taking over the full page.\n */\nexport default function RootSinglePage() {\n\tconst matches = useMatches();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst canvas = ( currentMatch?.loaderData as any )?.canvas as\n\t\t| CanvasData\n\t\t| null\n\t\t| undefined;\n\tconst routeContentModule = ( currentMatch?.loaderData as any )\n\t\t?.routeContentModule as string | undefined;\n\tconst isFullScreen = canvas && ! canvas.isPreview;\n\n\tuseRouteTitle();\n\n\tconst themeColors = useMemo( getAdminThemeColors, [] );\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<ThemeProvider\n\t\t\t\tisRoot\n\t\t\t\tcolor={ { ...themeColors, background: '#f8f8f8' } }\n\t\t\t>\n\t\t\t\t<ThemeProvider color={ themeColors }>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'boot-layout boot-layout--single-page',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-canvas': !! canvas || canvas === null,\n\t\t\t\t\t\t\t\t'has-full-canvas': isFullScreen,\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<SavePanel />\n\t\t\t\t\t\t<SnackbarNotices className=\"boot-notices__snackbar\" />\n\t\t\t\t\t\t<div className=\"boot-layout__surfaces\">\n\t\t\t\t\t\t\t<ThemeProvider\n\t\t\t\t\t\t\t\tcolor={ {\n\t\t\t\t\t\t\t\t\t...themeColors,\n\t\t\t\t\t\t\t\t\tbackground: '#ffffff',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Outlet />\n\t\t\t\t\t\t\t\t{ /* Render Canvas in Root to prevent remounting on route changes */ }\n\t\t\t\t\t\t\t\t{ ( canvas || canvas === null ) && (\n\t\t\t\t\t\t\t\t\t<div className=\"boot-layout__canvas\">\n\t\t\t\t\t\t\t\t\t\t<CanvasRenderer\n\t\t\t\t\t\t\t\t\t\t\tcanvas={ canvas }\n\t\t\t\t\t\t\t\t\t\t\trouteContentModule={\n\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</ThemeProvider>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</ThemeProvider>\n\t\t\t</ThemeProvider>\n\t\t</SlotFillProvider>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='a66cc68f6f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"a66cc68f6f\");\n\tstyle.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}}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe,wBAAwB;AAChD,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,2BAA2B;AACpC,SAAS,eAAe,wBAAwB;AAKhD,OAAO,eAAe;AACtB,OAAO,oBAAoB;AAC3B,SAAS,cAAc;;;ACpBvB,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,6oHAA6oH,CAAC;AACxrH,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADkBA,OAAO,mBAAmB;AAwCpB,cAGC,YAHD;AAtCN,IAAM,EAAE,YAAY,OAAO,IAAI,OAAQ,gBAAiB;AACxD,IAAM,EAAE,cAAc,IAAI,OAAQ,gBAAiB;AAMpC,SAAR,iBAAkC;AACxC,QAAM,UAAU,WAAW;AAC3B,QAAM,eAAe,QAAS,QAAQ,SAAS,CAAE;AACjD,QAAM,SAAW,cAAc,YAAqB;AAIpD,QAAM,qBAAuB,cAAc,YACxC;AACH,QAAM,eAAe,UAAU,CAAE,OAAO;AAExC,gBAAc;AAEd,QAAM,cAAc,QAAS,qBAAqB,CAAC,CAAE;AAErD,SACC,oBAAC,oBACA;AAAA,IAAC;AAAA;AAAA,MACA,QAAM;AAAA,MACN,OAAQ,EAAE,GAAG,aAAa,YAAY,UAAU;AAAA,MAEhD,8BAAC,iBAAc,OAAQ,aACtB;AAAA,QAAC;AAAA;AAAA,UACA,WAAY;AAAA,YACX;AAAA,YACA;AAAA,cACC,cAAc,CAAC,CAAE,UAAU,WAAW;AAAA,cACtC,mBAAmB;AAAA,YACpB;AAAA,UACD;AAAA,UAEA;AAAA,gCAAC,aAAU;AAAA,YACX,oBAAC,mBAAgB,WAAU,0BAAyB;AAAA,YACpD,oBAAC,SAAI,WAAU,yBACd;AAAA,cAAC;AAAA;AAAA,gBACA,OAAQ;AAAA,kBACP,GAAG;AAAA,kBACH,YAAY;AAAA,gBACb;AAAA,gBAEA;AAAA,sCAAC,UAAO;AAAA,mBAEJ,UAAU,WAAW,SACxB,oBAAC,SAAI,WAAU,uBACd;AAAA,oBAAC;AAAA;AAAA,sBACA;AAAA,sBACA;AAAA;AAAA,kBAGD,GACD;AAAA;AAAA;AAAA,YAEF,GACD;AAAA;AAAA;AAAA,MACD,GACD;AAAA;AAAA,EACD,GACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -63,8 +63,8 @@ function SaveButton() {
|
|
|
63
63
|
return sprintf(
|
|
64
64
|
// translators: %d: number of unsaved changes (number).
|
|
65
65
|
_n(
|
|
66
|
-
"Review %d change
|
|
67
|
-
"Review %d changes
|
|
66
|
+
"Review %d change…",
|
|
67
|
+
"Review %d changes…",
|
|
68
68
|
dirtyEntityRecordsCount
|
|
69
69
|
),
|
|
70
70
|
dirtyEntityRecordsCount
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/save-button/index.tsx", "../../../src/components/save-button/style.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { _n, __, sprintf } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { displayShortcut, rawShortcut } from '@wordpress/keycodes';\nimport { check } from '@wordpress/icons';\nimport { EntitiesSavedStates } from '@wordpress/editor';\nimport { Button, Modal } from '@wordpress/components';\
|
|
5
|
-
"mappings": ";AAGA,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,IAAI,IAAI,eAAe;AAChC,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,aAAa;AACtB,SAAS,2BAA2B;AACpC,SAAS,QAAQ,aAAa;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { _n, __, sprintf } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { displayShortcut, rawShortcut } from '@wordpress/keycodes';\nimport { check } from '@wordpress/icons';\nimport { EntitiesSavedStates } from '@wordpress/editor';\nimport { Button, Modal } from '@wordpress/components';\nimport { Tooltip } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport './style.scss';\nimport useSaveShortcut from '../save-panel/use-save-shortcut';\n\nexport default function SaveButton() {\n\tconst [ isSaveViewOpen, setIsSaveViewOpened ] = useState( false );\n\tconst { isSaving, dirtyEntityRecordsCount } = useSelect( ( select ) => {\n\t\tconst { isSavingEntityRecord, __experimentalGetDirtyEntityRecords } =\n\t\t\tselect( coreStore );\n\t\tconst dirtyEntityRecords = __experimentalGetDirtyEntityRecords();\n\t\treturn {\n\t\t\tisSaving: dirtyEntityRecords.some( ( record ) =>\n\t\t\t\tisSavingEntityRecord( record.kind, record.name, record.key )\n\t\t\t),\n\t\t\tdirtyEntityRecordsCount: dirtyEntityRecords.length,\n\t\t};\n\t}, [] );\n\tconst [ showSavedState, setShowSavedState ] = useState( false );\n\n\tuseEffect( () => {\n\t\tif ( isSaving ) {\n\t\t\t// Proactively expect to show saved state. This is done once save\n\t\t\t// starts to avoid race condition where setting it after would cause\n\t\t\t// the button to be unmounted before state is updated.\n\t\t\tsetShowSavedState( true );\n\t\t}\n\t}, [ isSaving ] );\n\n\tconst hasChanges = dirtyEntityRecordsCount > 0;\n\n\t// Handle save failure case: If we were showing saved state but saving\n\t// failed, reset to show changes again.\n\tuseEffect( () => {\n\t\tif ( ! isSaving && hasChanges ) {\n\t\t\tsetShowSavedState( false );\n\t\t}\n\t}, [ isSaving, hasChanges ] );\n\n\tfunction hideSavedState() {\n\t\tif ( showSavedState ) {\n\t\t\tsetShowSavedState( false );\n\t\t}\n\t}\n\n\tconst shouldShowButton = hasChanges || showSavedState;\n\n\tuseSaveShortcut( { openSavePanel: () => setIsSaveViewOpened( true ) } );\n\n\tif ( ! shouldShowButton ) {\n\t\treturn null;\n\t}\n\n\tconst isInSavedState = showSavedState && ! hasChanges;\n\tconst disabled = isSaving || isInSavedState;\n\n\tconst getLabel = () => {\n\t\tif ( isInSavedState ) {\n\t\t\treturn __( 'Saved' );\n\t\t}\n\t\treturn sprintf(\n\t\t\t// translators: %d: number of unsaved changes (number).\n\t\t\t_n(\n\t\t\t\t'Review %d change…',\n\t\t\t\t'Review %d changes…',\n\t\t\t\tdirtyEntityRecordsCount\n\t\t\t),\n\t\t\tdirtyEntityRecordsCount\n\t\t);\n\t};\n\tconst label = getLabel();\n\tconst shortcut = displayShortcut.primary( 's' );\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip.Root>\n\t\t\t\t<Tooltip.Trigger\n\t\t\t\t\trender={\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tonClick={ () => setIsSaveViewOpened( true ) }\n\t\t\t\t\t\t\tonBlur={ hideSavedState }\n\t\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\tisBusy={ isSaving }\n\t\t\t\t\t\t\taria-keyshortcuts={ rawShortcut.primary( 's' ) }\n\t\t\t\t\t\t\tclassName=\"boot-save-button\"\n\t\t\t\t\t\t\ticon={ isInSavedState ? check : undefined }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Tooltip.Popup>\n\t\t\t\t\t{ hasChanges && <span>{ label }</span> }\n\t\t\t\t\t{ /* TODO: replace with a future `@wordpress/ui` `Shortcut` primitive once available */ }\n\t\t\t\t\t<span className=\"boot-save-button__shortcut\">\n\t\t\t\t\t\t{ shortcut }\n\t\t\t\t\t</span>\n\t\t\t\t</Tooltip.Popup>\n\t\t\t</Tooltip.Root>\n\t\t\t{ isSaveViewOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Review changes' ) }\n\t\t\t\t\tonRequestClose={ () => setIsSaveViewOpened( false ) }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t<EntitiesSavedStates\n\t\t\t\t\t\tclose={ () => setIsSaveViewOpened( false ) }\n\t\t\t\t\t\tvariant=\"inline\"\n\t\t\t\t\t/>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='020f606c18']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"020f606c18\");\n\tstyle.appendChild(document.createTextNode(\".boot-save-button{width:100%}.boot-save-button__shortcut:not(:first-child){margin-left:8px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,IAAI,IAAI,eAAe;AAChC,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,aAAa;AACtB,SAAS,2BAA2B;AACpC,SAAS,QAAQ,aAAa;AAC9B,SAAS,eAAe;;;ACXxB,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,6FAA6F,CAAC;AACxI,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADYA,OAAO,qBAAqB;AAuE1B,mBAII,KAgBF,YApBF;AArEa,SAAR,aAA8B;AACpC,QAAM,CAAE,gBAAgB,mBAAoB,IAAI,SAAU,KAAM;AAChE,QAAM,EAAE,UAAU,wBAAwB,IAAI,UAAW,CAAE,WAAY;AACtE,UAAM,EAAE,sBAAsB,oCAAoC,IACjE,OAAQ,SAAU;AACnB,UAAM,qBAAqB,oCAAoC;AAC/D,WAAO;AAAA,MACN,UAAU,mBAAmB;AAAA,QAAM,CAAE,WACpC,qBAAsB,OAAO,MAAM,OAAO,MAAM,OAAO,GAAI;AAAA,MAC5D;AAAA,MACA,yBAAyB,mBAAmB;AAAA,IAC7C;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,CAAE,gBAAgB,iBAAkB,IAAI,SAAU,KAAM;AAE9D,YAAW,MAAM;AAChB,QAAK,UAAW;AAIf,wBAAmB,IAAK;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,QAAS,CAAE;AAEhB,QAAM,aAAa,0BAA0B;AAI7C,YAAW,MAAM;AAChB,QAAK,CAAE,YAAY,YAAa;AAC/B,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,UAAU,UAAW,CAAE;AAE5B,WAAS,iBAAiB;AACzB,QAAK,gBAAiB;AACrB,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD;AAEA,QAAM,mBAAmB,cAAc;AAEvC,kBAAiB,EAAE,eAAe,MAAM,oBAAqB,IAAK,EAAE,CAAE;AAEtE,MAAK,CAAE,kBAAmB;AACzB,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,kBAAkB,CAAE;AAC3C,QAAM,WAAW,YAAY;AAE7B,QAAM,WAAW,MAAM;AACtB,QAAK,gBAAiB;AACrB,aAAO,GAAI,OAAQ;AAAA,IACpB;AACA,WAAO;AAAA;AAAA,MAEN;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACA,QAAM,QAAQ,SAAS;AACvB,QAAM,WAAW,gBAAgB,QAAS,GAAI;AAE9C,SACC,iCACC;AAAA,yBAAC,QAAQ,MAAR,EACA;AAAA;AAAA,QAAC,QAAQ;AAAA,QAAR;AAAA,UACA,QACC;AAAA,YAAC;AAAA;AAAA,cACA,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAU,MAAM,oBAAqB,IAAK;AAAA,cAC1C,QAAS;AAAA,cACT;AAAA,cACA,wBAAsB;AAAA,cACtB,QAAS;AAAA,cACT,qBAAoB,YAAY,QAAS,GAAI;AAAA,cAC7C,WAAU;AAAA,cACV,MAAO,iBAAiB,QAAQ;AAAA,cAE9B;AAAA;AAAA,UACH;AAAA;AAAA,MAEF;AAAA,MACA,qBAAC,QAAQ,OAAR,EACE;AAAA,sBAAc,oBAAC,UAAO,iBAAO;AAAA,QAE/B,oBAAC,UAAK,WAAU,8BACb,oBACH;AAAA,SACD;AAAA,OACD;AAAA,IACE,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,gBAAiB;AAAA,QAC7B,gBAAiB,MAAM,oBAAqB,KAAM;AAAA,QAClD,MAAK;AAAA,QAEL;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,MAAM,oBAAqB,KAAM;AAAA,YACzC,SAAQ;AAAA;AAAA,QACT;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,10 +16,10 @@ import SiteIconLink from "../site-icon-link/index.mjs";
|
|
|
16
16
|
import { store as bootStore } from "../../store/index.mjs";
|
|
17
17
|
|
|
18
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='
|
|
19
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='74d234ae17']")) {
|
|
20
20
|
const style = document.createElement("style");
|
|
21
|
-
style.setAttribute("data-wp-hash", "
|
|
22
|
-
style.appendChild(document.createTextNode(".boot-site-hub{align-items:center;background-color:var(--wpds-color-
|
|
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
23
|
document.head.appendChild(style);
|
|
24
24
|
}
|
|
25
25
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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='
|
|
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,
|
|
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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,10 +6,10 @@ import { __ } from "@wordpress/i18n";
|
|
|
6
6
|
import { store as coreDataStore } from "@wordpress/core-data";
|
|
7
7
|
|
|
8
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='
|
|
9
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='8cdddce491']")) {
|
|
10
10
|
const style = document.createElement("style");
|
|
11
|
-
style.setAttribute("data-wp-hash", "
|
|
12
|
-
style.appendChild(document.createTextNode(".boot-site-icon{display:flex}.boot-site-icon__icon{fill:var(--wpds-color-
|
|
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
13
|
document.head.appendChild(style);
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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='
|
|
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,
|
|
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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,10 +5,10 @@ import { unlock } from "../../lock-unlock.mjs";
|
|
|
5
5
|
import SiteIcon from "../site-icon/index.mjs";
|
|
6
6
|
|
|
7
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='
|
|
8
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='6b58df5c9e']")) {
|
|
9
9
|
const style = document.createElement("style");
|
|
10
|
-
style.setAttribute("data-wp-hash", "
|
|
11
|
-
style.appendChild(document.createTextNode(".boot-site-icon-link{align-items:center;background:var(--wpds-color-
|
|
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
12
|
document.head.appendChild(style);
|
|
13
13
|
}
|
|
14
14
|
|