@wordpress/block-editor 13.3.0 → 13.4.0

package/build-style/style.css

@@ -418,6 +418,13 @@ iframe[name=editor-canvas] {
   border: none;
 }
 
+.block-editor-block-tools__zoom-out-mode-inserter-button {
+  visibility: hidden;
+}
+.block-editor-block-tools__zoom-out-mode-inserter-button.is-visible {
+  visibility: visible;
+}
+
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -427,9 +434,6 @@ iframe[name=editor-canvas] {
   }
 }
 
-.block-editor-block-lock-modal__options {
-  margin-top: 16px;
-}
 .block-editor-block-lock-modal__options legend {
   margin-bottom: 16px;
   padding: 0;
@@ -467,7 +471,7 @@ iframe[name=editor-canvas] {
 .block-editor-block-lock-modal__template-lock {
   border-top: 1px solid #ddd;
   margin-top: 16px;
-  padding: 12px 0;
+  padding-top: 16px;
 }
 
 .block-editor-block-lock-modal__actions {
@@ -888,13 +892,6 @@ iframe[name=editor-canvas] {
   background-color: #757575;
 }
 
-.show-icon-labels .block-editor-patterns__grid-pagination {
-  flex-direction: column;
-}
-.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
-.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
-  flex-direction: column;
-}
 .show-icon-labels .block-editor-patterns__grid-pagination .components-button {
   width: auto;
 }
@@ -904,23 +901,6 @@ iframe[name=editor-canvas] {
 .show-icon-labels .block-editor-patterns__grid-pagination .components-button::before {
   content: attr(aria-label);
 }
-@media screen and (min-width: 960px) {
-  .show-icon-labels .block-editor-patterns__grid-pagination {
-    flex-direction: row;
-  }
-  .show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
-.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
-    flex-direction: row;
-  }
-}
-
-.block-editor-block-patterns-list .block-editor-patterns__grid-pagination {
-  flex-direction: column;
-}
-.block-editor-block-patterns-list .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
-.block-editor-block-patterns-list .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
-  flex-direction: column;
-}
 
 .components-popover.block-editor-block-popover {
   z-index: 31;
@@ -1119,25 +1099,19 @@ iframe[name=editor-canvas] {
   min-width: 300px;
 }
 
-.block-editor-block-switcher__popover__preview__parent .block-editor-block-switcher__popover__preview__container {
+.block-editor-block-switcher__popover-preview-container {
+  left: 0;
   position: absolute;
-  top: -12px;
-  left: calc(100% + 16px);
+  top: -1px;
+  width: 100%;
+  bottom: 0;
+  pointer-events: none;
 }
 
-.block-editor-block-switcher__preview__popover {
-  display: none;
+.block-editor-block-switcher__popover-preview {
   overflow: hidden;
 }
-.block-editor-block-switcher__preview__popover.components-popover {
-  margin-top: 11px;
-}
-@media (min-width: 782px) {
-  .block-editor-block-switcher__preview__popover {
-    display: block;
-  }
-}
-.block-editor-block-switcher__preview__popover .components-popover__content {
+.block-editor-block-switcher__popover-preview .components-popover__content {
   width: 300px;
   border: 1px solid #1e1e1e;
   background: #fff;
@@ -1146,13 +1120,13 @@ iframe[name=editor-canvas] {
   box-shadow: none;
   overflow: auto;
 }
-.block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview {
+.block-editor-block-switcher__popover-preview .block-editor-block-switcher__preview {
   max-height: calc(500px - 32px);
   margin: 16px 0;
   padding: 0 16px;
   overflow: hidden;
 }
-.block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview.is-pattern-list-preview {
+.block-editor-block-switcher__popover-preview .block-editor-block-switcher__preview.is-pattern-list-preview {
   overflow: unset;
 }
 
@@ -1660,6 +1634,7 @@ iframe[name=editor-canvas] {
   border: 1px solid #ddd;
   border-radius: 2px;
   grid-column: 1/-1;
+  position: relative;
 }
 .block-editor-global-styles-background-panel__image-tools-panel-item .components-drop-zone__content-icon {
   display: none;
@@ -1745,6 +1720,9 @@ iframe[name=editor-canvas] {
 .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker__media--image {
   max-height: 180px;
 }
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker::after {
+  content: none;
+}
 
 .block-editor-global-styles-background-panel__hidden-tools-panel-item {
   height: 0;
@@ -1840,6 +1818,100 @@ iframe[name=editor-canvas] {
   pointer-events: all;
 }
 
+.block-editor-grid-item-mover__move-button-container {
+  display: flex;
+  padding: 0;
+  border: none;
+  justify-content: center;
+}
+.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
+  width: 24px;
+  min-width: 0 !important;
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+}
+.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button svg {
+  min-width: 24px;
+}
+.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
+  content: "";
+  position: absolute;
+  display: block;
+  border-radius: 2px;
+  height: 32px;
+  left: 8px;
+  right: 8px;
+  z-index: -1;
+  animation: components-button__appear-animation 0.1s ease;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus:enabled, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus::before {
+  box-shadow: none;
+  outline: none;
+}
+.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
+  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-grid-item-mover__move-vertical-button-container {
+  display: flex;
+  position: relative;
+}
+@media (min-width: 600px) {
+  .block-editor-grid-item-mover__move-vertical-button-container {
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
+    height: 20px;
+    width: 100%;
+    min-width: 0 !important;
+  }
+  .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button::before {
+    height: calc(100% - 4px);
+  }
+  .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-up-button svg,
+.block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-down-button svg {
+    flex-shrink: 0;
+    height: 20px;
+  }
+}
+
+.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
+  border-right: 1px solid #757575;
+  padding-right: 12px;
+}
+.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
+  border-left: 1px solid #757575;
+  padding-left: 12px;
+}
+@media (min-width: 600px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
+    content: "";
+    height: 1px;
+    width: 100%;
+    background: #e0e0e0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    margin-top: -0.5px;
+  }
+}
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
+    background: #1e1e1e;
+  }
+}
+
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -1968,25 +2040,6 @@ iframe[name=editor-canvas] {
   justify-content: center;
 }
 
-.block-editor-inspector-controls-tabs__hint {
-  align-items: flex-start;
-  background: #f0f0f0;
-  border-radius: 2px;
-  color: #1e1e1e;
-  display: flex;
-  flex-direction: row;
-  margin: 16px;
-  font-size: 13px;
-}
-
-.block-editor-inspector-controls-tabs__hint-content {
-  margin: 12px 0 12px 12px;
-}
-
-.block-editor-inspector-controls-tabs__hint-dismiss {
-  margin: 4px 4px 4px 0;
-}
-
 .block-editor-inspector-popover-header {
   margin-bottom: 16px;
 }
@@ -2754,7 +2807,8 @@ iframe[name=editor-canvas] {
 .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 {
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
   line-height: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
@@ -3373,6 +3427,7 @@ iframe[name=editor-canvas] {
 .block-editor-url-popover__row {
   display: flex;
   gap: 4px;
+  align-items: center;
 }
 
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
@@ -3999,6 +4054,9 @@ iframe[name=editor-canvas] {
 .block-editor-inserter__category-tablist div[role=listitem]:last-child {
   margin-top: auto;
 }
+.block-editor-inserter__category-tablist[aria-orientation=vertical]::after {
+  content: none;
+}
 .block-editor-inserter__category-tablist .block-editor-inserter__category-tab {
   padding: 8px 4px 8px 12px;
   text-align: left;
@@ -4044,18 +4102,10 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-inserter__category-panel {
-  background: #f0f0f0;
-  border-top: 1px solid #e0e0e0;
-  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.133);
   outline: 1px solid transparent;
-  position: absolute;
-  top: -1px;
-  left: 0;
-  height: calc(100% + 1px);
-  width: 100%;
-  padding: 0 16px;
   display: flex;
   flex-direction: column;
+  padding: 0 16px;
 }
 @media (min-width: 782px) {
   .block-editor-inserter__category-panel {
@@ -4063,15 +4113,26 @@ iframe[name=editor-canvas] {
     padding: 0;
     left: 100%;
     width: 300px;
+    position: absolute;
+    top: -1px;
+    height: calc(100% + 1px);
+    background: #f0f0f0;
+    border-top: 1px solid #e0e0e0;
+    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.133);
   }
-}
-.block-editor-inserter__category-panel .block-editor-inserter__media-list,
+  .block-editor-inserter__category-panel .block-editor-inserter__media-list,
 .block-editor-inserter__category-panel .block-editor-block-patterns-list {
-  padding: 0 24px 16px;
+    padding: 0 24px 16px;
+  }
 }
 
 .block-editor-inserter__patterns-category-panel-header {
-  padding: 8px 24px;
+  padding: 8px 0;
+}
+@media (min-width: 782px) {
+  .block-editor-inserter__patterns-category-panel-header {
+    padding: 8px 24px;
+  }
 }
 
 .block-editor-inserter__patterns-category-no-results {
@@ -4086,7 +4147,6 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-inserter__preview-content {
-  min-height: 144px;
   background: #f0f0f0;
   display: grid;
   flex-grow: 1;
@@ -4257,10 +4317,16 @@ iframe[name=editor-canvas] {
   flex: 1;
 }
 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
-  padding: 16px 24px 8px;
+  margin-bottom: 24px;
 }
-.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search:not(:focus-within) {
-  --wp-components-color-background: #fff;
+@media (min-width: 782px) {
+  .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
+    margin-bottom: 0;
+    padding: 16px 24px 16px;
+  }
+  .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search:not(:focus-within) {
+    --wp-components-color-background: #fff;
+  }
 }
 
 .block-editor-inserter__media-list__list-item {
@@ -4362,28 +4428,6 @@ iframe[name=editor-canvas] {
   margin: 16px 16px 0;
 }
 
-.reusable-blocks-menu-items__rename-hint {
-  align-items: top;
-  background: #f0f0f0;
-  border-radius: 2px;
-  color: #1e1e1e;
-  display: flex;
-  flex-direction: row;
-  max-width: 380px;
-}
-
-.reusable-blocks-menu-items__rename-hint-content {
-  margin: 12px 0 12px 12px;
-}
-
-.reusable-blocks-menu-items__rename-hint-dismiss {
-  margin: 4px 4px 4px 0;
-}
-
-.components-menu-group .reusable-blocks-menu-items__rename-hint {
-  margin: 0;
-}
-
 .block-editor-patterns__sync-status-filter .components-input-control__container select.components-select-control__input {
   height: 40px;
 }
@@ -4403,6 +4447,26 @@ iframe[name=editor-canvas] {
     height: 100%;
   }
 }
+.block-editor-inserter__menu.is-zoom-out .block-editor-inserter__category-panel {
+  box-shadow: none;
+}
+
+@media (max-width: 959px) {
+  .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
+    flex-direction: column;
+  }
+  .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
+.show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+    flex-direction: column;
+  }
+}
+.show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination {
+  flex-direction: column;
+}
+.show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
+.show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+  flex-direction: column;
+}
 
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {

package/build-types/components/block-context/index.d.ts

@@ -7,7 +7,7 @@
  */
 export function BlockContextProvider({ value, children }: BlockContextProviderProps): import("react").JSX.Element;
 export default Context;
-export type ReactNode = import('react').ReactNode;
+export type ReactNode = import("react").ReactNode;
 export type BlockContextProviderProps = {
     /**
      * Context value to merge with current
@@ -28,5 +28,5 @@ export type BlockContextProviderProps = {
  * @property {ReactNode}        children Component children.
  */
 /** @type {import('react').Context<Record<string,*>>} */
-declare const Context: import('react').Context<Record<string, any>>;
+declare const Context: import("react").Context<Record<string, any>>;
 //# sourceMappingURL=index.d.ts.map

package/build-types/components/block-context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,+BAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,OAAO,MAAM,MAAG;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,MAAM,MAAG,CAAC,CAChB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,+BAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,MAAM,CAAC,MAAM,EAAC,GAAC,CAAC;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAC,GAAC,CAAC,CAAC,CAChB"}

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

@@ -1 +1 @@
-{"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"}
+{"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,OAAC,GAEJ,MAAM,GAAC,SAAS,CAoB3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.3.0",
+	"version": "13.4.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,35 +36,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.3.0",
-		"@wordpress/api-fetch": "^7.3.0",
-		"@wordpress/blob": "^4.3.0",
-		"@wordpress/blocks": "^13.3.0",
-		"@wordpress/commands": "^1.3.0",
-		"@wordpress/components": "^28.3.0",
-		"@wordpress/compose": "^7.3.0",
-		"@wordpress/data": "^10.3.0",
-		"@wordpress/date": "^5.3.0",
-		"@wordpress/deprecated": "^4.3.0",
-		"@wordpress/dom": "^4.3.0",
-		"@wordpress/element": "^6.3.0",
-		"@wordpress/escape-html": "^3.3.0",
-		"@wordpress/hooks": "^4.3.0",
-		"@wordpress/html-entities": "^4.3.0",
-		"@wordpress/i18n": "^5.3.0",
-		"@wordpress/icons": "^10.3.0",
-		"@wordpress/is-shallow-equal": "^5.3.0",
-		"@wordpress/keyboard-shortcuts": "^5.3.0",
-		"@wordpress/keycodes": "^4.3.0",
-		"@wordpress/notices": "^5.3.0",
-		"@wordpress/preferences": "^4.3.0",
-		"@wordpress/private-apis": "^1.3.0",
-		"@wordpress/rich-text": "^7.3.0",
-		"@wordpress/style-engine": "^2.3.0",
-		"@wordpress/token-list": "^3.3.0",
-		"@wordpress/url": "^4.3.0",
-		"@wordpress/warning": "^3.3.0",
-		"@wordpress/wordcount": "^4.3.0",
+		"@wordpress/a11y": "^4.4.0",
+		"@wordpress/api-fetch": "^7.4.0",
+		"@wordpress/blob": "^4.4.0",
+		"@wordpress/blocks": "^13.4.0",
+		"@wordpress/commands": "^1.4.0",
+		"@wordpress/components": "^28.4.0",
+		"@wordpress/compose": "^7.4.0",
+		"@wordpress/data": "^10.4.0",
+		"@wordpress/date": "^5.4.0",
+		"@wordpress/deprecated": "^4.4.0",
+		"@wordpress/dom": "^4.4.0",
+		"@wordpress/element": "^6.4.0",
+		"@wordpress/escape-html": "^3.4.0",
+		"@wordpress/hooks": "^4.4.0",
+		"@wordpress/html-entities": "^4.4.0",
+		"@wordpress/i18n": "^5.4.0",
+		"@wordpress/icons": "^10.4.0",
+		"@wordpress/is-shallow-equal": "^5.4.0",
+		"@wordpress/keyboard-shortcuts": "^5.4.0",
+		"@wordpress/keycodes": "^4.4.0",
+		"@wordpress/notices": "^5.4.0",
+		"@wordpress/preferences": "^4.4.0",
+		"@wordpress/private-apis": "^1.4.0",
+		"@wordpress/rich-text": "^7.4.0",
+		"@wordpress/style-engine": "^2.4.0",
+		"@wordpress/token-list": "^3.4.0",
+		"@wordpress/url": "^4.4.0",
+		"@wordpress/warning": "^3.4.0",
+		"@wordpress/wordcount": "^4.4.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
+	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
 }

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

@@ -32,7 +32,7 @@ function AlignmentUI( {
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
 	label = __( 'Align text' ),
-	describedBy = __( 'Change text alignment' ),
+	description = __( 'Change text alignment' ),
 	isCollapsed = true,
 	isToolbar,
 } ) {
@@ -56,7 +56,7 @@ function AlignmentUI( {
 		? { isCollapsed }
 		: {
 				toggleProps: {
-					describedBy,
+					description,
 				},
 				popoverProps: POPOVER_PROPS,
 		  };

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

@@ -64,7 +64,7 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { describedBy: __( 'Change alignment' ) },
+				toggleProps: { description: __( 'Change alignment' ) },
 				children: ( { onClose } ) => {
 					return (
 						<>

package/src/components/block-alignment-control/ui.native.js

@@ -77,7 +77,7 @@ function BlockAlignmentUI( {
 					};
 				} ),
 				popoverProps: POPOVER_PROPS,
-				toggleProps: { describedBy: __( 'Change alignment' ) },
+				toggleProps: { description: __( 'Change alignment' ) },
 		  };
 
 	return <UIComponent { ...commonProps } { ...extraProps } />;

package/src/components/block-context/README.md

@@ -1,12 +1,12 @@
 # Block Context
 
-Block Context is a React implementation of WordPress's block context. Block context, much like [React's context](https://reactjs.org/docs/context.html), is a method for passing and inheriting values deeply through a hierarchy of blocks. Because of the similarities with React's context, the client-side implementation here is quite minimal. It is complemented by equivalent behaviors in the server-side rendering of a block.
+Block Context is a React implementation of WordPress's block context. Block context, much like [React's context](https://react.dev/learn/passing-data-deeply-with-context), is a method for passing and inheriting values deeply through a hierarchy of blocks. Because of the similarities with React's context, the client-side implementation here is quite minimal. It is complemented by equivalent behaviors in the server-side rendering of a block.
 
 Note that the implementation of Block Context is distinct from [the `BlockEdit` context](../block-edit). While it is true that both provide context relevant for the editing of a block, Block Context is implemented separately so as to prioritize it as most identifiable amongst the machinery of block context, and not amongst other client-side editing context of a block.
 
 ## Usage
 
-Currently, only the [Provider component](https://reactjs.org/docs/context.html#contextprovider) is made available on the public interface of the `@wordpress/block-editor` module. This can be used to add or override context which can then be consumed by blocks rendered within that context in the block editor.
+Currently, only the [Provider component](https://react.dev/reference/react/createContext#provider) is made available on the public interface of the `@wordpress/block-editor` module. This can be used to add or override context which can then be consumed by blocks rendered within that context in the block editor.
 
 ```js
 import { BlockContextProvider } from '@wordpress/block-editor';
@@ -20,7 +20,7 @@ function MyCustomPostEditor() {
 }
 ```
 
-Internal to the `@wordpress/block-editor` module, a component can access the [full Context object](https://reactjs.org/docs/context.html#api), typically for use in combination with [`useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext).
+Internal to the `@wordpress/block-editor` module, a component can access the [full Context object](https://react.dev/reference/react/createContext), typically for use in combination with [`useContext`](https://react.dev/reference/react/useContext).
 
 ```js
 import { useContext } from 'react';
@@ -39,7 +39,7 @@ The reason `BlockContext` is only internally available within the `@wordpress/bl
 
 ## Props
 
-`BlockContextProvider` behaves like a standard [`Context.Provider` component](https://reactjs.org/docs/context.html#contextprovider). It receives `value` and `children` props. The `value` is merged with the current block context value.
+`BlockContextProvider` behaves like a standard [`Context.Provider` component](https://react.dev/reference/react/createContext#provider). It receives `value` and `children` props. The `value` is merged with the current block context value.
 
 ### `value`
 

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

@@ -132,6 +132,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 							label={ __( 'Color' ) }
 							className="color-block-support-panel__inner-wrapper"
 						/>
+						<InspectorControls.Slot
+							group="background"
+							label={ __( 'Background image' ) }
+						/>
 						<InspectorControls.Slot
 							group="typography"
 							label={ __( 'Typography' ) }
@@ -285,6 +289,10 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						label={ __( 'Color' ) }
 						className="color-block-support-panel__inner-wrapper"
 					/>
+					<InspectorControls.Slot
+						group="background"
+						label={ __( 'Background image' ) }
+					/>
 					<InspectorControls.Slot
 						group="typography"
 						label={ __( 'Typography' ) }
@@ -298,10 +306,6 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						label={ borderPanelLabel }
 					/>
 					<InspectorControls.Slot group="styles" />
-					<InspectorControls.Slot
-						group="background"
-						label={ __( 'Background image' ) }
-					/>
 					<PositionControls />
 					<div>
 						<AdvancedControls />

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

@@ -17,20 +17,6 @@
 	}
 }
 
-@mixin selectedOutline() {
-	content: "";
-	position: absolute;
-	pointer-events: none;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	outline-color: var(--wp-admin-theme-color);
-	outline-style: solid;
-	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-	outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-}
-
 // Hide selections on this element, otherwise Safari will include it stacked
 // under your actual selection.
 // This uses a CSS hack to show the rules to Safari only. Failing here is okay,
@@ -101,7 +87,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		// We're using a pseudo element to overflow placeholder borders
 		// and any border inside the block itself.
 		&::after {
-			@include selectedOutline();
+			@include selected-block-focus();
 			z-index: 1;
 
 			// Show a light color for dark themes.
@@ -281,7 +267,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	&:not(.rich-text):not([contenteditable="true"]).is-selected {
 
 		&::after {
-			@include selectedOutline();
+			@include selected-block-focus();
 		}
 	}
 }