@wordpress/block-editor 14.7.0 → 14.8.0

package/build-style/content-rtl.css

@@ -777,34 +777,26 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 
 .block-editor-iframe__html {
   transform-origin: top center;
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-iframe__html {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
+  transition: background-color 400ms;
 }
 .block-editor-iframe__html.zoom-out-animation {
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-iframe__html.zoom-out-animation {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
+  position: fixed;
+  right: 0;
+  left: 0;
+  top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
+  bottom: 0;
+  overflow-y: scroll;
 }
-
 .block-editor-iframe__html.is-zoomed-out {
-  transform: translateX(calc(-1*((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale))));
-  scale: var(--wp-block-editor-iframe-zoom-out-scale);
+  transform: translateX(calc(-1*((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale, 1))));
+  scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
   background-color: #ddd;
-  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)) + 2px));
-  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
-  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
+  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale, 1))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 2px));
+  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body {
-  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale))) / var(--wp-block-editor-iframe-zoom-out-scale));
+  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1))) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
   flex: 1;
@@ -860,13 +852,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .rich-text:focus {
   outline: none;
 }
-.rich-text:focus [data-rich-text-format-boundary] {
-  border-radius: 2px;
-}
-
-.block-editor-rich-text__editable > p:first-child {
-  margin-top: 0;
-}
 
 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
   opacity: 0.8;
@@ -880,6 +865,20 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   background: yellow;
 }
 
+[data-rich-text-comment],
+[data-rich-text-format-boundary] {
+  border-radius: 2px;
+}
+
+[data-rich-text-comment] {
+  background-color: currentColor;
+}
+[data-rich-text-comment] span {
+  filter: invert(100%);
+  color: currentColor;
+  padding: 0 2px;
+}
+
 .block-editor-warning {
   align-items: center;
   display: flex;

package/build-style/content.css

@@ -777,34 +777,26 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 
 .block-editor-iframe__html {
   transform-origin: top center;
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-iframe__html {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
+  transition: background-color 400ms;
 }
 .block-editor-iframe__html.zoom-out-animation {
-  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-iframe__html.zoom-out-animation {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
+  bottom: 0;
+  overflow-y: scroll;
 }
-
 .block-editor-iframe__html.is-zoomed-out {
-  transform: translateX(calc((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale)));
-  scale: var(--wp-block-editor-iframe-zoom-out-scale);
+  transform: translateX(calc((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
   background-color: #ddd;
-  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)) + 2px));
-  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
-  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
+  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale, 1))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 2px));
+  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body {
-  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale))) / var(--wp-block-editor-iframe-zoom-out-scale));
+  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1))) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
   flex: 1;
@@ -860,13 +852,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .rich-text:focus {
   outline: none;
 }
-.rich-text:focus [data-rich-text-format-boundary] {
-  border-radius: 2px;
-}
-
-.block-editor-rich-text__editable > p:first-child {
-  margin-top: 0;
-}
 
 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
   opacity: 0.8;
@@ -880,6 +865,20 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   background: yellow;
 }
 
+[data-rich-text-comment],
+[data-rich-text-format-boundary] {
+  border-radius: 2px;
+}
+
+[data-rich-text-comment] {
+  background-color: currentColor;
+}
+[data-rich-text-comment] span {
+  filter: invert(100%);
+  color: currentColor;
+  padding: 0 2px;
+}
+
 .block-editor-warning {
   align-items: center;
   display: flex;

package/build-style/style-rtl.css

@@ -459,6 +459,36 @@ iframe[name=editor-canvas] {
 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar {
   border-left-color: #1e1e1e;
 }
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar {
+  background-color: #1e1e1e;
+  color: #f0f0f0;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar.block-editor-block-contextual-toolbar {
+  border-color: #2f2f2f;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button {
+  color: #ddd;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:hover {
+  color: #fff;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:focus::before {
+  box-shadow: inset 0 0 0 1px #1e1e1e, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+  border-color: #2f2f2f;
+  background-color: #1e1e1e;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-switcher__toggle {
+  color: #f0f0f0;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar-group,
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar {
+  border-left-color: #2f2f2f !important;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .is-pressed {
+  color: var(--wp-admin-theme-color);
+}
 .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible {
   visibility: hidden;
 }
@@ -766,6 +796,81 @@ iframe[name=editor-canvas] {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
 }
 
+.block-editor-block-manager__no-results {
+  font-style: italic;
+  padding: 24px 0;
+  text-align: center;
+}
+
+.block-editor-block-manager__search {
+  margin: 16px 0;
+}
+
+.block-editor-block-manager__disabled-blocks-count {
+  border: 1px solid #ddd;
+  border-width: 1px 0;
+  box-shadow: 32px 0 0 0 #fff, -32px 0 0 0 #fff;
+  padding: 8px;
+  background-color: #fff;
+  text-align: center;
+  position: sticky;
+  top: -5px;
+  z-index: 2;
+}
+.block-editor-block-manager__disabled-blocks-count ~ .block-editor-block-manager__results .block-editor-block-manager__category-title {
+  top: 31px;
+}
+.block-editor-block-manager__disabled-blocks-count .is-link {
+  margin-right: 12px;
+}
+
+.block-editor-block-manager__category {
+  margin: 0 0 24px 0;
+}
+
+.block-editor-block-manager__category-title {
+  position: sticky;
+  top: -4px;
+  padding: 16px 0;
+  background-color: #fff;
+  z-index: 1;
+}
+.block-editor-block-manager__category-title .components-checkbox-control__label {
+  font-weight: 600;
+}
+
+.block-editor-block-manager__checklist {
+  margin-top: 0;
+}
+
+.block-editor-block-manager__category-title,
+.block-editor-block-manager__checklist-item {
+  border-bottom: 1px solid #ddd;
+}
+
+.block-editor-block-manager__checklist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0;
+  padding: 8px 16px 8px 0;
+}
+.components-modal__content .block-editor-block-manager__checklist-item.components-checkbox-control__input-container {
+  margin: 0 8px;
+}
+.block-editor-block-manager__checklist-item .block-editor-block-icon {
+  margin-left: 10px;
+  fill: #1e1e1e;
+}
+
+.block-editor-block-manager__results {
+  border-top: 1px solid #ddd;
+}
+
+.block-editor-block-manager__disabled-blocks-count + .block-editor-block-manager__results {
+  border-top-width: 0;
+}
+
 .block-editor-block-mover__move-button-container {
   display: flex;
   padding: 0;
@@ -827,6 +932,9 @@ iframe[name=editor-canvas] {
   }
 }
 
+.components-button.block-editor-block-mover-button {
+  overflow: hidden;
+}
 .components-button.block-editor-block-mover-button::before {
   content: "";
   position: absolute;

package/build-style/style.css

@@ -459,6 +459,36 @@ iframe[name=editor-canvas] {
 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar {
   border-right-color: #1e1e1e;
 }
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar {
+  background-color: #1e1e1e;
+  color: #f0f0f0;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar.block-editor-block-contextual-toolbar {
+  border-color: #2f2f2f;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button {
+  color: #ddd;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:hover {
+  color: #fff;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:focus::before {
+  box-shadow: inset 0 0 0 1px #1e1e1e, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+  border-color: #2f2f2f;
+  background-color: #1e1e1e;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-switcher__toggle {
+  color: #f0f0f0;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar-group,
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar {
+  border-right-color: #2f2f2f !important;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .is-pressed {
+  color: var(--wp-admin-theme-color);
+}
 .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible {
   visibility: hidden;
 }
@@ -766,6 +796,81 @@ iframe[name=editor-canvas] {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
 }
 
+.block-editor-block-manager__no-results {
+  font-style: italic;
+  padding: 24px 0;
+  text-align: center;
+}
+
+.block-editor-block-manager__search {
+  margin: 16px 0;
+}
+
+.block-editor-block-manager__disabled-blocks-count {
+  border: 1px solid #ddd;
+  border-width: 1px 0;
+  box-shadow: -32px 0 0 0 #fff, 32px 0 0 0 #fff;
+  padding: 8px;
+  background-color: #fff;
+  text-align: center;
+  position: sticky;
+  top: -5px;
+  z-index: 2;
+}
+.block-editor-block-manager__disabled-blocks-count ~ .block-editor-block-manager__results .block-editor-block-manager__category-title {
+  top: 31px;
+}
+.block-editor-block-manager__disabled-blocks-count .is-link {
+  margin-left: 12px;
+}
+
+.block-editor-block-manager__category {
+  margin: 0 0 24px 0;
+}
+
+.block-editor-block-manager__category-title {
+  position: sticky;
+  top: -4px;
+  padding: 16px 0;
+  background-color: #fff;
+  z-index: 1;
+}
+.block-editor-block-manager__category-title .components-checkbox-control__label {
+  font-weight: 600;
+}
+
+.block-editor-block-manager__checklist {
+  margin-top: 0;
+}
+
+.block-editor-block-manager__category-title,
+.block-editor-block-manager__checklist-item {
+  border-bottom: 1px solid #ddd;
+}
+
+.block-editor-block-manager__checklist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0;
+  padding: 8px 0 8px 16px;
+}
+.components-modal__content .block-editor-block-manager__checklist-item.components-checkbox-control__input-container {
+  margin: 0 8px;
+}
+.block-editor-block-manager__checklist-item .block-editor-block-icon {
+  margin-right: 10px;
+  fill: #1e1e1e;
+}
+
+.block-editor-block-manager__results {
+  border-top: 1px solid #ddd;
+}
+
+.block-editor-block-manager__disabled-blocks-count + .block-editor-block-manager__results {
+  border-top-width: 0;
+}
+
 .block-editor-block-mover__move-button-container {
   display: flex;
   padding: 0;
@@ -827,6 +932,9 @@ iframe[name=editor-canvas] {
   }
 }
 
+.components-button.block-editor-block-mover-button {
+  overflow: hidden;
+}
 .components-button.block-editor-block-mover-button::before {
   content: "";
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.7.0",
+	"version": "14.8.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -90,5 +90,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "510540d99f3d222a96f08d3d7b66c9e7a726f705"
+	"gitHead": "cce81c13739c2a8b53d91df90c4f037cb68c2665"
 }

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

@@ -4,6 +4,7 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	// Handles transitions between device previews
-	@include editor-canvas-resize-animation;
+	transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+	@include reduce-motion("transition");
 	background-color: $gray-300;
 }

package/src/components/block-controls/slot.js

@@ -31,9 +31,10 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 		[ toolbarState, contextState ]
 	);
 
-	const Slot = groups[ group ]?.Slot;
-	const fills = useSlotFills( Slot?.__unstableName );
-	if ( ! Slot ) {
+	const slotFill = groups[ group ];
+	const fills = useSlotFills( slotFill.name );
+
+	if ( ! slotFill ) {
 		warning( `Unknown BlockControls group "${ group }" provided.` );
 		return null;
 	}
@@ -42,6 +43,7 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 		return null;
 	}
 
+	const { Slot } = slotFill;
 	const slot = <Slot { ...props } bubblesVirtually fillProps={ fillProps } />;
 
 	if ( group === 'default' ) {

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

@@ -26,7 +26,6 @@ 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';
 import BlockQuickNavigation from '../block-quick-navigation';
 import { useBorderPanelLabel } from '../../hooks/border';
 
@@ -253,7 +252,6 @@ const BlockInspectorSingleBlock = ( {
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ clientId } />
-			<BlockInfo.Slot />
 			{ showTabs && (
 				<InspectorControlsTabs
 					hasBlockStyles={ hasBlockStyles }

package/src/components/block-lock/modal.js

@@ -24,7 +24,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
 // Entity based blocks which allow edit locking
-const ALLOWS_EDIT_LOCKING = [ 'core/block', 'core/navigation' ];
+const ALLOWS_EDIT_LOCKING = [ 'core/navigation' ];
 
 function getTemplateLockValue( lock ) {
 	// Prevents all operations.

package/src/components/block-manager/category.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockTypesChecklist from './checklist';
+
+function BlockManagerCategory( {
+	title,
+	blockTypes,
+	selectedBlockTypes,
+	onChange,
+} ) {
+	const instanceId = useInstanceId( BlockManagerCategory );
+
+	const toggleVisible = useCallback(
+		( blockType, nextIsChecked ) => {
+			if ( nextIsChecked ) {
+				onChange( [ ...selectedBlockTypes, blockType ] );
+			} else {
+				onChange(
+					selectedBlockTypes.filter(
+						( { name } ) => name !== blockType.name
+					)
+				);
+			}
+		},
+		[ selectedBlockTypes, onChange ]
+	);
+
+	const toggleAllVisible = useCallback(
+		( nextIsChecked ) => {
+			if ( nextIsChecked ) {
+				onChange( [
+					...selectedBlockTypes,
+					...blockTypes.filter(
+						( blockType ) =>
+							! selectedBlockTypes.find(
+								( { name } ) => name === blockType.name
+							)
+					),
+				] );
+			} else {
+				onChange(
+					selectedBlockTypes.filter(
+						( selectedBlockType ) =>
+							! blockTypes.find(
+								( { name } ) => name === selectedBlockType.name
+							)
+					)
+				);
+			}
+		},
+		[ blockTypes, selectedBlockTypes, onChange ]
+	);
+
+	if ( ! blockTypes.length ) {
+		return null;
+	}
+
+	const checkedBlockNames = blockTypes
+		.map( ( { name } ) => name )
+		.filter( ( type ) =>
+			( selectedBlockTypes ?? [] ).some(
+				( selectedBlockType ) => selectedBlockType.name === type
+			)
+		);
+
+	const titleId = 'block-editor-block-manager__category-title-' + instanceId;
+
+	const isAllChecked = checkedBlockNames.length === blockTypes.length;
+	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
+
+	return (
+		<div
+			role="group"
+			aria-labelledby={ titleId }
+			className="block-editor-block-manager__category"
+		>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				checked={ isAllChecked }
+				onChange={ toggleAllVisible }
+				className="block-editor-block-manager__category-title"
+				indeterminate={ isIndeterminate }
+				label={ <span id={ titleId }>{ title }</span> }
+			/>
+			<BlockTypesChecklist
+				blockTypes={ blockTypes }
+				value={ checkedBlockNames }
+				onItemChange={ toggleVisible }
+			/>
+		</div>
+	);
+}
+
+export default BlockManagerCategory;

package/src/components/block-manager/checklist.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+
+function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
+	return (
+		<ul className="block-editor-block-manager__checklist">
+			{ blockTypes.map( ( blockType ) => (
+				<li
+					key={ blockType.name }
+					className="block-editor-block-manager__checklist-item"
+				>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ blockType.title }
+						checked={ value.includes( blockType.name ) }
+						onChange={ ( ...args ) =>
+							onItemChange( blockType, ...args )
+						}
+					/>
+					<BlockIcon icon={ blockType.icon } />
+				</li>
+			) ) }
+		</ul>
+	);
+}
+
+export default BlockTypesChecklist;