@wordpress/edit-post 6.18.0 → 7.0.0

package/build-style/style-rtl.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -306,10 +320,14 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
+.interface-interface-skeleton__content .interface-navigable-region__stacker {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
 
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
-  display: block;
   flex-shrink: 0;
   position: absolute;
   z-index: 100000;
@@ -324,9 +342,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
     position: relative !important;
-    z-index: 90;
     width: auto;
   }
+  .is-sidebar-opened .interface-interface-skeleton__secondary-sidebar,
+.is-sidebar-opened .interface-interface-skeleton__sidebar {
+    z-index: 90;
+  }
 }
 
 .interface-interface-skeleton__sidebar {
@@ -338,6 +359,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
+.interface-interface-skeleton__secondary-sidebar .interface-navigable-region__stacker {
+  height: 100%;
+}
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar {
     border-left: 1px solid #e0e0e0;
@@ -390,7 +414,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 280px;
   color: #1e1e1e;
 }
-.interface-interface-skeleton__actions:focus {
+.interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
   top: auto;
   bottom: 0;
 }
@@ -683,17 +707,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
+.show-icon-labels.interface-pinned-items .editor-post-saved-state.editor-post-saved-state::after,
 .show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
-.edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after {
+.show-icon-labels .edit-post-header .editor-post-saved-state.editor-post-saved-state::after,
+.edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after,
+.edit-post-header__dropdown .editor-post-saved-state.editor-post-saved-state::after {
   content: none;
 }
-@media (min-width: 600px) {
-  .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
-.show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
-.edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after {
-    content: attr(aria-label);
-  }
-}
 
 .edit-post-header__dropdown .components-menu-item__button.components-menu-item__button,
 .edit-post-header__dropdown .components-button.editor-history__undo,
@@ -747,7 +767,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .is-distraction-free .edit-post-header > .edit-post-header__settings > .editor-post-preview {
   visibility: hidden;
 }
-.is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, .is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle, .is-distraction-free .edit-post-header > .edit-post-header__settings > .block-editor-post-preview__dropdown, .is-distraction-free .edit-post-header > .edit-post-header__settings > .interface-pinned-items {
+.is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, .is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle, .is-distraction-free .edit-post-header > .edit-post-header__settings > .block-editor-post-preview__dropdown, .is-distraction-free .edit-post-header > .edit-post-header__settings > .interface-pinned-items {
   display: none;
 }
 .is-distraction-free .interface-interface-skeleton__header:focus-within {
@@ -822,7 +842,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 36px;
   height: 36px;
   border-radius: 2px;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   margin-top: -1px;
 }
 
@@ -1176,6 +1197,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   bottom: auto;
   right: auto;
   left: 0;
+  box-sizing: border-box;
   width: 280px;
   background-color: #fff;
   border: 1px dotted #ddd;
@@ -1184,11 +1206,15 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   display: flex;
   justify-content: center;
 }
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-publish-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-publish-panel,
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-sidebar-panel,
-.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-sidebar-panel,
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-entities-saved-states-panel,
-.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-entities-saved-states-panel {
+
+.interface-interface-skeleton__sidebar:focus .edit-post-layout__toggle-sidebar-panel, .interface-interface-skeleton__sidebar:focus-within .edit-post-layout__toggle-sidebar-panel {
+  top: auto;
+  bottom: 0;
+}
+
+.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-entities-saved-states-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-entities-saved-states-panel,
+.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-publish-panel,
+.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-publish-panel {
   top: auto;
   bottom: 0;
 }
@@ -1242,27 +1268,17 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-block-manager__checklist-item {
   border-bottom: 1px solid #ddd;
 }
-.edit-post-block-manager__category-title .components-base-control__field,
-.edit-post-block-manager__checklist-item .components-base-control__field {
-  align-items: center;
-  display: flex;
-  margin: 0;
-}
 
 .edit-post-block-manager__checklist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 0;
-  padding-right: 16px;
+  padding: 8px 16px 8px 0;
 }
 .components-modal__content .edit-post-block-manager__checklist-item.components-checkbox-control__input-container {
   margin: 0 8px;
 }
-.edit-post-block-manager__checklist-item .components-checkbox-control__label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-grow: 1;
-  padding: 8px 0;
-}
 .edit-post-block-manager__checklist-item .block-editor-block-icon {
   margin-left: 10px;
   fill: #1e1e1e;
@@ -1366,16 +1382,16 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .edit-post-editor__inserter-panel,
-.edit-post-editor__list-view-panel {
+.edit-post-editor__document-overview-panel {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
-.edit-post-editor__list-view-panel {
+.edit-post-editor__document-overview-panel {
   width: 350px;
 }
-.edit-post-editor__list-view-panel .edit-post-sidebar__panel-tabs {
+.edit-post-editor__document-overview-panel .edit-post-sidebar__panel-tabs {
   flex-direction: row-reverse;
 }
 
@@ -1395,7 +1411,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   }
 }
 
-.edit-post-editor__list-view-panel-header {
+.edit-post-editor__document-overview-panel-header {
   border-bottom: 1px solid #ddd;
   display: flex;
   justify-content: space-between;
@@ -1403,17 +1419,17 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   padding-right: 16px;
   padding-left: 4px;
 }
-.edit-post-editor__list-view-panel-header ul {
+.edit-post-editor__document-overview-panel-header ul {
   width: calc(100% - 40px);
 }
-.edit-post-editor__list-view-panel-header li {
+.edit-post-editor__document-overview-panel-header li {
   width: 50%;
 }
-.edit-post-editor__list-view-panel-header li button {
+.edit-post-editor__document-overview-panel-header li button {
   width: 100%;
   text-align: initial;
 }
-.edit-post-editor__list-view-panel-header li:only-child {
+.edit-post-editor__document-overview-panel-header li:only-child {
   width: 100%;
 }
 
@@ -1519,12 +1535,12 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   display: block;
   width: 45%;
   flex-shrink: 0;
+  padding: 6px 0;
 }
 
 .components-button.edit-post-post-schedule__toggle {
   text-align: right;
   white-space: normal;
-  height: auto;
 }
 .components-button.edit-post-post-schedule__toggle span {
   width: 0;
@@ -1553,6 +1569,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-post-template span {
   display: block;
   width: 45%;
+  padding: 6px 0;
 }
 
 .edit-post-post-template__dropdown {
@@ -1584,11 +1601,13 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-post-url {
   width: 100%;
   justify-content: flex-start;
+  align-items: flex-start;
 }
 .edit-post-post-url span {
   display: block;
   width: 45%;
   flex-shrink: 0;
+  padding: 6px 0;
 }
 
 .components-button.edit-post-post-url__toggle {
@@ -1610,6 +1629,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-post-visibility span {
   display: block;
   width: 45%;
+  padding: 6px 0;
 }
 
 .edit-post-post-visibility__dialog .editor-post-visibility {
@@ -1618,47 +1638,62 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .components-button.edit-post-sidebar__panel-tab {
+  position: relative;
   border-radius: 0;
   height: 48px;
   background: transparent;
   border: none;
   box-shadow: none;
   cursor: pointer;
-  display: inline-block;
-  padding: 3px 15px;
+  padding: 3px 16px;
   margin-right: 0;
   font-weight: 500;
 }
-.components-button.edit-post-sidebar__panel-tab::after {
-  content: attr(data-label);
-  display: block;
-  font-weight: 600;
-  height: 0;
-  overflow: hidden;
-  speak: none;
-  visibility: hidden;
-}
-.components-button.edit-post-sidebar__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);
+.components-button.edit-post-sidebar__panel-tab:focus:not(:disabled) {
   position: relative;
-  z-index: 1;
+  box-shadow: none;
 }
-.components-button.edit-post-sidebar__panel-tab.is-active::before {
+.components-button.edit-post-sidebar__panel-tab::after {
   content: "";
   position: absolute;
-  top: 0;
-  bottom: 1px;
   left: 0;
+  bottom: 0;
   right: 0;
-  border-bottom: 1.5px solid transparent;
+  pointer-events: none;
+  background: var(--wp-admin-theme-color);
+  height: calc(0 * var(--wp-admin-border-width-focus));
+  border-radius: 0;
+  transition: all 0.1s linear;
 }
-.components-button.edit-post-sidebar__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;
+@media (prefers-reduced-motion: reduce) {
+  .components-button.edit-post-sidebar__panel-tab::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
-.components-button.edit-post-sidebar__panel-tab.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -3px 0 0 var(--wp-admin-theme-color);
+.components-button.edit-post-sidebar__panel-tab.is-active::after {
+  height: calc(1 * var(--wp-admin-border-width-focus));
+}
+.components-button.edit-post-sidebar__panel-tab::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  bottom: 12px;
+  right: 12px;
+  pointer-events: none;
+  box-shadow: 0 0 0 0 transparent;
+  border-radius: 2px;
+  transition: all 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-button.edit-post-sidebar__panel-tab::before {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.components-button.edit-post-sidebar__panel-tab:focus-visible::before {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 h2.edit-post-template-summary__title {
@@ -1793,7 +1828,8 @@ h2.edit-post-template-summary__title {
 .edit-template-welcome-guide__image > img {
   display: block;
   max-width: 100%;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .edit-post-welcome-guide__heading,
 .edit-template-welcome-guide__heading {