@wordpress/edit-site 3.0.27 → 4.0.1-next.f435e9e01b.0

package/build-style/style-rtl.css

@@ -475,10 +475,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
 }
 
-.edit-site-visual-editor__editor-canvas {
-  border-radius: 2px 2px 0 0;
-}
-
 .edit-site-visual-editor__back-button {
   position: absolute;
   top: 8px;
@@ -495,47 +491,138 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
   padding: 0;
   margin: auto 0;
-  width: 8px;
+  width: 4px;
   height: 100px;
   -webkit-appearance: none;
           appearance: none;
-  cursor: grab;
+  cursor: ew-resize;
   outline: none;
-  background: #757575;
-  border-radius: 4px;
+  background: #949494;
+  border-radius: 2px;
   border: 0;
 }
 .resizable-editor__drag-handle.is-left {
-  right: -28px;
+  right: -16px;
 }
 .resizable-editor__drag-handle.is-right {
-  left: -28px;
-}
-.resizable-editor__drag-handle:hover {
-  background: #949494;
+  left: -16px;
 }
-.resizable-editor__drag-handle:active {
-  cursor: grabbing;
-  background: #949494;
+.resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
+  background: #ccc;
 }
 .resizable-editor__drag-handle:focus {
   box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 }
 
+.edit-site-code-editor {
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  flex-grow: 1;
+}
+.edit-site-code-editor__body {
+  width: 100%;
+  padding: 0 12px 12px 12px;
+  max-width: 1080px;
+  margin-right: auto;
+  margin-left: auto;
+}
+@media (min-width: 960px) {
+  .edit-site-code-editor__body {
+    padding: 16px 24px 96px 24px;
+    padding: 0 24px 24px 24px;
+  }
+}
+.edit-site-code-editor__toolbar {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 4px 12px;
+}
+@media (min-width: 600px) {
+  .edit-site-code-editor__toolbar {
+    padding: 12px;
+  }
+}
+@media (min-width: 960px) {
+  .edit-site-code-editor__toolbar {
+    padding: 12px 24px;
+  }
+}
+.edit-site-code-editor__toolbar h2 {
+  line-height: 36px;
+  margin: 0 0 0 auto;
+  font-size: 13px;
+  color: #1e1e1e;
+}
+.edit-site-code-editor__toolbar .components-button svg {
+  order: 1;
+}
+
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+  border: 1px solid #949494;
+  border-radius: 0;
+  display: block;
+  margin: 0;
+  width: 100%;
+  box-shadow: none;
+  resize: none;
+  overflow: hidden;
+  font-family: Menlo, Consolas, monaco, monospace;
+  line-height: 2.4;
+  min-height: 200px;
+  transition: border 0.1s ease-out, box-shadow 0.1s linear;
+  padding: 16px;
+  /* Fonts smaller than 16px causes mobile safari to zoom. */
+  font-size: 16px !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+@media (min-width: 600px) {
+  textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+    padding: 24px;
+  }
+}
+@media (min-width: 600px) {
+  textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+    font-size: 15px !important;
+  }
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:focus {
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  position: relative;
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-webkit-input-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-moz-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+  opacity: 1;
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-input-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+
 .edit-site-global-styles-preview {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 152px;
   line-height: 1;
+  cursor: pointer;
 }
-.edit-site-global-styles-preview .component-color-indicator {
-  border-radius: 50%;
-  border: 0;
-  height: 36px;
-  width: 36px;
-  margin-right: 0;
-  padding: 0;
+
+.edit-site-global-styles-preview__iframe {
+  max-width: 100%;
+  display: block;
 }
 
 .edit-site-typography-panel__preview {
@@ -566,13 +653,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin: 16px;
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
-  margin-right: 0;
-  display: block;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  border: 1px solid #ddd;
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
@@ -596,20 +676,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 32px;
 }
 
-h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-heading {
-  text-transform: uppercase;
-  line-height: 24px;
-  font-weight: 500;
-  font-size: 11px;
-  margin-bottom: 8px;
-}
-
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
 .edit-site-screen-background-color__control {
   padding: 16px;
 }
 
+.edit-site-global-styles-variations_item {
+  box-sizing: border-box;
+  padding: 2px;
+  border-radius: 2px;
+  border: #e0e0e0 1px solid;
+}
+.edit-site-global-styles-variations_item.is-active {
+  border: #1e1e1e 1px solid;
+}
+.edit-site-global-styles-variations_item:hover {
+  border: var(--wp-admin-theme-color) 1px solid;
+}
+.edit-site-global-styles-variations_item:focus {
+  border: var(--wp-admin-theme-color) 1px solid;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -638,6 +726,8 @@ body.is-fullscreen-mode .edit-site-header {
   display: flex;
   align-items: center;
   height: 100%;
+  flex-grow: 1;
+  justify-content: center;
   min-width: 0;
 }
 .edit-site-header .edit-site-header_end {
@@ -715,7 +805,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .edit-site-header__actions {
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
   padding-left: 4px;
 }
 .edit-site-header__actions .interface-pinned-items {
@@ -770,6 +859,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 0 8px;
   height: 100%;
   min-width: 0;
 }
@@ -796,17 +886,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 120px;
-}
-@media (min-width: 782px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 75px;
-  }
-}
-@media (min-width: 1080px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 180px;
-  }
 }
 .edit-site-document-actions .edit-site-document-actions__secondary-item {
   white-space: nowrap;
@@ -1301,6 +1380,20 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.edit-site-global-styles-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.edit-site-global-styles-sidebar__navigator-screen {
+  flex: 1;
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
   margin-right: 0;
 }
@@ -1309,18 +1402,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-right: auto;
 }
 
-.edit-site-global-styles-sidebar__border-controls-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-.edit-site-global-styles-sidebar__border-controls-row > * {
-  width: calc(50% - 8px);
-}
-.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons {
-  margin-bottom: 0;
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
   font-size: 15.6px;
   font-weight: 500;
@@ -1335,6 +1416,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   border: 0;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+  grid-column: span 1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
   padding-top: 24px;
   border-top: 1px solid #e0e0e0;
@@ -1706,11 +1791,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   display: flex;
   justify-content: flex-end;
 }
-@media (min-width: 782px) {
-  .edit-site-editor__inserter-panel-header {
-    display: none;
-  }
-}
 
 .edit-site-editor__inserter-panel-content,
 .edit-site-editor__list-view-panel-content {

package/build-style/style.css

@@ -475,10 +475,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
 }
 
-.edit-site-visual-editor__editor-canvas {
-  border-radius: 2px 2px 0 0;
-}
-
 .edit-site-visual-editor__back-button {
   position: absolute;
   top: 8px;
@@ -495,47 +491,138 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
   padding: 0;
   margin: auto 0;
-  width: 8px;
+  width: 4px;
   height: 100px;
   -webkit-appearance: none;
           appearance: none;
-  cursor: grab;
+  cursor: ew-resize;
   outline: none;
-  background: #757575;
-  border-radius: 4px;
+  background: #949494;
+  border-radius: 2px;
   border: 0;
 }
 .resizable-editor__drag-handle.is-left {
-  left: -28px;
+  left: -16px;
 }
 .resizable-editor__drag-handle.is-right {
-  right: -28px;
-}
-.resizable-editor__drag-handle:hover {
-  background: #949494;
+  right: -16px;
 }
-.resizable-editor__drag-handle:active {
-  cursor: grabbing;
-  background: #949494;
+.resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
+  background: #ccc;
 }
 .resizable-editor__drag-handle:focus {
   box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 }
 
+.edit-site-code-editor {
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  flex-grow: 1;
+}
+.edit-site-code-editor__body {
+  width: 100%;
+  padding: 0 12px 12px 12px;
+  max-width: 1080px;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (min-width: 960px) {
+  .edit-site-code-editor__body {
+    padding: 16px 24px 96px 24px;
+    padding: 0 24px 24px 24px;
+  }
+}
+.edit-site-code-editor__toolbar {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 4px 12px;
+}
+@media (min-width: 600px) {
+  .edit-site-code-editor__toolbar {
+    padding: 12px;
+  }
+}
+@media (min-width: 960px) {
+  .edit-site-code-editor__toolbar {
+    padding: 12px 24px;
+  }
+}
+.edit-site-code-editor__toolbar h2 {
+  line-height: 36px;
+  margin: 0 auto 0 0;
+  font-size: 13px;
+  color: #1e1e1e;
+}
+.edit-site-code-editor__toolbar .components-button svg {
+  order: 1;
+}
+
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+  border: 1px solid #949494;
+  border-radius: 0;
+  display: block;
+  margin: 0;
+  width: 100%;
+  box-shadow: none;
+  resize: none;
+  overflow: hidden;
+  font-family: Menlo, Consolas, monaco, monospace;
+  line-height: 2.4;
+  min-height: 200px;
+  transition: border 0.1s ease-out, box-shadow 0.1s linear;
+  padding: 16px;
+  /* Fonts smaller than 16px causes mobile safari to zoom. */
+  font-size: 16px !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+@media (min-width: 600px) {
+  textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+    padding: 24px;
+  }
+}
+@media (min-width: 600px) {
+  textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+    font-size: 15px !important;
+  }
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:focus {
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  position: relative;
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-webkit-input-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-moz-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+  opacity: 1;
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-input-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+
 .edit-site-global-styles-preview {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 152px;
   line-height: 1;
+  cursor: pointer;
 }
-.edit-site-global-styles-preview .component-color-indicator {
-  border-radius: 50%;
-  border: 0;
-  height: 36px;
-  width: 36px;
-  margin-left: 0;
-  padding: 0;
+
+.edit-site-global-styles-preview__iframe {
+  max-width: 100%;
+  display: block;
 }
 
 .edit-site-typography-panel__preview {
@@ -566,13 +653,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin: 16px;
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
-  margin-left: 0;
-  display: block;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  border: 1px solid #ddd;
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
@@ -596,20 +676,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 32px;
 }
 
-h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-heading {
-  text-transform: uppercase;
-  line-height: 24px;
-  font-weight: 500;
-  font-size: 11px;
-  margin-bottom: 8px;
-}
-
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
 .edit-site-screen-background-color__control {
   padding: 16px;
 }
 
+.edit-site-global-styles-variations_item {
+  box-sizing: border-box;
+  padding: 2px;
+  border-radius: 2px;
+  border: #e0e0e0 1px solid;
+}
+.edit-site-global-styles-variations_item.is-active {
+  border: #1e1e1e 1px solid;
+}
+.edit-site-global-styles-variations_item:hover {
+  border: var(--wp-admin-theme-color) 1px solid;
+}
+.edit-site-global-styles-variations_item:focus {
+  border: var(--wp-admin-theme-color) 1px solid;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -638,6 +726,8 @@ body.is-fullscreen-mode .edit-site-header {
   display: flex;
   align-items: center;
   height: 100%;
+  flex-grow: 1;
+  justify-content: center;
   min-width: 0;
 }
 .edit-site-header .edit-site-header_end {
@@ -715,7 +805,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .edit-site-header__actions {
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
   padding-right: 4px;
 }
 .edit-site-header__actions .interface-pinned-items {
@@ -770,6 +859,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 0 8px;
   height: 100%;
   min-width: 0;
 }
@@ -796,17 +886,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 120px;
-}
-@media (min-width: 782px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 75px;
-  }
-}
-@media (min-width: 1080px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 180px;
-  }
 }
 .edit-site-document-actions .edit-site-document-actions__secondary-item {
   white-space: nowrap;
@@ -1301,6 +1380,20 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.edit-site-global-styles-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.edit-site-global-styles-sidebar__navigator-screen {
+  flex: 1;
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
   margin-left: 0;
 }
@@ -1309,18 +1402,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-left: auto;
 }
 
-.edit-site-global-styles-sidebar__border-controls-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-.edit-site-global-styles-sidebar__border-controls-row > * {
-  width: calc(50% - 8px);
-}
-.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons {
-  margin-bottom: 0;
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
   font-size: 15.6px;
   font-weight: 500;
@@ -1335,6 +1416,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   border: 0;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+  grid-column: span 1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
   padding-top: 24px;
   border-top: 1px solid #e0e0e0;
@@ -1706,11 +1791,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   display: flex;
   justify-content: flex-end;
 }
-@media (min-width: 782px) {
-  .edit-site-editor__inserter-panel-header {
-    display: none;
-  }
-}
 
 .edit-site-editor__inserter-panel-content,
 .edit-site-editor__list-view-panel-content {