@wordpress/boot 0.7.2-next.v.202602241322.0 → 0.7.2
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/canvas/back-button.mjs +3 -3
- package/build-module/components/canvas/back-button.mjs.map +2 -2
- package/build-module/components/navigation/dropdown-item/index.mjs +2 -2
- package/build-module/components/navigation/dropdown-item/index.mjs.map +1 -1
- package/build-module/components/navigation/navigation-item/index.mjs +2 -2
- package/build-module/components/navigation/navigation-item/index.mjs.map +1 -1
- package/build-module/components/navigation/navigation-screen/index.mjs +2 -2
- package/build-module/components/navigation/navigation-screen/index.mjs.map +1 -1
- 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 +1 -1
- package/build-module/components/sidebar/index.mjs +2 -2
- package/build-module/components/sidebar/index.mjs.map +1 -1
- package/build-module/components/site-hub/index.mjs +2 -2
- package/build-module/components/site-hub/index.mjs.map +1 -1
- package/build-module/components/site-icon/index.mjs +2 -2
- package/build-module/components/site-icon/index.mjs.map +1 -1
- package/build-module/components/site-icon-link/index.mjs +2 -2
- package/build-module/components/site-icon-link/index.mjs.map +1 -1
- package/build-module/index.mjs +5 -5
- package/build-module/index.mjs.map +2 -2
- package/build-style/style-rtl.css +68 -104
- package/build-style/style.css +68 -104
- package/package.json +24 -24
- package/src/components/root/style.scss +12 -2
|
@@ -10,10 +10,10 @@ import { __ } 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" && !document.head.querySelector("style[data-wp-hash='
|
|
13
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='68d99fe376']")) {
|
|
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-bg-surface-neutral-weak);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) solid var(--wpds-color-stroke-focus-brand);outline-offset:calc(var(--wpds-border-width-focus)*-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:#fff9}.interface-interface-skeleton__header{margin-top:0!important}"));
|
|
15
|
+
style.setAttribute("data-wp-hash", "68d99fe376");
|
|
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-bg-surface-neutral-weak,#f0f0f0);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-brand,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:#fff9}.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,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { arrowUpLeft } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport SiteIcon from '../site-icon';\nimport './back-button.scss';\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\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\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<SiteIcon />\n\t\t\t</Button>\n\n\t\t\t{ /* Overlay arrow that appears on hover */ }\n\t\t\t<motion.div\n\t\t\t\tclassName=\"boot-canvas-back-button__icon\"\n\t\t\t\tvariants={ toggleHomeIconVariants }\n\t\t\t>\n\t\t\t\t<Icon icon={ arrowUpLeft } />\n\t\t\t</motion.div>\n\t\t</motion.div>\n\t);\n}\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,OACd;AACP,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAKnB,OAAO,cAAc;;;ACfrB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,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,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { arrowUpLeft } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport SiteIcon from '../site-icon';\nimport './back-button.scss';\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\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\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<SiteIcon />\n\t\t\t</Button>\n\n\t\t\t{ /* Overlay arrow that appears on hover */ }\n\t\t\t<motion.div\n\t\t\t\tclassName=\"boot-canvas-back-button__icon\"\n\t\t\t\tvariants={ toggleHomeIconVariants }\n\t\t\t>\n\t\t\t\t<Icon icon={ arrowUpLeft } />\n\t\t\t</motion.div>\n\t\t</motion.div>\n\t);\n}\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='68d99fe376']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"68d99fe376\");\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-bg-surface-neutral-weak,#f0f0f0);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-brand,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:#fff9}.interface-interface-skeleton__header{margin-top:0!important}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,OACd;AACP,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAKnB,OAAO,cAAc;;;ACfrB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,2xCAA2xC,CAAC;AACt0C,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADsDE,SAcE,KAdF;AArCF,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;AAEvC,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,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,YAErB,8BAAC,YAAS;AAAA;AAAA,QACX;AAAA,QAGA;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,WAAU;AAAA,YACV,UAAW;AAAA,YAEX,8BAAC,QAAK,MAAO,aAAc;AAAA;AAAA,QAC5B;AAAA;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,9 +16,9 @@ import NavigationItem from "../navigation-item/index.mjs";
|
|
|
16
16
|
import { wrapIcon } from "../items.mjs";
|
|
17
17
|
|
|
18
18
|
// packages/boot/src/components/navigation/dropdown-item/style.scss
|
|
19
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
19
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='58e2debd11']")) {
|
|
20
20
|
const style = document.createElement("style");
|
|
21
|
-
style.setAttribute("data-wp-hash", "
|
|
21
|
+
style.setAttribute("data-wp-hash", "58e2debd11");
|
|
22
22
|
style.appendChild(document.createTextNode(".boot-dropdown-item__children{display:flex;flex-direction:column;margin-block-end:2px;margin-block-start:-2px;margin-inline-start:30px;overflow:hidden;padding:2px}.boot-dropdown-item__chevron.is-up{transform:rotate(180deg)}"));
|
|
23
23
|
document.head.appendChild(style);
|
|
24
24
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/navigation/dropdown-item/index.tsx", "../../../../src/components/navigation/dropdown-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\tIcon,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { chevronDownSmall } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { STORE_NAME } from '../../../store';\nimport NavigationItem from '../navigation-item';\nimport { wrapIcon } from '../items';\nimport type { IconType, MenuItem } from '../../../store/types';\nimport './style.scss';\n\nconst ANIMATION_DURATION = 0.2;\n\ninterface DropdownItemProps {\n\t/**\n\t * Optional CSS class name.\n\t */\n\tclassName?: string;\n\t/**\n\t * Identifier of the parent menu item.\n\t */\n\tid: string;\n\t/**\n\t * Icon to display with the dropdown 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 dropdown item.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Whether this dropdown is currently expanded.\n\t */\n\tisExpanded: boolean;\n\t/**\n\t * Function to toggle this dropdown's expanded state.\n\t */\n\tonToggle: () => void;\n}\n\nexport default function DropdownItem( {\n\tclassName,\n\tid,\n\ticon,\n\tchildren,\n\tisExpanded,\n\tonToggle,\n}: DropdownItemProps ) {\n\tconst menuItems: MenuItem[] = useSelect(\n\t\t( select ) =>\n\t\t\t// @ts-ignore\n\t\t\tselect( STORE_NAME ).getMenuItems(),\n\t\t[]\n\t);\n\tconst items = menuItems.filter( ( item ) => item.parent === id );\n\tconst disableMotion = useReducedMotion();\n\treturn (\n\t\t<div className=\"boot-dropdown-item\">\n\t\t\t<Item\n\t\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t\t\tonClick={ ( e ) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\tonToggle();\n\t\t\t\t} }\n\t\t\t\tonMouseDown={ ( e ) => e.preventDefault() }\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tstyle={ { flexGrow: '1' } }\n\t\t\t\t>\n\t\t\t\t\t{ wrapIcon( icon, false ) }\n\t\t\t\t\t<FlexBlock>{ children }</FlexBlock>\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ chevronDownSmall }\n\t\t\t\t\t\tclassName={ clsx( 'boot-dropdown-item__chevron', {\n\t\t\t\t\t\t\t'is-up': isExpanded,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</Item>\n\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t{ isExpanded && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={ { height: 0 } }\n\t\t\t\t\t\tanimate={ { height: 'auto' } }\n\t\t\t\t\t\texit={ { height: 0 } }\n\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tclassName=\"boot-dropdown-item__children\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ items.map( ( item, index ) => (\n\t\t\t\t\t\t\t<NavigationItem\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\tto={ item.to }\n\t\t\t\t\t\t\t\tshouldShowPlaceholder={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t</NavigationItem>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='
|
|
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\tIcon,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { chevronDownSmall } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { STORE_NAME } from '../../../store';\nimport NavigationItem from '../navigation-item';\nimport { wrapIcon } from '../items';\nimport type { IconType, MenuItem } from '../../../store/types';\nimport './style.scss';\n\nconst ANIMATION_DURATION = 0.2;\n\ninterface DropdownItemProps {\n\t/**\n\t * Optional CSS class name.\n\t */\n\tclassName?: string;\n\t/**\n\t * Identifier of the parent menu item.\n\t */\n\tid: string;\n\t/**\n\t * Icon to display with the dropdown 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 dropdown item.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Whether this dropdown is currently expanded.\n\t */\n\tisExpanded: boolean;\n\t/**\n\t * Function to toggle this dropdown's expanded state.\n\t */\n\tonToggle: () => void;\n}\n\nexport default function DropdownItem( {\n\tclassName,\n\tid,\n\ticon,\n\tchildren,\n\tisExpanded,\n\tonToggle,\n}: DropdownItemProps ) {\n\tconst menuItems: MenuItem[] = useSelect(\n\t\t( select ) =>\n\t\t\t// @ts-ignore\n\t\t\tselect( STORE_NAME ).getMenuItems(),\n\t\t[]\n\t);\n\tconst items = menuItems.filter( ( item ) => item.parent === id );\n\tconst disableMotion = useReducedMotion();\n\treturn (\n\t\t<div className=\"boot-dropdown-item\">\n\t\t\t<Item\n\t\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t\t\tonClick={ ( e ) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\tonToggle();\n\t\t\t\t} }\n\t\t\t\tonMouseDown={ ( e ) => e.preventDefault() }\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tstyle={ { flexGrow: '1' } }\n\t\t\t\t>\n\t\t\t\t\t{ wrapIcon( icon, false ) }\n\t\t\t\t\t<FlexBlock>{ children }</FlexBlock>\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ chevronDownSmall }\n\t\t\t\t\t\tclassName={ clsx( 'boot-dropdown-item__chevron', {\n\t\t\t\t\t\t\t'is-up': isExpanded,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</Item>\n\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t{ isExpanded && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={ { height: 0 } }\n\t\t\t\t\t\tanimate={ { height: 'auto' } }\n\t\t\t\t\t\texit={ { height: 0 } }\n\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tclassName=\"boot-dropdown-item__children\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ items.map( ( item, index ) => (\n\t\t\t\t\t\t\t<NavigationItem\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\tto={ item.to }\n\t\t\t\t\t\t\t\tshouldShowPlaceholder={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t</NavigationItem>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='58e2debd11']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"58e2debd11\");\n\tstyle.appendChild(document.createTextNode(\".boot-dropdown-item__children{display:flex;flex-direction:column;margin-block-end:2px;margin-block-start:-2px;margin-inline-start:30px;overflow:hidden;padding:2px}.boot-dropdown-item__chevron.is-up{transform:rotate(180deg)}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
5
|
"mappings": ";AAGA,OAAO,UAAU;AAMjB;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EAEtB,wBAAwB;AAAA,EACxB;AAAA,EACA,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,OACvB;AACP,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAK1B,SAAS,kBAAkB;AAC3B,OAAO,oBAAoB;AAC3B,SAAS,gBAAgB;;;AC3BzB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,iOAAiO,CAAC;AAC5Q,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADsFI,SAMC,KAND;AA5DJ,IAAM,qBAAqB;AAiCZ,SAAR,aAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,QAAM,YAAwB;AAAA,IAC7B,CAAE;AAAA;AAAA,MAED,OAAQ,UAAW,EAAE,aAAa;AAAA;AAAA,IACnC,CAAC;AAAA,EACF;AACA,QAAM,QAAQ,UAAU,OAAQ,CAAE,SAAU,KAAK,WAAW,EAAG;AAC/D,QAAM,gBAAgB,iBAAiB;AACvC,SACC,qBAAC,SAAI,WAAU,sBACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAY,KAAM,wBAAwB,SAAU;AAAA,QACpD,SAAU,CAAE,MAAO;AAClB,YAAE,eAAe;AACjB,YAAE,gBAAgB;AAClB,mBAAS;AAAA,QACV;AAAA,QACA,aAAc,CAAE,MAAO,EAAE,eAAe;AAAA,QAExC;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,SAAU;AAAA,YACV,OAAQ,EAAE,UAAU,IAAI;AAAA,YAEtB;AAAA,uBAAU,MAAM,KAAM;AAAA,cACxB,oBAAC,aAAY,UAAU;AAAA,cACvB;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAO;AAAA,kBACP,WAAY,KAAM,+BAA+B;AAAA,oBAChD,SAAS;AAAA,kBACV,CAAE;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,mBAAgB,SAAU,OACxB,wBACD;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,SAAU,EAAE,QAAQ,EAAE;AAAA,QACtB,SAAU,EAAE,QAAQ,OAAO;AAAA,QAC3B,MAAO,EAAE,QAAQ,EAAE;AAAA,QACnB,YAAa;AAAA,UACZ,MAAM;AAAA,UACN,UAAU,gBAAgB,IAAI;AAAA,UAC9B,MAAM;AAAA,QACP;AAAA,QACA,WAAU;AAAA,QAER,gBAAM,IAAK,CAAE,MAAM,UACpB;AAAA,UAAC;AAAA;AAAA,YAEA,IAAK,KAAK;AAAA,YACV,uBAAwB;AAAA,YAEtB,eAAK;AAAA;AAAA,UAJD;AAAA,QAKP,CACC;AAAA;AAAA,IACH,GAEF;AAAA,KACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,9 +9,9 @@ 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" && !document.head.querySelector("style[data-wp-hash='
|
|
12
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='ead8c8ad15']")) {
|
|
13
13
|
const style = document.createElement("style");
|
|
14
|
-
style.setAttribute("data-wp-hash", "
|
|
14
|
+
style.setAttribute("data-wp-hash", "ead8c8ad15");
|
|
15
15
|
style.appendChild(document.createTextNode('.boot-navigation-item.components-item{align-items:center;border:none;color:var(--wpds-color-fg-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-fg-interactive-brand-active,#0073aa)}.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-fg-interactive-brand-active,#0073aa);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
|
}
|
|
@@ -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' && !document.head.querySelector(\"style[data-wp-hash='
|
|
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' && !document.head.querySelector(\"style[data-wp-hash='ead8c8ad15']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"ead8c8ad15\");\n\tstyle.appendChild(document.createTextNode(\".boot-navigation-item.components-item{align-items:center;border:none;color:var(--wpds-color-fg-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-fg-interactive-brand-active,#0073aa)}.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-fg-interactive-brand-active,#0073aa);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
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,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,ktCAAotC,CAAC;AAC/vC,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,9 +11,9 @@ 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" && !document.head.querySelector("style[data-wp-hash='
|
|
14
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='c52b1efb2f']")) {
|
|
15
15
|
const style = document.createElement("style");
|
|
16
|
-
style.setAttribute("data-wp-hash", "
|
|
16
|
+
style.setAttribute("data-wp-hash", "c52b1efb2f");
|
|
17
17
|
style.appendChild(document.createTextNode(".boot-navigation-screen{padding-block-end:4px}.boot-navigation-screen .components-text{color:var(--wpds-color-fg-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-fg-content-neutral,#1e1e1e);line-height:32px}.boot-navigation-screen__actions{display:flex;flex-shrink:0}"));
|
|
18
18
|
document.head.appendChild(style);
|
|
19
19
|
}
|
|
@@ -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' && !document.head.querySelector(\"style[data-wp-hash='
|
|
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' && !document.head.querySelector(\"style[data-wp-hash='c52b1efb2f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"c52b1efb2f\");\n\tstyle.appendChild(document.createTextNode(\".boot-navigation-screen{padding-block-end:4px}.boot-navigation-screen .components-text{color:var(--wpds-color-fg-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-fg-content-neutral,#1e1e1e);line-height:32px}.boot-navigation-screen__actions{display:flex;flex-shrink:0}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
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,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,yjBAAyjB,CAAC;AACpmB,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
|
}
|
|
@@ -20,10 +20,10 @@ import useRouteTitle from "../app/use-route-title.mjs";
|
|
|
20
20
|
import { unlock } from "../../lock-unlock.mjs";
|
|
21
21
|
|
|
22
22
|
// packages/boot/src/components/root/style.scss
|
|
23
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
23
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='d1ebf43fe1']")) {
|
|
24
24
|
const style = document.createElement("style");
|
|
25
|
-
style.setAttribute("data-wp-hash", "
|
|
26
|
-
style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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: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,#f0f0f0);bottom:0;box-shadow:2px 0 8px #0003;
|
|
25
|
+
style.setAttribute("data-wp-hash", "d1ebf43fe1");
|
|
26
|
+
style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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: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,#f0f0f0);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,#fff);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#ddd);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,#fff);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,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#ddd);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}}"));
|
|
27
27
|
document.head.appendChild(style);
|
|
28
28
|
}
|
|
29
29
|
|
|
@@ -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' && !document.head.querySelector(\"style[data-wp-hash='233642e6c4']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"233642e6c4\");\n\tstyle.appendChild(document.createTextNode(\".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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: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,#f0f0f0);bottom:0;box-shadow:2px 0 8px #0003;left: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,#fff);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#ddd);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-left:0;margin-top:0}}.boot-layout__inspector,.boot-layout__stage{background:var(--wpds-color-bg-surface-neutral,#fff);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__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,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#ddd);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.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,iBAAiB;AACpC,SAAS,UAAU;AACnB,SAAS,YAAY;AAKrB,OAAO,aAAa;AACpB,OAAO,eAAe;AACtB,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,SAAS,cAAc;;;AC7BvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,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 { 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' && !document.head.querySelector(\"style[data-wp-hash='d1ebf43fe1']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"d1ebf43fe1\");\n\tstyle.appendChild(document.createTextNode(\".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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: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,#f0f0f0);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,#fff);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#ddd);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,#fff);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,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#ddd);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,iBAAiB;AACpC,SAAS,UAAU;AACnB,SAAS,YAAY;AAKrB,OAAO,aAAa;AACpB,OAAO,eAAe;AACtB,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,SAAS,cAAc;;;AC7BvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,o9GAAo9G,CAAC;AAC//G,WAAS,KAAK,YAAY,KAAK;AAChC;;;AD2BA,SAAS,yBAAyB;AAqC5B,cA4EG,YA5EH;AAnCN,IAAM,EAAE,aAAa,YAAY,OAAO,IAAI,OAAQ,gBAAiB;AAEtD,SAAR,OAAwB;AAC9B,QAAM,UAAU,WAAW;AAC3B,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,QAAS,QAAQ,SAAS,CAAE;AACjD,QAAM,SAAW,cAAc,YAAqB;AAIpD,QAAM,qBAAuB,cAAc,YACxC;AACH,QAAM,eAAe,UAAU,CAAE,OAAO;AAExC,gBAAc;AAGd,QAAM,mBAAmB,iBAAkB,UAAU,GAAI;AACzD,QAAM,CAAE,qBAAqB,sBAAuB,IAAI,SAAU,KAAM;AACxE,QAAM,gBAAgB,iBAAiB;AAEvC,YAAW,MAAM;AAChB,2BAAwB,KAAM;AAAA,EAC/B,GAAG,CAAE,SAAS,UAAU,gBAAiB,CAAE;AAE3C,SACC,oBAAC,oBACA,8BAAC,qBAAkB,QAAM,MAAC,OAAQ,EAAE,IAAI,UAAU,GACjD,8BAAC,qBAAkB,OAAQ,EAAE,IAAI,UAAU,GAC1C;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,eAAe;AAAA,QAChC,cAAc,CAAC,CAAE,UAAU,WAAW;AAAA,QACtC,mBAAmB;AAAA,MACpB,CAAE;AAAA,MAEF;AAAA,4BAAC,aAAU;AAAA,QACX,oBAAC,mBAAgB,WAAU,0BAAyB;AAAA,QAClD,oBACD,oBAAC,KAAK,mBAAL,EACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,YACP,SAAU,MACT,uBAAwB,IAAK;AAAA,YAE9B,OAAQ,GAAI,uBAAwB;AAAA,YACpC,MAAK;AAAA;AAAA,QACN,GACD;AAAA,QAGD,oBAAC,mBACE,8BACD,uBACA,CAAE,gBACD;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,SAAU,EAAE,SAAS,EAAE;AAAA,YACvB,SAAU,EAAE,SAAS,EAAE;AAAA,YACvB,MAAO,EAAE,SAAS,EAAE;AAAA,YACpB,YAAa;AAAA,cACZ,MAAM;AAAA,cACN,UAAU,gBAAgB,IAAI;AAAA,cAC9B,MAAM;AAAA,YACP;AAAA,YACA,WAAU;AAAA,YACV,SAAU,MACT,uBAAwB,KAAM;AAAA,YAE/B,WAAY,CAAE,UAAW;AACxB,kBAAK,MAAM,QAAQ,UAAW;AAC7B,uCAAwB,KAAM;AAAA,cAC/B;AAAA,YACD;AAAA,YACA,MAAK;AAAA,YACL,UAAW;AAAA,YACX,cAAa;AAAA,cACZ;AAAA,YACD;AAAA;AAAA,QACD,GAEH;AAAA,QAEA,oBAAC,mBACE,8BACD,uBACA,CAAE,gBACD;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,SAAU,EAAE,GAAG,QAAQ;AAAA,YACvB,SAAU,EAAE,GAAG,EAAE;AAAA,YACjB,MAAO,EAAE,GAAG,QAAQ;AAAA,YACpB,YAAa;AAAA,cACZ,MAAM;AAAA,cACN,UAAU,gBAAgB,IAAI;AAAA,cAC9B,MAAM;AAAA,YACP;AAAA,YACA,WAAU;AAAA,YAEV,8BAAC,WAAQ;AAAA;AAAA,QACV,GAEH;AAAA,QAEE,CAAE,oBAAoB,CAAE,gBACzB,oBAAC,SAAI,WAAU,wBACd,8BAAC,WAAQ,GACV;AAAA,QAED,oBAAC,SAAI,WAAU,yBACd,+BAAC,qBAAkB,OAAQ,EAAE,IAAI,UAAU,GAC1C;AAAA,8BAAC,UAAO;AAAA,WAEJ,UAAU,WAAW,SACxB;AAAA,YAAC;AAAA;AAAA,cACA,WAAY;AAAA,gBACX;AAAA,gBACA;AAAA,kBACC,qBACC,QAAQ,aACR;AAAA,gBACF;AAAA,cACD;AAAA,cAEE;AAAA,wBAAQ,aACT,oBACC,oBAAC,SAAI,WAAU,sCACd;AAAA,kBAAC;AAAA;AAAA,oBACA,MAAO;AAAA,oBACP,SAAU,MACT;AAAA,sBACC;AAAA,oBACD;AAAA,oBAED,OAAQ;AAAA,sBACP;AAAA,oBACD;AAAA,oBACA,MAAK;AAAA;AAAA,gBACN,GACD;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACA;AAAA,oBACA;AAAA;AAAA,gBAGD;AAAA;AAAA;AAAA,UACD;AAAA,WAEF,GACD;AAAA;AAAA;AAAA,EACD,GACD,GACD,GACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,10 +8,10 @@ import CanvasRenderer from "../canvas-renderer/index.mjs";
|
|
|
8
8
|
import { unlock } from "../../lock-unlock.mjs";
|
|
9
9
|
|
|
10
10
|
// packages/boot/src/components/root/style.scss
|
|
11
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
11
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='d1ebf43fe1']")) {
|
|
12
12
|
const style = document.createElement("style");
|
|
13
|
-
style.setAttribute("data-wp-hash", "
|
|
14
|
-
style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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: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,#f0f0f0);bottom:0;box-shadow:2px 0 8px #0003;
|
|
13
|
+
style.setAttribute("data-wp-hash", "d1ebf43fe1");
|
|
14
|
+
style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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: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,#f0f0f0);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,#fff);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#ddd);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,#fff);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,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#ddd);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}}"));
|
|
15
15
|
document.head.appendChild(style);
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -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';\nimport { UserThemeProvider } from '../user-theme-provider';\n\nconst { useMatches, Outlet } = unlock( routePrivateApis );\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\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(\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<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 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</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' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe,wBAAwB;AAChD,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAKjC,OAAO,eAAe;AACtB,OAAO,oBAAoB;AAC3B,SAAS,cAAc;;;ACjBvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,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';\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';\nimport { UserThemeProvider } from '../user-theme-provider';\n\nconst { useMatches, Outlet } = unlock( routePrivateApis );\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\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(\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<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 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</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' && !document.head.querySelector(\"style[data-wp-hash='d1ebf43fe1']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"d1ebf43fe1\");\n\tstyle.appendChild(document.createTextNode(\".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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: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,#f0f0f0);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,#fff);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#ddd);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,#fff);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,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#ddd);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,wBAAwB;AAKjC,OAAO,eAAe;AACtB,OAAO,oBAAoB;AAC3B,SAAS,cAAc;;;ACjBvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,o9GAAo9G,CAAC;AAC//G,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADeA,OAAO,mBAAmB;AAC1B,SAAS,yBAAyB;AAkC5B,cAGC,YAHD;AAhCN,IAAM,EAAE,YAAY,OAAO,IAAI,OAAQ,gBAAiB;AAMzC,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,SACC,oBAAC,oBACA,8BAAC,qBAAkB,QAAM,MAAC,OAAQ,EAAE,IAAI,UAAU,GACjD,8BAAC,qBAAkB,OAAQ,EAAE,IAAI,UAAU,GAC1C;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA;AAAA,UACC,cAAc,CAAC,CAAE,UAAU,WAAW;AAAA,UACtC,mBAAmB;AAAA,QACpB;AAAA,MACD;AAAA,MAEA;AAAA,4BAAC,aAAU;AAAA,QACX,oBAAC,mBAAgB,WAAU,0BAAyB;AAAA,QACpD,oBAAC,SAAI,WAAU,yBACd,+BAAC,qBAAkB,OAAQ,EAAE,IAAI,UAAU,GAC1C;AAAA,8BAAC,UAAO;AAAA,WAEJ,UAAU,WAAW,SACxB,oBAAC,SAAI,WAAU,uBACd;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UAGD,GACD;AAAA,WAEF,GACD;AAAA;AAAA;AAAA,EACD,GACD,GACD,GACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,9 +9,9 @@ import { EntitiesSavedStates } from "@wordpress/editor";
|
|
|
9
9
|
import { Button, Modal, Tooltip } from "@wordpress/components";
|
|
10
10
|
|
|
11
11
|
// packages/boot/src/components/save-button/style.scss
|
|
12
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
12
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='a012fe845a']")) {
|
|
13
13
|
const style = document.createElement("style");
|
|
14
|
-
style.setAttribute("data-wp-hash", "
|
|
14
|
+
style.setAttribute("data-wp-hash", "a012fe845a");
|
|
15
15
|
style.appendChild(document.createTextNode(".boot-save-button{width:100%}"));
|
|
16
16
|
document.head.appendChild(style);
|
|
17
17
|
}
|
|
@@ -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, Tooltip } from '@wordpress/components';\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\u2026',\n\t\t\t\t'Review %d changes\u2026',\n\t\t\t\tdirtyEntityRecordsCount\n\t\t\t),\n\t\t\tdirtyEntityRecordsCount\n\t\t);\n\t};\n\tconst label = getLabel();\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip\n\t\t\t\ttext={ hasChanges ? label : undefined }\n\t\t\t\tshortcut={ displayShortcut.primary( 's' ) }\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tonClick={ () => setIsSaveViewOpened( true ) }\n\t\t\t\t\tonBlur={ hideSavedState }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tisBusy={ isSaving }\n\t\t\t\t\taria-keyshortcuts={ rawShortcut.primary( 's' ) }\n\t\t\t\t\tclassName=\"boot-save-button\"\n\t\t\t\t\ticon={ isInSavedState ? check : undefined }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</Button>\n\t\t\t</Tooltip>\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' && !document.head.querySelector(\"style[data-wp-hash='
|
|
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, Tooltip } from '@wordpress/components';\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\u2026',\n\t\t\t\t'Review %d changes\u2026',\n\t\t\t\tdirtyEntityRecordsCount\n\t\t\t),\n\t\t\tdirtyEntityRecordsCount\n\t\t);\n\t};\n\tconst label = getLabel();\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip\n\t\t\t\ttext={ hasChanges ? label : undefined }\n\t\t\t\tshortcut={ displayShortcut.primary( 's' ) }\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tonClick={ () => setIsSaveViewOpened( true ) }\n\t\t\t\t\tonBlur={ hideSavedState }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tisBusy={ isSaving }\n\t\t\t\t\taria-keyshortcuts={ rawShortcut.primary( 's' ) }\n\t\t\t\t\tclassName=\"boot-save-button\"\n\t\t\t\t\ticon={ isInSavedState ? check : undefined }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</Button>\n\t\t\t</Tooltip>\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' && !document.head.querySelector(\"style[data-wp-hash='a012fe845a']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"a012fe845a\");\n\tstyle.appendChild(document.createTextNode(\".boot-save-button{width:100%}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
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,OAAO,eAAe;;;ACVvC,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,+BAA+B,CAAC;AAC1E,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADWA,OAAO,qBAAqB;AAsE1B,mBAKE,KALF;AApEa,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;AAEvB,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAO,aAAa,QAAQ;AAAA,QAC5B,UAAW,gBAAgB,QAAS,GAAI;AAAA,QAExC;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAU,MAAM,oBAAqB,IAAK;AAAA,YAC1C,QAAS;AAAA,YACT;AAAA,YACA,wBAAsB;AAAA,YACtB,QAAS;AAAA,YACT,qBAAoB,YAAY,QAAS,GAAI;AAAA,YAC7C,WAAU;AAAA,YACV,MAAO,iBAAiB,QAAQ;AAAA,YAE9B;AAAA;AAAA,QACH;AAAA;AAAA,IACD;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
|
}
|
|
@@ -4,9 +4,9 @@ import Navigation from "../navigation/index.mjs";
|
|
|
4
4
|
import SaveButton from "../save-button/index.mjs";
|
|
5
5
|
|
|
6
6
|
// packages/boot/src/components/sidebar/style.scss
|
|
7
|
-
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='
|
|
7
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='e5d2041211']")) {
|
|
8
8
|
const style = document.createElement("style");
|
|
9
|
-
style.setAttribute("data-wp-hash", "
|
|
9
|
+
style.setAttribute("data-wp-hash", "e5d2041211");
|
|
10
10
|
style.appendChild(document.createTextNode(".boot-sidebar__scrollable{display:flex;flex-direction:column;height:100%;overflow:auto;position:relative}.boot-sidebar__content{contain:content;flex-grow:1;position:relative}.boot-sidebar__footer{padding:16px 8px 8px 16px}"));
|
|
11
11
|
document.head.appendChild(style);
|
|
12
12
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/sidebar/index.tsx", "../../../src/components/sidebar/style.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport SiteHub from '../site-hub';\nimport Navigation from '../navigation';\nimport SaveButton from '../save-button';\nimport './style.scss';\n\nexport default function Sidebar() {\n\treturn (\n\t\t<div className=\"boot-sidebar__scrollable\">\n\t\t\t<SiteHub />\n\t\t\t<div className=\"boot-sidebar__content\">\n\t\t\t\t<Navigation />\n\t\t\t</div>\n\t\t\t<div className=\"boot-sidebar__footer\">\n\t\t\t\t<SaveButton />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport SiteHub from '../site-hub';\nimport Navigation from '../navigation';\nimport SaveButton from '../save-button';\nimport './style.scss';\n\nexport default function Sidebar() {\n\treturn (\n\t\t<div className=\"boot-sidebar__scrollable\">\n\t\t\t<SiteHub />\n\t\t\t<div className=\"boot-sidebar__content\">\n\t\t\t\t<Navigation />\n\t\t\t</div>\n\t\t\t<div className=\"boot-sidebar__footer\">\n\t\t\t\t<SaveButton />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='e5d2041211']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e5d2041211\");\n\tstyle.appendChild(document.createTextNode(\".boot-sidebar__scrollable{display:flex;flex-direction:column;height:100%;overflow:auto;position:relative}.boot-sidebar__content{contain:content;flex-grow:1;position:relative}.boot-sidebar__footer{padding:16px 8px 8px 16px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
5
|
"mappings": ";AAGA,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,OAAO,gBAAgB;;;ACLvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,gOAAgO,CAAC;AAC3Q,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADKE,SACC,KADD;AAFa,SAAR,UAA2B;AACjC,SACC,qBAAC,SAAI,WAAU,4BACd;AAAA,wBAAC,WAAQ;AAAA,IACT,oBAAC,SAAI,WAAU,yBACd,8BAAC,cAAW,GACb;AAAA,IACA,oBAAC,SAAI,WAAU,wBACd,8BAAC,cAAW,GACb;AAAA,KACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,9 +16,9 @@ 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" && !document.head.querySelector("style[data-wp-hash='
|
|
19
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='78184fe2c5']")) {
|
|
20
20
|
const style = document.createElement("style");
|
|
21
|
-
style.setAttribute("data-wp-hash", "
|
|
21
|
+
style.setAttribute("data-wp-hash", "78184fe2c5");
|
|
22
22
|
style.appendChild(document.createTextNode(".boot-site-hub{align-items:center;background-color:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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,2px) solid var(--wpds-color-stroke-focus-brand,#0073aa);outline-offset:calc(var(--wpds-border-width-focus, 2px)*-1)}.boot-site-hub__title-text{color:var(--wpds-color-fg-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-fg-content-neutral-weak,#757575);font-size:12px}"));
|
|
23
23
|
document.head.appendChild(style);
|
|
24
24
|
}
|
|
@@ -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' && !document.head.querySelector(\"style[data-wp-hash='
|
|
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' && !document.head.querySelector(\"style[data-wp-hash='78184fe2c5']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"78184fe2c5\");\n\tstyle.appendChild(document.createTextNode(\".boot-site-hub{align-items:center;background-color:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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,2px) solid var(--wpds-color-stroke-focus-brand,#0073aa);outline-offset:calc(var(--wpds-border-width-focus, 2px)*-1)}.boot-site-hub__title-text{color:var(--wpds-color-fg-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-fg-content-neutral-weak,#757575);font-size:12px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
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,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,ssCAAssC,CAAC;AACjvC,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,9 +6,9 @@ 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" && !document.head.querySelector("style[data-wp-hash='
|
|
9
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='1a8e849690']")) {
|
|
10
10
|
const style = document.createElement("style");
|
|
11
|
-
style.setAttribute("data-wp-hash", "
|
|
11
|
+
style.setAttribute("data-wp-hash", "1a8e849690");
|
|
12
12
|
style.appendChild(document.createTextNode(".boot-site-icon{display:flex}.boot-site-icon__icon{fill:var(--wpds-color-fg-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
|
}
|
|
@@ -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' && !document.head.querySelector(\"style[data-wp-hash='
|
|
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' && !document.head.querySelector(\"style[data-wp-hash='1a8e849690']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"1a8e849690\");\n\tstyle.appendChild(document.createTextNode(\".boot-site-icon{display:flex}.boot-site-icon__icon{fill:var(--wpds-color-fg-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
5
|
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,iBAAiB;AAC1B,SAAS,MAAM,iBAAiB;AAChC,SAAS,UAAU;AACnB,SAAS,SAAS,qBAAqB;;;ACXvC,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,6PAA6P,CAAC;AACxS,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,9 +5,9 @@ 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" && !document.head.querySelector("style[data-wp-hash='
|
|
8
|
+
if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='3de37b6316']")) {
|
|
9
9
|
const style = document.createElement("style");
|
|
10
|
-
style.setAttribute("data-wp-hash", "
|
|
10
|
+
style.setAttribute("data-wp-hash", "3de37b6316");
|
|
11
11
|
style.appendChild(document.createTextNode(".boot-site-icon-link{align-items:center;background:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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,2px) solid var(--wpds-color-stroke-focus-brand,#0073aa);outline-offset:calc(var(--wpds-border-width-focus, 2px)*-1)}"));
|
|
12
12
|
document.head.appendChild(style);
|
|
13
13
|
}
|
|
@@ -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 } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\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 text={ props[ 'aria-label' ] } placement=\"right\">\n\t\t\t<Link\n\t\t\t\tto={ to }\n\t\t\t\taria-label={ props[ 'aria-label' ] }\n\t\t\t\tclassName=\"boot-site-icon-link\"\n\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t// If possible, restore the previous page with\n\t\t\t\t\t// filters etc.\n\t\t\t\t\tif ( canGoBack && isBackButton ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\trouter.history.back();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<SiteIcon />\n\t\t\t</Link>\n\t\t</Tooltip>\n\t);\n}\n\nexport default SiteIconLink;\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Link, privateApis as routePrivateApis } from '@wordpress/route';\nimport { Tooltip } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\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 text={ props[ 'aria-label' ] } placement=\"right\">\n\t\t\t<Link\n\t\t\t\tto={ to }\n\t\t\t\taria-label={ props[ 'aria-label' ] }\n\t\t\t\tclassName=\"boot-site-icon-link\"\n\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t// If possible, restore the previous page with\n\t\t\t\t\t// filters etc.\n\t\t\t\t\tif ( canGoBack && isBackButton ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\trouter.history.back();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<SiteIcon />\n\t\t\t</Link>\n\t\t</Tooltip>\n\t);\n}\n\nexport default SiteIconLink;\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='3de37b6316']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"3de37b6316\");\n\tstyle.appendChild(document.createTextNode(\".boot-site-icon-link{align-items:center;background:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);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,2px) solid var(--wpds-color-stroke-focus-brand,#0073aa);outline-offset:calc(var(--wpds-border-width-focus, 2px)*-1)}\"));\n\tdocument.head.appendChild(style);\n}\n"],
|
|
5
5
|
"mappings": ";AAGA,SAAS,MAAM,eAAe,wBAAwB;AACtD,SAAS,eAAe;AAKxB,SAAS,cAAc;AACvB,OAAO,cAAc;;;ACVrB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,0dAA0d,CAAC;AACrgB,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADqCI;AA7BJ,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,oBAAC,WAAQ,MAAO,MAAO,YAAa,GAAI,WAAU,SACjD;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,cAAa,MAAO,YAAa;AAAA,MACjC,WAAU;AAAA,MACV,SAAU,CAAE,UAAW;AAGtB,YAAK,aAAa,cAAe;AAChC,gBAAM,eAAe;AACrB,iBAAO,QAAQ,KAAK;AAAA,QACrB;AAAA,MACD;AAAA,MAEA,8BAAC,YAAS;AAAA;AAAA,EACX,GACD;AAEF;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|