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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build-module/components/canvas/back-button.mjs +17 -62
  3. package/build-module/components/canvas/back-button.mjs.map +2 -2
  4. package/build-module/components/root/index.mjs +6 -3
  5. package/build-module/components/root/index.mjs.map +2 -2
  6. package/build-module/components/root/single-page.mjs +6 -3
  7. package/build-module/components/root/single-page.mjs.map +2 -2
  8. package/build-module/components/root/use-sync-body-background.mjs +26 -0
  9. package/build-module/components/root/use-sync-body-background.mjs.map +7 -0
  10. package/build-module/components/sidebar/index.mjs +4 -6
  11. package/build-module/components/sidebar/index.mjs.map +2 -2
  12. package/build-module/index.mjs +6 -6
  13. package/build-module/index.mjs.map +2 -2
  14. package/build-style/style-rtl.css +19 -51
  15. package/build-style/style.css +19 -51
  16. package/build-style/view-transitions-rtl.css +0 -13
  17. package/build-style/view-transitions.css +0 -13
  18. package/build-types/components/canvas/back-button.d.ts +4 -7
  19. package/build-types/components/canvas/back-button.d.ts.map +1 -1
  20. package/build-types/components/root/index.d.ts.map +1 -1
  21. package/build-types/components/root/single-page.d.ts.map +1 -1
  22. package/build-types/components/root/use-sync-body-background.d.ts +13 -0
  23. package/build-types/components/root/use-sync-body-background.d.ts.map +1 -0
  24. package/build-types/components/sidebar/index.d.ts +0 -5
  25. package/build-types/components/sidebar/index.d.ts.map +1 -1
  26. package/package.json +25 -25
  27. package/src/components/canvas/back-button.scss +0 -8
  28. package/src/components/canvas/back-button.tsx +9 -67
  29. package/src/components/root/index.tsx +4 -0
  30. package/src/components/root/single-page.tsx +4 -0
  31. package/src/components/root/style.scss +15 -1
  32. package/src/components/root/use-sync-body-background.ts +41 -0
  33. package/src/components/sidebar/index.tsx +1 -9
  34. package/src/components/sidebar/style.scss +1 -1
  35. package/src/style.scss +0 -1
  36. package/src/view-transitions.scss +0 -18
  37. package/build-module/components/site-hub/index.mjs +0 -78
  38. package/build-module/components/site-hub/index.mjs.map +0 -7
  39. package/build-module/components/site-icon/index.mjs +0 -57
  40. package/build-module/components/site-icon/index.mjs.map +0 -7
  41. package/build-module/components/site-icon-link/index.mjs +0 -53
  42. package/build-module/components/site-icon-link/index.mjs.map +0 -7
  43. package/build-style/experimental-omnibar-rtl.css +0 -37
  44. package/build-style/experimental-omnibar.css +0 -37
  45. package/build-types/components/site-hub/index.d.ts +0 -4
  46. package/build-types/components/site-hub/index.d.ts.map +0 -1
  47. package/build-types/components/site-icon/index.d.ts +0 -9
  48. package/build-types/components/site-icon/index.d.ts.map +0 -1
  49. package/build-types/components/site-icon-link/index.d.ts +0 -8
  50. package/build-types/components/site-icon-link/index.d.ts.map +0 -1
  51. package/src/components/site-hub/index.tsx +0 -77
  52. package/src/components/site-hub/style.scss +0 -69
  53. package/src/components/site-icon/index.tsx +0 -60
  54. package/src/components/site-icon/style.scss +0 -19
  55. package/src/components/site-icon-link/index.tsx +0 -57
  56. package/src/components/site-icon-link/style.scss +0 -24
  57. package/src/experimental-omnibar.scss +0 -48
@@ -1,69 +0,0 @@
1
- @use "@wordpress/base-styles/variables";
2
-
3
- .boot-site-hub {
4
- position: sticky;
5
- top: 0;
6
- background-color: var(--wpds-color-background-surface-neutral-weak);
7
- z-index: 1;
8
- display: grid;
9
- grid-template-columns: 60px 1fr auto;
10
- align-items: center;
11
- padding-right: variables.$grid-unit-20;
12
- flex-shrink: 0; // Prevent flex parent from shrinking this element.
13
- }
14
-
15
- .boot-site-hub__actions {
16
- flex-shrink: 0;
17
- }
18
-
19
- .boot-site-hub__title {
20
- display: flex;
21
- align-items: center;
22
- text-decoration: none;
23
-
24
- .components-external-link__contents {
25
- text-decoration: none;
26
- margin-inline-start: variables.$grid-unit-05;
27
- overflow: hidden;
28
- max-width: 140px;
29
- }
30
-
31
- // Show icon on hover
32
- .components-external-link__icon {
33
- opacity: 0;
34
- transition: opacity 0.1s ease-out;
35
- }
36
-
37
- &:hover .components-external-link__icon {
38
- opacity: 1;
39
- }
40
-
41
- // Focus styles
42
- @media not (prefers-reduced-motion) {
43
- transition: outline 0.1s ease-out;
44
- }
45
-
46
- &:focus:not(:active) {
47
- outline:
48
- var(--wpds-border-width-focus) solid
49
- var(--wpds-color-stroke-focus);
50
- outline-offset: calc(-1 * var(--wpds-border-width-focus));
51
- }
52
- }
53
-
54
- .boot-site-hub__title-text {
55
- color: var(--wpds-color-foreground-content-neutral);
56
- font-size: variables.$font-size-medium;
57
- font-weight: variables.$font-weight-medium;
58
- overflow: hidden;
59
- text-overflow: ellipsis;
60
- white-space: nowrap;
61
- }
62
-
63
- .boot-site-hub__url {
64
- color: var(--wpds-color-foreground-content-neutral-weak);
65
- font-size: variables.$font-size-small;
66
- overflow: hidden;
67
- text-overflow: ellipsis;
68
- white-space: nowrap;
69
- }
@@ -1,60 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import clsx from 'clsx';
5
-
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { useSelect } from '@wordpress/data';
10
- import { Icon, wordpress } from '@wordpress/icons';
11
- import { __ } from '@wordpress/i18n';
12
- import { store as coreDataStore } from '@wordpress/core-data';
13
- import type { UnstableBase } from '@wordpress/core-data';
14
-
15
- /**
16
- * Internal dependencies
17
- */
18
- import './style.scss';
19
-
20
- function SiteIcon( { className }: { className?: string } ) {
21
- const { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {
22
- const { getEntityRecord } = select( coreDataStore );
23
- const siteData = getEntityRecord< UnstableBase >(
24
- 'root',
25
- '__unstableBase',
26
- undefined
27
- );
28
-
29
- return {
30
- isRequestingSite: ! siteData,
31
- siteIconUrl: siteData?.site_icon_url,
32
- };
33
- }, [] );
34
-
35
- let icon = null;
36
-
37
- if ( isRequestingSite && ! siteIconUrl ) {
38
- icon = <div className="boot-site-icon__image" />;
39
- } else {
40
- icon = siteIconUrl ? (
41
- <img
42
- className="boot-site-icon__image"
43
- alt={ __( 'Site Icon' ) }
44
- src={ siteIconUrl }
45
- />
46
- ) : (
47
- <Icon
48
- className="boot-site-icon__icon"
49
- icon={ wordpress }
50
- size={ 48 }
51
- />
52
- );
53
- }
54
-
55
- return (
56
- <div className={ clsx( className, 'boot-site-icon' ) }>{ icon }</div>
57
- );
58
- }
59
-
60
- export default SiteIcon;
@@ -1,19 +0,0 @@
1
- @use "@wordpress/base-styles/variables";
2
-
3
- .boot-site-icon {
4
- display: flex;
5
- }
6
-
7
- .boot-site-icon__icon {
8
- width: variables.$grid-unit-40;
9
- height: variables.$grid-unit-40;
10
- fill: var(--wpds-color-foreground-content-neutral);
11
- }
12
-
13
- .boot-site-icon__image {
14
- width: variables.$grid-unit-40;
15
- height: variables.$grid-unit-40;
16
- object-fit: cover;
17
- aspect-ratio: 1 / 1;
18
- border-radius: var(--wpds-border-radius-md);
19
- }
@@ -1,57 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { Link, privateApis as routePrivateApis } from '@wordpress/route';
5
- import { Tooltip } from '@wordpress/ui';
6
-
7
- /**
8
- * Internal dependencies
9
- */
10
- import { unlock } from '../../lock-unlock';
11
-
12
- import SiteIcon from '../site-icon';
13
- import './style.scss';
14
-
15
- const { useCanGoBack, useRouter } = unlock( routePrivateApis );
16
-
17
- function SiteIconLink( {
18
- to,
19
- isBackButton,
20
- ...props
21
- }: {
22
- to: string;
23
- 'aria-label': string;
24
- isBackButton?: boolean;
25
- } ) {
26
- const router = useRouter();
27
- const canGoBack = useCanGoBack();
28
-
29
- return (
30
- <Tooltip.Root>
31
- <Tooltip.Trigger
32
- render={
33
- <Link
34
- to={ to }
35
- aria-label={ props[ 'aria-label' ] }
36
- className="boot-site-icon-link"
37
- onClick={ ( event ) => {
38
- // If possible, restore the previous page with
39
- // filters etc.
40
- if ( canGoBack && isBackButton ) {
41
- event.preventDefault();
42
- router.history.back();
43
- }
44
- } }
45
- >
46
- <SiteIcon />
47
- </Link>
48
- }
49
- />
50
- <Tooltip.Popup positioner={ <Tooltip.Positioner side="right" /> }>
51
- { props[ 'aria-label' ] }
52
- </Tooltip.Popup>
53
- </Tooltip.Root>
54
- );
55
- }
56
-
57
- export default SiteIconLink;
@@ -1,24 +0,0 @@
1
- @use "@wordpress/base-styles/variables";
2
-
3
- $header-height: variables.$header-height;
4
-
5
- .boot-site-icon-link {
6
- width: $header-height;
7
- height: $header-height;
8
- display: inline-flex;
9
- align-items: center;
10
- justify-content: center;
11
- background: var(--wpds-color-background-surface-neutral-weak);
12
- text-decoration: none;
13
-
14
- @media not (prefers-reduced-motion) {
15
- transition: outline 0.1s ease-out;
16
- }
17
-
18
- &:focus:not(:active) {
19
- outline:
20
- var(--wpds-border-width-focus) solid
21
- var(--wpds-color-stroke-focus);
22
- outline-offset: calc(-1 * var(--wpds-border-width-focus));
23
- }
24
- }
@@ -1,48 +0,0 @@
1
- // Styles for the experimental omnibar.
2
-
3
- body.has-admin-bar-in-editor {
4
- #wpadminbar {
5
- display: block;
6
- }
7
-
8
- .boot-canvas-back-button__link {
9
- background: transparent;
10
- }
11
-
12
- .boot-canvas-back-button__icon {
13
- background-color: transparent;
14
- }
15
-
16
- #site-editor-v2-app {
17
- position: fixed;
18
- top: 32px;
19
- left: 0;
20
- right: 0;
21
- bottom: 0;
22
- height: calc(100vh - 32px) !important;
23
- }
24
-
25
- .boot-layout.has-full-canvas .boot-layout__canvas {
26
- top: 32px;
27
- height: calc(100vh - 32px);
28
- }
29
-
30
- @media (max-width: 782px) {
31
- #site-editor-v2-app {
32
- top: 46px;
33
- height: calc(100vh - 46px) !important;
34
- }
35
-
36
- .boot-layout__stage,
37
- .boot-layout__inspector,
38
- .boot-layout__canvas:not(.has-mobile-drawer),
39
- .boot-layout.has-full-canvas .boot-layout__canvas {
40
- top: 46px;
41
- height: calc(100vh - 46px);
42
- }
43
-
44
- .boot-layout__mobile-sidebar-drawer {
45
- top: 46px;
46
- }
47
- }
48
- }