Add: Section concept

packages/block-editor/src/components/block-switcher/index.js

@@ -18,6 +18,7 @@ import {
 	store as blocksStore,
 	isReusableBlock,
 	isTemplatePart,
+	hasBlockSupport,
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { copy } from '@wordpress/icons';
@@ -43,18 +44,19 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		icon,
 		blockTitle,
 		patterns,
+		isSection,
 	} = useSelect(
 		( select ) => {
 			const {
 				getBlockRootClientId,
 				getBlockTransformItems,
 				__experimentalGetPatternTransformItems,
+				getBlockAttributes,
 			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType } = select( blocksStore );
 			const { canRemoveBlocks } = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId(
-				castArray( clientIds )[ 0 ]
-			);
+			const clientId = castArray( clientIds )[ 0 ];
+			const rootClientId = getBlockRootClientId( clientId );
 			const [ { name: firstBlockName } ] = blocks;
 			const _isSingleBlockSelected = blocks.length === 1;
 			const styles =
@@ -84,6 +86,12 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					blocks,
 					rootClientId
 				),
+				isSection:
+					hasBlockSupport(
+						firstBlockName,
+						'__experimentalSection',
+						false
+					) && getBlockAttributes( clientId ).isSection,
 			};
 		},
 		[ clientIds, blocks, blockInformation?.icon ]
@@ -111,7 +119,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					icon={
 						<>
 							<BlockIcon icon={ icon } showColors />
-							{ ( isReusable || isTemplate ) && (
+							{ ( isSection || isReusable || isTemplate ) && (
 								<span className="block-editor-block-switcher__toggle-text">
 									<BlockTitle
 										clientId={ clientIds }
@@ -168,7 +176,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 									className="block-editor-block-switcher__toggle"
 									showColors
 								/>
-								{ ( isReusable || isTemplate ) && (
+								{ ( isReusable || isTemplate || isSection ) && (
 									<span className="block-editor-block-switcher__toggle-text">
 										<BlockTitle
 											clientId={ clientIds }

packages/block-editor/src/components/block-title/use-block-display-title.js

@@ -11,6 +11,7 @@ import {
 	getBlockType,
 	__experimentalGetBlockLabel as getBlockLabel,
 	isReusableBlock,
+	hasBlockSupport,
 } from '@wordpress/blocks';
 
 /**
@@ -71,7 +72,13 @@ export default function useBlockDisplayTitle( clientId, maximumLength ) {
 		? getBlockLabel( blockType, attributes )
 		: null;
 
-	const label = reusableBlockTitle || blockLabel;
+	const sectionTitle =
+		hasBlockSupport( name, '__experimentalSection', false ) &&
+		attributes.isSection
+			? attributes.sectionName
+			: undefined;
+
+	const label = sectionTitle || reusableBlockTitle || blockLabel;
 	// Label will fallback to the title if no label is defined for the current
 	// label context. If the label is defined we prioritize it over a
 	// possible block variation title match.

packages/block-editor/src/hooks/index.js

@@ -4,6 +4,7 @@
 import './compat';
 import './align';
 import './lock';
+import './sections';
 import './anchor';
 import './custom-class-name';
 import './generated-class-name';

packages/block-editor/src/hooks/sections.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { has } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Filters registered block settings, extending attributes to include `isSection` and `sectionName`.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addAttribute( settings ) {
+	if ( hasBlockSupport( settings, '__experimentalSection', false ) ) {
+		// Allow blocks to specify their own isSection attribute definition with default value if needed.
+		if ( ! has( settings.attributes, [ 'isSection' ] ) ) {
+			settings.attributes = {
+				...settings.attributes,
+				isSection: {
+					type: 'boolean',
+				},
+			};
+		}
+
+		// Allow blocks to specify their own sectionName attribute definition with default value if needed.
+		if ( ! has( settings.attributes, [ 'sectionName' ] ) ) {
+			settings.attributes = {
+				...settings.attributes,
+				sectionName: {
+					type: 'string',
+				},
+			};
+		}
+	}
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/sections/addAttribute',
+	addAttribute
+);

packages/block-library/src/group/block.json

@@ -21,6 +21,7 @@
 		"align": [ "wide", "full" ],
 		"anchor": true,
 		"html": false,
+		"__experimentalSection": true,
 		"color": {
 			"gradients": true,
 			"link": true,