@wordpress/edit-site 5.3.6 → 5.3.8

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 (145) hide show
  1. package/build/components/add-new-template/new-template.js +16 -10
  2. package/build/components/add-new-template/new-template.js.map +1 -1
  3. package/build/components/block-editor/editor-canvas.js +2 -1
  4. package/build/components/block-editor/editor-canvas.js.map +1 -1
  5. package/build/components/layout/index.js +6 -0
  6. package/build/components/layout/index.js.map +1 -1
  7. package/build/components/list/index.js +2 -1
  8. package/build/components/list/index.js.map +1 -1
  9. package/build/components/routes/link.js +4 -1
  10. package/build/components/routes/link.js.map +1 -1
  11. package/build/components/save-button/index.js +2 -5
  12. package/build/components/save-button/index.js.map +1 -1
  13. package/build/components/save-hub/index.js +82 -0
  14. package/build/components/save-hub/index.js.map +1 -0
  15. package/build/components/sidebar/index.js +2 -4
  16. package/build/components/sidebar/index.js.map +1 -1
  17. package/build/components/sidebar-navigation-screen/index.js +5 -2
  18. package/build/components/sidebar-navigation-screen/index.js.map +1 -1
  19. package/build/components/sidebar-navigation-screen-main/index.js +1 -0
  20. package/build/components/sidebar-navigation-screen-main/index.js.map +1 -1
  21. package/build/components/sidebar-navigation-screen-navigation-item/index.js +9 -14
  22. package/build/components/sidebar-navigation-screen-navigation-item/index.js.map +1 -1
  23. package/build/components/sidebar-navigation-screen-navigation-menus/index.js +100 -11
  24. package/build/components/sidebar-navigation-screen-navigation-menus/index.js.map +1 -1
  25. package/build/components/sidebar-navigation-screen-navigation-menus/loader.js +19 -0
  26. package/build/components/sidebar-navigation-screen-navigation-menus/loader.js.map +1 -0
  27. package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +77 -0
  28. package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map +1 -0
  29. package/build/components/sidebar-navigation-screen-template/index.js +18 -4
  30. package/build/components/sidebar-navigation-screen-template/index.js.map +1 -1
  31. package/build/components/sidebar-navigation-screen-templates/index.js +5 -2
  32. package/build/components/sidebar-navigation-screen-templates/index.js.map +1 -1
  33. package/build/components/sidebar-navigation-screen-templates-browse/index.js +6 -3
  34. package/build/components/sidebar-navigation-screen-templates-browse/index.js.map +1 -1
  35. package/build/components/style-book/index.js +134 -19
  36. package/build/components/style-book/index.js.map +1 -1
  37. package/build/components/sync-state-with-url/use-sync-canvas-mode-with-url.js +24 -8
  38. package/build/components/sync-state-with-url/use-sync-canvas-mode-with-url.js.map +1 -1
  39. package/build/components/sync-state-with-url/use-sync-path-with-url.js +9 -7
  40. package/build/components/sync-state-with-url/use-sync-path-with-url.js.map +1 -1
  41. package/build/components/template-details/index.js +0 -3
  42. package/build/components/template-details/index.js.map +1 -1
  43. package/build/components/use-edited-entity-record/index.js +6 -6
  44. package/build/components/use-edited-entity-record/index.js.map +1 -1
  45. package/build/index.js +3 -0
  46. package/build/index.js.map +1 -1
  47. package/build/utils/history.js +8 -2
  48. package/build/utils/history.js.map +1 -1
  49. package/build-module/components/add-new-template/new-template.js +18 -11
  50. package/build-module/components/add-new-template/new-template.js.map +1 -1
  51. package/build-module/components/block-editor/editor-canvas.js +2 -1
  52. package/build-module/components/block-editor/editor-canvas.js.map +1 -1
  53. package/build-module/components/layout/index.js +6 -0
  54. package/build-module/components/layout/index.js.map +1 -1
  55. package/build-module/components/list/index.js +2 -1
  56. package/build-module/components/list/index.js.map +1 -1
  57. package/build-module/components/routes/link.js +5 -2
  58. package/build-module/components/routes/link.js.map +1 -1
  59. package/build-module/components/save-button/index.js +2 -5
  60. package/build-module/components/save-button/index.js.map +1 -1
  61. package/build-module/components/save-hub/index.js +68 -0
  62. package/build-module/components/save-hub/index.js.map +1 -0
  63. package/build-module/components/sidebar/index.js +2 -4
  64. package/build-module/components/sidebar/index.js.map +1 -1
  65. package/build-module/components/sidebar-navigation-screen/index.js +5 -2
  66. package/build-module/components/sidebar-navigation-screen/index.js.map +1 -1
  67. package/build-module/components/sidebar-navigation-screen-main/index.js +1 -0
  68. package/build-module/components/sidebar-navigation-screen-main/index.js.map +1 -1
  69. package/build-module/components/sidebar-navigation-screen-navigation-item/index.js +13 -18
  70. package/build-module/components/sidebar-navigation-screen-navigation-item/index.js.map +1 -1
  71. package/build-module/components/sidebar-navigation-screen-navigation-menus/index.js +94 -11
  72. package/build-module/components/sidebar-navigation-screen-navigation-menus/index.js.map +1 -1
  73. package/build-module/components/sidebar-navigation-screen-navigation-menus/loader.js +11 -0
  74. package/build-module/components/sidebar-navigation-screen-navigation-menus/loader.js.map +1 -0
  75. package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +66 -0
  76. package/build-module/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map +1 -0
  77. package/build-module/components/sidebar-navigation-screen-template/index.js +18 -5
  78. package/build-module/components/sidebar-navigation-screen-template/index.js.map +1 -1
  79. package/build-module/components/sidebar-navigation-screen-templates/index.js +5 -2
  80. package/build-module/components/sidebar-navigation-screen-templates/index.js.map +1 -1
  81. package/build-module/components/sidebar-navigation-screen-templates-browse/index.js +6 -3
  82. package/build-module/components/sidebar-navigation-screen-templates-browse/index.js.map +1 -1
  83. package/build-module/components/style-book/index.js +135 -22
  84. package/build-module/components/style-book/index.js.map +1 -1
  85. package/build-module/components/sync-state-with-url/use-sync-canvas-mode-with-url.js +24 -8
  86. package/build-module/components/sync-state-with-url/use-sync-canvas-mode-with-url.js.map +1 -1
  87. package/build-module/components/sync-state-with-url/use-sync-path-with-url.js +9 -7
  88. package/build-module/components/sync-state-with-url/use-sync-path-with-url.js.map +1 -1
  89. package/build-module/components/template-details/index.js +0 -3
  90. package/build-module/components/template-details/index.js.map +1 -1
  91. package/build-module/components/use-edited-entity-record/index.js +6 -6
  92. package/build-module/components/use-edited-entity-record/index.js.map +1 -1
  93. package/build-module/index.js +4 -1
  94. package/build-module/index.js.map +1 -1
  95. package/build-module/utils/history.js +9 -3
  96. package/build-module/utils/history.js.map +1 -1
  97. package/build-style/style-rtl.css +96 -111
  98. package/build-style/style.css +96 -111
  99. package/package.json +10 -10
  100. package/src/components/add-new-template/new-template.js +57 -32
  101. package/src/components/add-new-template/style.scss +12 -1
  102. package/src/components/block-editor/editor-canvas.js +2 -1
  103. package/src/components/layout/index.js +14 -0
  104. package/src/components/layout/style.scss +1 -3
  105. package/src/components/list/index.js +3 -1
  106. package/src/components/routes/link.js +9 -2
  107. package/src/components/save-button/index.js +2 -2
  108. package/src/components/save-hub/index.js +78 -0
  109. package/src/components/save-hub/style.scss +15 -0
  110. package/src/components/sidebar/index.js +2 -3
  111. package/src/components/sidebar/style.scss +4 -3
  112. package/src/components/sidebar-button/style.scss +2 -1
  113. package/src/components/sidebar-navigation-item/style.scss +0 -20
  114. package/src/components/sidebar-navigation-screen/index.js +6 -0
  115. package/src/components/sidebar-navigation-screen/style.scss +15 -0
  116. package/src/components/sidebar-navigation-screen-main/index.js +3 -0
  117. package/src/components/sidebar-navigation-screen-navigation-item/index.js +30 -21
  118. package/src/components/sidebar-navigation-screen-navigation-menus/index.js +104 -10
  119. package/src/components/sidebar-navigation-screen-navigation-menus/loader.js +9 -0
  120. package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +78 -0
  121. package/src/components/sidebar-navigation-screen-navigation-menus/style.scss +59 -4
  122. package/src/components/sidebar-navigation-screen-template/index.js +21 -7
  123. package/src/components/sidebar-navigation-screen-templates/index.js +7 -0
  124. package/src/components/sidebar-navigation-screen-templates-browse/index.js +12 -1
  125. package/src/components/site-hub/style.scss +1 -1
  126. package/src/components/style-book/index.js +209 -54
  127. package/src/components/style-book/style.scss +1 -45
  128. package/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js +38 -8
  129. package/src/components/sync-state-with-url/use-sync-path-with-url.js +12 -7
  130. package/src/components/template-details/index.js +0 -3
  131. package/src/components/use-edited-entity-record/index.js +26 -18
  132. package/src/index.js +5 -1
  133. package/src/style.scss +1 -1
  134. package/src/utils/history.js +13 -9
  135. package/build/components/navigation-inspector/index.js +0 -190
  136. package/build/components/navigation-inspector/index.js.map +0 -1
  137. package/build/components/navigation-inspector/navigation-menu.js +0 -62
  138. package/build/components/navigation-inspector/navigation-menu.js.map +0 -1
  139. package/build-module/components/navigation-inspector/index.js +0 -173
  140. package/build-module/components/navigation-inspector/index.js.map +0 -1
  141. package/build-module/components/navigation-inspector/navigation-menu.js +0 -52
  142. package/build-module/components/navigation-inspector/navigation-menu.js.map +0 -1
  143. package/src/components/navigation-inspector/index.js +0 -223
  144. package/src/components/navigation-inspector/navigation-menu.js +0 -66
  145. package/src/components/navigation-inspector/style.scss +0 -46
@@ -6,17 +6,23 @@ import { createBrowserHistory } from 'history';
6
6
  * WordPress dependencies
7
7
  */
8
8
 
9
- import { addQueryArgs } from '@wordpress/url';
9
+ import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url';
10
10
  const history = createBrowserHistory();
11
11
  const originalHistoryPush = history.push;
12
12
  const originalHistoryReplace = history.replace;
13
13
 
14
14
  function push(params, state) {
15
- return originalHistoryPush.call(history, addQueryArgs(window.location.href, params), state);
15
+ const currentArgs = getQueryArgs(window.location.href);
16
+ const currentUrlWithoutArgs = removeQueryArgs(window.location.href, ...Object.keys(currentArgs));
17
+ const newUrl = addQueryArgs(currentUrlWithoutArgs, params);
18
+ return originalHistoryPush.call(history, newUrl, state);
16
19
  }
17
20
 
18
21
  function replace(params, state) {
19
- return originalHistoryReplace.call(history, addQueryArgs(window.location.href, params), state);
22
+ const currentArgs = getQueryArgs(window.location.href);
23
+ const currentUrlWithoutArgs = removeQueryArgs(window.location.href, ...Object.keys(currentArgs));
24
+ const newUrl = addQueryArgs(currentUrlWithoutArgs, params);
25
+ return originalHistoryReplace.call(history, newUrl, state);
20
26
  }
21
27
 
22
28
  history.push = push;
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/edit-site/src/utils/history.js"],"names":["createBrowserHistory","addQueryArgs","history","originalHistoryPush","push","originalHistoryReplace","replace","params","state","call","window","location","href"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,oBAAT,QAAqC,SAArC;AAEA;AACA;AACA;;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,MAAMC,OAAO,GAAGF,oBAAoB,EAApC;AAEA,MAAMG,mBAAmB,GAAGD,OAAO,CAACE,IAApC;AACA,MAAMC,sBAAsB,GAAGH,OAAO,CAACI,OAAvC;;AAEA,SAASF,IAAT,CAAeG,MAAf,EAAuBC,KAAvB,EAA+B;AAC9B,SAAOL,mBAAmB,CAACM,IAApB,CACNP,OADM,EAEND,YAAY,CAAES,MAAM,CAACC,QAAP,CAAgBC,IAAlB,EAAwBL,MAAxB,CAFN,EAGNC,KAHM,CAAP;AAKA;;AAED,SAASF,OAAT,CAAkBC,MAAlB,EAA0BC,KAA1B,EAAkC;AACjC,SAAOH,sBAAsB,CAACI,IAAvB,CACNP,OADM,EAEND,YAAY,CAAES,MAAM,CAACC,QAAP,CAAgBC,IAAlB,EAAwBL,MAAxB,CAFN,EAGNC,KAHM,CAAP;AAKA;;AAEDN,OAAO,CAACE,IAAR,GAAeA,IAAf;AACAF,OAAO,CAACI,OAAR,GAAkBA,OAAlB;AAEA,eAAeJ,OAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { createBrowserHistory } from 'history';\n\n/**\n * WordPress dependencies\n */\nimport { addQueryArgs } from '@wordpress/url';\n\nconst history = createBrowserHistory();\n\nconst originalHistoryPush = history.push;\nconst originalHistoryReplace = history.replace;\n\nfunction push( params, state ) {\n\treturn originalHistoryPush.call(\n\t\thistory,\n\t\taddQueryArgs( window.location.href, params ),\n\t\tstate\n\t);\n}\n\nfunction replace( params, state ) {\n\treturn originalHistoryReplace.call(\n\t\thistory,\n\t\taddQueryArgs( window.location.href, params ),\n\t\tstate\n\t);\n}\n\nhistory.push = push;\nhistory.replace = replace;\n\nexport default history;\n"]}
1
+ {"version":3,"sources":["@wordpress/edit-site/src/utils/history.js"],"names":["createBrowserHistory","addQueryArgs","getQueryArgs","removeQueryArgs","history","originalHistoryPush","push","originalHistoryReplace","replace","params","state","currentArgs","window","location","href","currentUrlWithoutArgs","Object","keys","newUrl","call"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,oBAAT,QAAqC,SAArC;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,YAAvB,EAAqCC,eAArC,QAA4D,gBAA5D;AAEA,MAAMC,OAAO,GAAGJ,oBAAoB,EAApC;AAEA,MAAMK,mBAAmB,GAAGD,OAAO,CAACE,IAApC;AACA,MAAMC,sBAAsB,GAAGH,OAAO,CAACI,OAAvC;;AAEA,SAASF,IAAT,CAAeG,MAAf,EAAuBC,KAAvB,EAA+B;AAC9B,QAAMC,WAAW,GAAGT,YAAY,CAAEU,MAAM,CAACC,QAAP,CAAgBC,IAAlB,CAAhC;AACA,QAAMC,qBAAqB,GAAGZ,eAAe,CAC5CS,MAAM,CAACC,QAAP,CAAgBC,IAD4B,EAE5C,GAAGE,MAAM,CAACC,IAAP,CAAaN,WAAb,CAFyC,CAA7C;AAIA,QAAMO,MAAM,GAAGjB,YAAY,CAAEc,qBAAF,EAAyBN,MAAzB,CAA3B;AACA,SAAOJ,mBAAmB,CAACc,IAApB,CAA0Bf,OAA1B,EAAmCc,MAAnC,EAA2CR,KAA3C,CAAP;AACA;;AAED,SAASF,OAAT,CAAkBC,MAAlB,EAA0BC,KAA1B,EAAkC;AACjC,QAAMC,WAAW,GAAGT,YAAY,CAAEU,MAAM,CAACC,QAAP,CAAgBC,IAAlB,CAAhC;AACA,QAAMC,qBAAqB,GAAGZ,eAAe,CAC5CS,MAAM,CAACC,QAAP,CAAgBC,IAD4B,EAE5C,GAAGE,MAAM,CAACC,IAAP,CAAaN,WAAb,CAFyC,CAA7C;AAIA,QAAMO,MAAM,GAAGjB,YAAY,CAAEc,qBAAF,EAAyBN,MAAzB,CAA3B;AACA,SAAOF,sBAAsB,CAACY,IAAvB,CAA6Bf,OAA7B,EAAsCc,MAAtC,EAA8CR,KAA9C,CAAP;AACA;;AAEDN,OAAO,CAACE,IAAR,GAAeA,IAAf;AACAF,OAAO,CAACI,OAAR,GAAkBA,OAAlB;AAEA,eAAeJ,OAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { createBrowserHistory } from 'history';\n\n/**\n * WordPress dependencies\n */\nimport { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url';\n\nconst history = createBrowserHistory();\n\nconst originalHistoryPush = history.push;\nconst originalHistoryReplace = history.replace;\n\nfunction push( params, state ) {\n\tconst currentArgs = getQueryArgs( window.location.href );\n\tconst currentUrlWithoutArgs = removeQueryArgs(\n\t\twindow.location.href,\n\t\t...Object.keys( currentArgs )\n\t);\n\tconst newUrl = addQueryArgs( currentUrlWithoutArgs, params );\n\treturn originalHistoryPush.call( history, newUrl, state );\n}\n\nfunction replace( params, state ) {\n\tconst currentArgs = getQueryArgs( window.location.href );\n\tconst currentUrlWithoutArgs = removeQueryArgs(\n\t\twindow.location.href,\n\t\t...Object.keys( currentArgs )\n\t);\n\tconst newUrl = addQueryArgs( currentUrlWithoutArgs, params );\n\treturn originalHistoryReplace.call( history, newUrl, state );\n}\n\nhistory.push = push;\nhistory.replace = replace;\n\nexport default history;\n"]}
@@ -568,10 +568,19 @@ body.is-fullscreen-mode .interface-interface-skeleton {
568
568
  }
569
569
 
570
570
  @media (min-width: 600px) {
571
- .edit-site-new-template-dropdown .edit-site-new-template-dropdown__popover {
571
+ .edit-site-new-template-dropdown .edit-site-new-template-dropdown__menu-groups {
572
572
  min-width: 300px;
573
573
  }
574
574
  }
575
+ .edit-site-new-template-dropdown__menu-item-tooltip.components-tooltip .components-popover__content {
576
+ max-width: 320px;
577
+ padding: 8px 12px;
578
+ border-radius: 2px;
579
+ white-space: pre-wrap;
580
+ min-width: 0;
581
+ width: auto;
582
+ text-align: right;
583
+ }
575
584
 
576
585
  .edit-site-custom-template-modal__contents > .components-button {
577
586
  padding: 24px;
@@ -1567,46 +1576,6 @@ body.is-fullscreen-mode .edit-site-list-header {
1567
1576
  color: #757575;
1568
1577
  }
1569
1578
 
1570
- @keyframes loadingpulse {
1571
- 0% {
1572
- opacity: 1;
1573
- }
1574
- 50% {
1575
- opacity: 0.5;
1576
- }
1577
- 100% {
1578
- opacity: 1;
1579
- }
1580
- }
1581
- .edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents {
1582
- white-space: normal;
1583
- }
1584
- .edit-site-navigation-inspector .block-editor-list-view-block__title {
1585
- margin-top: 3px;
1586
- }
1587
- .edit-site-navigation-inspector .block-editor-list-view-block__menu-cell {
1588
- padding-left: 0;
1589
- }
1590
- .edit-site-navigation-inspector .edit-site-navigation-inspector__select-menu {
1591
- margin-bottom: 8px;
1592
- }
1593
-
1594
- .edit-site-navigation-inspector__placeholder {
1595
- padding: 8px;
1596
- margin: 8px;
1597
- background-color: #f0f0f0;
1598
- animation: loadingpulse 1s linear infinite;
1599
- animation-delay: 0.5s;
1600
- }
1601
- .edit-site-navigation-inspector__placeholder.is-child {
1602
- margin-right: 24px;
1603
- width: 50%;
1604
- }
1605
-
1606
- .edit-site-navigation-inspector__empty-msg {
1607
- padding: 0 8px;
1608
- }
1609
-
1610
1579
  .edit-site-sidebar-edit-mode {
1611
1580
  width: 280px;
1612
1581
  }
@@ -2180,9 +2149,9 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2180
2149
  }
2181
2150
 
2182
2151
  .edit-site-layout__content {
2152
+ height: 100%;
2183
2153
  flex-grow: 1;
2184
2154
  display: flex;
2185
- overflow: hidden;
2186
2155
  }
2187
2156
 
2188
2157
  .edit-site-layout__sidebar {
@@ -2330,6 +2299,20 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2330
2299
  }
2331
2300
  }
2332
2301
 
2302
+ .edit-site-save-hub {
2303
+ color: #949494;
2304
+ }
2305
+
2306
+ .edit-site-save-hub__button {
2307
+ color: inherit;
2308
+ }
2309
+ .edit-site-save-hub__button[aria-disabled=true] {
2310
+ opacity: 1;
2311
+ }
2312
+ .edit-site-save-hub__button[aria-disabled=true]:hover {
2313
+ color: inherit;
2314
+ }
2315
+
2333
2316
  @media (min-width: 600px) {
2334
2317
  .edit-site-save-panel__modal {
2335
2318
  width: 600px;
@@ -2339,25 +2322,27 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2339
2322
  .edit-site-sidebar__content {
2340
2323
  flex-grow: 1;
2341
2324
  overflow-y: auto;
2325
+ }
2326
+ .edit-site-sidebar__content .components-navigator-screen {
2342
2327
  visibility: hidden;
2343
2328
  scrollbar-color: #757575 #1e1e1e;
2344
2329
  scrollbar-width: thin;
2345
2330
  scrollbar-gutter: stable;
2346
2331
  }
2347
- .edit-site-sidebar__content::-webkit-scrollbar {
2332
+ .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar {
2348
2333
  width: 12px;
2349
2334
  height: 12px;
2350
2335
  }
2351
- .edit-site-sidebar__content::-webkit-scrollbar-track {
2336
+ .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar-track {
2352
2337
  background-color: #1e1e1e;
2353
2338
  }
2354
- .edit-site-sidebar__content::-webkit-scrollbar-thumb {
2339
+ .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar-thumb {
2355
2340
  background-color: #757575;
2356
2341
  border-radius: 8px;
2357
2342
  border: 3px solid transparent;
2358
2343
  background-clip: padding-box;
2359
2344
  }
2360
- .edit-site-sidebar__content:hover, .edit-site-sidebar__content:focus, .edit-site-sidebar__content > * {
2345
+ .edit-site-sidebar__content .components-navigator-screen:hover, .edit-site-sidebar__content .components-navigator-screen:focus, .edit-site-sidebar__content .components-navigator-screen > * {
2361
2346
  visibility: visible;
2362
2347
  }
2363
2348
 
@@ -2366,8 +2351,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2366
2351
  flex-shrink: 0;
2367
2352
  margin: 0 24px;
2368
2353
  padding: 24px 0;
2369
- display: flex;
2370
- justify-content: flex-end;
2371
2354
  }
2372
2355
 
2373
2356
  .edit-site-sidebar__content.edit-site-sidebar__content {
@@ -2390,7 +2373,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2390
2373
  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
2391
2374
  outline: 3px solid transparent;
2392
2375
  }
2393
- .edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active {
2376
+ .edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
2394
2377
  color: #fff;
2395
2378
  }
2396
2379
 
@@ -2407,20 +2390,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2407
2390
  background: var(--wp-admin-theme-color);
2408
2391
  }
2409
2392
 
2410
- .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button {
2411
- color: #949494;
2412
- }
2413
- .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button:hover, .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button:focus, .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button[aria-current] {
2414
- color: #fff;
2415
- }
2416
-
2417
- .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf:hover, .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf:focus, .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf[aria-current] {
2418
- background: #2f2f2f;
2419
- }
2420
- .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf .block-editor-list-view-block__menu {
2421
- margin-right: -8px;
2422
- }
2423
-
2424
2393
  .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
2425
2394
  cursor: grab;
2426
2395
  width: calc(100% - 2px);
@@ -2439,6 +2408,18 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2439
2408
  color: #949494;
2440
2409
  }
2441
2410
 
2411
+ .edit-site-sidebar-navigation-screen__page-link {
2412
+ color: #949494;
2413
+ margin-right: 16px;
2414
+ display: inline-block;
2415
+ }
2416
+ .edit-site-sidebar-navigation-screen__page-link:hover, .edit-site-sidebar-navigation-screen__page-link:focus {
2417
+ color: #fff;
2418
+ }
2419
+ .edit-site-sidebar-navigation-screen__page-link .components-external-link__icon {
2420
+ margin-right: 4px;
2421
+ }
2422
+
2442
2423
  .edit-site-sidebar-navigation-screen__title-icon {
2443
2424
  position: sticky;
2444
2425
  top: 0;
@@ -2477,7 +2458,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2477
2458
 
2478
2459
  .edit-site-site-hub__view-mode-toggle-container {
2479
2460
  height: 60px;
2480
- width: 64px;
2461
+ width: 60px;
2481
2462
  flex-shrink: 0;
2482
2463
  background: #1e1e1e;
2483
2464
  }
@@ -2492,16 +2473,61 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2492
2473
  overflow: hidden;
2493
2474
  }
2494
2475
 
2495
- .edit-site-sidebar-navigation-screen-navigation-menus .block-editor-list-view-block__menu-edit,
2496
- .edit-site-sidebar-navigation-screen-navigation-menus .edit-site-navigation-inspector__select-menu {
2497
- display: none;
2476
+ .edit-site-sidebar-navigation-screen__description {
2477
+ margin: 0 16px 32px 0;
2498
2478
  }
2499
- .edit-site-sidebar-navigation-screen-navigation-menus .offcanvas-editor-list-view-leaf {
2479
+
2480
+ .edit-site-sidebar-navigation-screen-navigation-menus__placeholder {
2481
+ padding: 8px;
2482
+ margin: 8px;
2483
+ background-color: #f0f0f0;
2484
+ animation: loadingpulse 1s linear infinite;
2485
+ animation-delay: 0.5s;
2486
+ }
2487
+
2488
+ @keyframes loadingpulse {
2489
+ 0% {
2490
+ opacity: 1;
2491
+ }
2492
+ 50% {
2493
+ opacity: 0.5;
2494
+ }
2495
+ 100% {
2496
+ opacity: 1;
2497
+ }
2498
+ }
2499
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .offcanvas-editor-list-view-leaf {
2500
2500
  max-width: calc(100% - 4px);
2501
+ border-radius: 2px;
2502
+ }
2503
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .offcanvas-editor-list-view-leaf:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .offcanvas-editor-list-view-leaf:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .offcanvas-editor-list-view-leaf[aria-current] {
2504
+ background: #2f2f2f;
2501
2505
  }
2502
- .edit-site-sidebar-navigation-screen-navigation-menus .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
2506
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .offcanvas-editor-list-view-leaf .block-editor-list-view-block__menu {
2507
+ margin-right: -8px;
2508
+ }
2509
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
2503
2510
  width: 100%;
2504
2511
  }
2512
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2513
+ white-space: normal;
2514
+ }
2515
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
2516
+ margin-top: 3px;
2517
+ }
2518
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
2519
+ padding-left: 0;
2520
+ }
2521
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .components-button {
2522
+ color: #949494;
2523
+ }
2524
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .components-button:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .components-button:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .components-button[aria-current] {
2525
+ color: #fff;
2526
+ }
2527
+
2528
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
2529
+ display: none;
2530
+ }
2505
2531
 
2506
2532
  .edit-site-site-icon__icon {
2507
2533
  fill: currentColor;
@@ -2541,53 +2567,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2541
2567
  bottom: 0;
2542
2568
  right: 0;
2543
2569
  overflow: auto;
2544
- padding: 32px;
2570
+ padding: 0;
2545
2571
  position: absolute;
2546
2572
  left: 0;
2547
2573
  top: 48px;
2548
2574
  }
2549
2575
 
2550
- .edit-site-style-book__examples {
2551
- max-width: 900px;
2552
- margin: 0 auto;
2553
- }
2554
-
2555
- .edit-site-style-book__example {
2556
- background: none;
2557
- border-radius: 2px;
2558
- border: none;
2559
- color: inherit;
2560
- cursor: pointer;
2561
- display: flex;
2562
- flex-direction: column;
2563
- gap: 40px;
2564
- margin-bottom: 40px;
2565
- padding: 16px;
2566
- width: 100%;
2567
- }
2568
- .edit-site-style-book__example.is-selected {
2569
- box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
2570
- }
2571
- .edit-site-style-book.is-wide .edit-site-style-book__example {
2572
- flex-direction: row;
2573
- }
2574
-
2575
- .edit-site-style-book__example-title {
2576
- font-size: 11px;
2577
- font-weight: 500;
2578
- margin: 0;
2579
- text-align: right;
2580
- text-transform: uppercase;
2581
- }
2582
- .edit-site-style-book.is-wide .edit-site-style-book__example-title {
2583
- text-align: left;
2584
- width: 120px;
2585
- }
2586
-
2587
- .edit-site-style-book__example-preview {
2588
- width: 100%;
2589
- }
2590
-
2591
2576
  .edit-site-push-changes-to-global-styles-control .components-button {
2592
2577
  justify-content: center;
2593
2578
  width: 100%;
@@ -568,10 +568,19 @@ body.is-fullscreen-mode .interface-interface-skeleton {
568
568
  }
569
569
 
570
570
  @media (min-width: 600px) {
571
- .edit-site-new-template-dropdown .edit-site-new-template-dropdown__popover {
571
+ .edit-site-new-template-dropdown .edit-site-new-template-dropdown__menu-groups {
572
572
  min-width: 300px;
573
573
  }
574
574
  }
575
+ .edit-site-new-template-dropdown__menu-item-tooltip.components-tooltip .components-popover__content {
576
+ max-width: 320px;
577
+ padding: 8px 12px;
578
+ border-radius: 2px;
579
+ white-space: pre-wrap;
580
+ min-width: 0;
581
+ width: auto;
582
+ text-align: left;
583
+ }
575
584
 
576
585
  .edit-site-custom-template-modal__contents > .components-button {
577
586
  padding: 24px;
@@ -1567,46 +1576,6 @@ body.is-fullscreen-mode .edit-site-list-header {
1567
1576
  color: #757575;
1568
1577
  }
1569
1578
 
1570
- @keyframes loadingpulse {
1571
- 0% {
1572
- opacity: 1;
1573
- }
1574
- 50% {
1575
- opacity: 0.5;
1576
- }
1577
- 100% {
1578
- opacity: 1;
1579
- }
1580
- }
1581
- .edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents {
1582
- white-space: normal;
1583
- }
1584
- .edit-site-navigation-inspector .block-editor-list-view-block__title {
1585
- margin-top: 3px;
1586
- }
1587
- .edit-site-navigation-inspector .block-editor-list-view-block__menu-cell {
1588
- padding-right: 0;
1589
- }
1590
- .edit-site-navigation-inspector .edit-site-navigation-inspector__select-menu {
1591
- margin-bottom: 8px;
1592
- }
1593
-
1594
- .edit-site-navigation-inspector__placeholder {
1595
- padding: 8px;
1596
- margin: 8px;
1597
- background-color: #f0f0f0;
1598
- animation: loadingpulse 1s linear infinite;
1599
- animation-delay: 0.5s;
1600
- }
1601
- .edit-site-navigation-inspector__placeholder.is-child {
1602
- margin-left: 24px;
1603
- width: 50%;
1604
- }
1605
-
1606
- .edit-site-navigation-inspector__empty-msg {
1607
- padding: 0 8px;
1608
- }
1609
-
1610
1579
  .edit-site-sidebar-edit-mode {
1611
1580
  width: 280px;
1612
1581
  }
@@ -2180,9 +2149,9 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2180
2149
  }
2181
2150
 
2182
2151
  .edit-site-layout__content {
2152
+ height: 100%;
2183
2153
  flex-grow: 1;
2184
2154
  display: flex;
2185
- overflow: hidden;
2186
2155
  }
2187
2156
 
2188
2157
  .edit-site-layout__sidebar {
@@ -2330,6 +2299,20 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2330
2299
  }
2331
2300
  }
2332
2301
 
2302
+ .edit-site-save-hub {
2303
+ color: #949494;
2304
+ }
2305
+
2306
+ .edit-site-save-hub__button {
2307
+ color: inherit;
2308
+ }
2309
+ .edit-site-save-hub__button[aria-disabled=true] {
2310
+ opacity: 1;
2311
+ }
2312
+ .edit-site-save-hub__button[aria-disabled=true]:hover {
2313
+ color: inherit;
2314
+ }
2315
+
2333
2316
  @media (min-width: 600px) {
2334
2317
  .edit-site-save-panel__modal {
2335
2318
  width: 600px;
@@ -2339,25 +2322,27 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2339
2322
  .edit-site-sidebar__content {
2340
2323
  flex-grow: 1;
2341
2324
  overflow-y: auto;
2325
+ }
2326
+ .edit-site-sidebar__content .components-navigator-screen {
2342
2327
  visibility: hidden;
2343
2328
  scrollbar-color: #757575 #1e1e1e;
2344
2329
  scrollbar-width: thin;
2345
2330
  scrollbar-gutter: stable;
2346
2331
  }
2347
- .edit-site-sidebar__content::-webkit-scrollbar {
2332
+ .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar {
2348
2333
  width: 12px;
2349
2334
  height: 12px;
2350
2335
  }
2351
- .edit-site-sidebar__content::-webkit-scrollbar-track {
2336
+ .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar-track {
2352
2337
  background-color: #1e1e1e;
2353
2338
  }
2354
- .edit-site-sidebar__content::-webkit-scrollbar-thumb {
2339
+ .edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar-thumb {
2355
2340
  background-color: #757575;
2356
2341
  border-radius: 8px;
2357
2342
  border: 3px solid transparent;
2358
2343
  background-clip: padding-box;
2359
2344
  }
2360
- .edit-site-sidebar__content:hover, .edit-site-sidebar__content:focus, .edit-site-sidebar__content > * {
2345
+ .edit-site-sidebar__content .components-navigator-screen:hover, .edit-site-sidebar__content .components-navigator-screen:focus, .edit-site-sidebar__content .components-navigator-screen > * {
2361
2346
  visibility: visible;
2362
2347
  }
2363
2348
 
@@ -2366,8 +2351,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2366
2351
  flex-shrink: 0;
2367
2352
  margin: 0 24px;
2368
2353
  padding: 24px 0;
2369
- display: flex;
2370
- justify-content: flex-end;
2371
2354
  }
2372
2355
 
2373
2356
  .edit-site-sidebar__content.edit-site-sidebar__content {
@@ -2390,7 +2373,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2390
2373
  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
2391
2374
  outline: 3px solid transparent;
2392
2375
  }
2393
- .edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active {
2376
+ .edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
2394
2377
  color: #fff;
2395
2378
  }
2396
2379
 
@@ -2407,20 +2390,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2407
2390
  background: var(--wp-admin-theme-color);
2408
2391
  }
2409
2392
 
2410
- .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button {
2411
- color: #949494;
2412
- }
2413
- .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button:hover, .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button:focus, .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button[aria-current] {
2414
- color: #fff;
2415
- }
2416
-
2417
- .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf:hover, .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf:focus, .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf[aria-current] {
2418
- background: #2f2f2f;
2419
- }
2420
- .edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf .block-editor-list-view-block__menu {
2421
- margin-left: -8px;
2422
- }
2423
-
2424
2393
  .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
2425
2394
  cursor: grab;
2426
2395
  width: calc(100% - 2px);
@@ -2439,6 +2408,18 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2439
2408
  color: #949494;
2440
2409
  }
2441
2410
 
2411
+ .edit-site-sidebar-navigation-screen__page-link {
2412
+ color: #949494;
2413
+ margin-left: 16px;
2414
+ display: inline-block;
2415
+ }
2416
+ .edit-site-sidebar-navigation-screen__page-link:hover, .edit-site-sidebar-navigation-screen__page-link:focus {
2417
+ color: #fff;
2418
+ }
2419
+ .edit-site-sidebar-navigation-screen__page-link .components-external-link__icon {
2420
+ margin-left: 4px;
2421
+ }
2422
+
2442
2423
  .edit-site-sidebar-navigation-screen__title-icon {
2443
2424
  position: sticky;
2444
2425
  top: 0;
@@ -2477,7 +2458,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2477
2458
 
2478
2459
  .edit-site-site-hub__view-mode-toggle-container {
2479
2460
  height: 60px;
2480
- width: 64px;
2461
+ width: 60px;
2481
2462
  flex-shrink: 0;
2482
2463
  background: #1e1e1e;
2483
2464
  }
@@ -2492,16 +2473,61 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2492
2473
  overflow: hidden;
2493
2474
  }
2494
2475
 
2495
- .edit-site-sidebar-navigation-screen-navigation-menus .block-editor-list-view-block__menu-edit,
2496
- .edit-site-sidebar-navigation-screen-navigation-menus .edit-site-navigation-inspector__select-menu {
2497
- display: none;
2476
+ .edit-site-sidebar-navigation-screen__description {
2477
+ margin: 0 0 32px 16px;
2498
2478
  }
2499
- .edit-site-sidebar-navigation-screen-navigation-menus .offcanvas-editor-list-view-leaf {
2479
+
2480
+ .edit-site-sidebar-navigation-screen-navigation-menus__placeholder {
2481
+ padding: 8px;
2482
+ margin: 8px;
2483
+ background-color: #f0f0f0;
2484
+ animation: loadingpulse 1s linear infinite;
2485
+ animation-delay: 0.5s;
2486
+ }
2487
+
2488
+ @keyframes loadingpulse {
2489
+ 0% {
2490
+ opacity: 1;
2491
+ }
2492
+ 50% {
2493
+ opacity: 0.5;
2494
+ }
2495
+ 100% {
2496
+ opacity: 1;
2497
+ }
2498
+ }
2499
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .offcanvas-editor-list-view-leaf {
2500
2500
  max-width: calc(100% - 4px);
2501
+ border-radius: 2px;
2502
+ }
2503
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .offcanvas-editor-list-view-leaf:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .offcanvas-editor-list-view-leaf:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .offcanvas-editor-list-view-leaf[aria-current] {
2504
+ background: #2f2f2f;
2501
2505
  }
2502
- .edit-site-sidebar-navigation-screen-navigation-menus .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
2506
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .offcanvas-editor-list-view-leaf .block-editor-list-view-block__menu {
2507
+ margin-left: -8px;
2508
+ }
2509
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
2503
2510
  width: 100%;
2504
2511
  }
2512
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2513
+ white-space: normal;
2514
+ }
2515
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
2516
+ margin-top: 3px;
2517
+ }
2518
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
2519
+ padding-right: 0;
2520
+ }
2521
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .components-button {
2522
+ color: #949494;
2523
+ }
2524
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .components-button:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .components-button:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .components-button[aria-current] {
2525
+ color: #fff;
2526
+ }
2527
+
2528
+ .edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
2529
+ display: none;
2530
+ }
2505
2531
 
2506
2532
  .edit-site-site-icon__icon {
2507
2533
  fill: currentColor;
@@ -2541,53 +2567,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
2541
2567
  bottom: 0;
2542
2568
  left: 0;
2543
2569
  overflow: auto;
2544
- padding: 32px;
2570
+ padding: 0;
2545
2571
  position: absolute;
2546
2572
  right: 0;
2547
2573
  top: 48px;
2548
2574
  }
2549
2575
 
2550
- .edit-site-style-book__examples {
2551
- max-width: 900px;
2552
- margin: 0 auto;
2553
- }
2554
-
2555
- .edit-site-style-book__example {
2556
- background: none;
2557
- border-radius: 2px;
2558
- border: none;
2559
- color: inherit;
2560
- cursor: pointer;
2561
- display: flex;
2562
- flex-direction: column;
2563
- gap: 40px;
2564
- margin-bottom: 40px;
2565
- padding: 16px;
2566
- width: 100%;
2567
- }
2568
- .edit-site-style-book__example.is-selected {
2569
- box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
2570
- }
2571
- .edit-site-style-book.is-wide .edit-site-style-book__example {
2572
- flex-direction: row;
2573
- }
2574
-
2575
- .edit-site-style-book__example-title {
2576
- font-size: 11px;
2577
- font-weight: 500;
2578
- margin: 0;
2579
- text-align: left;
2580
- text-transform: uppercase;
2581
- }
2582
- .edit-site-style-book.is-wide .edit-site-style-book__example-title {
2583
- text-align: right;
2584
- width: 120px;
2585
- }
2586
-
2587
- .edit-site-style-book__example-preview {
2588
- width: 100%;
2589
- }
2590
-
2591
2576
  .edit-site-push-changes-to-global-styles-control .components-button {
2592
2577
  justify-content: center;
2593
2578
  width: 100%;