@wordpress/edit-site 5.1.0 → 5.3.0

package/build-style/style.css

@@ -501,6 +501,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   box-shadow: none;
   font-weight: 500;
 }
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active::after {
+  content: none;
+}
 .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
@@ -546,6 +549,144 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-left: 48px;
 }
 
+@media (min-width: 600px) {
+  .edit-site-new-template-dropdown .edit-site-new-template-dropdown__popover {
+    min-width: 300px;
+  }
+}
+
+.edit-site-custom-template-modal__contents > .components-button {
+  padding: 24px;
+  box-shadow: inset 0 0 0 1px #949494;
+  border-radius: 2px;
+  width: 256px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  outline: 1px solid transparent;
+}
+.edit-site-custom-template-modal__contents > .components-button span:first-child {
+  color: #1e1e1e;
+}
+.edit-site-custom-template-modal__contents > .components-button span {
+  color: #757575;
+}
+.edit-site-custom-template-modal__contents > .components-button:hover {
+  color: var(--wp-admin-theme-color-darker-10);
+  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10);
+}
+.edit-site-custom-template-modal__contents > .components-button:hover span:first-child {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__contents > .components-button:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 3px solid transparent;
+}
+.edit-site-custom-template-modal__contents > .components-button:focus span:first-child {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input {
+  background: #fff;
+  border: 1px solid #ddd;
+}
+.edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input:focus {
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+}
+@media (min-width: 782px) {
+  .edit-site-custom-template-modal {
+    width: 456px;
+  }
+}
+
+.edit-site-custom-template-modal__suggestions_list {
+  margin-top: 16px;
+}
+@media (min-width: 600px) {
+  .edit-site-custom-template-modal__suggestions_list {
+    height: 232px;
+    overflow: scroll;
+  }
+}
+.edit-site-custom-template-modal__suggestions_list__list-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  height: auto;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item mark {
+  font-weight: 700;
+  background: none;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:hover {
+  background-color: #f0f0f0;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:focus {
+  background-color: #f0f0f0;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal__suggestions_list__list-item__info {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__title {
+  font-weight: 500;
+  margin-bottom: 0.2em;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__info {
+  color: #757575;
+  font-size: 0.9em;
+  line-height: 1.3;
+  word-break: break-all;
+}
+
+.edit-site-custom-template-modal__no-results {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  padding: 16px;
+  margin-bottom: 0;
+  margin-top: 16px;
+}
+
+@media (min-width: 782px) {
+  .edit-site-custom-generic-template__modal .components-base-control {
+    width: 320px;
+  }
+}
+.edit-site-custom-generic-template__modal .components-modal__header {
+  border-bottom: none;
+}
+.edit-site-custom-generic-template__modal .components-modal__content::before {
+  margin-bottom: 4px;
+}
+
+.edit-site-template-actions-loading-screen-modal {
+  -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+  background-color: transparent;
+}
+.edit-site-template-actions-loading-screen-modal.is-full-screen {
+  background-color: #fff;
+  box-shadow: 0 0 0 transparent;
+  min-width: 100%;
+  min-height: 100%;
+}
+.edit-site-template-actions-loading-screen-modal__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
 .edit-site-block-editor__editor-styles-wrapper .components-button {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
@@ -575,6 +716,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 100%;
   height: 100%;
 }
+.edit-site-visual-editor .edit-site-visual-editor__editor-canvas {
+  height: 100%;
+  background: #fff;
+}
 .edit-site-layout.is-full-canvas .edit-site-visual-editor.is-focus-mode {
   padding: 48px;
 }
@@ -609,16 +754,52 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
   padding: 0;
   margin: auto 0;
-  width: 4px;
-  height: 100px;
+  width: 12px;
   -webkit-appearance: none;
           appearance: none;
   cursor: ew-resize;
   outline: none;
-  background: #949494;
+  background: none;
   border-radius: 2px;
   border: 0;
 }
+.resizable-editor__drag-handle.is-variation-default {
+  height: 100px;
+}
+.resizable-editor__drag-handle.is-variation-separator {
+  height: 100%;
+  width: 24px;
+  right: 0;
+}
+.resizable-editor__drag-handle.is-variation-separator::after {
+  width: 2px;
+  border-radius: 0;
+  background: transparent;
+  left: 50%;
+  transform: translateX(-1px);
+  right: 0;
+  transition: all ease 0.2s;
+  transition-delay: 0.1s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .resizable-editor__drag-handle.is-variation-separator::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+.resizable-editor__drag-handle::after {
+  position: absolute;
+  top: 24px;
+  left: 4px;
+  right: 0;
+  bottom: 24px;
+  content: "";
+  width: 4px;
+  background: #949494;
+  border-radius: 2px;
+}
 .resizable-editor__drag-handle.is-left {
   left: -16px;
 }
@@ -626,11 +807,29 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   right: -16px;
 }
 .resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
+  opacity: 1;
+}
+.resizable-editor__drag-handle:hover.is-variation-default::after, .resizable-editor__drag-handle:active.is-variation-default::after {
   background: #ccc;
 }
-.resizable-editor__drag-handle:focus {
+.resizable-editor__drag-handle:hover.is-variation-separator::after, .resizable-editor__drag-handle:active.is-variation-separator::after {
+  background: var(--wp-admin-theme-color);
+}
+.resizable-editor__drag-handle:focus::after {
   box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 }
+.resizable-editor__drag-handle.is-variation-separator:focus::after {
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+}
+
+.edit-site-canvas-spinner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
 .edit-site-code-editor {
   position: relative;
@@ -809,7 +1008,8 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control {
+.edit-site-screen-button-color__control,
+.edit-site-screen-background-color__control.has-no-tabs {
   padding: 16px;
 }
 
@@ -855,10 +1055,42 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border-radius: 2px;
 }
 
+.edit-site-global-styles-screen-css {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+.edit-site-global-styles-screen-css .components-v-stack {
+  flex: 1 1 auto;
+}
+.edit-site-global-styles-screen-css .components-v-stack .edit-site-global-styles__custom-css-input {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+.edit-site-global-styles-screen-css .components-v-stack .edit-site-global-styles__custom-css-input .components-base-control__field {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+.edit-site-global-styles-screen-css .components-v-stack .edit-site-global-styles__custom-css-input .components-base-control__field .components-textarea-control__input {
+  flex: 1 1 auto;
+}
+
 .edit-site-global-styles__custom-css-input textarea {
   font-family: Menlo, Consolas, monaco, monospace;
 }
 
+.edit-site-global-styles__custom-css-validation-wrapper {
+  position: absolute;
+  bottom: 16px;
+  right: 24px;
+}
+
+.edit-site-global-styles__custom-css-validation-icon {
+  fill: #cc1818;
+}
+
 .edit-site-global-styles__custom-css-theme-css {
   width: 100%;
   line-break: anywhere;
@@ -867,6 +1099,57 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   overflow-y: scroll;
 }
 
+.edit-site-global-styles-screen-css-help-link {
+  padding-left: 16px;
+}
+
+.edit-site-global-styles-screen-variations {
+  margin-top: 16px;
+  border-top: 1px solid #ddd;
+}
+.edit-site-global-styles-screen-variations > * {
+  margin: 24px 16px;
+}
+
+.edit-site-global-styles-sidebar__navigator-screen {
+  display: flex;
+  flex-direction: column;
+}
+
+.edit-site-global-styles__shadow-panel {
+  width: 230px;
+}
+
+.edit-site-global-styles__shadow-dropdown {
+  display: block;
+  padding: 0;
+}
+.edit-site-global-styles__shadow-dropdown > button {
+  width: 100%;
+  padding: 8px;
+}
+.edit-site-global-styles__shadow-dropdown > button.is-open {
+  background-color: #f0f0f0;
+}
+
+.edit-site-global-styles__shadow-indicator-wrapper {
+  padding: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.edit-site-global-styles__shadow-indicator {
+  color: #2f2f2f;
+  border: #e0e0e0 1px solid;
+  border-radius: 2px;
+  cursor: pointer;
+  padding: 0;
+  height: 24px;
+  width: 24px;
+}
+
 .edit-site-header-edit-mode {
   height: 60px;
   align-items: center;
@@ -1215,213 +1498,107 @@ body.is-fullscreen-mode .edit-site-list-header {
     margin-left: 360px;
   }
 }
-
-@media (min-width: 782px) {
-  .edit-site-list__rename-modal .components-base-control {
-    width: 320px;
-  }
-}
-
-.edit-site-list__rename-modal-actions {
-  margin-top: 12px;
-}
-
-.edit-site-template__actions button:not(:last-child) {
-  margin-right: 8px;
-}
-
-.edit-site-list-added-by__icon {
-  display: flex;
-  flex-shrink: 0;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: #2f2f2f;
-  border-radius: 100%;
-}
-.edit-site-list-added-by__icon svg {
-  fill: #fff;
-}
-.edit-site-list-added-by__icon.is-customized::after {
-  position: absolute;
-  content: "";
-  background: var(--wp-admin-theme-color);
-  height: 8px;
-  width: 8px;
-  outline: 2px solid #fff;
-  border-radius: 100%;
-  top: -1px;
-  right: -1px;
-}
-
-.edit-site-list-added-by__avatar {
-  flex-shrink: 0;
-  overflow: hidden;
-  border-radius: 100%;
-  background: #2f2f2f;
-  width: 32px;
-  height: 32px;
-}
-.edit-site-list-added-by__avatar img {
-  width: 32px;
-  height: 32px;
-  -o-object-fit: cover;
-     object-fit: cover;
-  opacity: 0;
-  transition: opacity 0.1s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .edit-site-list-added-by__avatar img {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.edit-site-list-added-by__avatar.is-loaded img {
-  opacity: 1;
-}
-
-@media (min-width: 600px) {
-  .edit-site-new-template-dropdown .edit-site-new-template-dropdown__popover {
-    min-width: 300px;
-  }
-}
-
-.edit-site-custom-template-modal__contents > .components-button {
-  padding: 24px;
-  box-shadow: inset 0 0 0 1px #949494;
-  border-radius: 2px;
-  width: 256px;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  outline: 1px solid transparent;
-}
-.edit-site-custom-template-modal__contents > .components-button span:first-child {
-  color: #1e1e1e;
-}
-.edit-site-custom-template-modal__contents > .components-button span {
-  color: #757575;
-}
-.edit-site-custom-template-modal__contents > .components-button:hover {
-  color: var(--wp-admin-theme-color-darker-10);
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10);
-}
-.edit-site-custom-template-modal__contents > .components-button:hover span:first-child {
-  color: var(--wp-admin-theme-color);
-}
-.edit-site-custom-template-modal__contents > .components-button:focus {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 3px solid transparent;
-}
-.edit-site-custom-template-modal__contents > .components-button:focus span:first-child {
-  color: var(--wp-admin-theme-color);
-}
-.edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input {
-  background: #fff;
-  border: 1px solid #ddd;
-}
-.edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-}
-@media (min-width: 782px) {
-  .edit-site-custom-template-modal {
-    width: 456px;
-  }
-}
-
-.edit-site-custom-template-modal__suggestions_list {
-  margin-top: 16px;
-}
-@media (min-width: 600px) {
-  .edit-site-custom-template-modal__suggestions_list {
-    height: 232px;
-    overflow: scroll;
-  }
-}
-.edit-site-custom-template-modal__suggestions_list__list-item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-  height: auto;
-}
-.edit-site-custom-template-modal__suggestions_list__list-item mark {
-  font-weight: 700;
-  background: none;
+
+@media (min-width: 782px) {
+  .edit-site-list__rename-modal .components-base-control {
+    width: 320px;
+  }
 }
-.edit-site-custom-template-modal__suggestions_list__list-item:hover {
-  background-color: #f0f0f0;
+
+.edit-site-template__actions button:not(:last-child) {
+  margin-right: 8px;
 }
-.edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
-  color: var(--wp-admin-theme-color);
+
+.edit-site-list-added-by__icon {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: #2f2f2f;
+  border-radius: 100%;
 }
-.edit-site-custom-template-modal__suggestions_list__list-item:focus {
-  background-color: #f0f0f0;
+.edit-site-list-added-by__icon svg {
+  fill: #fff;
 }
-.edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+.edit-site-list-added-by__icon.is-customized::after {
+  position: absolute;
+  content: "";
+  background: var(--wp-admin-theme-color);
+  height: 8px;
+  width: 8px;
+  outline: 2px solid #fff;
+  border-radius: 100%;
+  top: -1px;
+  right: -1px;
 }
-.edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal__suggestions_list__list-item__info {
+
+.edit-site-list-added-by__avatar {
+  flex-shrink: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
+  border-radius: 100%;
+  background: #2f2f2f;
+  width: 32px;
+  height: 32px;
 }
-.edit-site-custom-template-modal__suggestions_list__list-item__title {
-  font-weight: 500;
-  margin-bottom: 0.2em;
+.edit-site-list-added-by__avatar img {
+  width: 32px;
+  height: 32px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.1s linear;
 }
-.edit-site-custom-template-modal__suggestions_list__list-item__info {
-  color: #757575;
-  font-size: 0.9em;
-  line-height: 1.3;
-  word-break: break-all;
+@media (prefers-reduced-motion: reduce) {
+  .edit-site-list-added-by__avatar img {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
-
-.edit-site-custom-template-modal__no-results {
-  border: 1px solid #ccc;
-  border-radius: 2px;
-  padding: 16px;
-  margin-bottom: 0;
-  margin-top: 16px;
+.edit-site-list-added-by__avatar.is-loaded img {
+  opacity: 1;
 }
 
-@media (min-width: 782px) {
-  .edit-site-custom-generic-template__modal .components-base-control {
-    width: 320px;
+@keyframes loadingpulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
   }
 }
-.edit-site-custom-generic-template__modal .components-modal__header {
-  border-bottom: none;
+.edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents {
+  white-space: normal;
 }
-.edit-site-custom-generic-template__modal .components-modal__content::before {
-  margin-bottom: 4px;
+.edit-site-navigation-inspector .block-editor-list-view-block__title {
+  margin-top: 3px;
 }
-
-.edit-site-custom-generic-template__modal-actions {
-  margin-top: 12px;
+.edit-site-navigation-inspector .block-editor-list-view-block__menu-cell {
+  padding-right: 0;
+}
+.edit-site-navigation-inspector .edit-site-navigation-inspector__select-menu {
+  margin-bottom: 8px;
 }
 
-.edit-site-template-actions-loading-screen-modal {
-  -webkit-backdrop-filter: none;
-          backdrop-filter: none;
-  background-color: transparent;
+.edit-site-navigation-inspector__placeholder {
+  padding: 8px;
+  margin: 8px;
+  background-color: #f0f0f0;
+  animation: loadingpulse 1s linear infinite;
+  animation-delay: 0.5s;
 }
-.edit-site-template-actions-loading-screen-modal.is-full-screen {
-  background-color: #fff;
-  box-shadow: 0 0 0 transparent;
-  min-width: 100%;
-  min-height: 100%;
+.edit-site-navigation-inspector__placeholder.is-child {
+  margin-left: 24px;
+  width: 50%;
 }
-.edit-site-template-actions-loading-screen-modal__content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
+
+.edit-site-navigation-inspector__empty-msg {
+  padding: 0 8px;
 }
 
 .edit-site-sidebar-edit-mode {
@@ -1543,6 +1720,7 @@ body.is-fullscreen-mode .edit-site-list-header {
 .components-button.edit-site-sidebar-edit-mode__panel-tab:focus:not(:disabled) {
   position: relative;
   box-shadow: none;
+  outline: none;
 }
 .components-button.edit-site-sidebar-edit-mode__panel-tab::after {
   content: "";
@@ -1564,6 +1742,8 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 .components-button.edit-site-sidebar-edit-mode__panel-tab.is-active::after {
   height: calc(1 * var(--wp-admin-border-width-focus));
+  outline: 2px solid transparent;
+  outline-offset: -1px;
 }
 .components-button.edit-site-sidebar-edit-mode__panel-tab::before {
   content: "";
@@ -1585,60 +1765,7 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 .components-button.edit-site-sidebar-edit-mode__panel-tab:focus-visible::before {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-
-@keyframes loadingpulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents {
-  white-space: normal;
-}
-.edit-site-navigation-inspector .block-editor-list-view-block__title {
-  margin-top: 3px;
-}
-.edit-site-navigation-inspector .block-editor-list-view-block__menu-cell {
-  padding-right: 0;
-}
-
-.edit-site-navigation-inspector__placeholder {
-  padding: 8px;
-  margin: 8px;
-  background-color: #f0f0f0;
-  animation: loadingpulse 1s linear infinite;
-  animation-delay: 0.5s;
-}
-.edit-site-navigation-inspector__placeholder.is-child {
-  margin-left: 24px;
-  width: 50%;
-}
-
-.edit-site-navigation-inspector__empty-msg {
-  padding: 0 8px;
-}
-
-.edit-site-navigation-menu-sidebar__panel {
-  padding: 16px;
-}
-
-.edit-site-navigation-sidebar__beta {
-  display: inline-flex;
-  margin-left: 8px;
-  padding: 0 8px;
-  height: 24px;
-  border-radius: 2px;
-  background-color: #1e1e1e;
-  color: #fff;
-  align-items: center;
-  font-size: 12px;
-  line-height: 1;
+  outline: 2px solid transparent;
 }
 
 .edit-site-template-card {
@@ -1821,15 +1948,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   }
 }
 
-.edit-site-create-template-part-modal__modal-actions {
-  padding-top: 12px;
-}
-
-.edit-site-create-template-part-modal__area-base-control .components-base-control__label {
-  margin: 16px 0 8px;
-  cursor: auto;
-}
-
 .edit-site-create-template-part-modal__area-radio-group {
   width: 100%;
   border: 1px solid #757575;
@@ -2068,39 +2186,45 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-layout__sidebar {
   z-index: 1;
-  overflow-y: auto;
   width: 100vw;
+}
+@media (min-width: 782px) {
+  .edit-site-layout__sidebar {
+    width: 360px;
+  }
+}
+.edit-site-layout.is-full-canvas .edit-site-layout__sidebar {
+  position: fixed !important;
+  height: 100vh;
+  left: 0;
+  top: 0;
+}
+.edit-site-layout__sidebar > div {
+  overflow-y: auto;
+  min-height: 100%;
   visibility: hidden;
   scrollbar-color: #757575 #1e1e1e;
   scrollbar-width: thin;
   scrollbar-gutter: stable;
 }
-.edit-site-layout__sidebar::-webkit-scrollbar {
+.edit-site-layout__sidebar > div::-webkit-scrollbar {
   width: 12px;
   height: 12px;
 }
-.edit-site-layout__sidebar::-webkit-scrollbar-track {
+.edit-site-layout__sidebar > div::-webkit-scrollbar-track {
   background-color: #1e1e1e;
 }
-.edit-site-layout__sidebar::-webkit-scrollbar-thumb {
+.edit-site-layout__sidebar > div::-webkit-scrollbar-thumb {
   background-color: #757575;
   border-radius: 8px;
   border: 3px solid transparent;
   background-clip: padding-box;
 }
-.edit-site-layout__sidebar:hover, .edit-site-layout__sidebar:focus, .edit-site-layout__sidebar > * {
+.edit-site-layout__sidebar > div:hover, .edit-site-layout__sidebar > div:focus, .edit-site-layout__sidebar > div > * {
   visibility: visible;
 }
-@media (min-width: 782px) {
-  .edit-site-layout__sidebar {
-    width: 360px;
-  }
-}
-.edit-site-layout.is-full-canvas .edit-site-layout__sidebar {
-  position: fixed;
-  height: 100vh;
-  left: 0;
-  top: 0;
+.edit-site-layout__sidebar .resizable-editor__drag-handle {
+  right: 0;
 }
 
 .edit-site-layout__canvas-container {
@@ -2108,6 +2232,15 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   flex-grow: 1;
   z-index: 2;
 }
+.edit-site-layout__canvas-container.is-resizing::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  content: "";
+  z-index: 100;
+}
 
 .edit-site-layout__canvas {
   position: absolute;
@@ -2115,11 +2248,11 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   left: 0;
   bottom: 0;
   width: 100%;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 }
 .edit-site-layout__canvas > div {
   color: #1e1e1e;
   background: #fff;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 }
 @media (min-width: 782px) {
   .edit-site-layout__canvas {
@@ -2138,6 +2271,8 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   top: 0;
   bottom: 0;
   width: 100%;
+}
+.edit-site-layout.is-full-canvas .edit-site-layout__canvas > div {
   border-radius: 0;
 }
 
@@ -2201,15 +2336,33 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #949494;
   border-width: 1.5px;
 }
-.edit-site-sidebar-navigation-item.components-item:hover, .edit-site-sidebar-navigation-item.components-item:focus {
+.edit-site-sidebar-navigation-item.components-item:hover, .edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current] {
   color: #fff;
   background: #2f2f2f;
   border-width: 1.5px;
 }
 .edit-site-sidebar-navigation-item.components-item[aria-current] {
-  color: #fff;
   background: var(--wp-admin-theme-color);
-  border-width: 1.5px;
+}
+
+.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button {
+  color: #949494;
+}
+.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] {
+  color: #fff;
+}
+
+.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] {
+  background: #2f2f2f;
+}
+.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf .block-editor-list-view-block__menu {
+  margin-left: -8px;
+}
+
+.edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
+  cursor: grab;
+  width: calc(100% - 2px);
+  padding: 8px;
 }
 
 .edit-site-sidebar-navigation-screen {
@@ -2238,6 +2391,8 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   font-size: calc(1.56 * 13px);
   font-weight: 500;
   flex-grow: 1;
+  color: #fff;
+  margin: 0;
 }
 
 .edit-site-sidebar-navigation-screen__back {
@@ -2278,10 +2433,14 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-site-hub__view-mode-toggle-container {
   height: 60px;
-  width: 60px;
+  width: 64px;
   flex-shrink: 0;
 }
 
+.edit-site-layout.is-edit-mode .edit-site-site-hub__view-mode-toggle-container {
+  width: 60px;
+}
+
 .edit-site-site-hub__text-content {
   overflow: hidden;
 }
@@ -2292,13 +2451,24 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   overflow: hidden;
 }
 
+.edit-site-sidebar-navigation-screen-navigation-menus .block-editor-list-view-block__menu-edit,
+.edit-site-sidebar-navigation-screen-navigation-menus .edit-site-navigation-inspector__select-menu {
+  display: none;
+}
+.edit-site-sidebar-navigation-screen-navigation-menus .offcanvas-editor-list-view-leaf {
+  max-width: calc(100% - 4px);
+}
+.edit-site-sidebar-navigation-screen-navigation-menus .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
+  width: 100%;
+}
+
 .edit-site-site-icon__icon {
   fill: currentColor;
 }
 
 .edit-site-site-icon__image {
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   border-radius: 2px;
   -o-object-fit: cover;
      object-fit: cover;