@wordpress/block-editor 10.5.0 → 11.1.0

package/build-style/style.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
  */
@@ -46,15 +58,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -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 {
@@ -144,6 +158,9 @@
 .block-editor-block-inspector .components-base-control:last-child {
   margin-bottom: 8px;
 }
+.block-editor-block-inspector .components-focal-point-picker-control .components-base-control {
+  margin-bottom: 0;
+}
 .block-editor-block-inspector .components-panel__body {
   border: none;
   border-top: 1px solid #e0e0e0;
@@ -152,7 +169,8 @@
   padding: 16px;
 }
 
-.block-editor-block-inspector__no-blocks {
+.block-editor-block-inspector__no-blocks,
+.block-editor-block-inspector__no-block-tools {
   display: block;
   font-size: 13px;
   background: #fff;
@@ -160,356 +178,17 @@
   text-align: center;
 }
 
-.block-editor-block-inspector__block-buttons-container {
-  border-top: 1px solid #e0e0e0;
-  padding: 16px;
-}
-
-.block-editor-block-styles .block-editor-block-list__block {
-  margin: 0;
-}
-
-/**
- * Cross-Block Selection
- */
-@keyframes selection-overlay__fade-in-animation {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 0.4;
-  }
-}
-.block-editor-block-list__layout {
-  position: relative;
-}
-.block-editor-block-list__layout::selection {
-  background: transparent;
-}
-.has-multi-selection .block-editor-block-list__layout::selection {
-  background: transparent;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
-  border-radius: 2px;
-  overflow: hidden;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
-  background: transparent;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: var(--wp-admin-theme-color);
-  opacity: 0.4;
-  border-radius: 2px;
-  animation: selection-overlay__fade-in-animation 0.1s ease-out;
-  animation-fill-mode: forwards;
-  outline: 2px solid transparent;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
-  outline: none;
-}
-.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-  top: 1px;
-  right: 1px;
-  bottom: 1px;
-  left: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 1px;
-  outline: 2px solid transparent;
-}
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
-}
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected {
-  box-shadow: none;
-  outline: none;
-}
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  pointer-events: none;
-  transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-  right: 0;
-  left: 0;
-  top: -14px;
-  border-radius: 2px;
-  border-top: 4px solid #ccc;
-}
-.block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::after {
-  border-color: var(--wp-admin-theme-color);
-}
-.has-multi-selection .block-editor-block-list__layout {
-  -webkit-user-select: none;
-          user-select: none;
-}
-.block-editor-block-list__layout [class^=components-] {
-  -webkit-user-select: text;
-          user-select: text;
-}
-
-.is-block-moving-mode.block-editor-block-list__block-selection-button {
-  opacity: 0;
-  font-size: 1px;
-  height: 1px;
-  padding: 0;
-}
-
-.is-content-locked .block-editor-block-list__block {
-  pointer-events: none;
-}
-.is-content-locked .is-content-block {
-  pointer-events: initial;
-}
-
-.block-editor-block-list__layout .block-editor-block-list__block {
-  position: relative;
-  -webkit-user-select: text;
-          user-select: text;
-  overflow-wrap: break-word;
-  /**
-   * Notices
-   */
-}
-.block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
-  z-index: 1;
-}
-.block-editor-block-list__layout .block-editor-block-list__block .components-placeholder .components-with-notices-ui {
-  margin: -10px 0 12px 0;
-}
-.block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui {
-  margin: 0 0 12px 0;
-  width: 100%;
-}
-.block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice {
-  margin-left: 0;
-  margin-right: 0;
-}
-.block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
-  font-size: 13px;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.has-warning {
-  min-height: 48px;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
-  pointer-events: none;
-  -webkit-user-select: none;
-          user-select: none;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
-  pointer-events: all;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.has-warning::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  border-radius: 2px;
-  background-color: rgba(255, 255, 255, 0.4);
-}
-.block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-multi-selected::after {
-  background-color: transparent;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay::after {
-  display: none;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay .block-editor-block-list__layout.has-overlay::after {
-  display: block;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-reusable.has-child-selected::after {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-}
-.block-editor-block-list__layout .block-editor-block-list__block[data-clear=true] {
-  float: none;
-}
-
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered {
-  cursor: default;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  border-radius: 1px;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
-  cursor: default;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
-  cursor: unset;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 2px;
-}
-
-.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-  opacity: 0.2;
-  transition: opacity 0.1s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) .block-editor-block-list__block, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-selected, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-multi-selected {
-  opacity: 1;
-}
-
-.is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected, .is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected .block-editor-block-list__block,
-.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected,
-.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected .block-editor-block-list__block {
-  opacity: 1;
-}
-
-.wp-block[data-align=left] > *,
-.wp-block[data-align=right] > *,
-.wp-block.alignleft,
-.wp-block.alignright {
-  z-index: 21;
-}
-
-.wp-site-blocks > [data-align=left] {
-  float: left;
-  margin-right: 2em;
-}
-
-.wp-site-blocks > [data-align=right] {
-  float: right;
-  margin-left: 2em;
-}
-
-.wp-site-blocks > [data-align=center] {
-  justify-content: center;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/**
- * In-Canvas Inserter
- */
-.block-editor-block-list .block-editor-inserter {
-  margin: 8px;
-  cursor: move;
-  cursor: grab;
-}
-
-@keyframes block-editor-inserter__toggle__fade-in-animation {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.wp-block .block-list-appender .block-editor-inserter__toggle {
-  animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .wp-block .block-list-appender .block-editor-inserter__toggle {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
-}
-
-.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
-  display: none;
-}
-.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender .block-editor-inserter__toggle {
-  opacity: 0;
-  transform: scale(0);
+.block-editor-block-inspector__no-block-tools {
+  border-top: 1px solid #ddd;
 }
 
-.block-editor-block-list__block .block-editor-block-list__block-html-textarea {
-  display: block;
-  margin: 0;
-  padding: 12px;
-  width: 100%;
-  border: none;
-  outline: none;
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-  resize: none;
-  overflow: hidden;
-  font-family: Menlo, Consolas, monaco, monospace;
-  font-size: 15px;
-  line-height: 1.5;
-  transition: padding 0.2s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.block-editor-block-list__block .block-editor-block-list__block-html-textarea:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.block-editor-block-inspector__tab-item {
+  flex: 1 1 0px;
 }
 
-/**
- * Warnings.
- */
-.block-editor-block-list__block .block-editor-warning {
-  z-index: 5;
-  position: relative;
-}
-.block-editor-block-list__block .block-editor-warning.block-editor-block-list__block-crash-warning {
-  margin-bottom: auto;
-}
-
-/** Zoom Out mode styles **/
-.block-editor-iframe__body {
-  transition: all 0.3s;
-  transform-origin: top center;
-}
-.block-editor-iframe__body.is-zoomed-out {
-  margin: 100px 0;
-  transform: scale(0.45);
-}
-.block-editor-iframe__body.is-zoomed-out .wp-site-blocks > * + * {
-  margin-block-start: 2.5rem;
-}
-.block-editor-iframe__body.is-zoomed-out > .block-list-appender {
-  display: none;
+.block-editor-block-inspector__block-buttons-container {
+  border-top: 1px solid #e0e0e0;
+  padding: 16px;
 }
 
 /**
@@ -526,21 +205,27 @@
 .block-editor-block-list__insertion-point-indicator {
   position: absolute;
   background: var(--wp-admin-theme-color);
+  border-radius: 2px;
+  transform-origin: center;
+  opacity: 0;
+  will-change: transform, opacity;
 }
 .block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator {
-  top: 50%;
-  height: 1px;
+  top: calc(50% - 2px);
+  height: 4px;
+  width: 100%;
 }
 .block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator {
   top: 0;
-  right: 0;
-  left: 50%;
-  width: 1px;
+  bottom: 0;
+  left: calc(50% - 2px);
+  width: 4px;
 }
 
 .block-editor-block-list__insertion-point-inserter {
   display: none;
   position: absolute;
+  will-change: transform;
   justify-content: center;
   top: calc(50% - 12px);
   left: calc(50% - 12px);
@@ -695,22 +380,6 @@
   display: none;
 }
 
-.is-vertical .block-list-appender {
-  width: 24px;
-  margin-right: auto;
-  margin-top: 12px;
-  margin-left: 12px;
-}
-
-.block-list-appender > .block-editor-inserter {
-  display: block;
-}
-
-.block-editor-block-list__block:not(.is-selected):not(.has-child-selected):not(.block-editor-block-list__layout) .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle {
-  opacity: 0;
-  transform: scale(0);
-}
-
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -859,6 +528,10 @@
   height: 24px;
 }
 
+.block-editor-block-card.is-synced .block-editor-block-icon {
+  color: var(--wp-block-synced-color);
+}
+
 /**
  * Invalid block comparison
  */
@@ -923,39 +596,6 @@
   margin: 0.67em 0;
 }
 
-.block-editor-block-list__block.has-block-overlay {
-  cursor: default;
-}
-.block-editor-block-list__block.has-block-overlay::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  border: none;
-  border-radius: 2px;
-  z-index: 10;
-}
-.block-editor-block-list__block.has-block-overlay::after {
-  content: none !important;
-}
-.block-editor-block-list__block.has-block-overlay:hover:not(.is-dragging-blocks)::before {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.3);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
-}
-.block-editor-block-list__block.has-block-overlay.is-selected:not(.is-dragging-blocks)::before {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
-}
-.block-editor-block-list__block.has-block-overlay .block-editor-block-list__block {
-  pointer-events: none;
-}
-.block-editor-iframe__body.is-zoomed-out .block-editor-block-list__block.has-block-overlay::before {
-  width: calc(100vw);
-  left: calc(( 100% - 100vw ) / 2);
-}
-
 .block-editor-block-draggable-chip-wrapper {
   position: absolute;
   top: -24px;
@@ -996,19 +636,6 @@
   font-size: 13px;
 }
 
-.block-editor-block-list__layout .is-dragging {
-  background-color: currentColor !important;
-  opacity: 0.05 !important;
-  border-radius: 2px !important;
-  pointer-events: none !important;
-}
-.block-editor-block-list__layout .is-dragging::selection {
-  background: transparent !important;
-}
-.block-editor-block-list__layout .is-dragging::after {
-  content: none !important;
-}
-
 .block-editor-block-mover__move-button-container {
   display: flex;
   padding: 0;
@@ -1203,16 +830,10 @@
   min-height: auto;
 }
 .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__insertion-point,
-.block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-drop-zone,
-.block-editor-block-preview__container .block-editor-block-preview__content .reusable-block-indicator,
 .block-editor-block-preview__container .block-editor-block-preview__content .block-list-appender {
   display: none;
 }
 
-.block-editor-block-preview__content-iframe .block-list-appender {
-  display: none;
-}
-
 .block-editor-block-preview__live-content * {
   pointer-events: none;
 }
@@ -1553,6 +1174,9 @@
   width: 100%;
   border-radius: 2px;
 }
+.block-editor-block-pattern-setup.view-mode-grid {
+  padding-top: 4px;
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
   justify-content: center;
 }
@@ -1574,10 +1198,26 @@
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
   cursor: pointer;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-preview__container {
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+}
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-preview__container {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title {
+  color: var(--wp-admin-theme-color);
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
   break-inside: avoid-column;
   margin-bottom: 24px;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
+  padding-top: 8px;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
   min-height: 100px;
   border-radius: 2px;
@@ -1619,6 +1259,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container {
@@ -1626,6 +1267,7 @@
   position: relative;
   padding: 0;
   margin: 0;
+  height: 100%;
   list-style: none;
   transform-style: preserve-3d;
 }
@@ -1636,6 +1278,8 @@
   position: absolute;
   top: 0;
   width: 100%;
+  height: 100%;
+  background-color: #fff;
   margin: auto;
   padding: 0;
   transition: transform 0.5s, z-index 0.5s;
@@ -1866,127 +1510,31 @@
   display: block;
   padding: 0;
 }
-.block-editor-tools-panel-color-gradient-settings__dropdown > button {
-  height: auto;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  text-align: left;
-}
-.block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
-  background: #f0f0f0;
-  color: var(--wp-admin-theme-color);
-}
-.block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.block-editor-panel-color-gradient-settings__dropdown {
-  width: 100%;
-}
-.block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
-  flex-shrink: 0;
-}
-
-.block-editor-contrast-checker > .components-notice {
-  margin: 0;
-}
-
-/**
- * Default block appender.
- *
- * This component shows up in 3 places:
- * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
- * - on the right, inside empty paragraphs
- * - absolute positioned and blue inside nesting containers
- */
-.block-editor-default-block-appender {
-  clear: both;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-}
-.block-editor-default-block-appender[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
-  outline: 1px solid transparent;
-}
-.block-editor-default-block-appender .block-editor-default-block-appender__content {
-  opacity: 0.62;
-}
-.block-editor-default-block-appender .components-drop-zone__content-icon {
-  display: none;
-}
-
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
-  position: absolute;
-  top: 0;
-  right: 0;
-  line-height: 0;
-}
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled,
-.block-editor-default-block-appender .block-editor-inserter:disabled {
-  display: none;
-}
-
-/**
- * Fixed position appender.
- * These styles apply to all in-canvas inserters that exist inside nesting containers.
- */
-.block-editor-block-list__block .block-list-appender {
-  position: absolute;
-  list-style: none;
-  padding: 0;
-  z-index: 2;
-  bottom: 0;
-  right: 0;
-}
-.block-editor-block-list__block .block-list-appender.block-list-appender {
-  margin: 0;
-  line-height: 0;
-}
-.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
-  height: 24px;
-}
-.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
-.block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
-  flex-direction: row;
-  box-shadow: none;
-  height: 24px;
-  width: 24px;
-  display: none;
-  padding: 0 !important;
-  background: #1e1e1e;
-  color: #fff;
-}
-.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
-.block-editor-block-list__block .block-list-appender .block-list-appender__toggle:hover {
-  color: #fff;
-  background: var(--wp-admin-theme-color);
-}
-.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content {
-  display: none;
+.block-editor-tools-panel-color-gradient-settings__dropdown > button {
+  height: auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: left;
 }
-.block-editor-block-list__block .block-list-appender:only-child {
-  position: relative;
-  right: auto;
-  align-self: center;
-  list-style: none;
-  line-height: inherit;
+.block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
+  background: #f0f0f0;
+  color: var(--wp-admin-theme-color);
 }
-.block-editor-block-list__block .block-list-appender:only-child .block-editor-default-block-appender__content {
-  display: block;
+.block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
-.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle,
-.block-editor-block-list__block.is-selected > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
-.block-editor-block-list__block.is-selected > .block-list-appender .block-list-appender__toggle {
-  display: flex;
+.block-editor-panel-color-gradient-settings__dropdown {
+  width: 100%;
+}
+.block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
+  flex-shrink: 0;
 }
 
-.block-editor-default-block-appender__content {
-  cursor: text;
+.block-editor-contrast-checker > .components-notice {
+  margin: 0;
 }
 
 .block-editor-date-format-picker {
@@ -2041,6 +1589,12 @@
   text-transform: capitalize;
 }
 
+.block-editor-height-control {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
 .block-editor-image-size-control {
   margin-bottom: 1em;
 }
@@ -2063,22 +1617,25 @@
   margin-left: 5px;
 }
 
-.block-editor-block-list__layout.has-overlay::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 60;
-}
-
 .block-editor-block-types-list__list-item {
   display: block;
   width: 33.33%;
   padding: 0;
   margin: 0;
 }
+.block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled) .block-editor-block-icon.has-colors {
+  color: var(--wp-block-synced-color);
+}
+.block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled):hover .block-editor-block-types-list__item-title {
+  color: var(--wp-block-synced-color) !important;
+  filter: brightness(0.95);
+}
+.block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled):hover svg {
+  color: var(--wp-block-synced-color) !important;
+}
+.block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled)::after {
+  background: var(--wp-block-synced-color);
+}
 
 .components-button.block-editor-block-types-list__item {
   display: flex;
@@ -2252,7 +1809,7 @@
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2668,6 +2225,12 @@
 .block-editor-list-view-leaf.is-selected td {
   background: var(--wp-admin-theme-color);
 }
+.block-editor-list-view-leaf.is-selected.is-synced td {
+  background: var(--wp-block-synced-color);
+}
+.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
+  color: var(--wp-block-synced-color);
+}
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
   color: #fff;
 }
@@ -2678,6 +2241,9 @@
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
+.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+}
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
 }
@@ -2696,8 +2262,11 @@
 .block-editor-list-view-leaf.is-last-selected td:last-child {
   border-bottom-right-radius: 2px;
 }
-.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) {
-  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
+.block-editor-list-view-leaf.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+}
+.block-editor-list-view-leaf.is-synced-branch:not(.is-selected) {
+  background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 }
 .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:first-child {
   border-top-left-radius: 2px;
@@ -2727,7 +2296,6 @@
   height: auto;
   padding: 6px 4px 6px 0;
   text-align: left;
-  color: #1e1e1e;
   border-radius: 2px;
   position: relative;
   white-space: nowrap;
@@ -2786,9 +2354,8 @@
   }
 }
 .block-editor-list-view-leaf .block-editor-block-icon {
-  align-self: flex-start;
   margin-right: 8px;
-  width: 24px;
+  flex: 0 0 24px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell,
@@ -2811,14 +2378,9 @@
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell > *,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell > * {
+  will-change: opacity;
   opacity: 0;
 }
-.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible,
-.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover,
-.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible {
-  position: relative;
-  z-index: 1;
-}
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * {
@@ -2925,11 +2487,6 @@
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock {
   line-height: 0;
-  width: 24px;
-  min-width: 24px;
-  margin-left: auto;
-  padding: 0;
-  vertical-align: middle;
 }
 
 .block-editor-list-view-block-select-button__description,
@@ -3098,48 +2655,6 @@
   right: 10px;
 }
 
-.block-editor-media-placeholder__url-input-container .block-editor-media-placeholder__button {
-  margin-bottom: 0;
-}
-
-.block-editor-media-placeholder__url-input-form {
-  display: flex;
-}
-.block-editor-media-placeholder__url-input-form input[type=url].block-editor-media-placeholder__url-input-field {
-  width: 100%;
-  min-width: 200px;
-  flex-grow: 1;
-  border: none;
-  border-radius: 0;
-  margin: 2px;
-}
-@media (min-width: 600px) {
-  .block-editor-media-placeholder__url-input-form input[type=url].block-editor-media-placeholder__url-input-field {
-    width: 300px;
-  }
-}
-
-.block-editor-media-placeholder__url-input-submit-button {
-  flex-shrink: 1;
-}
-
-.block-editor-media-placeholder__button {
-  margin-bottom: 0.5rem;
-}
-
-.block-editor-media-placeholder__cancel-button.is-link {
-  margin: 1em;
-  display: block;
-}
-
-.block-editor-media-placeholder.is-appender {
-  min-height: 0;
-}
-.block-editor-media-placeholder.is-appender:hover {
-  cursor: pointer;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-}
-
 .block-editor-multi-selection-inspector__card {
   display: flex;
   align-items: flex-start;
@@ -3167,18 +2682,6 @@
   height: 24px;
 }
 
-.block-editor-plain-text {
-  box-shadow: none;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  line-height: inherit;
-  border: none;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-
 .block-editor-responsive-block-control {
   margin-bottom: 28px;
   border-bottom: 1px solid #ccc;
@@ -3212,7 +2715,8 @@
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -3222,28 +2726,6 @@
   word-wrap: normal !important;
 }
 
-.rich-text [data-rich-text-placeholder] {
-  pointer-events: none;
-}
-.rich-text [data-rich-text-placeholder]::after {
-  content: attr(data-rich-text-placeholder);
-  opacity: 0.62;
-}
-.rich-text:focus {
-  outline: none;
-}
-.rich-text:focus [data-rich-text-format-boundary] {
-  border-radius: 2px;
-}
-
-.block-editor-rich-text__editable > p:first-child {
-  margin-top: 0;
-}
-
-figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
-  opacity: 0.8;
-}
-
 .components-popover.block-editor-rich-text__inline-format-toolbar {
   z-index: 99998;
 }
@@ -3279,14 +2761,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   content: attr(aria-label);
 }
 
-[data-rich-text-script] {
-  display: inline;
-}
-[data-rich-text-script]::before {
-  content: "</>";
-  background: yellow;
-}
-
 .block-editor-skip-to-selected-block {
   position: absolute;
   top: -9999em;
@@ -3418,7 +2892,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -3520,7 +2994,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 
 .block-editor-url-input__button-modal {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
   border: 1px solid #ddd;
   background: #fff;
 }
@@ -3792,6 +3266,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   border: 0;
   border-right: 1px solid #ddd;
 }
+.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
+  color: var(--wp-block-synced-color);
+}
+.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
+  color: var(--wp-block-synced-color);
+}
 .block-editor-block-toolbar > :last-child,
 .block-editor-block-toolbar > :last-child .components-toolbar-group,
 .block-editor-block-toolbar > :last-child .components-toolbar {
@@ -4031,9 +3511,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-inserter__search .components-search-control__icon {
   right: 20px;
 }
-.block-editor-inserter__search .components-base-control__field {
-  margin-bottom: 0;
-}
 
 .block-editor-inserter__tabs {
   flex-grow: 1;
@@ -4048,6 +3525,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   flex-grow: 1;
   margin-bottom: -1px;
 }
+.block-editor-inserter__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item[id$=reusable] {
+  flex-grow: inherit;
+  padding-left: 16px;
+  padding-right: 16px;
+}
 .block-editor-inserter__tabs .components-tab-panel__tab-content {
   display: flex;
   flex-grow: 1;
@@ -4193,12 +3675,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   overflow-y: auto;
   height: 100%;
 }
-
-.block-editor-inserter__patterns-fill-space {
-  flex-grow: 1;
+.block-editor-inserter__block-patterns-tabs div[role=listitem]:last-child {
+  margin-top: auto;
 }
 
-.block-editor-inserter__patterns-category-panel {
+.block-editor-inserter__patterns-category-dialog {
   background: #f0f0f0;
   border-left: 1px solid #e0e0e0;
   border-right: 1px solid #e0e0e0;
@@ -4212,23 +3693,29 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   scrollbar-gutter: stable both-edges;
 }
 @media (min-width: 782px) {
-  .block-editor-inserter__patterns-category-panel {
+  .block-editor-inserter__patterns-category-dialog {
     left: 100%;
     display: block;
     width: 300px;
   }
 }
-.block-editor-inserter__patterns-category-panel .block-editor-block-patterns-list {
+.block-editor-inserter__patterns-category-dialog .block-editor-block-patterns-list {
   margin-top: 24px;
 }
-.block-editor-inserter__patterns-category-panel .block-editor-block-preview__container {
+.block-editor-inserter__patterns-category-dialog .block-editor-block-preview__container {
   box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
 }
-.block-editor-inserter__patterns-category-panel .block-editor-block-preview__container:hover {
+.block-editor-inserter__patterns-category-dialog .block-editor-block-preview__container:hover {
   box-shadow: 0 0 0 2px #1e1e1e, 0 15px 25px rgba(0, 0, 0, 0.07);
 }
-.block-editor-inserter__patterns-category-panel .block-editor-block-patterns-list__item-title {
-  display: none;
+
+.block-editor-inserter__patterns-category-panel {
+  padding: 0 16px;
+}
+@media (min-width: 782px) {
+  .block-editor-inserter__patterns-category-panel {
+    padding: 0;
+  }
 }
 
 .block-editor-inserter__preview-content {
@@ -4371,6 +3858,139 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   font-size: calc(1.25 * 13px);
 }
 
+.block-editor-inserter__media-tabs-container {
+  height: 100%;
+}
+.block-editor-inserter__media-tabs-container nav {
+  height: 100%;
+}
+.block-editor-inserter__media-tabs-container .block-editor-inserter__media-library-button {
+  padding: 16px;
+  justify-content: center;
+  margin-top: 16px;
+  width: 100%;
+}
+
+.block-editor-inserter__media-tabs {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  overflow-y: auto;
+  height: 100%;
+}
+.block-editor-inserter__media-tabs div[role=listitem]:last-child {
+  margin-top: auto;
+}
+.block-editor-inserter__media-tabs__media-category.is-selected {
+  color: var(--wp-admin-theme-color);
+  position: relative;
+}
+.block-editor-inserter__media-tabs__media-category.is-selected .components-flex-item {
+  filter: brightness(0.95);
+}
+.block-editor-inserter__media-tabs__media-category.is-selected svg {
+  fill: var(--wp-admin-theme-color);
+}
+.block-editor-inserter__media-tabs__media-category.is-selected::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 2px;
+  opacity: 0.04;
+  background: var(--wp-admin-theme-color);
+}
+
+.block-editor-inserter__media-dialog {
+  background: #f0f0f0;
+  border-left: 1px solid #e0e0e0;
+  border-right: 1px solid #e0e0e0;
+  position: absolute;
+  padding: 16px 24px;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+}
+@media (min-width: 782px) {
+  .block-editor-inserter__media-dialog {
+    left: 100%;
+    display: block;
+    width: 300px;
+  }
+}
+.block-editor-inserter__media-dialog .block-editor-block-preview__container {
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+.block-editor-inserter__media-dialog .block-editor-block-preview__container:hover {
+  box-shadow: 0 0 0 2px #1e1e1e, 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+
+.block-editor-inserter__media-panel {
+  height: 100%;
+  padding: 0 16px;
+}
+@media (min-width: 782px) {
+  .block-editor-inserter__media-panel {
+    padding: 0;
+  }
+}
+.block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search.components-search-control input[type=search].components-search-control__input {
+  background: #fff;
+}
+
+.block-editor-inserter__media-list {
+  margin-top: 16px;
+}
+.block-editor-inserter__media-list__list-item {
+  cursor: pointer;
+  margin-bottom: 24px;
+}
+.block-editor-inserter__media-list__list-item.is-placeholder {
+  min-height: 100px;
+}
+.block-editor-inserter__media-list__list-item[draggable=true] .block-editor-block-preview__container {
+  cursor: grab;
+}
+.block-editor-inserter__media-list__item {
+  height: 100%;
+}
+.block-editor-inserter__media-list__item-preview {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 4px;
+}
+.block-editor-inserter__media-list__item-preview > * {
+  margin: 0 auto;
+  max-width: 100%;
+}
+.block-editor-inserter__media-list__item:hover .block-editor-inserter__media-list__item-preview {
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+}
+.block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+
+.block-editor-inserter__mobile-tab-navigation {
+  padding: 16px;
+  height: 100%;
+}
+.block-editor-inserter__mobile-tab-navigation > * {
+  height: 100%;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }
@@ -4540,6 +4160,34 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   margin-top: 8px;
 }
 
+.offcanvas-editor__appender .block-editor-inserter__toggle {
+  background-color: #1e1e1e;
+  color: #fff;
+  margin: 8px 0 0 24px;
+  border-radius: 2px;
+  height: 24px;
+  min-width: 24px;
+  padding: 0;
+}
+.offcanvas-editor__appender .block-editor-inserter__toggle:hover, .offcanvas-editor__appender .block-editor-inserter__toggle:focus {
+  background: var(--wp-admin-theme-color);
+  color: #fff;
+}
+
+.offcanvas-editor-list-view-tree-wrapper {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.offcanvas-editor-list-view-leaf {
+  display: block;
+  max-width: 248px;
+}
+
+.offcanvas-editor-list-view-is-empty {
+  margin-left: 16px;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;