@wordpress/block-editor 8.3.0 → 8.5.0

package/build-style/style.css

@@ -185,8 +185,9 @@
   cursor: default;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after {
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
   position: absolute;
   z-index: 1;
   pointer-events: none;
@@ -195,28 +196,30 @@
   bottom: 1px;
   left: 1px;
   right: 1px;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+  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.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after {
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
   box-shadow: 0 0 0 1px #fff;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable]) .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected .components-placeholder ::selection {
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection {
   background: transparent;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 1px solid transparent;
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
+.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
@@ -737,6 +740,47 @@
   display: none;
 }
 
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown,
+.block-editor-block-toolbar .components-toolbar-group {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button.has-icon.has-icon,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button.has-icon.has-icon,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button.has-icon.has-icon,
+.block-editor-block-toolbar .components-toolbar-group .components-button,
+.block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon {
+  min-width: 36px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button svg,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button.has-icon.has-icon svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button.has-icon.has-icon svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button.has-icon.has-icon svg,
+.block-editor-block-toolbar .components-toolbar-group .components-button svg,
+.block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon svg {
+  min-width: 24px;
+}
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button::before,
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button.has-icon.has-icon::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button.has-icon.has-icon::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before,
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button.has-icon.has-icon::before,
+.block-editor-block-toolbar .components-toolbar-group .components-button::before,
+.block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon::before {
+  left: 2px;
+  right: 2px;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-right: auto;
@@ -753,6 +797,68 @@
   transform: scale(0);
 }
 
+.block-editor-block-lock-modal {
+  z-index: 1000001;
+}
+@media (min-width: 600px) {
+  .block-editor-block-lock-modal .components-modal__frame {
+    max-width: 480px;
+  }
+}
+
+.block-editor-block-lock-modal__checklist {
+  margin: 0;
+}
+
+.block-editor-block-lock-modal__options-title {
+  padding: 12px 0;
+}
+.block-editor-block-lock-modal__options-title .components-checkbox-control__label {
+  font-weight: 600;
+}
+.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 0 12px 32px;
+}
+.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;
+}
+.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label svg {
+  margin-right: 12px;
+  fill: #1e1e1e;
+}
+.block-editor-block-lock-modal__checklist-item:hover {
+  background-color: #f0f0f0;
+  border-radius: 2px;
+}
+
+.block-editor-block-lock-modal__actions {
+  margin-top: 24px;
+}
+
+.block-editor-block-lock-toolbar .components-button.has-icon {
+  min-width: 36px !important;
+  padding-left: 0 !important;
+}
+.block-editor-block-lock-toolbar .components-button.has-icon:focus::before {
+  left: 0 !important;
+  right: 12px !important;
+}
+
 .block-editor-block-breadcrumb {
   list-style: none;
   padding: 0;
@@ -1021,6 +1127,7 @@
   flex: 1;
   flex-direction: row;
   border-right: none !important;
+  padding: 0;
 }
 @media (min-width: 600px) {
   .block-editor-block-mover .block-editor-block-mover__move-button-container,
@@ -1278,6 +1385,10 @@
 
 .block-editor-block-switcher {
   position: relative;
+  padding: 0 6px;
+}
+.block-editor-block-switcher .components-button.components-dropdown-menu__toggle.has-icon.has-icon {
+  min-width: 36px;
 }
 
 .block-editor-block-switcher__no-switcher-icon,
@@ -1644,7 +1755,7 @@
 }
 
 .block-editor-block-variation-transforms {
-  padding: 0 16px 16px 56px;
+  padding: 0 16px 16px 52px;
   width: 100%;
 }
 .block-editor-block-variation-transforms .components-dropdown-menu__toggle {
@@ -1743,12 +1854,14 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 8px;
   width: 100%;
   height: auto;
   color: #1e1e1e;
   box-shadow: inset 0 0 0 1px #1e1e1e;
 }
+.block-editor-button-block-appender.components-button.components-button {
+  padding: 12px;
+}
 .is-dark-theme .block-editor-button-block-appender {
   color: rgba(255, 255, 255, 0.65);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
@@ -1768,6 +1881,10 @@
   margin-bottom: 12px;
 }
 
+.block-editor-color-gradient-control__fieldset {
+  min-width: 0;
+}
+
 .block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
   display: flex;
   gap: 8px;
@@ -1932,6 +2049,33 @@
   cursor: text;
 }
 
+.block-editor-date-format-picker {
+  margin-bottom: 16px;
+}
+
+.block-editor-date-format-picker__default-format-toggle-control__hint {
+  color: #757575;
+  display: block;
+}
+
+.block-editor-date-format-picker__custom-format-select-control.components-base-control {
+  margin-bottom: 0;
+}
+.block-editor-date-format-picker__custom-format-select-control .components-custom-select-control__button {
+  width: 100%;
+}
+
+.block-editor-date-format-picker__custom-format-select-control__custom-option {
+  border-top: 1px solid #ddd;
+}
+.block-editor-date-format-picker__custom-format-select-control__custom-option.has-hint {
+  grid-template-columns: auto 30px;
+}
+.block-editor-date-format-picker__custom-format-select-control__custom-option .components-custom-select-control__item-hint {
+  grid-row: 2;
+  text-align: left;
+}
+
 .block-editor-duotone-control__popover > .components-popover__content > div {
   padding: 16px;
   width: 280px;
@@ -2559,7 +2703,7 @@
 .block-editor-list-view-leaf {
   position: relative;
 }
-.block-editor-list-view-leaf.is-selected {
+.block-editor-list-view-leaf.is-selected td {
   background: var(--wp-admin-theme-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 {
@@ -2575,20 +2719,44 @@
 .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;
 }
+.block-editor-list-view-leaf.is-dragging {
+  display: none;
+}
+.block-editor-list-view-leaf.is-first-selected td:first-child {
+  border-top-left-radius: 2px;
+}
+.block-editor-list-view-leaf.is-first-selected td:last-child {
+  border-top-right-radius: 2px;
+}
+.block-editor-list-view-leaf.is-last-selected td:first-child {
+  border-bottom-left-radius: 2px;
+}
+.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.is-selected .block-editor-list-view-block-contents {
-  border-radius: 2px 2px 0 0;
+.block-editor-list-view-leaf.is-branch-selected.is-first-selected td:first-child {
+  border-top-left-radius: 2px;
 }
-.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-selected .block-editor-list-view-block-contents {
-  border-radius: 2px;
+.block-editor-list-view-leaf.is-branch-selected.is-first-selected td:last-child {
+  border-top-right-radius: 2px;
 }
-.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
-  border-radius: 0;
+.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-first-selected td:first-child {
+  border-top-left-radius: 2px;
 }
-.block-editor-list-view-leaf.is-dragging {
-  display: none;
+.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-first-selected td:last-child {
+  border-top-right-radius: 2px;
+}
+.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-last-selected td:first-child {
+  border-bottom-left-radius: 2px;
+}
+.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-last-selected td:last-child {
+  border-bottom-right-radius: 2px;
+}
+.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
+  border-radius: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-contents {
   display: flex;
@@ -2628,7 +2796,7 @@
   left: 0;
   border-radius: inherit;
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  z-index: 1;
+  z-index: 2;
   pointer-events: none;
 }
 .is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
@@ -2670,7 +2838,6 @@
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell {
   line-height: 0;
   width: 36px;
-  opacity: 0;
   vertical-align: middle;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2680,19 +2847,27 @@
     transition-delay: 0s;
   }
 }
+.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell > *,
+.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell > * {
+  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 > * {
   opacity: 1;
   animation: edit-post__fade-in-animation 0.2s ease-out 0s;
   animation-fill-mode: forwards;
 }
 @media (prefers-reduced-motion: reduce) {
-  .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 {
+  .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 > * {
     animation-duration: 1ms;
     animation-delay: 0s;
   }
@@ -2793,6 +2968,14 @@
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.3);
 }
+.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,
 .block-editor-list-view-appender__description {
@@ -3345,12 +3528,13 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 @media (min-width: 600px) {
   .block-editor-url-input__suggestions,
 .block-editor-url-input .components-spinner {
-    display: inherit;
+    display: grid;
   }
 }
 
 .block-editor-url-input__suggestion {
-  padding: 4px 8px 8px 8px 12px;
+  min-height: 36px;
+  height: auto;
   color: #757575;
   display: block;
   font-size: 13px;
@@ -3732,6 +3916,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-block-toolbar__block-controls .block-editor-block-mover {
   margin-left: -6px;
 }
+.block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
+  margin-left: -6px !important;
+}
+.block-editor-block-toolbar__block-controls .components-toolbar-group {
+  padding: 0;
+}
 
 .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-toolbar .components-toolbar,

package/build-types/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,UAEH,MAAM,GAAC,SAAS,CAoB3B"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,UAEH,MAAM,GAAC,SAAS,CAoB3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.3.0",
+	"version": "8.5.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,31 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.4.0",
-		"@wordpress/api-fetch": "^6.1.0",
-		"@wordpress/blob": "^3.4.0",
-		"@wordpress/blocks": "^11.3.0",
-		"@wordpress/components": "^19.6.0",
-		"@wordpress/compose": "^5.2.0",
-		"@wordpress/data": "^6.4.0",
-		"@wordpress/deprecated": "^3.4.0",
-		"@wordpress/dom": "^3.4.0",
-		"@wordpress/element": "^4.2.0",
-		"@wordpress/hooks": "^3.4.0",
-		"@wordpress/html-entities": "^3.4.0",
-		"@wordpress/i18n": "^4.4.0",
-		"@wordpress/icons": "^8.0.0",
-		"@wordpress/is-shallow-equal": "^4.4.0",
-		"@wordpress/keyboard-shortcuts": "^3.2.0",
-		"@wordpress/keycodes": "^3.4.0",
-		"@wordpress/notices": "^3.4.0",
-		"@wordpress/rich-text": "^5.2.0",
-		"@wordpress/shortcode": "^3.4.0",
-		"@wordpress/style-engine": "^0.3.0",
-		"@wordpress/token-list": "^2.4.0",
-		"@wordpress/url": "^3.5.0",
-		"@wordpress/warning": "^2.4.0",
-		"@wordpress/wordcount": "^3.4.0",
+		"@wordpress/a11y": "^3.6.0",
+		"@wordpress/api-fetch": "^6.3.0",
+		"@wordpress/blob": "^3.6.0",
+		"@wordpress/blocks": "^11.5.0",
+		"@wordpress/components": "^19.8.0",
+		"@wordpress/compose": "^5.4.0",
+		"@wordpress/data": "^6.6.0",
+		"@wordpress/date": "^4.6.0",
+		"@wordpress/deprecated": "^3.6.0",
+		"@wordpress/dom": "^3.6.0",
+		"@wordpress/element": "^4.4.0",
+		"@wordpress/hooks": "^3.6.0",
+		"@wordpress/html-entities": "^3.6.0",
+		"@wordpress/i18n": "^4.6.0",
+		"@wordpress/icons": "^8.2.0",
+		"@wordpress/is-shallow-equal": "^4.6.0",
+		"@wordpress/keyboard-shortcuts": "^3.4.0",
+		"@wordpress/keycodes": "^3.6.0",
+		"@wordpress/notices": "^3.6.0",
+		"@wordpress/rich-text": "^5.4.0",
+		"@wordpress/shortcode": "^3.6.0",
+		"@wordpress/style-engine": "^0.5.0",
+		"@wordpress/token-list": "^2.6.0",
+		"@wordpress/url": "^3.7.0",
+		"@wordpress/warning": "^2.6.0",
+		"@wordpress/wordcount": "^3.6.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -76,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c37fd7edbc3e379540d7b24fce75a6f640a434ae"
+	"gitHead": "11eb1241e63c9240018323551c6753f8a5fa96f9"
 }

package/src/components/alignment-control/index.js

@@ -3,10 +3,15 @@
  */
 import AlignmentUI from './ui';
 
-export function AlignmentControl( props ) {
+const AlignmentControl = ( props ) => {
 	return <AlignmentUI { ...props } isToolbar={ false } />;
-}
+};
 
-export function AlignmentToolbar( props ) {
+const AlignmentToolbar = ( props ) => {
 	return <AlignmentUI { ...props } isToolbar />;
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/alignment-control/README.md
+ */
+export { AlignmentControl, AlignmentToolbar };

package/src/components/block-alignment-control/index.js

@@ -3,10 +3,15 @@
  */
 import BlockAlignmentUI from './ui';
 
-export function BlockAlignmentControl( props ) {
+const BlockAlignmentControl = ( props ) => {
 	return <BlockAlignmentUI { ...props } isToolbar={ false } />;
-}
+};
 
-export function BlockAlignmentToolbar( props ) {
+const BlockAlignmentToolbar = ( props ) => {
 	return <BlockAlignmentUI { ...props } isToolbar />;
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-alignment-control/README.md
+ */
+export { BlockAlignmentControl, BlockAlignmentToolbar };

package/src/components/block-draggable/index.js

@@ -23,19 +23,16 @@ const BlockDraggable = ( {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
 			const {
+				canMoveBlocks,
 				getBlockRootClientId,
-				getTemplateLock,
 				getBlockName,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-			const templateLock = rootClientId
-				? getTemplateLock( rootClientId )
-				: null;
 			const blockName = getBlockName( clientIds[ 0 ] );
 
 			return {
 				srcRootClientId: rootClientId,
-				isDraggable: 'all' !== templateLock,
+				isDraggable: canMoveBlocks( clientIds, rootClientId ),
 				icon: getBlockType( blockName )?.icon,
 			};
 		},

package/src/components/block-icon/index.js

@@ -37,4 +37,7 @@ function BlockIcon( { icon, showColors = false, className } ) {
 	);
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-icon/README.md
+ */
 export default memo( BlockIcon );

package/src/components/block-inspector/index.js

@@ -70,6 +70,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 				<InspectorControls.Slot
 					__experimentalGroup="color"
 					label={ __( 'Color' ) }
+					className="color-block-support-panel__inner-wrapper"
 				/>
 				<InspectorControls.Slot
 					__experimentalGroup="typography"
@@ -187,4 +188,7 @@ const AdvancedControls = () => {
 	);
 };
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
+ */
 export default BlockInspector;

package/src/components/block-list/block-html.js

@@ -12,8 +12,8 @@ import {
 	getBlockAttributes,
 	getBlockContent,
 	getBlockType,
-	isValidBlockContent,
 	getSaveContent,
+	validateBlock,
 } from '@wordpress/blocks';
 
 /**
@@ -43,9 +43,13 @@ function BlockHTML( { clientId } ) {
 
 		// If html is empty  we reset the block to the default HTML and mark it as valid to avoid triggering an error
 		const content = html ? html : getSaveContent( blockType, attributes );
-		const isValid = html
-			? isValidBlockContent( blockType, attributes, content )
-			: true;
+		const [ isValid ] = html
+			? validateBlock( {
+					...block,
+					attributes,
+					originalContent: content,
+			  } )
+			: [ true ];
 
 		updateBlock( clientId, {
 			attributes,

package/src/components/block-list/block.js

@@ -17,6 +17,7 @@ import {
 	getBlockType,
 	getSaveContent,
 	isUnmodifiedDefaultBlock,
+	serializeRawBlock,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -74,6 +75,7 @@ function Block( { children, isHtml, ...props } ) {
 }
 
 function BlockListBlock( {
+	block: { __unstableBlockSource },
 	mode,
 	isLocked,
 	canRemove,
@@ -155,7 +157,9 @@ function BlockListBlock( {
 	let block;
 
 	if ( ! isValid ) {
-		const saveContent = getSaveContent( blockType, attributes );
+		const saveContent = __unstableBlockSource
+			? serializeRawBlock( __unstableBlockSource )
+			: getSaveContent( blockType, attributes );
 
 		block = (
 			<Block className="has-warning">

package/src/components/block-list/style.scss

@@ -26,9 +26,9 @@
 	// When selecting multiple blocks, we provide an additional selection indicator.
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-hovered,
+	.block-editor-block-list__block.is-multi-selected:not([contenteditable]),
 	.block-editor-block-list__block.is-highlighted,
-	.block-editor-block-list__block.is-multi-selected {
-
+	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
 		&::after {
 			// Show selection borders around every non-nested block's actual footprint.
 			position: absolute;
@@ -41,7 +41,7 @@
 			right: $border-width;
 
 			// Everything else.
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
 
 			// Windows High Contrast mode will show this outline.
@@ -66,11 +66,10 @@
 	}
 
 	.block-editor-block-list__block.is-highlighted::after {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		outline: $border-width solid transparent;
 	}
 
-	.block-editor-block-list__block.is-multi-selected::after,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);