@wordpress/block-editor 15.21.0 → 15.22.0

package/build-types/utils/pasting.d.ts

@@ -0,0 +1,28 @@
+export declare function getPasteEventData({ clipboardData }: {
+    clipboardData: DataTransfer;
+}): {
+    files: File[];
+    html?: undefined;
+    plainText?: undefined;
+} | {
+    html: string;
+    plainText: string;
+    files: never[];
+} | undefined;
+/**
+ * Given a collection of DataTransfer files and HTML and plain text strings,
+ * determine whether the files are to be dismissed in favor of the HTML.
+ *
+ * Certain office-type programs, like Microsoft Word or Apple Numbers,
+ * will, upon copy, generate a screenshot of the content being copied and
+ * attach it to the clipboard alongside the actual rich text that the user
+ * sought to copy. In those cases, we should let Gutenberg handle the rich text
+ * content and not the screenshot, since this allows Gutenberg to insert
+ * meaningful blocks, like paragraphs, lists or even tables.
+ *
+ * @param files File objects obtained from a paste event
+ * @param html  HTML content obtained from a paste event
+ * @return      True if the files should be dismissed
+ */
+export declare function shouldDismissPastedFiles(files: File[], html: string): boolean;
+//# sourceMappingURL=pasting.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pasting.d.ts","sourceRoot":"","sources":["../../src/utils/pasting.ts"],"names":[],"mappings":"AAkDA,wBAAgB,iBAAiB,CAAE,EAClC,aAAa,EACb,EAAE;IACF,aAAa,EAAE,YAAY,CAAC;CAC5B;;;;;;;;cA2BA;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,wBAAwB,CACvC,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,EAAE,MAAM,WA+BZ"}

package/build-types/utils/selection.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A robust way to retain selection position through various
+ * transforms is to insert a special character at the position and
+ * then recover it.
+ */
+export declare const START_OF_SELECTED_AREA = "\u0086";
+/**
+ * Retrieve the block attribute that contains the selection position.
+ *
+ * @param blockAttributes Block attributes.
+ * @return The name of the block attribute that was previously selected.
+ */
+export declare function retrieveSelectedAttribute(blockAttributes: Record<string, unknown> | undefined): string | undefined;
+type BlockTypeWithAttributes = {
+    attributes: Record<string, {
+        source?: string;
+    }>;
+};
+export declare function findRichTextAttributeKey(blockType: BlockTypeWithAttributes): string | undefined;
+export {};
+//# sourceMappingURL=selection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../src/utils/selection.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,WAAW,CAAC;AAE/C;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACxC,eAAe,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,GAAG,SAAS,sBAetD;AAED,KAAK,uBAAuB,GAAG;IAC9B,UAAU,EAAE,MAAM,CAAE,MAAM,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAE,CAAC;CAClD,CAAC;AAEF,wBAAgB,wBAAwB,CAAE,SAAS,EAAE,uBAAuB,sBAO3E"}

package/build-types/utils/sorting.d.ts

@@ -0,0 +1,17 @@
+type Comparable = string | number | undefined;
+type SortItem = Record<string, Comparable>;
+type SortField<T> = string | ((item: T) => Comparable);
+/**
+ * Order items by a certain key.
+ * Supports decorator functions that allow complex picking of a comparison field.
+ * Sorts in ascending order by default, but supports descending as well.
+ * Stable sort - maintains original order of equal items.
+ *
+ * @param items Items to order.
+ * @param field Field to order by.
+ * @param order Sorting order, `asc` or `desc`.
+ * @return Sorted items.
+ */
+export declare function orderBy<T extends SortItem>(items: T[], field: SortField<T>, order?: string): T[];
+export {};
+//# sourceMappingURL=sorting.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sorting.d.ts","sourceRoot":"","sources":["../../src/utils/sorting.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAC9C,KAAK,QAAQ,GAAG,MAAM,CAAE,MAAM,EAAE,UAAU,CAAE,CAAC;AAC7C,KAAK,SAAS,CAAE,CAAC,IAAK,MAAM,GAAG,CAAE,CAAE,IAAI,EAAE,CAAC,KAAM,UAAU,CAAE,CAAC;AA6D7D;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAE,CAAC,SAAS,QAAQ,EAC1C,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,SAAS,CAAE,CAAC,CAAE,EACrB,KAAK,SAAQ,OAGb"}

package/build-types/utils/transform-styles/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import type { EditorStyle, TransformOptions } from './types';
+/**
+ * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
+ *
+ * @param styles           CSS rules.
+ * @param wrapperSelector  Wrapper selector.
+ * @param transformOptions Additional options for style transformation.
+ * @return converted rules.
+ */
+declare const transformStyles: (styles: EditorStyle[], wrapperSelector?: string, transformOptions?: TransformOptions) => any[];
+export default transformStyles;
+//# sourceMappingURL=index.d.ts.map

package/build-types/utils/transform-styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/transform-styles/index.ts"],"names":[],"mappings":"AAWA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyJ7D;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,WACZ,WAAW,EAAE,+CAEF,gBAAgB,UAenC,CAAC;eAEa,eAAe"}

package/build-types/utils/transform-styles/types.d.ts

@@ -0,0 +1,13 @@
+export interface EditorStyle {
+    /** The CSS block(s), as a single string. */
+    css: string;
+    /** The base URL to be used as the reference when rewriting urls. */
+    baseURL?: string;
+    /** The selectors not to wrap. */
+    ignoredSelectors?: (string | RegExp)[];
+}
+export interface TransformOptions {
+    /** The selectors not to wrap. */
+    ignoredSelectors?: (string | RegExp)[];
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/utils/transform-styles/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/transform-styles/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC3B,4CAA4C;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,CAAE,MAAM,GAAG,MAAM,CAAE,EAAE,CAAC;CACzC;AAED,MAAM,WAAW,gBAAgB;IAChC,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,CAAE,MAAM,GAAG,MAAM,CAAE,EAAE,CAAC;CACzC"}

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

@@ -0,0 +1,28 @@
+/**
+ * Result of formatting a font style or weight.
+ */
+export interface FormattedFont {
+    /** Human readable name. */
+    name?: string;
+    /** Original CSS value. */
+    value?: string;
+}
+/**
+ * A font family face from theme.json.
+ */
+export interface FontFamilyFace {
+    fontStyle?: string;
+    fontWeight?: string | number;
+}
+/**
+ * Combined font style and weight option for a font picker.
+ */
+export interface CombinedStyleAndWeightOption {
+    key: string;
+    name: string;
+    style: {
+        fontStyle?: string;
+        fontWeight?: string;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,aAAa;IAC7B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.21.0",
+	"version": "15.22.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,7 +41,6 @@
 		"./package.json": "./package.json",
 		"./build-style/": "./build-style/"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"wpScriptModuleExports": {
 		"./utils/fit-text-frontend": "./build-module/utils/fit-text-frontend.mjs"
@@ -61,68 +60,78 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.48.0",
-		"@wordpress/base-styles": "^9.1.0",
-		"@wordpress/blob": "^4.48.0",
-		"@wordpress/block-serialization-default-parser": "^5.48.0",
-		"@wordpress/blocks": "^15.21.0",
-		"@wordpress/commands": "^1.48.0",
-		"@wordpress/components": "^35.0.0",
-		"@wordpress/compose": "^8.1.0",
-		"@wordpress/data": "^10.48.0",
-		"@wordpress/dataviews": "^16.0.0",
-		"@wordpress/date": "^5.48.0",
-		"@wordpress/deprecated": "^4.48.0",
-		"@wordpress/dom": "^4.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/escape-html": "^3.48.0",
-		"@wordpress/global-styles-engine": "^1.15.0",
-		"@wordpress/hooks": "^4.48.0",
-		"@wordpress/html-entities": "^4.48.0",
-		"@wordpress/i18n": "^6.21.0",
-		"@wordpress/icons": "^13.3.0",
-		"@wordpress/image-cropper": "^1.12.0",
-		"@wordpress/interactivity": "^6.48.0",
-		"@wordpress/is-shallow-equal": "^5.48.0",
-		"@wordpress/keyboard-shortcuts": "^5.48.0",
-		"@wordpress/keycodes": "^4.48.0",
-		"@wordpress/notices": "^5.48.0",
-		"@wordpress/preferences": "^4.48.0",
-		"@wordpress/priority-queue": "^3.48.0",
-		"@wordpress/private-apis": "^1.48.0",
-		"@wordpress/rich-text": "^7.48.0",
-		"@wordpress/style-engine": "^2.48.0",
-		"@wordpress/token-list": "^3.48.0",
-		"@wordpress/ui": "^0.15.0",
-		"@wordpress/upload-media": "^0.33.0",
-		"@wordpress/url": "^4.48.0",
-		"@wordpress/warning": "^3.48.0",
-		"@wordpress/wordcount": "^4.48.0",
+		"@wordpress/a11y": "^4.49.0",
+		"@wordpress/base-styles": "^10.1.0",
+		"@wordpress/blob": "^4.49.0",
+		"@wordpress/block-serialization-default-parser": "^5.49.0",
+		"@wordpress/blocks": "^15.22.0",
+		"@wordpress/commands": "^1.49.0",
+		"@wordpress/components": "^36.0.0",
+		"@wordpress/compose": "^8.2.0",
+		"@wordpress/data": "^10.49.0",
+		"@wordpress/dataviews": "^17.0.0",
+		"@wordpress/date": "^5.49.0",
+		"@wordpress/deprecated": "^4.49.0",
+		"@wordpress/dom": "^4.49.0",
+		"@wordpress/element": "^8.1.0",
+		"@wordpress/escape-html": "^3.49.0",
+		"@wordpress/global-styles-engine": "^1.16.0",
+		"@wordpress/hooks": "^4.49.0",
+		"@wordpress/html-entities": "^4.49.0",
+		"@wordpress/i18n": "^6.22.0",
+		"@wordpress/icons": "^15.0.0",
+		"@wordpress/image-cropper": "^1.13.0",
+		"@wordpress/interactivity": "^6.49.0",
+		"@wordpress/is-shallow-equal": "^5.49.0",
+		"@wordpress/keyboard-shortcuts": "^5.49.0",
+		"@wordpress/keycodes": "^4.49.0",
+		"@wordpress/notices": "^5.49.0",
+		"@wordpress/preferences": "^4.49.0",
+		"@wordpress/priority-queue": "^3.49.0",
+		"@wordpress/private-apis": "^1.49.0",
+		"@wordpress/rich-text": "^7.49.0",
+		"@wordpress/style-engine": "^2.49.0",
+		"@wordpress/token-list": "^3.49.0",
+		"@wordpress/ui": "^0.16.0",
+		"@wordpress/upload-media": "^0.34.0",
+		"@wordpress/url": "^4.49.0",
+		"@wordpress/warning": "^3.49.0",
+		"@wordpress/wordcount": "^4.49.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
-		"colord": "^2.7.0",
-		"deepmerge": "^4.3.0",
-		"diff": "^4.0.2",
+		"colord": "^2.9.3",
+		"deepmerge": "^4.3.1",
+		"diff": "^8.0.3",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"parsel-js": "^1.1.2",
-		"postcss": "^8.4.21",
+		"postcss": "^8.4.38",
 		"postcss-prefix-selector": "^1.16.0",
 		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
-		"react-easy-crop": "^5.0.6",
+		"react-easy-crop": "^5.4.2",
 		"remove-accents": "^0.5.0"
 	},
 	"devDependencies": {
 		"@ariakit/test": "^0.4.13",
-		"deep-freeze": "0.0.1"
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
+		"@types/postcss-prefix-selector": "^1.16.3",
+		"deep-freeze": "^0.0.1"
 	},
 	"peerDependencies": {
+		"@types/react": "^18.3.27",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "0e7112a4f4fde4ea15bd9060489b8f6fe11eb6ca"
 }

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -18,6 +18,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -41,6 +42,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -73,6 +75,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
     >
       <svg
         aria-hidden="true"
+        fill="currentColor"
         focusable="false"
         height="24"
         viewBox="0 0 24 24"
@@ -106,6 +109,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -129,6 +133,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -152,6 +157,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"

package/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -16,6 +16,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
     >
       <svg
         aria-hidden="true"
+        fill="currentColor"
         focusable="false"
         height="24"
         viewBox="0 0 24 24"
@@ -48,6 +49,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -70,6 +72,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -92,6 +95,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -114,6 +118,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"

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

@@ -8,9 +8,9 @@ The block breadcrumb trail displays the hierarchy of the current block selection
 
 ## Development guidelines
 
-#### Props
+### Props
 
-##### rootLabelText
+#### rootLabelText
 
 Label text for the root element (the first `<li />`) of the breadcrumb trail.
 

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

@@ -21,7 +21,7 @@ import {
 	arrowRight,
 	arrowLeft,
 } from '@wordpress/icons';
-import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -110,20 +110,14 @@ function BlockCard( {
 			if ( parentClientId || isChild || ! allowParentNavigation ) {
 				return {};
 			}
-			const { getBlockParents, getBlockName } =
-				select( blockEditorStore );
+			const { getBlockParents, getBlockName, shouldRenderBlockListView } =
+				unlock( select( blockEditorStore ) );
 
-			// Find the top-most parent block that is either:
-			// 1. A navigation block (special case for ad-hoc list view support)
-			// 2. Any block with listView support
+			// Find the top-most parent block that participates in List View.
 			const parents = getBlockParents( clientId, false );
-			const foundParentId = parents.find( ( parentId ) => {
-				const parentName = getBlockName( parentId );
-				return (
-					parentName === 'core/navigation' ||
-					hasBlockSupport( parentName, 'listView' )
-				);
-			} );
+			const foundParentId = parents.find( ( parentId ) =>
+				shouldRenderBlockListView( parentId )
+			);
 
 			return {
 				parentBlockClientId: foundParentId,

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

@@ -5,37 +5,37 @@ of converting the block.
 
 A button is present on both blocks to then select one or the other.
 
-#### Props
+## Props
 
-##### block
+### block
 
 The original object to compare against
 
 -   Type: `Object`
 -   Required: Yes
 
-##### convertor
+### convertor
 
 A function that returns a new, converted, block when supplied an existing block. The conversion may fix or alter the block in a way that helps with an invalid block.
 
 -   Type: `func`
 -   Required: Yes
 
-##### convertButtonText
+### convertButtonText
 
 Text to show in the convert button
 
 -   Type: `string`
 -   Required: Yes
 
-##### onKeep
+### onKeep
 
 Callback when the original block is required
 
 -   Type: `func`
 -   Required: Yes
 
-##### onConvert
+### onConvert
 
 Callback when the converted block is required.
 

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

@@ -2,9 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
-// diff doesn't tree-shake correctly, so we import from the individual
-// module here, to avoid including too much of the library
-import { diffChars } from 'diff/lib/diff/character';
+import { diffChars } from 'diff';
 
 /**
  * WordPress dependencies

package/src/components/block-editing-mode/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useRegistry } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
 /**
@@ -50,8 +50,7 @@ import {
 export function useBlockEditingMode( mode ) {
 	const context = useBlockEditContext();
 	const { clientId = '' } = context;
-	const { setBlockEditingMode, unsetBlockEditingMode } =
-		useDispatch( blockEditorStore );
+	const registry = useRegistry();
 	const globalBlockEditingMode = useSelect(
 		( select ) =>
 			// Avoid adding the subscription if not needed!
@@ -59,14 +58,23 @@ export function useBlockEditingMode( mode ) {
 		[ clientId ]
 	);
 	useEffect( () => {
-		if ( mode ) {
-			setBlockEditingMode( clientId, mode );
+		if ( ! mode ) {
+			return;
 		}
+
+		const {
+			setBlockEditingMode,
+			unsetBlockEditingMode,
+			__unstableMarkNextChangeAsNotPersistent,
+		} = registry.dispatch( blockEditorStore );
+
+		__unstableMarkNextChangeAsNotPersistent();
+		setBlockEditingMode( clientId, mode );
+
 		return () => {
-			if ( mode ) {
-				unsetBlockEditingMode( clientId );
-			}
+			__unstableMarkNextChangeAsNotPersistent();
+			unsetBlockEditingMode( clientId );
 		};
-	}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
+	}, [ registry, clientId, mode ] );
 	return clientId ? context[ blockEditingModeKey ] : globalBlockEditingMode;
 }

package/src/components/block-icon/test/__snapshots__/index.js.snap

@@ -7,6 +7,7 @@ exports[`BlockIcon renders a Icon 1`] = `
   >
     <svg
       aria-hidden="true"
+      fill="currentColor"
       focusable="false"
       height="24"
       viewBox="0 0 24 24"

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

@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
-	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import {
@@ -58,6 +57,10 @@ function StyleInspectorSlots( {
 	return (
 		<>
 			<InspectorControls.Slot />
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
 			<InspectorControls.Slot
 				group="color"
 				label={ __( 'Color' ) }
@@ -65,19 +68,20 @@ function StyleInspectorSlots( {
 			/>
 			<InspectorControls.Slot
 				group="background"
-				label={ __( 'Background image' ) }
+				label={ __( 'Background' ) }
 				className="background-block-support-panel__inner-wrapper"
 			/>
-			<InspectorControls.Slot
-				group="typography"
-				label={ __( 'Typography' ) }
-			/>
 			<InspectorControls.Slot group="layout" label={ __( 'Layout' ) } />
 			<InspectorControls.Slot
 				group="dimensions"
 				label={ __( 'Dimensions' ) }
 			/>
 			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
+			<InspectorControls.Slot
+				group="elements"
+				label={ __( 'Elements' ) }
+				className="elements-block-support-panel__inner-wrapper"
+			/>
 			{ showPositionControls && <PositionControls /> }
 			<InspectorControls.Slot group="styles" />
 			{ showBindingsControls && (
@@ -99,6 +103,10 @@ function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
 		! hasPseudoBlockStyleState( selectedBlockStyleState );
 	return (
 		<>
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
 			<InspectorControls.Slot
 				group="color"
 				label={ __( 'Color' ) }
@@ -106,13 +114,9 @@ function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
 			/>
 			<InspectorControls.Slot
 				group="background"
-				label={ __( 'Background image' ) }
+				label={ __( 'Background' ) }
 				className="background-block-support-panel__inner-wrapper"
 			/>
-			<InspectorControls.Slot
-				group="typography"
-				label={ __( 'Typography' ) }
-			/>
 			{ showLayoutControls && (
 				<InspectorControls.Slot
 					group="layout"
@@ -124,6 +128,11 @@ function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
 				label={ __( 'Dimensions' ) }
 			/>
 			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
+			<InspectorControls.Slot
+				group="elements"
+				label={ __( 'Elements' ) }
+				className="elements-block-support-panel__inner-wrapper"
+			/>
 		</>
 	);
 }
@@ -208,8 +217,8 @@ function BlockInspector() {
 
 			const {
 				getClientIdsOfDescendants,
-				getBlockName,
 				getBlockEditingMode,
+				shouldRenderBlockListView,
 			} = unlock( select( blockEditorStore ) );
 
 			const descendants = getClientIdsOfDescendants(
@@ -220,14 +229,7 @@ function BlockInspector() {
 			// List View tab.
 			const listViewDescendants = new Set();
 			descendants.forEach( ( clientId ) => {
-				const blockName = getBlockName( clientId );
-				// Navigation block doesn't have List View block support, but
-				// it does have a custom implementation that is shown within
-				// patterns, so it's included in this condition.
-				if (
-					blockName === 'core/navigation' ||
-					hasBlockSupport( blockName, 'listView' )
-				) {
+				if ( shouldRenderBlockListView( clientId ) ) {
 					const listViewChildren =
 						getClientIdsOfDescendants( clientId );
 					listViewChildren.forEach( ( childId ) =>