@wordpress/block-editor 11.7.0 → 12.0.0

package/build-style/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -158,7 +159,8 @@
 .block-editor-block-inspector .components-base-control:last-child {
   margin-bottom: 8px;
 }
-.block-editor-block-inspector .components-focal-point-picker-control .components-base-control {
+.block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
+.block-editor-block-inspector .components-query-controls .components-base-control {
   margin-bottom: 0;
 }
 .block-editor-block-inspector .components-panel__body {
@@ -269,6 +271,44 @@
 /**
  * Block Toolbar when contextual.
  */
+.block-editor-block-contextual-toolbar.is-fixed {
+  /* Set left position when auto-fold is not on the body element. */
+  left: 0;
+}
+@media (min-width: 783px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    left: 160px;
+  }
+}
+
+.auto-fold .block-editor-block-contextual-toolbar.is-fixed {
+  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
+}
+@media (min-width: 783px) {
+  .auto-fold .block-editor-block-contextual-toolbar.is-fixed {
+    left: 36px;
+  }
+}
+@media (min-width: 961px) {
+  .auto-fold .block-editor-block-contextual-toolbar.is-fixed {
+    left: 160px;
+  }
+}
+
+/* Sidebar manually collapsed. */
+.folded .block-editor-block-contextual-toolbar.is-fixed {
+  left: 0;
+}
+@media (min-width: 783px) {
+  .folded .block-editor-block-contextual-toolbar.is-fixed {
+    left: 36px;
+  }
+}
+
+body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+  left: 0 !important;
+}
+
 .block-editor-block-contextual-toolbar {
   display: inline-flex;
   border: 1px solid #1e1e1e;
@@ -282,10 +322,9 @@
 .block-editor-block-contextual-toolbar.is-fixed {
   position: sticky;
   top: 0;
-  width: 100%;
   z-index: 31;
-  min-height: 48px;
   display: block;
+  width: 100%;
   border: none;
   border-bottom: 1px solid #e0e0e0;
   border-radius: 0;
@@ -294,6 +333,119 @@
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-right-color: #e0e0e0;
 }
+@media (min-width: 782px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 64px;
+    position: fixed;
+    top: 40px;
+    min-height: initial;
+    border-bottom: none;
+    display: flex;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+    margin-left: 216px;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 120px;
+    top: 8px;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+    margin-left: 280px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
+    border: none;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::after {
+    content: "";
+    width: 1px;
+    height: 24px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    background-color: #ddd;
+    position: absolute;
+    left: 44px;
+    top: -1px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
+    border: none;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar::before {
+    content: "";
+    width: 1px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    background-color: #ddd;
+    position: relative;
+    left: -12px;
+    height: 24px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 64px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    margin-left: 384px;
+  }
+  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 128px;
+  }
+  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    margin-left: 448px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
+    left: 0;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
+    border-left: none;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover::before {
+    content: "";
+    width: 1px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    background-color: #ddd;
+    position: relative;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+    position: relative;
+    top: -1px;
+    border: 0;
+    padding-right: 6px;
+    padding-left: 6px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
+    content: "·";
+    font-size: 16px;
+    line-height: 40px;
+    position: absolute;
+    left: 46px;
+    bottom: 4px;
+  }
+  .block-editor-block-contextual-toolbar:not(.is-fixed) .block-editor-block-parent-selector {
+    position: absolute;
+    top: -1px;
+    left: calc(-48px - 8px - 1px);
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar:not(.is-fixed) .block-editor-block-parent-selector {
+    position: relative;
+    left: auto;
+    top: auto;
+    margin-top: -1px;
+    margin-left: -1px;
+    margin-bottom: -1px;
+  }
+}
+@media (min-width: 782px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    width: 100%;
+  }
+}
+@media (min-width: 960px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    width: initial;
+  }
+}
 
 /**
  * Block Label for Navigation/Selection Mode
@@ -659,10 +811,12 @@
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container > * {
     width: 24px;
     min-width: 0 !important;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
     overflow: hidden;
   }
+  .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button {
+    padding-left: 0;
+    padding-right: 0;
+  }
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     left: 5px;
   }
@@ -675,10 +829,12 @@
   .block-editor-block-mover__drag-handle {
     width: 24px;
     min-width: 0 !important;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
     overflow: hidden;
   }
+  .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon.has-icon {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 .components-button.block-editor-block-mover-button::before {
@@ -1435,6 +1591,47 @@
   text-transform: capitalize;
 }
 
+.block-editor-global-styles-effects-panel__toggle-icon {
+  fill: currentColor;
+}
+
+.block-editor-global-styles-effects-panel__shadow-popover-container {
+  width: 230px;
+}
+
+.block-editor-global-styles-filters-panel__dropdown,
+.block-editor-global-styles-effects-panel__shadow-dropdown {
+  display: block;
+  padding: 0;
+}
+.block-editor-global-styles-filters-panel__dropdown button,
+.block-editor-global-styles-effects-panel__shadow-dropdown button {
+  width: 100%;
+  padding: 8px;
+}
+.block-editor-global-styles-filters-panel__dropdown button.is-open,
+.block-editor-global-styles-effects-panel__shadow-dropdown button.is-open {
+  background-color: #f0f0f0;
+}
+
+.block-editor-global-styles-effects-panel__shadow-indicator-wrapper {
+  padding: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.block-editor-global-styles-effects-panel__shadow-indicator {
+  color: #2f2f2f;
+  border: #e0e0e0 1px solid;
+  border-radius: 2px;
+  cursor: pointer;
+  padding: 0;
+  height: 24px;
+  width: 24px;
+}
+
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -2092,6 +2289,12 @@
 .block-editor-list-view-leaf {
   position: relative;
 }
+.block-editor-list-view-leaf .components-button[aria-expanded=true] {
+  color: #1e1e1e;
+}
+.block-editor-list-view-leaf .components-button:hover {
+  color: var(--wp-admin-theme-color);
+}
 .block-editor-list-view-leaf.is-selected td {
   background: var(--wp-admin-theme-color);
 }
@@ -2148,16 +2351,16 @@
 .block-editor-list-view-leaf.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-first-selected td:first-child {
+.block-editor-list-view-leaf[data-expanded=false].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-first-selected td:last-child {
+.block-editor-list-view-leaf[data-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 {
+.block-editor-list-view-leaf[data-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 {
+.block-editor-list-view-leaf[data-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 {
@@ -2425,25 +2628,25 @@
   visibility: hidden;
 }
 
-.block-editor-list-view-leaf[aria-expanded=true] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
   visibility: visible;
   transition: transform 0.2s ease;
   transform: rotate(90deg);
 }
 @media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf[aria-expanded=true] .block-editor-list-view__expander svg {
+  .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 
-.block-editor-list-view-leaf[aria-expanded=false] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
   visibility: visible;
   transform: rotate(0deg);
   transition: transform 0.2s ease;
 }
 @media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf[aria-expanded=false] .block-editor-list-view__expander svg {
+  .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
     transition-duration: 0s;
     transition-delay: 0s;
   }
@@ -2454,7 +2657,9 @@
 }
 .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
   background: var(--wp-admin-theme-color);
-  height: 1px;
+  height: 6px;
+  border: 1px solid #fff;
+  border-radius: 4px;
 }
 
 .block-editor-list-view-placeholder {
@@ -3135,6 +3340,30 @@
   border-right: none;
 }
 
+@media (min-width: 782px) {
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
+    border-right: none;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group::after,
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar::after {
+    content: "";
+    width: 1px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    background-color: #ddd;
+    margin-left: 8px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar .components-toolbar-group.components-toolbar-group::after {
+    display: none;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar > :last-child::after,
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar > :last-child .components-toolbar::after {
+    display: none;
+  }
+}
 .block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
   margin-left: calc(48px + 8px);
 }
@@ -3142,20 +3371,6 @@
   margin-left: 0;
 }
 
-.block-editor-block-parent-selector {
-  position: absolute;
-  top: -1px;
-  left: calc(-48px - 8px - 1px);
-}
-.show-icon-labels .block-editor-block-parent-selector {
-  position: relative;
-  left: auto;
-  top: auto;
-  margin-top: -1px;
-  margin-left: -1px;
-  margin-bottom: -1px;
-}
-
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   width: 24px !important;
@@ -3204,13 +3419,27 @@
 .show-icon-labels .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   width: 0 !important;
   height: 0 !important;
+  min-width: 0 !important;
+}
+.show-icon-labels .block-editor-block-parent-selector__button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .show-icon-labels .block-editor-block-parent-selector__button .block-editor-block-icon {
   width: 0;
 }
-.show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+.show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
 }
+.show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
+.show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
+  padding-left: 8px;
+  padding-right: 8px;
+}
 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
   border-left: 1px solid #1e1e1e;
   margin-left: 6px;
@@ -3220,13 +3449,9 @@
 .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
   border-left-color: #e0e0e0;
 }
-.show-icon-labels .block-editor-block-mover-button {
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-}
-.show-icon-labels .block-editor-block-mover__drag-handle.has-icon {
-  padding-left: 12px !important;
-  padding-right: 12px !important;
+.show-icon-labels .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
   border-width: 0;
@@ -3240,15 +3465,8 @@
   .show-icon-labels .block-editor-block-mover__move-button-container {
     border-left: 1px solid #1e1e1e;
   }
-  .show-icon-labels .block-editor-block-mover__move-button-container::before {
-    content: "";
-    display: block;
-    height: 1px;
-    background: #1e1e1e;
-    order: 2;
-  }
   .show-icon-labels .is-down-button.is-down-button.is-down-button {
-    order: 3;
+    order: 2;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
     background: #ddd;
@@ -3961,7 +4179,7 @@
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
-  grid-template-rows: 16px auto;
+  grid-template-rows: 24px auto;
 }
 
 .component-spacing-sizes-control {
@@ -3977,7 +4195,7 @@
   align-self: center;
 }
 .component-spacing-sizes-control .components-base-control__label {
-  margin-bottom: 0;
+  margin-bottom: 8px;
   height: 16px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
@@ -4006,6 +4224,7 @@
   grid-row: 1/1;
   align-self: center;
   margin-left: 4px;
+  margin-bottom: 8px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
   grid-column: 2/2;
@@ -4031,26 +4250,25 @@
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
   grid-column: span 2;
   margin-left: 16px;
-  margin-top: 8px;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
+.component-spacing-sizes-control .components-base-control.components-spacing-sizes-control__custom-value-input {
   width: 124px;
-  margin-top: 8px;
   grid-column: 1;
+  margin-bottom: 0;
 }
-.component-spacing-sizes-control .components-range-control {
+.component-spacing-sizes-control .components-base-control.components-range-control {
   height: 40px;
   /* Vertically center the RangeControl until it has true 40px height. */
   display: flex;
   align-items: center;
+  margin-bottom: 0;
 }
-.component-spacing-sizes-control .components-range-control > .components-base-control__field {
+.component-spacing-sizes-control .components-base-control.components-range-control > .components-base-control__field {
   /* Fixes RangeControl contents when the outer wrapper is flex */
   flex: 1;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__range-control {
   grid-column: span 3;
-  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.7.0",
+	"version": "12.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,35 +33,35 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.30.0",
-		"@wordpress/api-fetch": "^6.27.0",
-		"@wordpress/blob": "^3.30.0",
-		"@wordpress/blocks": "^12.7.0",
-		"@wordpress/components": "^23.7.0",
-		"@wordpress/compose": "^6.7.0",
-		"@wordpress/data": "^9.0.0",
-		"@wordpress/date": "^4.30.0",
-		"@wordpress/deprecated": "^3.30.0",
-		"@wordpress/dom": "^3.30.0",
-		"@wordpress/element": "^5.7.0",
-		"@wordpress/escape-html": "^2.30.0",
-		"@wordpress/hooks": "^3.30.0",
-		"@wordpress/html-entities": "^3.30.0",
-		"@wordpress/i18n": "^4.30.0",
-		"@wordpress/icons": "^9.21.0",
-		"@wordpress/is-shallow-equal": "^4.30.0",
-		"@wordpress/keyboard-shortcuts": "^4.7.0",
-		"@wordpress/keycodes": "^3.30.0",
-		"@wordpress/notices": "^3.30.0",
-		"@wordpress/preferences": "^3.7.0",
-		"@wordpress/private-apis": "^0.12.0",
-		"@wordpress/rich-text": "^6.7.0",
-		"@wordpress/shortcode": "^3.30.0",
-		"@wordpress/style-engine": "^1.13.0",
-		"@wordpress/token-list": "^2.30.0",
-		"@wordpress/url": "^3.31.0",
-		"@wordpress/warning": "^2.30.0",
-		"@wordpress/wordcount": "^3.30.0",
+		"@wordpress/a11y": "^3.32.0",
+		"@wordpress/api-fetch": "^6.29.0",
+		"@wordpress/blob": "^3.32.0",
+		"@wordpress/blocks": "^12.9.0",
+		"@wordpress/components": "^23.9.0",
+		"@wordpress/compose": "^6.9.0",
+		"@wordpress/data": "^9.2.0",
+		"@wordpress/date": "^4.32.0",
+		"@wordpress/deprecated": "^3.32.0",
+		"@wordpress/dom": "^3.32.0",
+		"@wordpress/element": "^5.9.0",
+		"@wordpress/escape-html": "^2.32.0",
+		"@wordpress/hooks": "^3.32.0",
+		"@wordpress/html-entities": "^3.32.0",
+		"@wordpress/i18n": "^4.32.0",
+		"@wordpress/icons": "^9.23.0",
+		"@wordpress/is-shallow-equal": "^4.32.0",
+		"@wordpress/keyboard-shortcuts": "^4.9.0",
+		"@wordpress/keycodes": "^3.32.0",
+		"@wordpress/notices": "^4.0.0",
+		"@wordpress/preferences": "^3.9.0",
+		"@wordpress/private-apis": "^0.14.0",
+		"@wordpress/rich-text": "^6.9.0",
+		"@wordpress/shortcode": "^3.32.0",
+		"@wordpress/style-engine": "^1.15.0",
+		"@wordpress/token-list": "^2.32.0",
+		"@wordpress/url": "^3.33.0",
+		"@wordpress/warning": "^2.32.0",
+		"@wordpress/wordcount": "^3.32.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -72,7 +72,7 @@
 		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^4.5.1",
-		"rememo": "^4.0.0",
+		"rememo": "^4.0.2",
 		"remove-accents": "^0.4.2",
 		"traverse": "^0.6.6"
 	},
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d5c28a67b11e91e3e4b8e90346bfcb90909364d6"
+	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
 }

package/src/components/block-info-slot-fill/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import useDisplayBlockControls from '../use-display-block-controls';
+
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const { Fill, Slot } = createPrivateSlotFill( 'BlockInformation' );
+
+const BlockInfo = ( props ) => {
+	const isDisplayed = useDisplayBlockControls();
+	if ( ! isDisplayed ) {
+		return null;
+	}
+	return <Fill { ...props } />;
+};
+BlockInfo.Slot = ( props ) => <Slot { ...props } />;
+
+export default BlockInfo;

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

@@ -37,6 +37,7 @@ import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-c
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
+import BlockInfo from '../block-info-slot-fill';
 
 function useContentBlocks( blockTypes, block ) {
 	const contentBlocksObjectAux = useMemo( () => {
@@ -115,6 +116,7 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
+			<BlockInfo.Slot />
 			<VStack
 				spacing={ 1 }
 				padding={ 4 }
@@ -326,6 +328,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ clientId } />
+			<BlockInfo.Slot />
 			{ showTabs && (
 				<InspectorControlsTabs
 					hasBlockStyles={ hasBlockStyles }

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

@@ -18,10 +18,12 @@
 		}
 	}
 
-	// Reset unexpected margin-bottom from being applied to the `BaseControl`
-	// component of the `FocalPointPicker` component.
-	.components-focal-point-picker-control .components-base-control {
-		margin-bottom: 0;
+	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
+	.components-focal-point-picker-control,
+	.components-query-controls {
+		.components-base-control {
+			margin-bottom: 0;
+		}
 	}
 
 	.components-panel__body {