@wordpress/boot 0.15.0 → 0.15.2-next.v.202606191442.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/build-module/components/app/use-route-title.mjs +1 -1
- package/build-module/components/app/use-route-title.mjs.map +2 -2
- package/build-module/components/canvas/back-button.mjs +3 -3
- package/build-module/components/canvas/back-button.mjs.map +2 -2
- package/build-module/components/navigation/index.mjs +2 -2
- package/build-module/components/navigation/index.mjs.map +2 -2
- package/build-module/components/navigation/navigation-item/index.mjs +3 -3
- package/build-module/components/navigation/navigation-item/index.mjs.map +2 -2
- package/build-module/components/navigation/navigation-screen/index.mjs +3 -3
- package/build-module/components/navigation/navigation-screen/index.mjs.map +2 -2
- package/build-module/components/root/index.mjs +121 -100
- package/build-module/components/root/index.mjs.map +2 -2
- package/build-module/components/root/single-page.mjs +45 -25
- package/build-module/components/root/single-page.mjs.map +2 -2
- package/build-module/components/save-button/index.mjs +35 -29
- package/build-module/components/save-button/index.mjs.map +2 -2
- package/build-module/components/site-hub/index.mjs +3 -3
- package/build-module/components/site-hub/index.mjs.map +2 -2
- package/build-module/components/site-icon/index.mjs +3 -3
- package/build-module/components/site-icon/index.mjs.map +2 -2
- package/build-module/components/site-icon-link/index.mjs +28 -20
- package/build-module/components/site-icon-link/index.mjs.map +2 -2
- package/build-module/index.mjs +6 -6
- package/build-module/index.mjs.map +2 -2
- package/build-style/style-rtl.css +180 -187
- package/build-style/style.css +180 -187
- package/build-style/view-transitions-rtl.css +7 -4
- package/build-style/view-transitions.css +7 -4
- package/build-types/components/root/index.d.ts.map +1 -1
- package/build-types/components/root/single-page.d.ts.map +1 -1
- package/build-types/components/save-button/index.d.ts.map +1 -1
- package/build-types/components/site-icon-link/index.d.ts.map +1 -1
- package/package.json +31 -25
- package/src/components/canvas/back-button.scss +2 -2
- package/src/components/navigation/index.tsx +2 -2
- package/src/components/navigation/navigation-item/style.scss +3 -3
- package/src/components/navigation/navigation-screen/style.scss +2 -2
- package/src/components/root/index.tsx +140 -120
- package/src/components/root/single-page.tsx +20 -7
- package/src/components/root/style.scss +10 -10
- package/src/components/save-button/index.tsx +30 -20
- package/src/components/save-button/style.scss +6 -0
- package/src/components/site-hub/style.scss +4 -4
- package/src/components/site-icon/style.scss +1 -1
- package/src/components/site-icon-link/index.tsx +26 -18
- package/src/components/site-icon-link/style.scss +2 -2
- package/src/{experimental-admin-bar-in-editor.scss → experimental-omnibar.scss} +1 -1
- package/src/style.scss +1 -1
- package/src/view-transitions.scss +1 -1
- package/build-module/components/user-theme-provider/index.mjs +0 -33
- package/build-module/components/user-theme-provider/index.mjs.map +0 -7
- package/build-types/components/user-theme-provider/index.d.ts +0 -6
- package/build-types/components/user-theme-provider/index.d.ts.map +0 -1
- package/src/components/user-theme-provider/index.tsx +0 -35
- package/src/components/user-theme-provider/test/index.test.ts +0 -11
- /package/build-style/{experimental-admin-bar-in-editor-rtl.css → experimental-omnibar-rtl.css} +0 -0
- /package/build-style/{experimental-admin-bar-in-editor.css → experimental-omnibar.css} +0 -0
|
@@ -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 } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Page } from '@wordpress/admin-ui';\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';\nimport { UserThemeProvider } from '../user-theme-provider';\n\nconst { useLocation, useMatches, Outlet } = unlock( routePrivateApis );\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\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>\n\t\t\t\t<UserThemeProvider color={ { bg: '#1d2327' } }>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( 'boot-layout', {\n\t\t\t\t\t\t\t'has-canvas': !! canvas || canvas === null,\n\t\t\t\t\t\t\t'has-full-canvas': isFullScreen,\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{ isMobileViewport && (\n\t\t\t\t\t\t\t<Page.SidebarToggleFill>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ticon={ menu }\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( true )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Open navigation panel' ) }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Page.SidebarToggleFill>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ /* Mobile Sidebar Backdrop */ }\n\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion ? 0 : 0.2,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tclassName=\"boot-layout__sidebar-backdrop\"\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( false )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\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\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} }\n\t\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\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) }\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</AnimatePresence>\n\t\t\t\t\t\t{ /* Mobile Sidebar */ }\n\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tinitial={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\tanimate={ { x: 0 } }\n\t\t\t\t\t\t\t\t\t\texit={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion ? 0 : 0.2,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\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>\n\t\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t{ /* Desktop Sidebar */ }\n\t\t\t\t\t\t{ ! isMobileViewport && ! isFullScreen && (\n\t\t\t\t\t\t\t<div className=\"boot-layout__sidebar\">\n\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<div className=\"boot-layout__surfaces\">\n\t\t\t\t\t\t\t<UserThemeProvider color={ { bg: '#ffffff' } }>\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\n\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\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{\n\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\tcanvas?.isPreview &&\n\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}\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\t\t\t{ canvas?.isPreview &&\n\t\t\t\t\t\t\t\t\t\t\tisMobileViewport && (\n\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<Button\n\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\tonClick={ () =>\n\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\ttrue\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}\n\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'Open navigation panel'\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\tsize=\"compact\"\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</div>\n\t\t\t\t\t\t\t\t\t\t\t) }\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</UserThemeProvider>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</UserThemeProvider>\n\t\t\t</UserThemeProvider>\n\t\t</SlotFillProvider>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='be0c278a6c']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"be0c278a6c\");\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:#00000080;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 #0003;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,#e4e4e4);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,#e4e4e4);border-radius:0;bottom:0;box-shadow:0 1px 3px #0000001a;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,
|
|
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
|
}
|
|
@@ -3,23 +3,26 @@ import clsx from "clsx";
|
|
|
3
3
|
import { privateApis as routePrivateApis } from "@wordpress/route";
|
|
4
4
|
import { SnackbarNotices } from "@wordpress/notices";
|
|
5
5
|
import { SlotFillProvider } from "@wordpress/components";
|
|
6
|
+
import { useMemo } from "@wordpress/element";
|
|
7
|
+
import { getAdminThemeColors } from "@wordpress/admin-ui";
|
|
8
|
+
import { privateApis as themePrivateApis } from "@wordpress/theme";
|
|
6
9
|
import SavePanel from "../save-panel/index.mjs";
|
|
7
10
|
import CanvasRenderer from "../canvas-renderer/index.mjs";
|
|
8
11
|
import { unlock } from "../../lock-unlock.mjs";
|
|
9
12
|
|
|
10
13
|
// packages/boot/src/components/root/style.scss
|
|
11
|
-
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']")) {
|
|
12
15
|
const style = document.createElement("style");
|
|
13
|
-
style.setAttribute("data-wp-hash", "
|
|
14
|
-
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}}"));
|
|
15
18
|
document.head.appendChild(style);
|
|
16
19
|
}
|
|
17
20
|
|
|
18
21
|
// packages/boot/src/components/root/single-page.tsx
|
|
19
22
|
import useRouteTitle from "../app/use-route-title.mjs";
|
|
20
|
-
import { UserThemeProvider } from "../user-theme-provider/index.mjs";
|
|
21
23
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
22
24
|
var { useMatches, Outlet } = unlock(routePrivateApis);
|
|
25
|
+
var { ThemeProvider } = unlock(themePrivateApis);
|
|
23
26
|
function RootSinglePage() {
|
|
24
27
|
const matches = useMatches();
|
|
25
28
|
const currentMatch = matches[matches.length - 1];
|
|
@@ -27,32 +30,49 @@ function RootSinglePage() {
|
|
|
27
30
|
const routeContentModule = currentMatch?.loaderData?.routeContentModule;
|
|
28
31
|
const isFullScreen = canvas && !canvas.isPreview;
|
|
29
32
|
useRouteTitle();
|
|
30
|
-
|
|
31
|
-
|
|
33
|
+
const themeColors = useMemo(getAdminThemeColors, []);
|
|
34
|
+
return /* @__PURE__ */ jsx(SlotFillProvider, { children: /* @__PURE__ */ jsx(
|
|
35
|
+
ThemeProvider,
|
|
32
36
|
{
|
|
33
|
-
|
|
34
|
-
|
|
37
|
+
isRoot: true,
|
|
38
|
+
color: { ...themeColors, background: "#f8f8f8" },
|
|
39
|
+
children: /* @__PURE__ */ jsx(ThemeProvider, { color: themeColors, children: /* @__PURE__ */ jsxs(
|
|
40
|
+
"div",
|
|
35
41
|
{
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
),
|
|
40
|
-
children: [
|
|
41
|
-
/* @__PURE__ */ jsx(SavePanel, {}),
|
|
42
|
-
/* @__PURE__ */ jsx(SnackbarNotices, { className: "boot-notices__snackbar" }),
|
|
43
|
-
/* @__PURE__ */ jsx("div", { className: "boot-layout__surfaces", children: /* @__PURE__ */ jsxs(UserThemeProvider, { color: { bg: "#ffffff" }, children: [
|
|
44
|
-
/* @__PURE__ */ jsx(Outlet, {}),
|
|
45
|
-
(canvas || canvas === null) && /* @__PURE__ */ jsx("div", { className: "boot-layout__canvas", children: /* @__PURE__ */ jsx(
|
|
46
|
-
CanvasRenderer,
|
|
42
|
+
className: clsx(
|
|
43
|
+
"boot-layout boot-layout--single-page",
|
|
47
44
|
{
|
|
48
|
-
canvas,
|
|
49
|
-
|
|
45
|
+
"has-canvas": !!canvas || canvas === null,
|
|
46
|
+
"has-full-canvas": isFullScreen
|
|
50
47
|
}
|
|
51
|
-
)
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
),
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ jsx(SavePanel, {}),
|
|
51
|
+
/* @__PURE__ */ jsx(SnackbarNotices, { className: "boot-notices__snackbar" }),
|
|
52
|
+
/* @__PURE__ */ jsx("div", { className: "boot-layout__surfaces", children: /* @__PURE__ */ jsxs(
|
|
53
|
+
ThemeProvider,
|
|
54
|
+
{
|
|
55
|
+
color: {
|
|
56
|
+
...themeColors,
|
|
57
|
+
background: "#ffffff"
|
|
58
|
+
},
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ jsx(Outlet, {}),
|
|
61
|
+
(canvas || canvas === null) && /* @__PURE__ */ jsx("div", { className: "boot-layout__canvas", children: /* @__PURE__ */ jsx(
|
|
62
|
+
CanvasRenderer,
|
|
63
|
+
{
|
|
64
|
+
canvas,
|
|
65
|
+
routeContentModule
|
|
66
|
+
}
|
|
67
|
+
) })
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
) })
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
) })
|
|
54
74
|
}
|
|
55
|
-
) })
|
|
75
|
+
) });
|
|
56
76
|
}
|
|
57
77
|
export {
|
|
58
78
|
RootSinglePage as default
|
|
@@ -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';\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';\
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe,wBAAwB;AAChD,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;
|
|
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
|
}
|
|
@@ -6,13 +6,14 @@ import { store as coreStore } from "@wordpress/core-data";
|
|
|
6
6
|
import { displayShortcut, rawShortcut } from "@wordpress/keycodes";
|
|
7
7
|
import { check } from "@wordpress/icons";
|
|
8
8
|
import { EntitiesSavedStates } from "@wordpress/editor";
|
|
9
|
-
import { Button, Modal
|
|
9
|
+
import { Button, Modal } from "@wordpress/components";
|
|
10
|
+
import { Tooltip } from "@wordpress/ui";
|
|
10
11
|
|
|
11
12
|
// packages/boot/src/components/save-button/style.scss
|
|
12
|
-
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='020f606c18']")) {
|
|
13
14
|
const style = document.createElement("style");
|
|
14
|
-
style.setAttribute("data-wp-hash", "
|
|
15
|
-
style.appendChild(document.createTextNode(".boot-save-button{width:100%}"));
|
|
15
|
+
style.setAttribute("data-wp-hash", "020f606c18");
|
|
16
|
+
style.appendChild(document.createTextNode(".boot-save-button{width:100%}.boot-save-button__shortcut:not(:first-child){margin-left:8px}"));
|
|
16
17
|
document.head.appendChild(style);
|
|
17
18
|
}
|
|
18
19
|
|
|
@@ -62,38 +63,43 @@ function SaveButton() {
|
|
|
62
63
|
return sprintf(
|
|
63
64
|
// translators: %d: number of unsaved changes (number).
|
|
64
65
|
_n(
|
|
65
|
-
"Review %d change
|
|
66
|
-
"Review %d changes
|
|
66
|
+
"Review %d change…",
|
|
67
|
+
"Review %d changes…",
|
|
67
68
|
dirtyEntityRecordsCount
|
|
68
69
|
),
|
|
69
70
|
dirtyEntityRecordsCount
|
|
70
71
|
);
|
|
71
72
|
};
|
|
72
73
|
const label = getLabel();
|
|
74
|
+
const shortcut = displayShortcut.primary("s");
|
|
73
75
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
74
|
-
/* @__PURE__ */
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
76
|
+
/* @__PURE__ */ jsxs(Tooltip.Root, { children: [
|
|
77
|
+
/* @__PURE__ */ jsx(
|
|
78
|
+
Tooltip.Trigger,
|
|
79
|
+
{
|
|
80
|
+
render: /* @__PURE__ */ jsx(
|
|
81
|
+
Button,
|
|
82
|
+
{
|
|
83
|
+
variant: "primary",
|
|
84
|
+
size: "compact",
|
|
85
|
+
onClick: () => setIsSaveViewOpened(true),
|
|
86
|
+
onBlur: hideSavedState,
|
|
87
|
+
disabled,
|
|
88
|
+
accessibleWhenDisabled: true,
|
|
89
|
+
isBusy: isSaving,
|
|
90
|
+
"aria-keyshortcuts": rawShortcut.primary("s"),
|
|
91
|
+
className: "boot-save-button",
|
|
92
|
+
icon: isInSavedState ? check : void 0,
|
|
93
|
+
children: label
|
|
94
|
+
}
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
),
|
|
98
|
+
/* @__PURE__ */ jsxs(Tooltip.Popup, { children: [
|
|
99
|
+
hasChanges && /* @__PURE__ */ jsx("span", { children: label }),
|
|
100
|
+
/* @__PURE__ */ jsx("span", { className: "boot-save-button__shortcut", children: shortcut })
|
|
101
|
+
] })
|
|
102
|
+
] }),
|
|
97
103
|
isSaveViewOpen && /* @__PURE__ */ jsx(
|
|
98
104
|
Modal,
|
|
99
105
|
{
|
|
@@ -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
|
|
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,
|
|
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": "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",
|
|
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
|
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
// packages/boot/src/components/site-icon-link/index.tsx
|
|
2
2
|
import { Link, privateApis as routePrivateApis } from "@wordpress/route";
|
|
3
|
-
import { Tooltip
|
|
3
|
+
import { Tooltip } from "@wordpress/ui";
|
|
4
4
|
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
|
|
|
15
15
|
// packages/boot/src/components/site-icon-link/index.tsx
|
|
16
|
-
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
17
|
var { useCanGoBack, useRouter } = unlock(routePrivateApis);
|
|
18
18
|
function SiteIconLink({
|
|
19
19
|
to,
|
|
@@ -22,21 +22,29 @@ function SiteIconLink({
|
|
|
22
22
|
}) {
|
|
23
23
|
const router = useRouter();
|
|
24
24
|
const canGoBack = useCanGoBack();
|
|
25
|
-
return /* @__PURE__ */
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
25
|
+
return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
|
|
26
|
+
/* @__PURE__ */ jsx(
|
|
27
|
+
Tooltip.Trigger,
|
|
28
|
+
{
|
|
29
|
+
render: /* @__PURE__ */ jsx(
|
|
30
|
+
Link,
|
|
31
|
+
{
|
|
32
|
+
to,
|
|
33
|
+
"aria-label": props["aria-label"],
|
|
34
|
+
className: "boot-site-icon-link",
|
|
35
|
+
onClick: (event) => {
|
|
36
|
+
if (canGoBack && isBackButton) {
|
|
37
|
+
event.preventDefault();
|
|
38
|
+
router.history.back();
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
children: /* @__PURE__ */ jsx(SiteIcon, {})
|
|
42
|
+
}
|
|
43
|
+
)
|
|
44
|
+
}
|
|
45
|
+
),
|
|
46
|
+
/* @__PURE__ */ jsx(Tooltip.Popup, { positioner: /* @__PURE__ */ jsx(Tooltip.Positioner, { side: "right" }), children: props["aria-label"] })
|
|
47
|
+
] });
|
|
40
48
|
}
|
|
41
49
|
var site_icon_link_default = SiteIconLink;
|
|
42
50
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/site-icon-link/index.tsx", "../../../src/components/site-icon-link/style.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Link, privateApis as routePrivateApis } from '@wordpress/route';\nimport { Tooltip
|
|
5
|
-
"mappings": ";AAGA,SAAS,MAAM,eAAe,wBAAwB;AACtD,SAAS,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Link, privateApis as routePrivateApis } from '@wordpress/route';\nimport { Tooltip } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nimport SiteIcon from '../site-icon';\nimport './style.scss';\n\nconst { useCanGoBack, useRouter } = unlock( routePrivateApis );\n\nfunction SiteIconLink( {\n\tto,\n\tisBackButton,\n\t...props\n}: {\n\tto: string;\n\t'aria-label': string;\n\tisBackButton?: boolean;\n} ) {\n\tconst router = useRouter();\n\tconst canGoBack = useCanGoBack();\n\n\treturn (\n\t\t<Tooltip.Root>\n\t\t\t<Tooltip.Trigger\n\t\t\t\trender={\n\t\t\t\t\t<Link\n\t\t\t\t\t\tto={ to }\n\t\t\t\t\t\taria-label={ props[ 'aria-label' ] }\n\t\t\t\t\t\tclassName=\"boot-site-icon-link\"\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t// If possible, restore the previous page with\n\t\t\t\t\t\t\t// filters etc.\n\t\t\t\t\t\t\tif ( canGoBack && isBackButton ) {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\trouter.history.back();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<SiteIcon />\n\t\t\t\t\t</Link>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Tooltip.Popup positioner={ <Tooltip.Positioner side=\"right\" /> }>\n\t\t\t\t{ props[ 'aria-label' ] }\n\t\t\t</Tooltip.Popup>\n\t\t</Tooltip.Root>\n\t);\n}\n\nexport default SiteIconLink;\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='6b58df5c9e']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"6b58df5c9e\");\n\tstyle.appendChild(document.createTextNode(\".boot-site-icon-link{align-items:center;background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);display:inline-flex;height:64px;justify-content:center;text-decoration:none;width:64px}@media not (prefers-reduced-motion){.boot-site-icon-link{transition:outline .1s ease-out}}.boot-site-icon-link:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,MAAM,eAAe,wBAAwB;AACtD,SAAS,eAAe;AAKxB,SAAS,cAAc;AAEvB,OAAO,cAAc;;;ACXrB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,+jBAA+jB,CAAC;AAC1mB,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADwBE,SAgBI,KAhBJ;AAfF,IAAM,EAAE,cAAc,UAAU,IAAI,OAAQ,gBAAiB;AAE7D,SAAS,aAAc;AAAA,EACtB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAII;AACH,QAAM,SAAS,UAAU;AACzB,QAAM,YAAY,aAAa;AAE/B,SACC,qBAAC,QAAQ,MAAR,EACA;AAAA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACA,QACC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,cAAa,MAAO,YAAa;AAAA,YACjC,WAAU;AAAA,YACV,SAAU,CAAE,UAAW;AAGtB,kBAAK,aAAa,cAAe;AAChC,sBAAM,eAAe;AACrB,uBAAO,QAAQ,KAAK;AAAA,cACrB;AAAA,YACD;AAAA,YAEA,8BAAC,YAAS;AAAA;AAAA,QACX;AAAA;AAAA,IAEF;AAAA,IACA,oBAAC,QAAQ,OAAR,EAAc,YAAa,oBAAC,QAAQ,YAAR,EAAmB,MAAK,SAAQ,GAC1D,gBAAO,YAAa,GACvB;AAAA,KACD;AAEF;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|