@wordpress/edit-site 5.8.0 → 5.9.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 (122) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/add-new-template/new-template.js +2 -1
  3. package/build/components/add-new-template/new-template.js.map +1 -1
  4. package/build/components/block-editor/index.js +7 -7
  5. package/build/components/block-editor/index.js.map +1 -1
  6. package/build/components/editor-canvas-container/index.js +117 -0
  7. package/build/components/editor-canvas-container/index.js.map +1 -0
  8. package/build/components/global-styles/border-panel.js +50 -4
  9. package/build/components/global-styles/border-panel.js.map +1 -1
  10. package/build/components/global-styles/filters-panel.js +6 -1
  11. package/build/components/global-styles/filters-panel.js.map +1 -1
  12. package/build/components/global-styles/global-styles-provider.js +4 -18
  13. package/build/components/global-styles/global-styles-provider.js.map +1 -1
  14. package/build/components/global-styles/ui.js +7 -14
  15. package/build/components/global-styles/ui.js.map +1 -1
  16. package/build/components/header-edit-mode/index.js +11 -7
  17. package/build/components/header-edit-mode/index.js.map +1 -1
  18. package/build/components/layout/index.js +9 -7
  19. package/build/components/layout/index.js.map +1 -1
  20. package/build/components/list/table.js +3 -3
  21. package/build/components/list/table.js.map +1 -1
  22. package/build/components/sidebar-edit-mode/global-styles-sidebar.js +28 -13
  23. package/build/components/sidebar-edit-mode/global-styles-sidebar.js.map +1 -1
  24. package/build/components/site-hub/index.js +38 -16
  25. package/build/components/site-hub/index.js.map +1 -1
  26. package/build/components/site-icon/index.js +8 -7
  27. package/build/components/site-icon/index.js.map +1 -1
  28. package/build/components/start-template-options/index.js +9 -8
  29. package/build/components/start-template-options/index.js.map +1 -1
  30. package/build/components/style-book/index.js +9 -41
  31. package/build/components/style-book/index.js.map +1 -1
  32. package/build/components/sync-state-with-url/use-init-edited-entity-from-url.js +5 -3
  33. package/build/components/sync-state-with-url/use-init-edited-entity-from-url.js.map +1 -1
  34. package/build/components/template-details/index.js +3 -1
  35. package/build/components/template-details/index.js.map +1 -1
  36. package/build/hooks/commands/use-navigation-commands.js +9 -0
  37. package/build/hooks/commands/use-navigation-commands.js.map +1 -1
  38. package/build/hooks/commands/use-wp-admin-commands.js +4 -1
  39. package/build/hooks/commands/use-wp-admin-commands.js.map +1 -1
  40. package/build/store/private-actions.js +19 -1
  41. package/build/store/private-actions.js.map +1 -1
  42. package/build/store/private-selectors.js +13 -0
  43. package/build/store/private-selectors.js.map +1 -1
  44. package/build/store/reducer.js +23 -1
  45. package/build/store/reducer.js.map +1 -1
  46. package/build-module/components/add-new-template/new-template.js +3 -2
  47. package/build-module/components/add-new-template/new-template.js.map +1 -1
  48. package/build-module/components/block-editor/index.js +6 -6
  49. package/build-module/components/block-editor/index.js.map +1 -1
  50. package/build-module/components/editor-canvas-container/index.js +100 -0
  51. package/build-module/components/editor-canvas-container/index.js.map +1 -0
  52. package/build-module/components/global-styles/border-panel.js +51 -4
  53. package/build-module/components/global-styles/border-panel.js.map +1 -1
  54. package/build-module/components/global-styles/filters-panel.js +6 -1
  55. package/build-module/components/global-styles/filters-panel.js.map +1 -1
  56. package/build-module/components/global-styles/global-styles-provider.js +5 -19
  57. package/build-module/components/global-styles/global-styles-provider.js.map +1 -1
  58. package/build-module/components/global-styles/ui.js +6 -14
  59. package/build-module/components/global-styles/ui.js.map +1 -1
  60. package/build-module/components/header-edit-mode/index.js +10 -7
  61. package/build-module/components/header-edit-mode/index.js.map +1 -1
  62. package/build-module/components/layout/index.js +8 -7
  63. package/build-module/components/layout/index.js.map +1 -1
  64. package/build-module/components/list/table.js +3 -3
  65. package/build-module/components/list/table.js.map +1 -1
  66. package/build-module/components/sidebar-edit-mode/global-styles-sidebar.js +28 -15
  67. package/build-module/components/sidebar-edit-mode/global-styles-sidebar.js.map +1 -1
  68. package/build-module/components/site-hub/index.js +40 -18
  69. package/build-module/components/site-hub/index.js.map +1 -1
  70. package/build-module/components/site-icon/index.js +8 -7
  71. package/build-module/components/site-icon/index.js.map +1 -1
  72. package/build-module/components/start-template-options/index.js +9 -8
  73. package/build-module/components/start-template-options/index.js.map +1 -1
  74. package/build-module/components/style-book/index.js +10 -41
  75. package/build-module/components/style-book/index.js.map +1 -1
  76. package/build-module/components/sync-state-with-url/use-init-edited-entity-from-url.js +5 -3
  77. package/build-module/components/sync-state-with-url/use-init-edited-entity-from-url.js.map +1 -1
  78. package/build-module/components/template-details/index.js +3 -1
  79. package/build-module/components/template-details/index.js.map +1 -1
  80. package/build-module/hooks/commands/use-navigation-commands.js +8 -0
  81. package/build-module/hooks/commands/use-navigation-commands.js.map +1 -1
  82. package/build-module/hooks/commands/use-wp-admin-commands.js +3 -1
  83. package/build-module/hooks/commands/use-wp-admin-commands.js.map +1 -1
  84. package/build-module/store/private-actions.js +15 -0
  85. package/build-module/store/private-actions.js.map +1 -1
  86. package/build-module/store/private-selectors.js +11 -0
  87. package/build-module/store/private-selectors.js.map +1 -1
  88. package/build-module/store/reducer.js +23 -1
  89. package/build-module/store/reducer.js.map +1 -1
  90. package/build-style/style-rtl.css +113 -61
  91. package/build-style/style.css +113 -61
  92. package/package.json +34 -34
  93. package/src/components/add-new-template/new-template.js +3 -0
  94. package/src/components/block-editor/index.js +8 -8
  95. package/src/components/editor-canvas-container/index.js +115 -0
  96. package/src/components/editor-canvas-container/style.scss +19 -0
  97. package/src/components/global-styles/border-panel.js +43 -2
  98. package/src/components/global-styles/filters-panel.js +7 -1
  99. package/src/components/global-styles/global-styles-provider.js +4 -18
  100. package/src/components/global-styles/ui.js +10 -6
  101. package/src/components/header-edit-mode/index.js +14 -5
  102. package/src/components/layout/index.js +9 -16
  103. package/src/components/layout/style.scss +31 -4
  104. package/src/components/list/table.js +16 -2
  105. package/src/components/secondary-sidebar/style.scss +23 -5
  106. package/src/components/sidebar/style.scss +2 -1
  107. package/src/components/sidebar-edit-mode/global-styles-sidebar.js +36 -17
  108. package/src/components/site-hub/index.js +50 -22
  109. package/src/components/site-icon/index.js +6 -11
  110. package/src/components/site-icon/style.scss +8 -3
  111. package/src/components/start-template-options/index.js +13 -12
  112. package/src/components/start-template-options/style.scss +12 -30
  113. package/src/components/style-book/index.js +7 -51
  114. package/src/components/style-book/style.scss +0 -18
  115. package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js +4 -3
  116. package/src/components/template-details/index.js +1 -0
  117. package/src/hooks/commands/use-navigation-commands.js +9 -0
  118. package/src/hooks/commands/use-wp-admin-commands.js +3 -1
  119. package/src/store/private-actions.js +14 -0
  120. package/src/store/private-selectors.js +11 -0
  121. package/src/store/reducer.js +18 -0
  122. package/src/style.scss +1 -0
@@ -1949,6 +1949,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
1949
1949
  min-width: 24px;
1950
1950
  }
1951
1951
 
1952
+ /**
1953
+ * Note that this CSS file should be in sync with its counterpart in the other editor:
1954
+ * packages/edit-post/src/components/secondary-sidebar/style.scss
1955
+ */
1952
1956
  .edit-site-editor__inserter-panel,
1953
1957
  .edit-site-editor__list-view-panel {
1954
1958
  height: 100%;
@@ -1956,8 +1960,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
1956
1960
  flex-direction: column;
1957
1961
  }
1958
1962
 
1959
- .edit-site-editor__list-view-panel {
1960
- min-width: 350px;
1963
+ @media (min-width: 782px) {
1964
+ .edit-site-editor__list-view-panel {
1965
+ width: 350px;
1966
+ }
1961
1967
  }
1962
1968
 
1963
1969
  .edit-site-editor__inserter-panel-header {
@@ -1989,8 +1995,38 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
1989
1995
  }
1990
1996
 
1991
1997
  .edit-site-editor__list-view-panel-content {
1992
- overflow-y: auto;
1993
- padding: 8px;
1998
+ height: 100%;
1999
+ scrollbar-width: thin;
2000
+ scrollbar-gutter: stable both-edges;
2001
+ scrollbar-color: transparent transparent;
2002
+ will-change: transform;
2003
+ overflow: auto;
2004
+ scrollbar-gutter: auto;
2005
+ padding: 8px 6px;
2006
+ }
2007
+ .edit-site-editor__list-view-panel-content::-webkit-scrollbar {
2008
+ width: 12px;
2009
+ height: 12px;
2010
+ }
2011
+ .edit-site-editor__list-view-panel-content::-webkit-scrollbar-track {
2012
+ background-color: transparent;
2013
+ }
2014
+ .edit-site-editor__list-view-panel-content::-webkit-scrollbar-thumb {
2015
+ background-color: transparent;
2016
+ border-radius: 8px;
2017
+ border: 3px solid transparent;
2018
+ background-clip: padding-box;
2019
+ }
2020
+ .edit-site-editor__list-view-panel-content:hover::-webkit-scrollbar-thumb, .edit-site-editor__list-view-panel-content:focus::-webkit-scrollbar-thumb, .edit-site-editor__list-view-panel-content:focus-within::-webkit-scrollbar-thumb {
2021
+ background-color: #949494;
2022
+ }
2023
+ .edit-site-editor__list-view-panel-content:hover, .edit-site-editor__list-view-panel-content:focus, .edit-site-editor__list-view-panel-content:focus-within {
2024
+ scrollbar-color: #949494 transparent;
2025
+ }
2026
+ @media (hover: none) {
2027
+ .edit-site-editor__list-view-panel-content {
2028
+ scrollbar-color: #949494 transparent;
2029
+ }
1994
2030
  }
1995
2031
 
1996
2032
  .edit-site-welcome-guide {
@@ -2027,43 +2063,23 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2027
2063
  vertical-align: text-top;
2028
2064
  }
2029
2065
 
2030
- @media (min-width: 600px) {
2031
- .edit-site-start-template-options__modal.components-modal__frame {
2032
- width: calc(100% - 32px);
2033
- height: calc(100% - 120px);
2034
- }
2066
+ .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
2067
+ column-count: 2;
2068
+ column-gap: 24px;
2069
+ padding-top: 2px;
2035
2070
  }
2036
2071
  @media (min-width: 782px) {
2037
- .edit-site-start-template-options__modal.components-modal__frame {
2038
- width: 50%;
2072
+ .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
2073
+ column-count: 3;
2039
2074
  }
2040
2075
  }
2041
- @media (min-width: 960px) {
2042
- .edit-site-start-template-options__modal.components-modal__frame {
2043
- height: -moz-fit-content;
2044
- height: fit-content;
2076
+ @media (min-width: 1280px) {
2077
+ .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
2078
+ column-count: 4;
2045
2079
  }
2046
2080
  }
2047
-
2048
- .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
2049
- display: grid;
2050
- width: 100%;
2051
- margin-top: 4px;
2052
- gap: 24px;
2053
- grid-template-columns: repeat(auto-fit, minmax(min(100% / 2, max(240px, 100% / 10)), 1fr));
2054
- }
2055
2081
  .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2056
2082
  break-inside: avoid-column;
2057
- margin-bottom: 0;
2058
- width: 100%;
2059
- aspect-ratio: 3/4;
2060
- }
2061
- .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
2062
- height: 100%;
2063
- }
2064
- .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content {
2065
- width: 100%;
2066
- position: absolute;
2067
2083
  }
2068
2084
  .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title {
2069
2085
  display: none;
@@ -2075,6 +2091,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2075
2091
  position: absolute;
2076
2092
  padding: 0;
2077
2093
  background: #f0f0f0;
2094
+ min-height: 160px;
2078
2095
  }
2079
2096
  .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:nth-last-child(2) .block-editor-block-preview__container::after {
2080
2097
  width: 100%;
@@ -2152,7 +2169,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2152
2169
  z-index: 3;
2153
2170
  }
2154
2171
  .edit-site-layout.is-full-canvas.is-edit-mode .edit-site-layout__hub {
2155
- width: auto;
2172
+ width: 60px;
2156
2173
  padding-left: 0;
2157
2174
  }
2158
2175
  @media (min-width: 782px) {
@@ -2260,6 +2277,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2260
2277
  }
2261
2278
  .edit-site-layout.is-full-canvas .edit-site-layout__canvas > div {
2262
2279
  border-radius: 0;
2280
+ box-shadow: none;
2263
2281
  }
2264
2282
 
2265
2283
  .edit-site-layout__canvas .interface-interface-skeleton {
@@ -2270,13 +2288,19 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2270
2288
  .edit-site-layout__view-mode-toggle.components-button {
2271
2289
  position: relative;
2272
2290
  color: #fff;
2273
- height: 100%;
2274
- width: 100%;
2275
- border-radius: 2px;
2291
+ border-radius: 0;
2292
+ height: 60px;
2293
+ width: 60px;
2294
+ overflow: hidden;
2276
2295
  padding: 0;
2277
2296
  display: flex;
2278
2297
  align-items: center;
2279
2298
  justify-content: center;
2299
+ border-bottom: 1px solid transparent;
2300
+ }
2301
+ .edit-site-layout.is-full-canvas.is-edit-mode .edit-site-layout__view-mode-toggle.components-button {
2302
+ border-bottom-color: #e0e0e0;
2303
+ transition: border-bottom-color 0.15s 0.4s ease-out;
2280
2304
  }
2281
2305
  .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
2282
2306
  color: #fff;
@@ -2308,6 +2332,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2308
2332
  .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
2309
2333
  display: flex;
2310
2334
  border-radius: 2px;
2335
+ height: 64px;
2336
+ width: 64px;
2337
+ justify-content: center;
2338
+ align-items: center;
2311
2339
  }
2312
2340
 
2313
2341
  .edit-site-layout__actions {
@@ -2334,6 +2362,15 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2334
2362
  }
2335
2363
  }
2336
2364
 
2365
+ @media (min-width: 782px) {
2366
+ .edit-site-layout.has-fixed-toolbar .edit-site-site-hub {
2367
+ z-index: 4;
2368
+ }
2369
+ .edit-site-layout.has-fixed-toolbar .edit-site-layout__header:focus-within {
2370
+ z-index: 3;
2371
+ }
2372
+ }
2373
+
2337
2374
  .edit-site-save-hub {
2338
2375
  color: #949494;
2339
2376
  }
@@ -2359,9 +2396,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2359
2396
  overflow-y: auto;
2360
2397
  }
2361
2398
  .edit-site-sidebar__content .components-navigator-screen {
2362
- visibility: hidden;
2363
- scrollbar-color: #757575 #1e1e1e;
2364
2399
  scrollbar-width: thin;
2400
+ scrollbar-gutter: stable both-edges;
2401
+ scrollbar-color: transparent transparent;
2402
+ will-change: transform;
2365
2403
  scrollbar-gutter: stable;
2366
2404
  }
2367
2405
  .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar {
@@ -2369,16 +2407,24 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2369
2407
  height: 12px;
2370
2408
  }
2371
2409
  .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar-track {
2372
- background-color: #1e1e1e;
2410
+ background-color: transparent;
2373
2411
  }
2374
2412
  .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar-thumb {
2375
- background-color: #757575;
2413
+ background-color: transparent;
2376
2414
  border-radius: 8px;
2377
2415
  border: 3px solid transparent;
2378
2416
  background-clip: padding-box;
2379
2417
  }
2380
- .edit-site-sidebar__content .components-navigator-screen:hover, .edit-site-sidebar__content .components-navigator-screen:focus, .edit-site-sidebar__content .components-navigator-screen > * {
2381
- visibility: visible;
2418
+ .edit-site-sidebar__content .components-navigator-screen:hover::-webkit-scrollbar-thumb, .edit-site-sidebar__content .components-navigator-screen:focus::-webkit-scrollbar-thumb, .edit-site-sidebar__content .components-navigator-screen:focus-within::-webkit-scrollbar-thumb {
2419
+ background-color: #757575;
2420
+ }
2421
+ .edit-site-sidebar__content .components-navigator-screen:hover, .edit-site-sidebar__content .components-navigator-screen:focus, .edit-site-sidebar__content .components-navigator-screen:focus-within {
2422
+ scrollbar-color: #757575 transparent;
2423
+ }
2424
+ @media (hover: none) {
2425
+ .edit-site-sidebar__content .components-navigator-screen {
2426
+ scrollbar-color: #757575 transparent;
2427
+ }
2382
2428
  }
2383
2429
 
2384
2430
  .edit-site-sidebar__footer {
@@ -2636,14 +2682,32 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2636
2682
  }
2637
2683
 
2638
2684
  .edit-site-site-icon__image {
2639
- width: 32px;
2640
- height: 32px;
2641
- border-radius: 2px;
2685
+ width: 100%;
2686
+ height: auto;
2687
+ border-radius: 4px;
2642
2688
  -o-object-fit: cover;
2643
2689
  object-fit: cover;
2690
+ background: #333;
2691
+ }
2692
+ .edit-site-layout.is-full-canvas.is-edit-mode .edit-site-site-icon__image {
2693
+ border-radius: 0;
2694
+ }
2695
+
2696
+ .edit-site-style-book__tab-panel .components-tab-panel__tabs {
2697
+ background: #fff;
2698
+ color: #1e1e1e;
2699
+ }
2700
+ .edit-site-style-book__tab-panel .components-tab-panel__tab-content {
2701
+ bottom: 0;
2702
+ right: 0;
2703
+ overflow: auto;
2704
+ padding: 0;
2705
+ position: absolute;
2706
+ left: 0;
2707
+ top: 48px;
2644
2708
  }
2645
2709
 
2646
- .edit-site-style-book {
2710
+ .edit-site-editor-canvas-container {
2647
2711
  background: #fff;
2648
2712
  border-radius: 2px;
2649
2713
  bottom: 0;
@@ -2655,24 +2719,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2655
2719
  transition: all 0.3s;
2656
2720
  }
2657
2721
 
2658
- .edit-site-style-book__close-button {
2722
+ .edit-site-editor-canvas-container__close-button {
2659
2723
  position: absolute;
2660
2724
  left: 8px;
2661
2725
  top: 6px;
2662
- }
2663
-
2664
- .edit-site-style-book__tab-panel .components-tab-panel__tabs {
2726
+ z-index: 1;
2665
2727
  background: #fff;
2666
- color: #1e1e1e;
2667
- }
2668
- .edit-site-style-book__tab-panel .components-tab-panel__tab-content {
2669
- bottom: 0;
2670
- right: 0;
2671
- overflow: auto;
2672
- padding: 0;
2673
- position: absolute;
2674
- left: 0;
2675
- top: 48px;
2676
2728
  }
2677
2729
 
2678
2730
  .edit-site-push-changes-to-global-styles-control .components-button {
@@ -1949,6 +1949,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
1949
1949
  min-width: 24px;
1950
1950
  }
1951
1951
 
1952
+ /**
1953
+ * Note that this CSS file should be in sync with its counterpart in the other editor:
1954
+ * packages/edit-post/src/components/secondary-sidebar/style.scss
1955
+ */
1952
1956
  .edit-site-editor__inserter-panel,
1953
1957
  .edit-site-editor__list-view-panel {
1954
1958
  height: 100%;
@@ -1956,8 +1960,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
1956
1960
  flex-direction: column;
1957
1961
  }
1958
1962
 
1959
- .edit-site-editor__list-view-panel {
1960
- min-width: 350px;
1963
+ @media (min-width: 782px) {
1964
+ .edit-site-editor__list-view-panel {
1965
+ width: 350px;
1966
+ }
1961
1967
  }
1962
1968
 
1963
1969
  .edit-site-editor__inserter-panel-header {
@@ -1989,8 +1995,38 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
1989
1995
  }
1990
1996
 
1991
1997
  .edit-site-editor__list-view-panel-content {
1992
- overflow-y: auto;
1993
- padding: 8px;
1998
+ height: 100%;
1999
+ scrollbar-width: thin;
2000
+ scrollbar-gutter: stable both-edges;
2001
+ scrollbar-color: transparent transparent;
2002
+ will-change: transform;
2003
+ overflow: auto;
2004
+ scrollbar-gutter: auto;
2005
+ padding: 8px 6px;
2006
+ }
2007
+ .edit-site-editor__list-view-panel-content::-webkit-scrollbar {
2008
+ width: 12px;
2009
+ height: 12px;
2010
+ }
2011
+ .edit-site-editor__list-view-panel-content::-webkit-scrollbar-track {
2012
+ background-color: transparent;
2013
+ }
2014
+ .edit-site-editor__list-view-panel-content::-webkit-scrollbar-thumb {
2015
+ background-color: transparent;
2016
+ border-radius: 8px;
2017
+ border: 3px solid transparent;
2018
+ background-clip: padding-box;
2019
+ }
2020
+ .edit-site-editor__list-view-panel-content:hover::-webkit-scrollbar-thumb, .edit-site-editor__list-view-panel-content:focus::-webkit-scrollbar-thumb, .edit-site-editor__list-view-panel-content:focus-within::-webkit-scrollbar-thumb {
2021
+ background-color: #949494;
2022
+ }
2023
+ .edit-site-editor__list-view-panel-content:hover, .edit-site-editor__list-view-panel-content:focus, .edit-site-editor__list-view-panel-content:focus-within {
2024
+ scrollbar-color: #949494 transparent;
2025
+ }
2026
+ @media (hover: none) {
2027
+ .edit-site-editor__list-view-panel-content {
2028
+ scrollbar-color: #949494 transparent;
2029
+ }
1994
2030
  }
1995
2031
 
1996
2032
  .edit-site-welcome-guide {
@@ -2027,43 +2063,23 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2027
2063
  vertical-align: text-top;
2028
2064
  }
2029
2065
 
2030
- @media (min-width: 600px) {
2031
- .edit-site-start-template-options__modal.components-modal__frame {
2032
- width: calc(100% - 32px);
2033
- height: calc(100% - 120px);
2034
- }
2066
+ .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
2067
+ column-count: 2;
2068
+ column-gap: 24px;
2069
+ padding-top: 2px;
2035
2070
  }
2036
2071
  @media (min-width: 782px) {
2037
- .edit-site-start-template-options__modal.components-modal__frame {
2038
- width: 50%;
2072
+ .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
2073
+ column-count: 3;
2039
2074
  }
2040
2075
  }
2041
- @media (min-width: 960px) {
2042
- .edit-site-start-template-options__modal.components-modal__frame {
2043
- height: -moz-fit-content;
2044
- height: fit-content;
2076
+ @media (min-width: 1280px) {
2077
+ .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
2078
+ column-count: 4;
2045
2079
  }
2046
2080
  }
2047
-
2048
- .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
2049
- display: grid;
2050
- width: 100%;
2051
- margin-top: 4px;
2052
- gap: 24px;
2053
- grid-template-columns: repeat(auto-fit, minmax(min(100% / 2, max(240px, 100% / 10)), 1fr));
2054
- }
2055
2081
  .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2056
2082
  break-inside: avoid-column;
2057
- margin-bottom: 0;
2058
- width: 100%;
2059
- aspect-ratio: 3/4;
2060
- }
2061
- .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
2062
- height: 100%;
2063
- }
2064
- .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content {
2065
- width: 100%;
2066
- position: absolute;
2067
2083
  }
2068
2084
  .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title {
2069
2085
  display: none;
@@ -2075,6 +2091,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2075
2091
  position: absolute;
2076
2092
  padding: 0;
2077
2093
  background: #f0f0f0;
2094
+ min-height: 160px;
2078
2095
  }
2079
2096
  .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:nth-last-child(2) .block-editor-block-preview__container::after {
2080
2097
  width: 100%;
@@ -2152,7 +2169,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2152
2169
  z-index: 3;
2153
2170
  }
2154
2171
  .edit-site-layout.is-full-canvas.is-edit-mode .edit-site-layout__hub {
2155
- width: auto;
2172
+ width: 60px;
2156
2173
  padding-right: 0;
2157
2174
  }
2158
2175
  @media (min-width: 782px) {
@@ -2260,6 +2277,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2260
2277
  }
2261
2278
  .edit-site-layout.is-full-canvas .edit-site-layout__canvas > div {
2262
2279
  border-radius: 0;
2280
+ box-shadow: none;
2263
2281
  }
2264
2282
 
2265
2283
  .edit-site-layout__canvas .interface-interface-skeleton {
@@ -2270,13 +2288,19 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2270
2288
  .edit-site-layout__view-mode-toggle.components-button {
2271
2289
  position: relative;
2272
2290
  color: #fff;
2273
- height: 100%;
2274
- width: 100%;
2275
- border-radius: 2px;
2291
+ border-radius: 0;
2292
+ height: 60px;
2293
+ width: 60px;
2294
+ overflow: hidden;
2276
2295
  padding: 0;
2277
2296
  display: flex;
2278
2297
  align-items: center;
2279
2298
  justify-content: center;
2299
+ border-bottom: 1px solid transparent;
2300
+ }
2301
+ .edit-site-layout.is-full-canvas.is-edit-mode .edit-site-layout__view-mode-toggle.components-button {
2302
+ border-bottom-color: #e0e0e0;
2303
+ transition: border-bottom-color 0.15s 0.4s ease-out;
2280
2304
  }
2281
2305
  .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
2282
2306
  color: #fff;
@@ -2308,6 +2332,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2308
2332
  .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
2309
2333
  display: flex;
2310
2334
  border-radius: 2px;
2335
+ height: 64px;
2336
+ width: 64px;
2337
+ justify-content: center;
2338
+ align-items: center;
2311
2339
  }
2312
2340
 
2313
2341
  .edit-site-layout__actions {
@@ -2334,6 +2362,15 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2334
2362
  }
2335
2363
  }
2336
2364
 
2365
+ @media (min-width: 782px) {
2366
+ .edit-site-layout.has-fixed-toolbar .edit-site-site-hub {
2367
+ z-index: 4;
2368
+ }
2369
+ .edit-site-layout.has-fixed-toolbar .edit-site-layout__header:focus-within {
2370
+ z-index: 3;
2371
+ }
2372
+ }
2373
+
2337
2374
  .edit-site-save-hub {
2338
2375
  color: #949494;
2339
2376
  }
@@ -2359,9 +2396,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2359
2396
  overflow-y: auto;
2360
2397
  }
2361
2398
  .edit-site-sidebar__content .components-navigator-screen {
2362
- visibility: hidden;
2363
- scrollbar-color: #757575 #1e1e1e;
2364
2399
  scrollbar-width: thin;
2400
+ scrollbar-gutter: stable both-edges;
2401
+ scrollbar-color: transparent transparent;
2402
+ will-change: transform;
2365
2403
  scrollbar-gutter: stable;
2366
2404
  }
2367
2405
  .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar {
@@ -2369,16 +2407,24 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2369
2407
  height: 12px;
2370
2408
  }
2371
2409
  .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar-track {
2372
- background-color: #1e1e1e;
2410
+ background-color: transparent;
2373
2411
  }
2374
2412
  .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar-thumb {
2375
- background-color: #757575;
2413
+ background-color: transparent;
2376
2414
  border-radius: 8px;
2377
2415
  border: 3px solid transparent;
2378
2416
  background-clip: padding-box;
2379
2417
  }
2380
- .edit-site-sidebar__content .components-navigator-screen:hover, .edit-site-sidebar__content .components-navigator-screen:focus, .edit-site-sidebar__content .components-navigator-screen > * {
2381
- visibility: visible;
2418
+ .edit-site-sidebar__content .components-navigator-screen:hover::-webkit-scrollbar-thumb, .edit-site-sidebar__content .components-navigator-screen:focus::-webkit-scrollbar-thumb, .edit-site-sidebar__content .components-navigator-screen:focus-within::-webkit-scrollbar-thumb {
2419
+ background-color: #757575;
2420
+ }
2421
+ .edit-site-sidebar__content .components-navigator-screen:hover, .edit-site-sidebar__content .components-navigator-screen:focus, .edit-site-sidebar__content .components-navigator-screen:focus-within {
2422
+ scrollbar-color: #757575 transparent;
2423
+ }
2424
+ @media (hover: none) {
2425
+ .edit-site-sidebar__content .components-navigator-screen {
2426
+ scrollbar-color: #757575 transparent;
2427
+ }
2382
2428
  }
2383
2429
 
2384
2430
  .edit-site-sidebar__footer {
@@ -2636,14 +2682,32 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2636
2682
  }
2637
2683
 
2638
2684
  .edit-site-site-icon__image {
2639
- width: 32px;
2640
- height: 32px;
2641
- border-radius: 2px;
2685
+ width: 100%;
2686
+ height: auto;
2687
+ border-radius: 4px;
2642
2688
  -o-object-fit: cover;
2643
2689
  object-fit: cover;
2690
+ background: #333;
2691
+ }
2692
+ .edit-site-layout.is-full-canvas.is-edit-mode .edit-site-site-icon__image {
2693
+ border-radius: 0;
2694
+ }
2695
+
2696
+ .edit-site-style-book__tab-panel .components-tab-panel__tabs {
2697
+ background: #fff;
2698
+ color: #1e1e1e;
2699
+ }
2700
+ .edit-site-style-book__tab-panel .components-tab-panel__tab-content {
2701
+ bottom: 0;
2702
+ left: 0;
2703
+ overflow: auto;
2704
+ padding: 0;
2705
+ position: absolute;
2706
+ right: 0;
2707
+ top: 48px;
2644
2708
  }
2645
2709
 
2646
- .edit-site-style-book {
2710
+ .edit-site-editor-canvas-container {
2647
2711
  background: #fff;
2648
2712
  border-radius: 2px;
2649
2713
  bottom: 0;
@@ -2655,24 +2719,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2655
2719
  transition: all 0.3s;
2656
2720
  }
2657
2721
 
2658
- .edit-site-style-book__close-button {
2722
+ .edit-site-editor-canvas-container__close-button {
2659
2723
  position: absolute;
2660
2724
  right: 8px;
2661
2725
  top: 6px;
2662
- }
2663
-
2664
- .edit-site-style-book__tab-panel .components-tab-panel__tabs {
2726
+ z-index: 1;
2665
2727
  background: #fff;
2666
- color: #1e1e1e;
2667
- }
2668
- .edit-site-style-book__tab-panel .components-tab-panel__tab-content {
2669
- bottom: 0;
2670
- left: 0;
2671
- overflow: auto;
2672
- padding: 0;
2673
- position: absolute;
2674
- right: 0;
2675
- top: 48px;
2676
2728
  }
2677
2729
 
2678
2730
  .edit-site-push-changes-to-global-styles-control .components-button {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/edit-site",
3
- "version": "5.8.0",
3
+ "version": "5.9.0",
4
4
  "description": "Edit Site Page module for WordPress.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -27,37 +27,37 @@
27
27
  "react-native": "src/index",
28
28
  "dependencies": {
29
29
  "@babel/runtime": "^7.16.0",
30
- "@wordpress/a11y": "^3.31.0",
31
- "@wordpress/api-fetch": "^6.28.0",
32
- "@wordpress/block-editor": "^11.8.0",
33
- "@wordpress/block-library": "^8.8.0",
34
- "@wordpress/blocks": "^12.8.0",
35
- "@wordpress/commands": "^0.2.0",
36
- "@wordpress/components": "^23.8.0",
37
- "@wordpress/compose": "^6.8.0",
38
- "@wordpress/core-data": "^6.8.0",
39
- "@wordpress/data": "^9.1.0",
40
- "@wordpress/deprecated": "^3.31.0",
41
- "@wordpress/dom": "^3.31.0",
42
- "@wordpress/editor": "^13.8.0",
43
- "@wordpress/element": "^5.8.0",
44
- "@wordpress/hooks": "^3.31.0",
45
- "@wordpress/html-entities": "^3.31.0",
46
- "@wordpress/i18n": "^4.31.0",
47
- "@wordpress/icons": "^9.22.0",
48
- "@wordpress/interface": "^5.8.0",
49
- "@wordpress/keyboard-shortcuts": "^4.8.0",
50
- "@wordpress/keycodes": "^3.31.0",
51
- "@wordpress/media-utils": "^4.22.0",
52
- "@wordpress/notices": "^3.31.0",
53
- "@wordpress/plugins": "^5.8.0",
54
- "@wordpress/preferences": "^3.8.0",
55
- "@wordpress/private-apis": "^0.13.0",
56
- "@wordpress/reusable-blocks": "^4.8.0",
57
- "@wordpress/style-engine": "^1.14.0",
58
- "@wordpress/url": "^3.32.0",
59
- "@wordpress/viewport": "^5.8.0",
60
- "@wordpress/widgets": "^3.8.0",
30
+ "@wordpress/a11y": "^3.32.0",
31
+ "@wordpress/api-fetch": "^6.29.0",
32
+ "@wordpress/block-editor": "^12.0.0",
33
+ "@wordpress/block-library": "^8.9.0",
34
+ "@wordpress/blocks": "^12.9.0",
35
+ "@wordpress/commands": "^0.3.0",
36
+ "@wordpress/components": "^23.9.0",
37
+ "@wordpress/compose": "^6.9.0",
38
+ "@wordpress/core-data": "^6.9.0",
39
+ "@wordpress/data": "^9.2.0",
40
+ "@wordpress/deprecated": "^3.32.0",
41
+ "@wordpress/dom": "^3.32.0",
42
+ "@wordpress/editor": "^13.9.0",
43
+ "@wordpress/element": "^5.9.0",
44
+ "@wordpress/hooks": "^3.32.0",
45
+ "@wordpress/html-entities": "^3.32.0",
46
+ "@wordpress/i18n": "^4.32.0",
47
+ "@wordpress/icons": "^9.23.0",
48
+ "@wordpress/interface": "^5.9.0",
49
+ "@wordpress/keyboard-shortcuts": "^4.9.0",
50
+ "@wordpress/keycodes": "^3.32.0",
51
+ "@wordpress/media-utils": "^4.23.0",
52
+ "@wordpress/notices": "^4.0.0",
53
+ "@wordpress/plugins": "^6.0.0",
54
+ "@wordpress/preferences": "^3.9.0",
55
+ "@wordpress/private-apis": "^0.14.0",
56
+ "@wordpress/reusable-blocks": "^4.9.0",
57
+ "@wordpress/style-engine": "^1.15.0",
58
+ "@wordpress/url": "^3.33.0",
59
+ "@wordpress/viewport": "^5.9.0",
60
+ "@wordpress/widgets": "^3.9.0",
61
61
  "classnames": "^2.3.1",
62
62
  "colord": "^2.9.2",
63
63
  "downloadjs": "^1.4.7",
@@ -66,7 +66,7 @@
66
66
  "lodash": "^4.17.21",
67
67
  "memize": "^1.1.0",
68
68
  "react-autosize-textarea": "^7.1.0",
69
- "rememo": "^4.0.0"
69
+ "rememo": "^4.0.2"
70
70
  },
71
71
  "peerDependencies": {
72
72
  "react": "^18.0.0",
@@ -75,5 +75,5 @@
75
75
  "publishConfig": {
76
76
  "access": "public"
77
77
  },
78
- "gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
78
+ "gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
79
79
  }