@wordpress/edit-site 4.16.0 → 4.17.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 (231) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/block-editor/block-inspector-button.js +1 -1
  3. package/build/components/block-editor/block-inspector-button.js.map +1 -1
  4. package/build/components/block-editor/index.js +17 -11
  5. package/build/components/block-editor/index.js.map +1 -1
  6. package/build/components/editor/index.js +5 -7
  7. package/build/components/editor/index.js.map +1 -1
  8. package/build/components/global-styles/preview.js +84 -49
  9. package/build/components/global-styles/preview.js.map +1 -1
  10. package/build/components/global-styles/screen-style-variations.js +35 -4
  11. package/build/components/global-styles/screen-style-variations.js.map +1 -1
  12. package/build/components/global-styles/typography-panel.js +15 -2
  13. package/build/components/global-styles/typography-panel.js.map +1 -1
  14. package/build/components/global-styles/typography-utils.js +39 -176
  15. package/build/components/global-styles/typography-utils.js.map +1 -1
  16. package/build/components/global-styles/use-global-styles-output.js +27 -9
  17. package/build/components/global-styles/use-global-styles-output.js.map +1 -1
  18. package/build/components/{header → header-edit-mode}/document-actions/index.js +58 -24
  19. package/build/components/header-edit-mode/document-actions/index.js.map +1 -0
  20. package/build/components/{header → header-edit-mode}/index.js +13 -49
  21. package/build/components/header-edit-mode/index.js.map +1 -0
  22. package/build/components/{header → header-edit-mode}/mode-switcher/index.js +0 -0
  23. package/build/components/header-edit-mode/mode-switcher/index.js.map +1 -0
  24. package/build/components/{header → header-edit-mode}/more-menu/copy-content-menu-item.js +0 -0
  25. package/build/components/header-edit-mode/more-menu/copy-content-menu-item.js.map +1 -0
  26. package/build/components/{header → header-edit-mode}/more-menu/index.js +0 -0
  27. package/build/components/header-edit-mode/more-menu/index.js.map +1 -0
  28. package/build/components/{header → header-edit-mode}/more-menu/site-export.js +0 -0
  29. package/build/components/header-edit-mode/more-menu/site-export.js.map +1 -0
  30. package/build/components/{header → header-edit-mode}/more-menu/welcome-guide-menu-item.js +0 -0
  31. package/build/components/header-edit-mode/more-menu/welcome-guide-menu-item.js.map +1 -0
  32. package/build/components/{header → header-edit-mode}/plugin-more-menu-item/index.js +0 -0
  33. package/build/components/header-edit-mode/plugin-more-menu-item/index.js.map +1 -0
  34. package/build/components/{header → header-edit-mode}/plugin-sidebar-more-menu-item/index.js +0 -0
  35. package/build/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js.map +1 -0
  36. package/build/components/{header → header-edit-mode}/tools-more-menu-group/index.js +0 -0
  37. package/build/components/header-edit-mode/tools-more-menu-group/index.js.map +1 -0
  38. package/build/components/{header → header-edit-mode}/undo-redo/redo.js +0 -0
  39. package/build/components/header-edit-mode/undo-redo/redo.js.map +1 -0
  40. package/build/components/{header → header-edit-mode}/undo-redo/undo.js +0 -0
  41. package/build/components/header-edit-mode/undo-redo/undo.js.map +1 -0
  42. package/build/components/keyboard-shortcuts/index.js +1 -1
  43. package/build/components/keyboard-shortcuts/index.js.map +1 -1
  44. package/build/components/{sidebar → sidebar-edit-mode}/constants.js +0 -0
  45. package/build/components/sidebar-edit-mode/constants.js.map +1 -0
  46. package/build/components/{sidebar → sidebar-edit-mode}/default-sidebar.js +0 -0
  47. package/build/components/sidebar-edit-mode/default-sidebar.js.map +1 -0
  48. package/build/components/{sidebar → sidebar-edit-mode}/global-styles-sidebar.js +0 -0
  49. package/build/components/sidebar-edit-mode/global-styles-sidebar.js.map +1 -0
  50. package/build/components/{sidebar → sidebar-edit-mode}/index.js +1 -1
  51. package/build/components/sidebar-edit-mode/index.js.map +1 -0
  52. package/build/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/index.js +0 -0
  53. package/build/components/sidebar-edit-mode/navigation-menu-sidebar/index.js.map +1 -0
  54. package/build/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-inspector.js +0 -0
  55. package/build/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js.map +1 -0
  56. package/build/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-menu.js +0 -0
  57. package/build/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js.map +1 -0
  58. package/build/components/{sidebar → sidebar-edit-mode}/plugin-sidebar/index.js +1 -1
  59. package/build/components/sidebar-edit-mode/plugin-sidebar/index.js.map +1 -0
  60. package/build/components/{sidebar → sidebar-edit-mode}/settings-header/index.js +2 -2
  61. package/build/components/sidebar-edit-mode/settings-header/index.js.map +1 -0
  62. package/build/components/{sidebar → sidebar-edit-mode}/template-card/index.js +0 -0
  63. package/build/components/sidebar-edit-mode/template-card/index.js.map +1 -0
  64. package/build/components/{sidebar → sidebar-edit-mode}/template-card/template-actions.js +0 -0
  65. package/build/components/sidebar-edit-mode/template-card/template-actions.js.map +1 -0
  66. package/build/components/{sidebar → sidebar-edit-mode}/template-card/template-areas.js +0 -0
  67. package/build/components/sidebar-edit-mode/template-card/template-areas.js.map +1 -0
  68. package/build/index.js +3 -3
  69. package/build/index.js.map +1 -1
  70. package/build-module/components/block-editor/block-inspector-button.js +1 -1
  71. package/build-module/components/block-editor/block-inspector-button.js.map +1 -1
  72. package/build-module/components/block-editor/index.js +16 -10
  73. package/build-module/components/block-editor/index.js.map +1 -1
  74. package/build-module/components/editor/index.js +4 -6
  75. package/build-module/components/editor/index.js.map +1 -1
  76. package/build-module/components/global-styles/preview.js +84 -49
  77. package/build-module/components/global-styles/preview.js.map +1 -1
  78. package/build-module/components/global-styles/screen-style-variations.js +36 -6
  79. package/build-module/components/global-styles/screen-style-variations.js.map +1 -1
  80. package/build-module/components/global-styles/typography-panel.js +14 -2
  81. package/build-module/components/global-styles/typography-panel.js.map +1 -1
  82. package/build-module/components/global-styles/typography-utils.js +37 -169
  83. package/build-module/components/global-styles/typography-utils.js.map +1 -1
  84. package/build-module/components/global-styles/use-global-styles-output.js +26 -9
  85. package/build-module/components/global-styles/use-global-styles-output.js.map +1 -1
  86. package/build-module/components/{header → header-edit-mode}/document-actions/index.js +53 -24
  87. package/build-module/components/header-edit-mode/document-actions/index.js.map +1 -0
  88. package/build-module/components/{header → header-edit-mode}/index.js +13 -46
  89. package/build-module/components/header-edit-mode/index.js.map +1 -0
  90. package/build-module/components/{header → header-edit-mode}/mode-switcher/index.js +0 -0
  91. package/build-module/components/header-edit-mode/mode-switcher/index.js.map +1 -0
  92. package/build-module/components/{header → header-edit-mode}/more-menu/copy-content-menu-item.js +0 -0
  93. package/build-module/components/header-edit-mode/more-menu/copy-content-menu-item.js.map +1 -0
  94. package/build-module/components/{header → header-edit-mode}/more-menu/index.js +0 -0
  95. package/build-module/components/header-edit-mode/more-menu/index.js.map +1 -0
  96. package/build-module/components/{header → header-edit-mode}/more-menu/site-export.js +0 -0
  97. package/build-module/components/header-edit-mode/more-menu/site-export.js.map +1 -0
  98. package/build-module/components/{header → header-edit-mode}/more-menu/welcome-guide-menu-item.js +0 -0
  99. package/build-module/components/header-edit-mode/more-menu/welcome-guide-menu-item.js.map +1 -0
  100. package/build-module/components/{header → header-edit-mode}/plugin-more-menu-item/index.js +0 -0
  101. package/build-module/components/header-edit-mode/plugin-more-menu-item/index.js.map +1 -0
  102. package/build-module/components/{header → header-edit-mode}/plugin-sidebar-more-menu-item/index.js +0 -0
  103. package/build-module/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js.map +1 -0
  104. package/build-module/components/{header → header-edit-mode}/tools-more-menu-group/index.js +0 -0
  105. package/build-module/components/header-edit-mode/tools-more-menu-group/index.js.map +1 -0
  106. package/build-module/components/{header → header-edit-mode}/undo-redo/redo.js +0 -0
  107. package/build-module/components/header-edit-mode/undo-redo/redo.js.map +1 -0
  108. package/build-module/components/{header → header-edit-mode}/undo-redo/undo.js +0 -0
  109. package/build-module/components/header-edit-mode/undo-redo/undo.js.map +1 -0
  110. package/build-module/components/keyboard-shortcuts/index.js +1 -1
  111. package/build-module/components/keyboard-shortcuts/index.js.map +1 -1
  112. package/build-module/components/{sidebar → sidebar-edit-mode}/constants.js +0 -0
  113. package/build-module/components/sidebar-edit-mode/constants.js.map +1 -0
  114. package/build-module/components/{sidebar → sidebar-edit-mode}/default-sidebar.js +0 -0
  115. package/build-module/components/sidebar-edit-mode/default-sidebar.js.map +1 -0
  116. package/build-module/components/{sidebar → sidebar-edit-mode}/global-styles-sidebar.js +0 -0
  117. package/build-module/components/sidebar-edit-mode/global-styles-sidebar.js.map +1 -0
  118. package/build-module/components/{sidebar → sidebar-edit-mode}/index.js +1 -1
  119. package/build-module/components/sidebar-edit-mode/index.js.map +1 -0
  120. package/build-module/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/index.js +0 -0
  121. package/build-module/components/sidebar-edit-mode/navigation-menu-sidebar/index.js.map +1 -0
  122. package/build-module/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-inspector.js +0 -0
  123. package/build-module/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js.map +1 -0
  124. package/build-module/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-menu.js +0 -0
  125. package/build-module/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js.map +1 -0
  126. package/build-module/components/{sidebar → sidebar-edit-mode}/plugin-sidebar/index.js +1 -1
  127. package/build-module/components/sidebar-edit-mode/plugin-sidebar/index.js.map +1 -0
  128. package/build-module/components/{sidebar → sidebar-edit-mode}/settings-header/index.js +2 -2
  129. package/build-module/components/sidebar-edit-mode/settings-header/index.js.map +1 -0
  130. package/build-module/components/{sidebar → sidebar-edit-mode}/template-card/index.js +0 -0
  131. package/build-module/components/sidebar-edit-mode/template-card/index.js.map +1 -0
  132. package/build-module/components/{sidebar → sidebar-edit-mode}/template-card/template-actions.js +0 -0
  133. package/build-module/components/sidebar-edit-mode/template-card/template-actions.js.map +1 -0
  134. package/build-module/components/{sidebar → sidebar-edit-mode}/template-card/template-areas.js +0 -0
  135. package/build-module/components/sidebar-edit-mode/template-card/template-areas.js.map +1 -0
  136. package/build-module/index.js +3 -3
  137. package/build-module/index.js.map +1 -1
  138. package/build-style/style-rtl.css +61 -86
  139. package/build-style/style.css +61 -86
  140. package/package.json +29 -29
  141. package/src/components/block-editor/block-inspector-button.js +1 -1
  142. package/src/components/block-editor/index.js +29 -11
  143. package/src/components/editor/index.js +2 -4
  144. package/src/components/global-styles/preview.js +80 -59
  145. package/src/components/global-styles/screen-style-variations.js +39 -4
  146. package/src/components/global-styles/test/typography-utils.js +333 -103
  147. package/src/components/global-styles/test/use-global-styles-output.js +57 -3
  148. package/src/components/global-styles/typography-panel.js +14 -1
  149. package/src/components/global-styles/typography-utils.js +34 -195
  150. package/src/components/global-styles/use-global-styles-output.js +16 -0
  151. package/src/components/{header → header-edit-mode}/document-actions/index.js +67 -46
  152. package/src/components/{header → header-edit-mode}/document-actions/style.scss +0 -0
  153. package/src/components/{header → header-edit-mode}/index.js +12 -44
  154. package/src/components/{header → header-edit-mode}/mode-switcher/index.js +0 -0
  155. package/src/components/{header → header-edit-mode}/more-menu/copy-content-menu-item.js +0 -0
  156. package/src/components/{header → header-edit-mode}/more-menu/index.js +0 -0
  157. package/src/components/{header → header-edit-mode}/more-menu/site-export.js +0 -0
  158. package/src/components/{header → header-edit-mode}/more-menu/welcome-guide-menu-item.js +0 -0
  159. package/src/components/{header → header-edit-mode}/plugin-more-menu-item/index.js +0 -0
  160. package/src/components/{header → header-edit-mode}/plugin-sidebar-more-menu-item/index.js +0 -0
  161. package/src/components/{header → header-edit-mode}/style.scss +20 -50
  162. package/src/components/{header → header-edit-mode}/tools-more-menu-group/index.js +0 -0
  163. package/src/components/{header → header-edit-mode}/undo-redo/redo.js +0 -0
  164. package/src/components/{header → header-edit-mode}/undo-redo/undo.js +0 -0
  165. package/src/components/keyboard-shortcuts/index.js +1 -1
  166. package/src/components/{sidebar → sidebar-edit-mode}/constants.js +0 -0
  167. package/src/components/{sidebar → sidebar-edit-mode}/default-sidebar.js +0 -0
  168. package/src/components/{sidebar → sidebar-edit-mode}/global-styles-sidebar.js +0 -0
  169. package/src/components/{sidebar → sidebar-edit-mode}/index.js +1 -1
  170. package/src/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/index.js +0 -0
  171. package/src/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-inspector.js +0 -0
  172. package/src/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/navigation-menu.js +0 -0
  173. package/src/components/{sidebar → sidebar-edit-mode}/navigation-menu-sidebar/style.scss +0 -0
  174. package/src/components/{sidebar → sidebar-edit-mode}/plugin-sidebar/index.js +1 -1
  175. package/src/components/{sidebar → sidebar-edit-mode}/settings-header/index.js +2 -2
  176. package/src/components/{sidebar → sidebar-edit-mode}/settings-header/style.scss +2 -2
  177. package/src/components/{sidebar → sidebar-edit-mode}/style.scss +1 -1
  178. package/src/components/{sidebar → sidebar-edit-mode}/template-card/index.js +0 -0
  179. package/src/components/{sidebar → sidebar-edit-mode}/template-card/style.scss +0 -0
  180. package/src/components/{sidebar → sidebar-edit-mode}/template-card/template-actions.js +0 -0
  181. package/src/components/{sidebar → sidebar-edit-mode}/template-card/template-areas.js +0 -0
  182. package/src/index.js +3 -3
  183. package/src/style.scss +6 -6
  184. package/build/components/header/document-actions/index.js.map +0 -1
  185. package/build/components/header/index.js.map +0 -1
  186. package/build/components/header/mode-switcher/index.js.map +0 -1
  187. package/build/components/header/more-menu/copy-content-menu-item.js.map +0 -1
  188. package/build/components/header/more-menu/index.js.map +0 -1
  189. package/build/components/header/more-menu/site-export.js.map +0 -1
  190. package/build/components/header/more-menu/welcome-guide-menu-item.js.map +0 -1
  191. package/build/components/header/plugin-more-menu-item/index.js.map +0 -1
  192. package/build/components/header/plugin-sidebar-more-menu-item/index.js.map +0 -1
  193. package/build/components/header/tools-more-menu-group/index.js.map +0 -1
  194. package/build/components/header/undo-redo/redo.js.map +0 -1
  195. package/build/components/header/undo-redo/undo.js.map +0 -1
  196. package/build/components/sidebar/constants.js.map +0 -1
  197. package/build/components/sidebar/default-sidebar.js.map +0 -1
  198. package/build/components/sidebar/global-styles-sidebar.js.map +0 -1
  199. package/build/components/sidebar/index.js.map +0 -1
  200. package/build/components/sidebar/navigation-menu-sidebar/index.js.map +0 -1
  201. package/build/components/sidebar/navigation-menu-sidebar/navigation-inspector.js.map +0 -1
  202. package/build/components/sidebar/navigation-menu-sidebar/navigation-menu.js.map +0 -1
  203. package/build/components/sidebar/plugin-sidebar/index.js.map +0 -1
  204. package/build/components/sidebar/settings-header/index.js.map +0 -1
  205. package/build/components/sidebar/template-card/index.js.map +0 -1
  206. package/build/components/sidebar/template-card/template-actions.js.map +0 -1
  207. package/build/components/sidebar/template-card/template-areas.js.map +0 -1
  208. package/build-module/components/header/document-actions/index.js.map +0 -1
  209. package/build-module/components/header/index.js.map +0 -1
  210. package/build-module/components/header/mode-switcher/index.js.map +0 -1
  211. package/build-module/components/header/more-menu/copy-content-menu-item.js.map +0 -1
  212. package/build-module/components/header/more-menu/index.js.map +0 -1
  213. package/build-module/components/header/more-menu/site-export.js.map +0 -1
  214. package/build-module/components/header/more-menu/welcome-guide-menu-item.js.map +0 -1
  215. package/build-module/components/header/plugin-more-menu-item/index.js.map +0 -1
  216. package/build-module/components/header/plugin-sidebar-more-menu-item/index.js.map +0 -1
  217. package/build-module/components/header/tools-more-menu-group/index.js.map +0 -1
  218. package/build-module/components/header/undo-redo/redo.js.map +0 -1
  219. package/build-module/components/header/undo-redo/undo.js.map +0 -1
  220. package/build-module/components/sidebar/constants.js.map +0 -1
  221. package/build-module/components/sidebar/default-sidebar.js.map +0 -1
  222. package/build-module/components/sidebar/global-styles-sidebar.js.map +0 -1
  223. package/build-module/components/sidebar/index.js.map +0 -1
  224. package/build-module/components/sidebar/navigation-menu-sidebar/index.js.map +0 -1
  225. package/build-module/components/sidebar/navigation-menu-sidebar/navigation-inspector.js.map +0 -1
  226. package/build-module/components/sidebar/navigation-menu-sidebar/navigation-menu.js.map +0 -1
  227. package/build-module/components/sidebar/plugin-sidebar/index.js.map +0 -1
  228. package/build-module/components/sidebar/settings-header/index.js.map +0 -1
  229. package/build-module/components/sidebar/template-card/index.js.map +0 -1
  230. package/build-module/components/sidebar/template-card/template-actions.js.map +0 -1
  231. package/build-module/components/sidebar/template-card/template-areas.js.map +0 -1
@@ -805,7 +805,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
805
805
  text-overflow: ellipsis;
806
806
  }
807
807
 
808
- .edit-site-header {
808
+ .edit-site-header-edit-mode {
809
809
  align-items: center;
810
810
  background-color: #fff;
811
811
  display: flex;
@@ -814,26 +814,26 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
814
814
  width: 100%;
815
815
  justify-content: space-between;
816
816
  }
817
- body.is-fullscreen-mode .edit-site-header {
817
+ body.is-fullscreen-mode .edit-site-header-edit-mode {
818
818
  padding-left: 60px;
819
819
  transition: padding-left 20ms linear;
820
820
  transition-delay: 80ms;
821
821
  }
822
822
  @media (prefers-reduced-motion: reduce) {
823
- body.is-fullscreen-mode .edit-site-header {
823
+ body.is-fullscreen-mode .edit-site-header-edit-mode {
824
824
  transition-duration: 0s;
825
825
  transition-delay: 0s;
826
826
  }
827
827
  }
828
- .edit-site-header .edit-site-header_start {
828
+ .edit-site-header-edit-mode .edit-site-header-edit-mode__start {
829
829
  display: flex;
830
830
  border: none;
831
831
  }
832
- .edit-site-header .edit-site-header_end {
832
+ .edit-site-header-edit-mode .edit-site-header-edit-mode__end {
833
833
  display: flex;
834
834
  justify-content: flex-end;
835
835
  }
836
- .edit-site-header .edit-site-header_center {
836
+ .edit-site-header-edit-mode .edit-site-header-edit-mode__center {
837
837
  display: flex;
838
838
  align-items: center;
839
839
  height: 100%;
@@ -842,187 +842,162 @@ body.is-fullscreen-mode .edit-site-header {
842
842
  min-width: 0;
843
843
  }
844
844
 
845
- body.is-navigation-sidebar-open .edit-site-header {
845
+ body.is-navigation-sidebar-open .edit-site-header-edit-mode {
846
846
  padding-left: 0;
847
847
  transition: padding-left 20ms linear;
848
848
  transition-delay: 0ms;
849
849
  }
850
850
  @media (prefers-reduced-motion: reduce) {
851
- body.is-navigation-sidebar-open .edit-site-header {
851
+ body.is-navigation-sidebar-open .edit-site-header-edit-mode {
852
852
  transition-duration: 0s;
853
853
  transition-delay: 0s;
854
854
  }
855
855
  }
856
856
 
857
857
  @media (max-width: 959px) {
858
- body.is-navigation-sidebar-open .edit-site-header .edit-site-header-toolbar__inserter-toggle ~ .components-button,
859
- body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .components-button:not(.is-primary) {
858
+ body.is-navigation-sidebar-open .edit-site-header-edit-mode .edit-site-header-edit-mode__inserter-toggle ~ .components-button,
859
+ body.is-navigation-sidebar-open .edit-site-header-edit-mode .edit-site-header-edit-mode__end .components-button:not(.is-primary) {
860
860
  display: none;
861
861
  }
862
- body.is-navigation-sidebar-open .edit-site-header .edit-site-save-button__button {
862
+ body.is-navigation-sidebar-open .edit-site-header-edit-mode .edit-site-save-button__button {
863
863
  margin-right: 0;
864
864
  }
865
865
  }
866
- .edit-site-header__toolbar {
866
+ .edit-site-header-edit-mode__toolbar {
867
867
  display: flex;
868
868
  align-items: center;
869
869
  padding-left: 8px;
870
870
  }
871
871
  @media (min-width: 600px) {
872
- .edit-site-header__toolbar {
872
+ .edit-site-header-edit-mode__toolbar {
873
873
  padding-left: 24px;
874
874
  }
875
875
  }
876
876
  @media (min-width: 1280px) {
877
- .edit-site-header__toolbar {
877
+ .edit-site-header-edit-mode__toolbar {
878
878
  padding-right: 8px;
879
879
  }
880
880
  }
881
- .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle {
881
+ .edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle {
882
882
  margin-right: 8px;
883
883
  min-width: 32px;
884
884
  width: 32px;
885
885
  height: 32px;
886
886
  padding: 0;
887
887
  }
888
- .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg {
888
+ .edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle svg {
889
889
  transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
890
890
  }
891
891
  @media (prefers-reduced-motion: reduce) {
892
- .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg {
892
+ .edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle svg {
893
893
  transition-duration: 0s;
894
894
  transition-delay: 0s;
895
895
  }
896
896
  }
897
- .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle.is-pressed svg {
897
+ .edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle.is-pressed svg {
898
898
  transform: rotate(45deg);
899
899
  }
900
900
 
901
- .edit-site-header__toolbar-switchers {
902
- align-items: center;
903
- display: flex;
904
- }
905
-
906
- .edit-site-header__toolbar-switchers-separator {
907
- margin: 0 -6px 0;
908
- }
909
-
910
901
  /**
911
902
  * Buttons on the right side
912
903
  */
913
- .edit-site-header__actions {
904
+ .edit-site-header-edit-mode__actions {
914
905
  display: inline-flex;
915
906
  align-items: center;
916
907
  padding-right: 4px;
917
908
  gap: 4px;
918
909
  }
919
910
  @media (min-width: 600px) {
920
- .edit-site-header__actions {
911
+ .edit-site-header-edit-mode__actions {
921
912
  padding-right: 10px;
922
913
  }
923
914
  }
924
915
  @media (min-width: 600px) {
925
- .edit-site-header__actions {
916
+ .edit-site-header-edit-mode__actions {
926
917
  gap: 8px;
927
918
  }
928
919
  }
929
- .edit-site-header__actions .interface-pinned-items {
920
+ .edit-site-header-edit-mode__actions .interface-pinned-items {
930
921
  display: none;
931
922
  }
932
923
  @media (min-width: 782px) {
933
- .edit-site-header__actions .interface-pinned-items {
924
+ .edit-site-header-edit-mode__actions .interface-pinned-items {
934
925
  display: inline-flex;
935
926
  }
936
927
  }
937
928
 
938
- .edit-site-header__actions__preview-options {
929
+ .edit-site-header-edit-mode__preview-options {
939
930
  opacity: 1;
940
931
  transition: opacity 0.3s;
941
932
  }
942
- .edit-site-header__actions__preview-options.is-zoomed-out {
933
+ .edit-site-header-edit-mode__preview-options.is-zoomed-out {
943
934
  opacity: 0;
944
935
  }
945
936
 
946
- .edit-site-header__actions-more-menu {
947
- margin-left: -4px;
948
- }
949
- .edit-site-header__actions-more-menu .components-icon-button {
950
- padding: 8px 2px;
951
- width: auto;
952
- }
953
- @media (min-width: 600px) {
954
- .edit-site-header__actions-more-menu {
955
- margin-left: 4px;
956
- }
957
- .edit-site-header__actions-more-menu .components-icon-button {
958
- padding: 8px 4px;
959
- }
960
- }
961
-
962
- .edit-site-header_start {
937
+ .edit-site-header-edit-mode__start {
963
938
  display: flex;
964
939
  border: none;
965
940
  }
966
- .edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon,
967
- .edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon {
941
+ .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon,
942
+ .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
968
943
  height: 36px;
969
944
  min-width: 36px;
970
945
  padding: 6px;
971
946
  }
972
- .edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon.is-pressed,
973
- .edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
947
+ .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon.is-pressed,
948
+ .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
974
949
  background: #1e1e1e;
975
950
  }
976
- .edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon:focus:not(:disabled),
977
- .edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
951
+ .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon:focus:not(:disabled),
952
+ .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
978
953
  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
979
954
  outline: 1px solid transparent;
980
955
  }
981
- .edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon::before,
982
- .edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon::before {
956
+ .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon::before,
957
+ .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon::before {
983
958
  display: none;
984
959
  }
985
- .edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon {
960
+ .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
986
961
  margin-right: 8px;
987
962
  min-width: 32px;
988
963
  width: 32px;
989
964
  height: 32px;
990
965
  padding: 0;
991
966
  }
992
- .edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon {
967
+ .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
993
968
  width: auto;
994
969
  padding: 0 8px;
995
970
  }
996
971
 
997
- .show-icon-labels .edit-site-header .components-button.has-icon {
972
+ .show-icon-labels .edit-site-header-edit-mode .components-button.has-icon {
998
973
  width: auto;
999
974
  }
1000
- .show-icon-labels .edit-site-header .components-button.has-icon svg {
975
+ .show-icon-labels .edit-site-header-edit-mode .components-button.has-icon svg {
1001
976
  display: none;
1002
977
  }
1003
- .show-icon-labels .edit-site-header .components-button.has-icon::after {
978
+ .show-icon-labels .edit-site-header-edit-mode .components-button.has-icon::after {
1004
979
  content: attr(aria-label);
1005
980
  }
1006
- .show-icon-labels .edit-site-header .components-button.has-icon[aria-disabled=true] {
981
+ .show-icon-labels .edit-site-header-edit-mode .components-button.has-icon[aria-disabled=true] {
1007
982
  background-color: transparent;
1008
983
  }
1009
- .show-icon-labels .edit-site-header .is-tertiary:active {
984
+ .show-icon-labels .edit-site-header-edit-mode .is-tertiary:active {
1010
985
  box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
1011
986
  background-color: transparent;
1012
987
  }
1013
- .show-icon-labels .edit-site-header .edit-site-save-button__button {
988
+ .show-icon-labels .edit-site-header-edit-mode .edit-site-save-button__button {
1014
989
  padding-left: 6px;
1015
990
  padding-right: 6px;
1016
991
  }
1017
- .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
992
+ .show-icon-labels .edit-site-header-edit-mode .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
1018
993
  content: none;
1019
994
  }
1020
- .show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
1021
- .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
995
+ .show-icon-labels .edit-site-header-edit-mode .edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
996
+ .show-icon-labels .edit-site-header-edit-mode .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
1022
997
  height: 36px;
1023
998
  padding: 0 8px;
1024
999
  }
1025
- .show-icon-labels .edit-site-header .edit-site-header_start .edit-site-header__toolbar > * + * {
1000
+ .show-icon-labels .edit-site-header-edit-mode .edit-site-header__start .edit-site-header__toolbar > * + * {
1026
1001
  margin-left: 8px;
1027
1002
  }
1028
1003
 
@@ -1638,19 +1613,19 @@ body.is-fullscreen-mode .edit-site-list-header {
1638
1613
  height: 100%;
1639
1614
  }
1640
1615
 
1641
- .edit-site-sidebar {
1616
+ .edit-site-sidebar-edit-mode {
1642
1617
  width: 280px;
1643
1618
  }
1644
- .edit-site-sidebar > .components-panel {
1619
+ .edit-site-sidebar-edit-mode > .components-panel {
1645
1620
  border-left: 0;
1646
1621
  border-right: 0;
1647
1622
  margin-bottom: -1px;
1648
1623
  margin-top: -1px;
1649
1624
  }
1650
- .edit-site-sidebar > .components-panel > .components-panel__header {
1625
+ .edit-site-sidebar-edit-mode > .components-panel > .components-panel__header {
1651
1626
  background: #f0f0f0;
1652
1627
  }
1653
- .edit-site-sidebar .block-editor-block-inspector__card {
1628
+ .edit-site-sidebar-edit-mode .block-editor-block-inspector__card {
1654
1629
  margin: 0;
1655
1630
  }
1656
1631
 
@@ -1729,20 +1704,20 @@ body.is-fullscreen-mode .edit-site-list-header {
1729
1704
  margin: 0;
1730
1705
  }
1731
1706
 
1732
- .components-panel__header.edit-site-sidebar__panel-tabs {
1707
+ .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
1733
1708
  justify-content: flex-start;
1734
1709
  padding-left: 0;
1735
1710
  padding-right: 16px;
1736
1711
  border-top: 0;
1737
1712
  margin-top: 0;
1738
1713
  }
1739
- .components-panel__header.edit-site-sidebar__panel-tabs ul {
1714
+ .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs ul {
1740
1715
  display: flex;
1741
1716
  }
1742
- .components-panel__header.edit-site-sidebar__panel-tabs li {
1717
+ .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs li {
1743
1718
  margin: 0;
1744
1719
  }
1745
- .components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon {
1720
+ .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs .components-button.has-icon {
1746
1721
  display: none;
1747
1722
  margin: 0 0 0 auto;
1748
1723
  padding: 0;
@@ -1750,12 +1725,12 @@ body.is-fullscreen-mode .edit-site-list-header {
1750
1725
  height: 24px;
1751
1726
  }
1752
1727
  @media (min-width: 782px) {
1753
- .components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon {
1728
+ .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs .components-button.has-icon {
1754
1729
  display: flex;
1755
1730
  }
1756
1731
  }
1757
1732
 
1758
- .components-button.edit-site-sidebar__panel-tab {
1733
+ .components-button.edit-site-sidebar-edit-mode__panel-tab {
1759
1734
  border-radius: 0;
1760
1735
  height: 48px;
1761
1736
  background: transparent;
@@ -1767,7 +1742,7 @@ body.is-fullscreen-mode .edit-site-list-header {
1767
1742
  margin-left: 0;
1768
1743
  font-weight: 500;
1769
1744
  }
1770
- .components-button.edit-site-sidebar__panel-tab::after {
1745
+ .components-button.edit-site-sidebar-edit-mode__panel-tab::after {
1771
1746
  content: attr(data-label);
1772
1747
  display: block;
1773
1748
  font-weight: 600;
@@ -1776,12 +1751,12 @@ body.is-fullscreen-mode .edit-site-list-header {
1776
1751
  speak: none;
1777
1752
  visibility: hidden;
1778
1753
  }
1779
- .components-button.edit-site-sidebar__panel-tab.is-active {
1754
+ .components-button.edit-site-sidebar-edit-mode__panel-tab.is-active {
1780
1755
  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
1781
1756
  position: relative;
1782
1757
  z-index: 1;
1783
1758
  }
1784
- .components-button.edit-site-sidebar__panel-tab.is-active::before {
1759
+ .components-button.edit-site-sidebar-edit-mode__panel-tab.is-active::before {
1785
1760
  content: "";
1786
1761
  position: absolute;
1787
1762
  top: 0;
@@ -1790,12 +1765,12 @@ body.is-fullscreen-mode .edit-site-list-header {
1790
1765
  left: 0;
1791
1766
  border-bottom: 1.5px solid transparent;
1792
1767
  }
1793
- .components-button.edit-site-sidebar__panel-tab:focus {
1768
+ .components-button.edit-site-sidebar-edit-mode__panel-tab:focus {
1794
1769
  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1795
1770
  position: relative;
1796
1771
  z-index: 1;
1797
1772
  }
1798
- .components-button.edit-site-sidebar__panel-tab.is-active:focus {
1773
+ .components-button.edit-site-sidebar-edit-mode__panel-tab.is-active:focus {
1799
1774
  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
1800
1775
  }
1801
1776
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/edit-site",
3
- "version": "4.16.0",
3
+ "version": "4.17.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,33 +27,33 @@
27
27
  "react-native": "src/index",
28
28
  "dependencies": {
29
29
  "@babel/runtime": "^7.16.0",
30
- "@wordpress/a11y": "^3.19.0",
31
- "@wordpress/api-fetch": "^6.16.0",
32
- "@wordpress/block-editor": "^10.2.0",
33
- "@wordpress/block-library": "^7.16.0",
34
- "@wordpress/blocks": "^11.18.0",
35
- "@wordpress/components": "^21.2.0",
36
- "@wordpress/compose": "^5.17.0",
37
- "@wordpress/core-data": "^5.2.0",
38
- "@wordpress/data": "^7.3.0",
39
- "@wordpress/deprecated": "^3.19.0",
40
- "@wordpress/editor": "^12.18.0",
41
- "@wordpress/element": "^4.17.0",
42
- "@wordpress/hooks": "^3.19.0",
43
- "@wordpress/html-entities": "^3.19.0",
44
- "@wordpress/i18n": "^4.19.0",
45
- "@wordpress/icons": "^9.10.0",
46
- "@wordpress/interface": "^4.18.0",
47
- "@wordpress/keyboard-shortcuts": "^3.17.0",
48
- "@wordpress/keycodes": "^3.19.0",
49
- "@wordpress/media-utils": "^4.10.0",
50
- "@wordpress/notices": "^3.19.0",
51
- "@wordpress/plugins": "^4.17.0",
52
- "@wordpress/preferences": "^2.11.0",
53
- "@wordpress/reusable-blocks": "^3.17.0",
54
- "@wordpress/style-engine": "^1.2.0",
55
- "@wordpress/url": "^3.20.0",
56
- "@wordpress/viewport": "^4.17.0",
30
+ "@wordpress/a11y": "^3.20.0",
31
+ "@wordpress/api-fetch": "^6.17.0",
32
+ "@wordpress/block-editor": "^10.3.0",
33
+ "@wordpress/block-library": "^7.17.0",
34
+ "@wordpress/blocks": "^11.19.0",
35
+ "@wordpress/components": "^21.3.0",
36
+ "@wordpress/compose": "^5.18.0",
37
+ "@wordpress/core-data": "^5.3.0",
38
+ "@wordpress/data": "^7.4.0",
39
+ "@wordpress/deprecated": "^3.20.0",
40
+ "@wordpress/editor": "^12.19.0",
41
+ "@wordpress/element": "^4.18.0",
42
+ "@wordpress/hooks": "^3.20.0",
43
+ "@wordpress/html-entities": "^3.20.0",
44
+ "@wordpress/i18n": "^4.20.0",
45
+ "@wordpress/icons": "^9.11.0",
46
+ "@wordpress/interface": "^4.19.0",
47
+ "@wordpress/keyboard-shortcuts": "^3.18.0",
48
+ "@wordpress/keycodes": "^3.20.0",
49
+ "@wordpress/media-utils": "^4.11.0",
50
+ "@wordpress/notices": "^3.20.0",
51
+ "@wordpress/plugins": "^4.18.0",
52
+ "@wordpress/preferences": "^2.12.0",
53
+ "@wordpress/reusable-blocks": "^3.18.0",
54
+ "@wordpress/style-engine": "^1.3.0",
55
+ "@wordpress/url": "^3.21.0",
56
+ "@wordpress/viewport": "^4.18.0",
57
57
  "classnames": "^2.3.1",
58
58
  "downloadjs": "^1.4.7",
59
59
  "history": "^5.1.0",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
71
+ "gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
72
72
  }
@@ -13,7 +13,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
13
13
  */
14
14
  import { store as editSiteStore } from '../../store';
15
15
  import { STORE_NAME } from '../../store/constants';
16
- import { SIDEBAR_BLOCK } from '../sidebar/constants';
16
+ import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
17
17
 
18
18
  export default function BlockInspectorButton( { onClick = () => {} } ) {
19
19
  const { shortcut, isBlockInspectorOpen } = useSelect(
@@ -34,7 +34,7 @@ import { store as interfaceStore } from '@wordpress/interface';
34
34
  */
35
35
  import TemplatePartConverter from '../template-part-converter';
36
36
  import NavigateToLink from '../navigate-to-link';
37
- import { SidebarInspectorFill } from '../sidebar';
37
+ import { SidebarInspectorFill } from '../sidebar-edit-mode';
38
38
  import { store as editSiteStore } from '../../store';
39
39
  import BlockInspectorButton from './block-inspector-button';
40
40
  import BackButton from './back-button';
@@ -46,8 +46,16 @@ const LAYOUT = {
46
46
  alignments: [],
47
47
  };
48
48
 
49
+ const NAVIGATION_SIDEBAR_NAME = 'edit-site/navigation-menu';
50
+
49
51
  export default function BlockEditor( { setIsInserterOpen } ) {
50
- const { storedSettings, templateType, templateId, page } = useSelect(
52
+ const {
53
+ storedSettings,
54
+ templateType,
55
+ templateId,
56
+ page,
57
+ isNavigationSidebarOpen,
58
+ } = useSelect(
51
59
  ( select ) => {
52
60
  const { getSettings, getEditedPostType, getEditedPostId, getPage } =
53
61
  select( editSiteStore );
@@ -57,6 +65,10 @@ export default function BlockEditor( { setIsInserterOpen } ) {
57
65
  templateType: getEditedPostType(),
58
66
  templateId: getEditedPostId(),
59
67
  page: getPage(),
68
+ isNavigationSidebarOpen:
69
+ select( interfaceStore ).getActiveComplementaryArea(
70
+ editSiteStore.name
71
+ ) === NAVIGATION_SIDEBAR_NAME,
60
72
  };
61
73
  },
62
74
  [ setIsInserterOpen ]
@@ -129,13 +141,14 @@ export default function BlockEditor( { setIsInserterOpen } ) {
129
141
  templateType
130
142
  );
131
143
  const { setPage } = useDispatch( editSiteStore );
132
- const { enableComplementaryArea } = useDispatch( interfaceStore );
133
- const openNavigationSidebar = useCallback( () => {
134
- enableComplementaryArea(
135
- 'core/edit-site',
136
- 'edit-site/navigation-menu'
137
- );
138
- }, [ enableComplementaryArea ] );
144
+ const { enableComplementaryArea, disableComplementaryArea } =
145
+ useDispatch( interfaceStore );
146
+ const toggleNavigationSidebar = useCallback( () => {
147
+ const toggleComplementaryArea = isNavigationSidebarOpen
148
+ ? disableComplementaryArea
149
+ : enableComplementaryArea;
150
+ toggleComplementaryArea( editSiteStore.name, NAVIGATION_SIDEBAR_NAME );
151
+ }, [ isNavigationSidebarOpen ] );
139
152
  const contentRef = useRef();
140
153
  const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
141
154
  const isMobileViewport = useViewportMatch( 'small', '<' );
@@ -148,9 +161,14 @@ export default function BlockEditor( { setIsInserterOpen } ) {
148
161
  <ToolbarGroup>
149
162
  <ToolbarButton
150
163
  className="components-toolbar__control"
151
- label={ __( 'Open list view' ) }
152
- onClick={ openNavigationSidebar }
164
+ label={
165
+ isNavigationSidebarOpen
166
+ ? __( 'Close list view' )
167
+ : __( 'Open list view' )
168
+ }
169
+ onClick={ toggleNavigationSidebar }
153
170
  icon={ listView }
171
+ isActive={ isNavigationSidebarOpen }
154
172
  />
155
173
  </ToolbarGroup>
156
174
  );
@@ -8,7 +8,6 @@ import { EntityProvider, store as coreStore } from '@wordpress/core-data';
8
8
  import {
9
9
  BlockContextProvider,
10
10
  BlockBreadcrumb,
11
- BlockStyles,
12
11
  store as blockEditorStore,
13
12
  } from '@wordpress/block-editor';
14
13
  import {
@@ -31,8 +30,8 @@ import { store as preferencesStore } from '@wordpress/preferences';
31
30
  /**
32
31
  * Internal dependencies
33
32
  */
34
- import Header from '../header';
35
- import { SidebarComplementaryAreaFills } from '../sidebar';
33
+ import Header from '../header-edit-mode';
34
+ import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
36
35
  import NavigationSidebar from '../navigation-sidebar';
37
36
  import BlockEditor from '../block-editor';
38
37
  import CodeEditor from '../code-editor';
@@ -260,7 +259,6 @@ function Editor( { onError } ) {
260
259
  content={
261
260
  <>
262
261
  <EditorNotices />
263
- <BlockStyles.Slot scope="core/block-inspector" />
264
262
  { editorMode === 'visual' &&
265
263
  template && (
266
264
  <BlockEditor