@wordpress/block-editor 9.0.0 → 9.3.0

package/build-style/style.css

@@ -107,14 +107,6 @@
   margin-top: 0;
 }
 
-.block-editor-block-alignment-matrix-control__popover .components-popover__content {
-  min-width: 0;
-  width: auto;
-}
-.block-editor-block-alignment-matrix-control__popover .components-popover__content > div {
-  padding: 8px;
-}
-
 .block-editor-block-icon {
   display: flex;
   align-items: center;
@@ -524,18 +516,8 @@
   }
 }
 
-.block-editor-block-list__block-popover-inserter {
-  position: absolute;
-  top: -9999em;
-  margin-bottom: 14px;
-}
-.block-editor-block-list__block-popover-inserter.is-visible {
-  position: static;
-}
-
 .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,
-.block-editor-block-list__block-popover-inserter .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;
   border-radius: 2px;
   color: #fff;
@@ -544,8 +526,7 @@
   height: 24px;
 }
 .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,
-.block-editor-block-list__block-popover-inserter .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;
   background: var(--wp-admin-theme-color);
 }
@@ -889,7 +870,7 @@
   margin: 0.67em 0;
 }
 
-.block-editor-block-content-overlay.overlay-active::before {
+.block-editor-block-content-overlay::before {
   content: "";
   position: absolute;
   top: 0;
@@ -901,16 +882,10 @@
   border-radius: 2px;
   z-index: 10;
 }
-.block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
+.block-editor-block-content-overlay:hover:not(.is-dragging-blocks)::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
 }
-.block-editor-block-content-overlay.overlay-active:not(.is-dragging-blocks) * {
-  pointer-events: none;
-}
-.block-editor-block-content-overlay.is-dragging-blocks {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-}
 
 .block-editor-block-draggable-chip-wrapper {
   position: absolute;
@@ -1094,6 +1069,7 @@
   width: max-content;
   background: none;
   border: none;
+  outline: none;
   box-shadow: none;
   overflow-y: visible;
   pointer-events: none;
@@ -1240,10 +1216,6 @@
   font-size: 14px;
 }
 
-.block-editor-block-switcher__popover {
-  margin-left: 6px;
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
   display: flex;
 }
@@ -1286,39 +1258,16 @@
   min-width: 300px;
 }
 
-.components-popover.block-editor-block-switcher__popover .components-popover__content > div {
-  min-width: auto;
-  display: flex;
-  background: #fff;
-  padding: 0;
-}
-.components-popover.block-editor-block-switcher__popover .components-popover__content > div .components-menu-group {
-  margin: 0;
-}
-
-.block-editor-block-switcher__popover .components-popover__content .block-editor-block-styles {
-  margin: 0 -3px;
-}
-.block-editor-block-switcher__popover .components-popover__content .components-panel__body {
-  border: 0;
-  position: relative;
-  z-index: 1;
-}
-.block-editor-block-switcher__popover .components-popover__content .components-panel__body + .components-panel__body {
-  border-top: 1px solid #e0e0e0;
-}
-
 .block-editor-block-switcher__popover__preview__parent .block-editor-block-switcher__popover__preview__container {
   position: absolute;
   top: -12px;
-  left: calc(100% + 32px);
+  left: calc(100% + 16px);
 }
 
 .block-editor-block-switcher__preview__popover {
   display: none;
 }
 .block-editor-block-switcher__preview__popover.components-popover {
-  margin-left: 4px;
   margin-top: 11px;
 }
 @media (min-width: 782px) {
@@ -1331,6 +1280,7 @@
   border: 1px solid #1e1e1e;
   background: #fff;
   border-radius: 2px;
+  outline: none;
 }
 .block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview {
   width: 300px;
@@ -1631,7 +1581,7 @@
 .components-border-radius-control .components-border-radius-control__wrapper > .components-unit-control-wrapper {
   width: 110px;
   margin-bottom: 0;
-  margin-right: 8px;
+  margin-right: 12px;
   flex-shrink: 0;
 }
 .components-border-radius-control .components-border-radius-control__wrapper .components-range-control {
@@ -1653,7 +1603,7 @@
   width: 70%;
   flex-wrap: wrap;
 }
-.components-border-radius-control .components-border-radius-control__input-controls-wrapper .components-unit-control-wrapper {
+.components-border-radius-control .components-border-radius-control__input-controls-wrapper .components-border-radius-control__tooltip-wrapper {
   width: calc(50% - 8px);
   margin-bottom: 8px;
   margin-right: 8px;
@@ -1662,6 +1612,7 @@
   display: flex;
   justify-content: center;
   margin-left: 2px;
+  margin-top: 3px;
 }
 .components-border-radius-control .component-border-radius-control__linked-button.has-icon svg {
   margin-right: 0;
@@ -1703,21 +1654,10 @@
   min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
-  display: flex;
-  gap: 8px;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  width: 12px;
-  height: 12px;
-  align-self: center;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator:first-child {
-  margin-left: 12px;
-}
-.block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  display: none;
+.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) {
+  display: block;
 }
+
 @media screen and (min-width: 782px) {
   .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
     display: grid;
@@ -1728,45 +1668,59 @@
 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
   margin-bottom: inherit;
 }
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__dropdown {
-  display: block;
-}
 
-.block-editor-panel-color-gradient-settings__dropdown {
-  width: 100%;
+.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
+  width: 280px;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content > div {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__color-indicator {
+  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-@media (min-width: 782px) {
-  .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-    margin-right: 156px !important;
-  }
-  .block-editor-panel-color-gradient-settings__dropdown-content.is-from-top .components-popover__content {
-    margin-top: -60px !important;
-  }
-  .block-editor-panel-color-gradient-settings__dropdown-content.is-from-bottom .components-popover__content {
-    margin-bottom: -60px !important;
-  }
+/**
+* The following styles replicate the separated border of the
+* `ItemGroup` component but allows for hidden items. This is because
+* to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
+* must at least render a placeholder which would otherwise interfere
+* with the `:last-child` styles.
+*/
+.block-editor-tools-panel-color-gradient-settings__item {
+  padding: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-  border-bottom-width: 0;
+.block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 24px;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.block-editor-tools-panel-color-gradient-settings__item.last {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.block-editor-tools-panel-color-gradient-settings__item > div,
+.block-editor-tools-panel-color-gradient-settings__item > div > button {
+  border-radius: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__item {
-  padding-top: 12px !important;
-  padding-bottom: 12px !important;
+.block-editor-tools-panel-color-gradient-settings__dropdown {
+  display: block;
+  padding: 0;
 }
-.block-editor-panel-color-gradient-settings__item .block-editor-panel-color-gradient-settings__color-indicator {
-  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+.block-editor-tools-panel-color-gradient-settings__dropdown > button {
+  height: 46px;
 }
-.block-editor-panel-color-gradient-settings__item.is-open {
+.block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
   background: #f0f0f0;
   color: var(--wp-admin-theme-color);
 }
 
+.block-editor-panel-color-gradient-settings__dropdown {
+  width: 100%;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -1892,7 +1846,7 @@
   text-align: left;
 }
 
-.block-editor-duotone-control__popover > .components-popover__content > div {
+.block-editor-duotone-control__popover > .components-popover__content {
   padding: 16px;
   width: 280px;
 }
@@ -1914,10 +1868,6 @@
   font-size: 12px;
 }
 
-.block-editor-duotone-control__popover:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content {
-  margin-left: -14px;
-}
-
 .components-font-appearance-control {
   margin-bottom: 24px;
 }
@@ -2039,6 +1989,21 @@
   font-size: 12px;
 }
 
+.block-editor-inspector-popover-header {
+  margin-bottom: 16px;
+}
+
+[class].block-editor-inspector-popover-header__action {
+  height: 24px;
+}
+[class].block-editor-inspector-popover-header__action.has-icon {
+  min-width: 24px;
+  padding: 0;
+}
+[class].block-editor-inspector-popover-header__action:not(.has-icon) {
+  text-decoration: underline;
+}
+
 .items-justified-left {
   justify-content: flex-start;
 }
@@ -2887,10 +2852,11 @@
   height: 1px;
 }
 
-.block-editor-list-view-drop-indicator:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content {
+.block-editor-list-view-drop-indicator > .components-popover__content {
   margin-left: 0;
   border: none;
   box-shadow: none;
+  outline: none;
 }
 
 .block-editor-list-view-placeholder {
@@ -3078,8 +3044,7 @@
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -3119,13 +3084,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   min-width: auto;
   margin-bottom: 8px;
   box-shadow: none;
-  border: 1px solid #1e1e1e;
-  border-radius: 2px;
-  background-color: #fff;
+  outline: none;
 }
-.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
-  border: none;
+  border-radius: 2px;
 }
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
@@ -3578,44 +3540,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.block-editor__border-box-control__popover .components-popover__content,
-.block-editor__border-box-control__popover-top .components-popover__content,
-.block-editor__border-box-control__popover-right .components-popover__content,
-.block-editor__border-box-control__popover-bottom .components-popover__content,
-.block-editor__border-box-control__popover-left .components-popover__content {
-  width: 282px;
-}
-
-@media (min-width: 782px) {
-  .block-editor__border-box-control__popover .components-popover__content,
-.block-editor__border-box-control__popover-left .components-popover__content {
-    margin-right: 52px !important;
-  }
-
-  .block-editor__border-box-control__popover-top .components-popover__content,
-.block-editor__border-box-control__popover-bottom .components-popover__content {
-    margin-right: 107px !important;
-  }
-
-  .block-editor__border-box-control__popover-right .components-popover__content {
-    margin-right: 162px !important;
-  }
-
-  .block-editor__border-box-control__popover.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-top.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-right.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-bottom.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-left.is-from-top .components-popover__content {
-    margin-top: -52px !important;
-  }
-  .block-editor__border-box-control__popover.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-top.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-right.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-bottom.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-left.is-from-bottom .components-popover__content {
-    margin-bottom: -52px !important;
-  }
-}
 .dimensions-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3633,15 +3557,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .color-block-support-panel {
   /* Increased specificity required to remove the slot wrapper's row gap */
   /**
-   * The following styles replicate the separated border of the
-   * `ItemGroup` component but allows for hidden items. This is because
-   * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
-   * must at least render a placeholder which would otherwise interfere
-   * with the `:last-child` styles.
-   */
-  /**
-   * The following few styles fix the layout and spacing for the due to the
-   * introduced wrapper element by the `Item` component.
+   * After converting PanelColorGradientSettings to render as a ToolsPanel
+   * we need to remove the top margin when wrapping inner content due to
+   * rendering via SlotFills.
    */
 }
 .color-block-support-panel .block-editor-contrast-checker {
@@ -3660,42 +3578,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
   row-gap: 0;
 }
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item {
-  padding: 0;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
 .color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.last {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div,
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div > button {
-  border-radius: inherit;
-}
-.color-block-support-panel .block-editor-panel-color-gradient-settings__color-indicator {
-  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
-}
-.color-block-support-panel .block-editor-tools-panel-color-dropdown {
-  display: block;
-  padding: 0;
-}
-.color-block-support-panel .block-editor-tools-panel-color-dropdown > button {
-  height: 46px;
-}
-.color-block-support-panel .block-editor-tools-panel-color-dropdown > button.is-open {
-  background: #f0f0f0;
-  color: var(--wp-admin-theme-color);
-}
-.color-block-support-panel .color-block-support-panel__item-group > div {
-  grid-column: span 2;
-  border-radius: inherit;
+  margin-top: 0;
 }
 
 .block-editor__padding-visualizer {
@@ -3880,6 +3764,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
+  outline: none;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
   border-left: 1px solid #ccc;
@@ -4152,7 +4037,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   border-top: 1px solid #ddd;
 }
 
-.block-editor-inserter__popover.is-quick > .components-popover__content > div {
+.block-editor-inserter__popover.is-quick > .components-popover__content {
   padding: 0;
 }
 
@@ -4236,9 +4121,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding-left: 8px;
 }
 
-.block-editor-post-preview__dropdown-content .components-popover__content {
-  overflow-y: visible;
-}
 .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:first-child {
   padding-bottom: 8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.0.0",
+	"version": "9.3.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,33 +32,33 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.8.0",
-		"@wordpress/api-fetch": "^6.5.0",
-		"@wordpress/blob": "^3.8.0",
-		"@wordpress/blocks": "^11.7.0",
-		"@wordpress/components": "^19.10.0",
-		"@wordpress/compose": "^5.6.0",
-		"@wordpress/data": "^6.8.0",
-		"@wordpress/date": "^4.8.0",
-		"@wordpress/deprecated": "^3.8.0",
-		"@wordpress/dom": "^3.8.0",
-		"@wordpress/element": "^4.6.0",
-		"@wordpress/hooks": "^3.8.0",
-		"@wordpress/html-entities": "^3.8.0",
-		"@wordpress/i18n": "^4.8.0",
-		"@wordpress/icons": "^8.4.0",
-		"@wordpress/is-shallow-equal": "^4.8.0",
-		"@wordpress/keyboard-shortcuts": "^3.6.0",
-		"@wordpress/keycodes": "^3.8.0",
-		"@wordpress/notices": "^3.8.0",
-		"@wordpress/rich-text": "^5.6.0",
-		"@wordpress/shortcode": "^3.8.0",
-		"@wordpress/style-engine": "^0.7.0",
-		"@wordpress/token-list": "^2.8.0",
-		"@wordpress/url": "^3.9.0",
-		"@wordpress/warning": "^2.8.0",
-		"@wordpress/wordcount": "^3.8.0",
+		"@react-spring/web": "^9.4.5",
+		"@wordpress/a11y": "^3.11.0",
+		"@wordpress/api-fetch": "^6.8.0",
+		"@wordpress/blob": "^3.11.0",
+		"@wordpress/blocks": "^11.10.0",
+		"@wordpress/components": "^19.13.0",
+		"@wordpress/compose": "^5.9.0",
+		"@wordpress/data": "^6.11.0",
+		"@wordpress/date": "^4.11.0",
+		"@wordpress/deprecated": "^3.11.0",
+		"@wordpress/dom": "^3.11.0",
+		"@wordpress/element": "^4.9.0",
+		"@wordpress/hooks": "^3.11.0",
+		"@wordpress/html-entities": "^3.11.0",
+		"@wordpress/i18n": "^4.11.0",
+		"@wordpress/icons": "^9.2.0",
+		"@wordpress/is-shallow-equal": "^4.11.0",
+		"@wordpress/keyboard-shortcuts": "^3.9.0",
+		"@wordpress/keycodes": "^3.11.0",
+		"@wordpress/notices": "^3.11.0",
+		"@wordpress/rich-text": "^5.9.0",
+		"@wordpress/shortcode": "^3.11.0",
+		"@wordpress/style-engine": "^0.10.0",
+		"@wordpress/token-list": "^2.11.0",
+		"@wordpress/url": "^3.12.0",
+		"@wordpress/warning": "^2.11.0",
+		"@wordpress/wordcount": "^3.11.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -67,7 +67,7 @@
 		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^3.0.0",
-		"rememo": "^3.0.0",
+		"rememo": "^4.0.0",
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4631d515033397fcfeda77e5755960253caef9bf"
+	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
 }

package/src/autocompleters/block.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { noop, orderBy } from 'lodash';
+import { orderBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -21,6 +21,7 @@ import useBlockTypesState from '../components/inserter/hooks/use-block-types-sta
 import BlockIcon from '../components/block-icon';
 import { store as blockEditorStore } from '../store';
 
+const noop = () => {};
 const SHOWN_BLOCK_TYPES = 9;
 
 /** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */

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

@@ -31,9 +31,8 @@ export default function BlockActions( {
 		canMoveBlocks,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
-	const { getDefaultBlockName, getGroupingBlockName } = useSelect(
-		blocksStore
-	);
+	const { getDefaultBlockName, getGroupingBlockName } =
+		useSelect( blocksStore );
 
 	const blocks = getBlocksByClientId( clientIds );
 	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );

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

@@ -76,12 +76,10 @@ function BlockAlignmentUI( {
 							<MenuGroup className="block-editor-block-alignment-control__menu-group">
 								{ enabledControls.map(
 									( { name: controlName, info } ) => {
-										const {
-											icon,
-											title,
-										} = BLOCK_ALIGNMENTS_CONTROLS[
-											controlName
-										];
+										const { icon, title } =
+											BLOCK_ALIGNMENTS_CONTROLS[
+												controlName
+											];
 										// If no value is provided, mark as selected the `none` option.
 										const isSelected =
 											controlName === value ||

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

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -13,6 +9,8 @@ import {
 	__experimentalAlignmentMatrixControl as AlignmentMatrixControl,
 } from '@wordpress/components';
 
+const noop = () => {};
+
 function BlockAlignmentMatrixControl( props ) {
 	const {
 		label = __( 'Change matrix alignment' ),
@@ -22,15 +20,11 @@ function BlockAlignmentMatrixControl( props ) {
 	} = props;
 
 	const icon = <AlignmentMatrixControl.Icon value={ value } />;
-	const className = 'block-editor-block-alignment-matrix-control';
-	const popoverClassName = `${ className }__popover`;
-	const isAlternate = true;
 
 	return (
 		<Dropdown
 			position="bottom right"
-			className={ className }
-			popoverProps={ { className: popoverClassName, isAlternate } }
+			popoverProps={ { isAlternate: true } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {

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

@@ -22,11 +22,8 @@ import { store as blockEditorStore } from '../../store';
 function BlockBreadcrumb( { rootLabelText } ) {
 	const { selectBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { clientId, parents, hasSelection } = useSelect( ( select ) => {
-		const {
-			getSelectionStart,
-			getSelectedBlockClientId,
-			getBlockParents,
-		} = select( blockEditorStore );
+		const { getSelectionStart, getSelectedBlockClientId, getBlockParents } =
+			select( blockEditorStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		return {
 			parents: getBlockParents( selectedBlockClientId ),

package/src/components/block-compare/test/block-view.js

@@ -2,13 +2,14 @@
  * External dependencies
  */
 import { shallow } from 'enzyme';
-import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import BlockView from '../block-view';
 
+const noop = () => {};
+
 describe( 'BlockView', () => {
 	test( 'should match snapshot', () => {
 		const wrapper = shallow(