@wordpress/block-editor 10.4.0 → 11.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 {
@@ -152,7 +166,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,350 +175,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;
-  left: 0;
-  bottom: 0;
-  right: 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;
-  left: 1px;
-  bottom: 1px;
-  right: 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;
-  left: 0;
-  right: 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-right: 0;
-  margin-left: 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;
-  left: 0;
-  bottom: 0;
-  right: 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;
-  right: 1px;
-  left: 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;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 2px;
-}
-.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:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-
-.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: right;
-  margin-left: 2em;
-}
-
-.wp-site-blocks > [data-align=right] {
-  float: left;
-  margin-right: 2em;
-}
-
-.wp-site-blocks > [data-align=center] {
-  justify-content: center;
-  margin-right: auto;
-  margin-left: 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-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__no-block-tools {
+  border-top: 1px solid #ddd;
 }
 
-/**
- * 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;
+.block-editor-block-inspector__tab-item {
+  flex: 1 1 0px;
 }
 
-/** 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;
 }
 
 /**
@@ -520,21 +202,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;
-  left: 0;
-  right: 50%;
-  width: 1px;
+  bottom: 0;
+  right: 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);
   right: calc(50% - 12px);
@@ -545,6 +233,14 @@
   }
 }
 
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
+  pointer-events: none;
+}
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div > * {
+  pointer-events: all;
+}
+
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
@@ -554,6 +250,7 @@
   min-width: 24px;
   height: 24px;
 }
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
   color: #fff;
@@ -645,6 +342,9 @@
 .block-editor-block-list__block-selection-button .components-button:active {
   color: #fff;
 }
+.block-editor-block-list__block-selection-button .components-button[aria-disabled=true]:hover {
+  color: #fff;
+}
 .block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button {
   padding: 0;
 }
@@ -677,22 +377,6 @@
   display: none;
 }
 
-.is-vertical .block-list-appender {
-  width: 24px;
-  margin-left: auto;
-  margin-top: 12px;
-  margin-right: 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;
 }
@@ -715,25 +399,18 @@
 .block-editor-block-lock-modal__options-title .components-base-control__field {
   align-items: center;
   display: flex;
-  margin: 0;
 }
 
 .block-editor-block-lock-modal__checklist-item {
-  margin-bottom: 0;
-  padding: 12px 32px 12px 0;
-}
-.block-editor-block-lock-modal__checklist-item .components-base-control__field {
-  align-items: center;
-  display: flex;
-  margin: 0;
-}
-.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  flex-grow: 1;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 0;
+  padding: 12px 32px 12px 0;
 }
-.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label svg {
+.block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
+  flex-shrink: 0;
   margin-left: 12px;
   fill: #1e1e1e;
 }
@@ -848,6 +525,10 @@
   height: 24px;
 }
 
+.block-editor-block-card.is-synced .block-editor-block-icon {
+  color: var(--wp-block-synced-color);
+}
+
 /**
  * Invalid block comparison
  */
@@ -912,39 +593,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;
-  right: 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);
-  right: calc(( 100% - 100vw ) / 2);
-}
-
 .block-editor-block-draggable-chip-wrapper {
   position: absolute;
   top: -24px;
@@ -985,19 +633,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;
@@ -1014,7 +649,6 @@
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > *::before {
     height: calc(100% - 4px);
-    width: calc(100% - 4px);
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     top: 5px;
@@ -1151,7 +785,7 @@
   width: max-content;
   overflow-y: visible;
 }
-.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content * {
   pointer-events: all;
 }
 
@@ -1193,16 +827,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;
 }
@@ -1857,124 +1485,30 @@
   padding: 0;
 }
 .block-editor-tools-panel-color-gradient-settings__dropdown > button {
-  height: auto;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  text-align: right;
-}
-.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-right: auto;
-  margin-left: 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-default-block-appender .block-editor-inserter {
-  position: absolute;
-  top: 0;
-  left: 0;
-  line-height: 0;
-}
-.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;
-  left: 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;
+  height: auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: right;
 }
-.block-editor-block-list__block .block-list-appender:only-child {
-  position: relative;
-  left: 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 {
@@ -2029,6 +1563,12 @@
   text-transform: capitalize;
 }
 
+.block-editor-height-control {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
 .block-editor-image-size-control {
   margin-bottom: 1em;
 }
@@ -2051,22 +1591,25 @@
   margin-right: 5px;
 }
 
-.block-editor-block-list__layout.has-overlay::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 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;
@@ -2240,7 +1783,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. */
@@ -2656,6 +2199,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;
 }
@@ -2666,6 +2215,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;
 }
@@ -2684,8 +2236,11 @@
 .block-editor-list-view-leaf.is-last-selected td:last-child {
   border-bottom-left-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-right-radius: 2px;
@@ -2715,7 +2270,6 @@
   height: auto;
   padding: 6px 0 6px 4px;
   text-align: right;
-  color: #1e1e1e;
   border-radius: 2px;
   position: relative;
   white-space: nowrap;
@@ -2799,14 +2353,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 > * {
@@ -3086,48 +2635,6 @@
   left: 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;
@@ -3155,18 +2662,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;
@@ -3200,7 +2695,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;
@@ -3210,28 +2706,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;
 }
@@ -3267,14 +2741,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;
@@ -3406,7 +2872,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. */
@@ -3508,7 +2974,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;
 }
@@ -3780,6 +3246,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   border: 0;
   border-left: 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 {
@@ -4019,9 +3491,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-inserter__search .components-search-control__icon {
   left: 20px;
 }
-.block-editor-inserter__search .components-base-control__field {
-  margin-bottom: 0;
-}
 
 .block-editor-inserter__tabs {
   flex-grow: 1;
@@ -4036,6 +3505,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-right: 16px;
+  padding-left: 16px;
+}
 .block-editor-inserter__tabs .components-tab-panel__tab-content {
   display: flex;
   flex-grow: 1;
@@ -4081,9 +3555,13 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   text-align: left;
 }
 
+.block-editor-inserter__manage-reusable-blocks-container {
+  margin: auto 16px 16px;
+}
+
 .block-editor-inserter__manage-reusable-blocks {
-  display: inline-block;
-  margin: 16px;
+  justify-content: center;
+  width: 100%;
 }
 
 .block-editor-inserter__no-results {
@@ -4177,12 +3655,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-right: 1px solid #e0e0e0;
   border-left: 1px solid #e0e0e0;
@@ -4196,23 +3673,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 {
     right: 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 {
@@ -4240,10 +3723,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   position: relative;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-  padding: 16px;
-}
-
 .block-editor-inserter__quick-inserter {
   width: 100%;
   max-width: 100%;
@@ -4328,7 +3807,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding-bottom: 32px;
 }
 .block-editor-block-patterns-explorer__list {
-  margin-right: 248px;
+  margin-right: 280px;
+  padding: 24px 0 32px;
 }
 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
   display: grid;
@@ -4358,6 +3838,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;
+  right: 0;
+  left: 0;
+  border-radius: 2px;
+  opacity: 0.04;
+  background: var(--wp-admin-theme-color);
+}
+
+.block-editor-inserter__media-dialog {
+  background: #f0f0f0;
+  border-right: 1px solid #e0e0e0;
+  border-left: 1px solid #e0e0e0;
+  position: absolute;
+  padding: 16px 24px;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+}
+@media (min-width: 782px) {
+  .block-editor-inserter__media-dialog {
+    right: 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;
 }
@@ -4527,6 +4140,30 @@ 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 28px 0 0;
+  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;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;