@wordpress/edit-site 4.16.0 → 4.18.0

package/build-style/style-rtl.css

@@ -549,6 +549,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .edit-site-visual-editor.is-focus-mode .edit-site-visual-editor__editor-canvas {
   border-radius: 2px;
+  max-height: 100%;
 }
 .edit-site-visual-editor.is-focus-mode .components-resizable-box__container {
   overflow: visible;
@@ -715,6 +716,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin-bottom: 16px;
   background: #f0f0f0;
   border-radius: 2px;
+  overflow: hidden;
 }
 
 .edit-site-typography-panel__full-width-control {
@@ -805,7 +807,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   text-overflow: ellipsis;
 }
 
-.edit-site-header {
+.edit-site-header-edit-mode {
   align-items: center;
   background-color: #fff;
   display: flex;
@@ -814,26 +816,26 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   width: 100%;
   justify-content: space-between;
 }
-body.is-fullscreen-mode .edit-site-header {
+body.is-fullscreen-mode .edit-site-header-edit-mode {
   padding-right: 60px;
   transition: padding-right 20ms linear;
   transition-delay: 80ms;
 }
 @media (prefers-reduced-motion: reduce) {
-  body.is-fullscreen-mode .edit-site-header {
+  body.is-fullscreen-mode .edit-site-header-edit-mode {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.edit-site-header .edit-site-header_start {
+.edit-site-header-edit-mode .edit-site-header-edit-mode__start {
   display: flex;
   border: none;
 }
-.edit-site-header .edit-site-header_end {
+.edit-site-header-edit-mode .edit-site-header-edit-mode__end {
   display: flex;
   justify-content: flex-end;
 }
-.edit-site-header .edit-site-header_center {
+.edit-site-header-edit-mode .edit-site-header-edit-mode__center {
   display: flex;
   align-items: center;
   height: 100%;
@@ -842,187 +844,162 @@ body.is-fullscreen-mode .edit-site-header {
   min-width: 0;
 }
 
-body.is-navigation-sidebar-open .edit-site-header {
+body.is-navigation-sidebar-open .edit-site-header-edit-mode {
   padding-right: 0;
   transition: padding-right 20ms linear;
   transition-delay: 0ms;
 }
 @media (prefers-reduced-motion: reduce) {
-  body.is-navigation-sidebar-open .edit-site-header {
+  body.is-navigation-sidebar-open .edit-site-header-edit-mode {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 
 @media (max-width: 959px) {
-  body.is-navigation-sidebar-open .edit-site-header .edit-site-header-toolbar__inserter-toggle ~ .components-button,
-body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .components-button:not(.is-primary) {
+  body.is-navigation-sidebar-open .edit-site-header-edit-mode .edit-site-header-edit-mode__inserter-toggle ~ .components-button,
+body.is-navigation-sidebar-open .edit-site-header-edit-mode .edit-site-header-edit-mode__end .components-button:not(.is-primary) {
     display: none;
   }
-  body.is-navigation-sidebar-open .edit-site-header .edit-site-save-button__button {
+  body.is-navigation-sidebar-open .edit-site-header-edit-mode .edit-site-save-button__button {
     margin-left: 0;
   }
 }
-.edit-site-header__toolbar {
+.edit-site-header-edit-mode__toolbar {
   display: flex;
   align-items: center;
   padding-right: 8px;
 }
 @media (min-width: 600px) {
-  .edit-site-header__toolbar {
+  .edit-site-header-edit-mode__toolbar {
     padding-right: 24px;
   }
 }
 @media (min-width: 1280px) {
-  .edit-site-header__toolbar {
+  .edit-site-header-edit-mode__toolbar {
     padding-left: 8px;
   }
 }
-.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle {
+.edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle {
   margin-left: 8px;
   min-width: 32px;
   width: 32px;
   height: 32px;
   padding: 0;
 }
-.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg {
+.edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle svg {
   transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg {
+  .edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle svg {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle.is-pressed svg {
+.edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle.is-pressed svg {
   transform: rotate(-45deg);
 }
 
-.edit-site-header__toolbar-switchers {
-  align-items: center;
-  display: flex;
-}
-
-.edit-site-header__toolbar-switchers-separator {
-  margin: 0 -6px 0;
-}
-
 /**
  * Buttons on the right side
  */
-.edit-site-header__actions {
+.edit-site-header-edit-mode__actions {
   display: inline-flex;
   align-items: center;
   padding-left: 4px;
   gap: 4px;
 }
 @media (min-width: 600px) {
-  .edit-site-header__actions {
+  .edit-site-header-edit-mode__actions {
     padding-left: 10px;
   }
 }
 @media (min-width: 600px) {
-  .edit-site-header__actions {
+  .edit-site-header-edit-mode__actions {
     gap: 8px;
   }
 }
-.edit-site-header__actions .interface-pinned-items {
+.edit-site-header-edit-mode__actions .interface-pinned-items {
   display: none;
 }
 @media (min-width: 782px) {
-  .edit-site-header__actions .interface-pinned-items {
+  .edit-site-header-edit-mode__actions .interface-pinned-items {
     display: inline-flex;
   }
 }
 
-.edit-site-header__actions__preview-options {
+.edit-site-header-edit-mode__preview-options {
   opacity: 1;
   transition: opacity 0.3s;
 }
-.edit-site-header__actions__preview-options.is-zoomed-out {
+.edit-site-header-edit-mode__preview-options.is-zoomed-out {
   opacity: 0;
 }
 
-.edit-site-header__actions-more-menu {
-  margin-right: -4px;
-}
-.edit-site-header__actions-more-menu .components-icon-button {
-  padding: 8px 2px;
-  width: auto;
-}
-@media (min-width: 600px) {
-  .edit-site-header__actions-more-menu {
-    margin-right: 4px;
-  }
-  .edit-site-header__actions-more-menu .components-icon-button {
-    padding: 8px 4px;
-  }
-}
-
-.edit-site-header_start {
+.edit-site-header-edit-mode__start {
   display: flex;
   border: none;
 }
-.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon,
-.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon,
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
   height: 36px;
   min-width: 36px;
   padding: 6px;
 }
-.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon.is-pressed,
-.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon.is-pressed,
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
   background: #1e1e1e;
 }
-.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon:focus:not(:disabled),
-.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon:focus:not(:disabled),
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
   outline: 1px solid transparent;
 }
-.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon::before,
-.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon::before {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon::before,
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon::before {
   display: none;
 }
-.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
   margin-left: 8px;
   min-width: 32px;
   width: 32px;
   height: 32px;
   padding: 0;
 }
-.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
   width: auto;
   padding: 0 8px;
 }
 
-.show-icon-labels .edit-site-header .components-button.has-icon {
+.show-icon-labels .edit-site-header-edit-mode .components-button.has-icon {
   width: auto;
 }
-.show-icon-labels .edit-site-header .components-button.has-icon svg {
+.show-icon-labels .edit-site-header-edit-mode .components-button.has-icon svg {
   display: none;
 }
-.show-icon-labels .edit-site-header .components-button.has-icon::after {
+.show-icon-labels .edit-site-header-edit-mode .components-button.has-icon::after {
   content: attr(aria-label);
 }
-.show-icon-labels .edit-site-header .components-button.has-icon[aria-disabled=true] {
+.show-icon-labels .edit-site-header-edit-mode .components-button.has-icon[aria-disabled=true] {
   background-color: transparent;
 }
-.show-icon-labels .edit-site-header .is-tertiary:active {
+.show-icon-labels .edit-site-header-edit-mode .is-tertiary:active {
   box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
   background-color: transparent;
 }
-.show-icon-labels .edit-site-header .edit-site-save-button__button {
+.show-icon-labels .edit-site-header-edit-mode .edit-site-save-button__button {
   padding-right: 6px;
   padding-left: 6px;
 }
-.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 {
+.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 {
   content: none;
 }
-.show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
-.show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
+.show-icon-labels .edit-site-header-edit-mode .edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
+.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 {
   height: 36px;
   padding: 0 8px;
 }
-.show-icon-labels .edit-site-header .edit-site-header_start .edit-site-header__toolbar > * + * {
+.show-icon-labels .edit-site-header-edit-mode .edit-site-header__start .edit-site-header__toolbar > * + * {
   margin-right: 8px;
 }
 
@@ -1638,19 +1615,19 @@ body.is-fullscreen-mode .edit-site-list-header {
   height: 100%;
 }
 
-.edit-site-sidebar {
+.edit-site-sidebar-edit-mode {
   width: 280px;
 }
-.edit-site-sidebar > .components-panel {
+.edit-site-sidebar-edit-mode > .components-panel {
   border-right: 0;
   border-left: 0;
   margin-bottom: -1px;
   margin-top: -1px;
 }
-.edit-site-sidebar > .components-panel > .components-panel__header {
+.edit-site-sidebar-edit-mode > .components-panel > .components-panel__header {
   background: #f0f0f0;
 }
-.edit-site-sidebar .block-editor-block-inspector__card {
+.edit-site-sidebar-edit-mode .block-editor-block-inspector__card {
   margin: 0;
 }
 
@@ -1729,20 +1706,20 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
-.components-panel__header.edit-site-sidebar__panel-tabs {
+.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   justify-content: flex-start;
   padding-right: 0;
   padding-left: 16px;
   border-top: 0;
   margin-top: 0;
 }
-.components-panel__header.edit-site-sidebar__panel-tabs ul {
+.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs ul {
   display: flex;
 }
-.components-panel__header.edit-site-sidebar__panel-tabs li {
+.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs li {
   margin: 0;
 }
-.components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon {
+.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs .components-button.has-icon {
   display: none;
   margin: 0 auto 0 0;
   padding: 0;
@@ -1750,12 +1727,12 @@ body.is-fullscreen-mode .edit-site-list-header {
   height: 24px;
 }
 @media (min-width: 782px) {
-  .components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon {
+  .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs .components-button.has-icon {
     display: flex;
   }
 }
 
-.components-button.edit-site-sidebar__panel-tab {
+.components-button.edit-site-sidebar-edit-mode__panel-tab {
   border-radius: 0;
   height: 48px;
   background: transparent;
@@ -1767,7 +1744,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-right: 0;
   font-weight: 500;
 }
-.components-button.edit-site-sidebar__panel-tab::after {
+.components-button.edit-site-sidebar-edit-mode__panel-tab::after {
   content: attr(data-label);
   display: block;
   font-weight: 600;
@@ -1776,12 +1753,12 @@ body.is-fullscreen-mode .edit-site-list-header {
   speak: none;
   visibility: hidden;
 }
-.components-button.edit-site-sidebar__panel-tab.is-active {
+.components-button.edit-site-sidebar-edit-mode__panel-tab.is-active {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
   position: relative;
   z-index: 1;
 }
-.components-button.edit-site-sidebar__panel-tab.is-active::before {
+.components-button.edit-site-sidebar-edit-mode__panel-tab.is-active::before {
   content: "";
   position: absolute;
   top: 0;
@@ -1790,12 +1767,12 @@ body.is-fullscreen-mode .edit-site-list-header {
   right: 0;
   border-bottom: 1.5px solid transparent;
 }
-.components-button.edit-site-sidebar__panel-tab:focus {
+.components-button.edit-site-sidebar-edit-mode__panel-tab:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   position: relative;
   z-index: 1;
 }
-.components-button.edit-site-sidebar__panel-tab.is-active:focus {
+.components-button.edit-site-sidebar-edit-mode__panel-tab.is-active:focus {
   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);
 }