@wordpress/edit-site 4.8.0 → 4.11.0

package/build-style/style-rtl.css

@@ -468,9 +468,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   .interface-preferences-modal .components-modal__content {
     padding: 0;
   }
-  .interface-preferences-modal .components-modal__content::before {
-    content: none;
-  }
 }
 
 .interface-preferences__tabs .components-tab-panel__tabs {
@@ -758,18 +755,22 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   font-size: 11px !important;
 }
 
-.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
-  margin-left: 16px;
-  margin-right: 16px;
-  width: unset;
-}
-.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle .components-toggle-group-control {
-  min-height: 32px;
+.edit-site-global-styles-section-title {
+  color: #2f2f2f;
+  font-weight: 600;
+  line-height: 1.2;
+  padding: 16px;
+  padding-bottom: 0;
+  margin: 0;
 }
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
-.edit-site-screen-background-color__control {
+.edit-site-screen-button-color__control {
+  padding: 16px;
+}
+
+.edit-site-screen-background-color__control .block-editor-color-gradient-control__tab-panel {
   padding: 16px;
 }
 
@@ -819,9 +820,13 @@ body.is-fullscreen-mode .edit-site-header {
     transition-delay: 0s;
   }
 }
-.edit-site-header .edit-site-header_start,
+.edit-site-header .edit-site-header_start {
+  display: flex;
+  border: none;
+}
 .edit-site-header .edit-site-header_end {
   display: flex;
+  justify-content: flex-end;
 }
 .edit-site-header .edit-site-header_center {
   display: flex;
@@ -831,9 +836,6 @@ body.is-fullscreen-mode .edit-site-header {
   justify-content: center;
   min-width: 0;
 }
-.edit-site-header .edit-site-header_end {
-  justify-content: flex-end;
-}
 
 body.is-navigation-sidebar-open .edit-site-header {
   padding-right: 0;
@@ -944,6 +946,41 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   }
 }
 
+.edit-site-header_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 {
+  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 {
+  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) {
+  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 {
+  display: none;
+}
+.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__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 {
+  width: auto;
+  padding: 0 8px;
+}
+
 .show-icon-labels .edit-site-header .components-button.has-icon {
   width: auto;
 }
@@ -964,14 +1001,16 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   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 {
+  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 {
   height: 36px;
-  padding: 0 6px;
+  padding: 0 8px;
 }
-.show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle::after,
-.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 {
-  content: none;
+.show-icon-labels .edit-site-header .edit-site-header_start .edit-site-header__toolbar > * + * {
+  margin-right: 8px;
 }
 
 .edit-site-document-actions {
@@ -1381,12 +1420,6 @@ body.is-fullscreen-mode .edit-site-list-header {
     width: 320px;
   }
 }
-.edit-site-list__rename-modal .components-modal__header {
-  border-bottom: none;
-}
-.edit-site-list__rename-modal .components-modal__content::before {
-  margin-bottom: 4px;
-}
 
 .edit-site-list__rename-modal-actions {
   margin-top: 12px;
@@ -1456,6 +1489,124 @@ body.is-fullscreen-mode .edit-site-list-header {
   }
 }
 
+.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: right;
+  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-custom-generic-template__modal-actions {
+  margin-top: 12px;
+}
+
 .edit-site-sidebar {
   width: 280px;
 }
@@ -1512,6 +1663,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   grid-column: span 1;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel .span-columns {
+  grid-column: 1/-1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
   padding-top: 24px;
   border-top: 1px solid #e0e0e0;
@@ -1654,50 +1809,56 @@ body.is-fullscreen-mode .edit-site-list-header {
   display: flex;
   align-items: flex-start;
 }
-
 .edit-site-template-card__content {
   flex-grow: 1;
   margin-bottom: 4px;
 }
-
 .edit-site-template-card__title {
   font-weight: 500;
   line-height: 24px;
 }
 .edit-site-template-card__title.edit-site-template-card__title {
-  margin: 0 0 4px;
+  margin: 0;
 }
-
 .edit-site-template-card__description {
   font-size: 13px;
   margin: 0 0 16px;
 }
-
 .edit-site-template-card__icon {
   flex: 0 0 24px;
   margin-left: 12px;
   width: 24px;
   height: 24px;
 }
-
-h3.edit-site-template-card__template-areas-title {
-  font-weight: 500;
-  margin: 0 0 8px;
-}
-
 .edit-site-template-card__template-areas-list {
   margin: 0;
 }
 .edit-site-template-card__template-areas-list > li {
   margin: 0;
 }
-
 .edit-site-template-card__template-areas-item {
   width: 100%;
 }
 .edit-site-template-card__template-areas-item.components-button.has-icon {
   padding: 0;
 }
+.edit-site-template-card__header {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 4px;
+}
+.edit-site-template-card__actions {
+  line-height: 0;
+}
+.edit-site-template-card__actions > .components-button.is-small.has-icon {
+  padding: 0;
+  min-width: auto;
+}
+
+h3.edit-site-template-card__template-areas-title {
+  font-weight: 500;
+  margin: 0 0 8px;
+}
 
 html #wpadminbar {
   display: none;
@@ -1987,9 +2148,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-keyboard-shortcut-help-modal__section {
   margin: 0 0 2rem 0;
 }
-.edit-site-keyboard-shortcut-help-modal__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list {
-  margin-top: -25px;
-}
 .edit-site-keyboard-shortcut-help-modal__section-title {
   font-size: 0.9rem;
   font-weight: 600;
@@ -2039,40 +2197,31 @@ html.wp-toolbar {
   background: #fff;
 }
 
-body.appearance_page_gutenberg-edit-site,
 body.site-editor-php {
   background: #fff;
   /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
      Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 }
-body.appearance_page_gutenberg-edit-site #wpcontent,
 body.site-editor-php #wpcontent {
   padding-right: 0;
 }
-body.appearance_page_gutenberg-edit-site #wpbody-content,
 body.site-editor-php #wpbody-content {
   padding-bottom: 0;
 }
-body.appearance_page_gutenberg-edit-site #wpbody-content > div:not(.edit-site):not(#screen-meta),
 body.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
   display: none;
 }
-body.appearance_page_gutenberg-edit-site #wpfooter,
 body.site-editor-php #wpfooter {
   display: none;
 }
-body.appearance_page_gutenberg-edit-site .a11y-speak-region,
 body.site-editor-php .a11y-speak-region {
   right: -1px;
   top: -1px;
 }
-body.appearance_page_gutenberg-edit-site ul#adminmenu a.wp-has-current-submenu::after,
-body.appearance_page_gutenberg-edit-site ul#adminmenu > li.current > a.current::after,
 body.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
 body.site-editor-php ul#adminmenu > li.current > a.current::after {
   border-left-color: #fff;
 }
-body.appearance_page_gutenberg-edit-site .media-frame select.attachment-filters:last-of-type,
 body.site-editor-php .media-frame select.attachment-filters:last-of-type {
   width: auto;
   max-width: 100%;