Registers the core/group Block as the default block for handling "gro…

…uping" interactions (#15774)

* Adds grouping interaction to state

Enables the ability register a given block as the block which handles “grouping” interactions within the editor.

Related #14908

* Registers grouping block

* Auto updated README

* Adds test for get/set Grouping block

* Update documentation with clearer descriptions

* Adds reducer and selector tests

* Updates “Blog” for correct “Block” in docs

docs/designers-developers/developers/data/data-core-blocks.md

@@ -108,6 +108,18 @@ _Returns_
 
 -   `?string`: Name of the block for handling non-block content.
 
+<a name="getGroupingBlockName" href="#getGroupingBlockName">#</a> **getGroupingBlockName**
+
+Returns the name of the block for handling unregistered blocks.
+
+_Parameters_
+
+-   _state_ `Object`: Data state.
+
+_Returns_
+
+-   `?string`: Name of the block for handling unregistered blocks.
+
 <a name="getUnregisteredFallbackBlockName" href="#getUnregisteredFallbackBlockName">#</a> **getUnregisteredFallbackBlockName**
 
 Returns the name of the block for handling unregistered blocks.
@@ -270,6 +282,20 @@ _Returns_
 
 -   `Object`: Action object.
 
+<a name="setGroupingBlockName" href="#setGroupingBlockName">#</a> **setGroupingBlockName**
+
+Returns an action object used to set the name of the block used
+when grouping other blocks
+eg: in "Group/Ungroup" interactions
+
+_Parameters_
+
+-   _name_ `string`: Block name.
+
+_Returns_
+
+-   `Object`: Action object.
+
 <a name="setUnregisteredFallbackBlockName" href="#setUnregisteredFallbackBlockName">#</a> **setUnregisteredFallbackBlockName**
 
 Returns an action object used to set the name of the block used as a fallback

packages/block-library/src/index.js

@@ -9,6 +9,7 @@ import {
 	setDefaultBlockName,
 	setFreeformContentHandlerName,
 	setUnregisteredTypeHandlerName,
+	setGroupingBlockName,
 	unstable__bootstrapServerSideBlockDefinitions, // eslint-disable-line camelcase
 } from '@wordpress/blocks';
 
@@ -139,4 +140,8 @@ export const registerCoreBlocks = () => {
 		setFreeformContentHandlerName( classic.name );
 	}
 	setUnregisteredTypeHandlerName( missing.name );
+
+	if ( group ) {
+		setGroupingBlockName( group.name );
+	}
 };

packages/blocks/README.md

@@ -370,7 +370,15 @@ handler has been defined.
 
 _Returns_
 
--   `?string`: Blog name.
+-   `?string`: Block name.
+
+<a name="getGroupingBlockName" href="#getGroupingBlockName">#</a> **getGroupingBlockName**
+
+Retrieves name of block used for handling grouping interactions.
+
+_Returns_
+
+-   `?string`: Block name.
 
 <a name="getPhrasingContentSchema" href="#getPhrasingContentSchema">#</a> **getPhrasingContentSchema**
 
@@ -434,7 +442,7 @@ handler has been defined.
 
 _Returns_
 
--   `?string`: Blog name.
+-   `?string`: Block name.
 
 <a name="hasBlockSupport" href="#hasBlockSupport">#</a> **hasBlockSupport**
 
@@ -660,6 +668,14 @@ _Parameters_
 
 -   _blockName_ `string`: Block name.
 
+<a name="setGroupingBlockName" href="#setGroupingBlockName">#</a> **setGroupingBlockName**
+
+Assigns name of block for handling block grouping interactions.
+
+_Parameters_
+
+-   _name_ `string`: Block name.
+
 <a name="setUnregisteredTypeHandlerName" href="#setUnregisteredTypeHandlerName">#</a> **setUnregisteredTypeHandlerName**
 
 Assigns name of block handling unregistered block types.

packages/blocks/src/api/index.js

@@ -35,6 +35,8 @@ export {
 	getUnregisteredTypeHandlerName,
 	setDefaultBlockName,
 	getDefaultBlockName,
+	setGroupingBlockName,
+	getGroupingBlockName,
 	getBlockType,
 	getBlockTypes,
 	getBlockSupport,

packages/blocks/src/api/registration.js

@@ -193,12 +193,21 @@ export function setFreeformContentHandlerName( blockName ) {
  * Retrieves name of block handling non-block content, or undefined if no
  * handler has been defined.
  *
- * @return {?string} Blog name.
+ * @return {?string} Block name.
  */
 export function getFreeformContentHandlerName() {
 	return select( 'core/blocks' ).getFreeformFallbackBlockName();
 }
 
+/**
+ * Retrieves name of block used for handling grouping interactions.
+ *
+ * @return {?string} Block name.
+ */
+export function getGroupingBlockName() {
+	return select( 'core/blocks' ).getGroupingBlockName();
+}
+
 /**
  * Assigns name of block handling unregistered block types.
  *
@@ -212,7 +221,7 @@ export function setUnregisteredTypeHandlerName( blockName ) {
  * Retrieves name of block handling unregistered block types, or undefined if no
  * handler has been defined.
  *
- * @return {?string} Blog name.
+ * @return {?string} Block name.
  */
 export function getUnregisteredTypeHandlerName() {
 	return select( 'core/blocks' ).getUnregisteredFallbackBlockName();
@@ -227,6 +236,15 @@ export function setDefaultBlockName( name ) {
 	dispatch( 'core/blocks' ).setDefaultBlockName( name );
 }
 
+/**
+ * Assigns name of block for handling block grouping interactions.
+ *
+ * @param {string} name Block name.
+ */
+export function setGroupingBlockName( name ) {
+	dispatch( 'core/blocks' ).setGroupingBlockName( name );
+}
+
 /**
  * Retrieves the default block name.
  *

packages/blocks/src/api/test/registration.js

@@ -22,6 +22,8 @@ import {
 	getUnregisteredTypeHandlerName,
 	setDefaultBlockName,
 	getDefaultBlockName,
+	getGroupingBlockName,
+	setGroupingBlockName,
 	getBlockType,
 	getBlockTypes,
 	getBlockSupport,
@@ -415,6 +417,20 @@ describe( 'blocks', () => {
 		} );
 	} );
 
+	describe( 'getGroupingBlockName()', () => {
+		it( 'defaults to undefined', () => {
+			expect( getGroupingBlockName() ).toBeNull();
+		} );
+	} );
+
+	describe( 'setGroupingBlockName()', () => {
+		it( 'assigns default block name', () => {
+			setGroupingBlockName( 'core/test-block' );
+
+			expect( getGroupingBlockName() ).toBe( 'core/test-block' );
+		} );
+	} );
+
 	describe( 'getBlockType()', () => {
 		it( 'should return { name, save } for blocks with minimum settings', () => {
 			registerBlockType( 'core/test-block', defaultBlockSettings );

packages/blocks/src/store/actions.js

@@ -107,6 +107,22 @@ export function setUnregisteredFallbackBlockName( name ) {
 	};
 }
 
+/**
+ * Returns an action object used to set the name of the block used
+ * when grouping other blocks
+ * eg: in "Group/Ungroup" interactions
+ *
+ * @param {string} name Block name.
+ *
+ * @return {Object} Action object.
+ */
+export function setGroupingBlockName( name ) {
+	return {
+		type: 'SET_GROUPING_BLOCK_NAME',
+		name,
+	};
+}
+
 /**
  * Returns an action object used to set block categories.
  *

packages/blocks/src/store/reducer.js

@@ -124,6 +124,7 @@ export function createBlockNameSetterReducer( setActionType ) {
 export const defaultBlockName = createBlockNameSetterReducer( 'SET_DEFAULT_BLOCK_NAME' );
 export const freeformFallbackBlockName = createBlockNameSetterReducer( 'SET_FREEFORM_FALLBACK_BLOCK_NAME' );
 export const unregisteredFallbackBlockName = createBlockNameSetterReducer( 'SET_UNREGISTERED_FALLBACK_BLOCK_NAME' );
+export const groupingBlockName = createBlockNameSetterReducer( 'SET_GROUPING_BLOCK_NAME' );
 
 /**
  * Reducer managing the categories
@@ -164,5 +165,6 @@ export default combineReducers( {
 	defaultBlockName,
 	freeformFallbackBlockName,
 	unregisteredFallbackBlockName,
+	groupingBlockName,
 	categories,
 } );

packages/blocks/src/store/selectors.js

@@ -101,6 +101,17 @@ export function getUnregisteredFallbackBlockName( state ) {
 	return state.unregisteredFallbackBlockName;
 }
 
+/**
+ * Returns the name of the block for handling unregistered blocks.
+ *
+ * @param {Object} state Data state.
+ *
+ * @return {string?} Name of the block for handling unregistered blocks.
+ */
+export function getGroupingBlockName( state ) {
+	return state.groupingBlockName;
+}
+
 /**
  * Returns an array with the child blocks of a given block.
  *

packages/blocks/src/store/test/reducer.js

@@ -13,6 +13,7 @@ import {
 	defaultBlockName,
 	freeformFallbackBlockName,
 	unregisteredFallbackBlockName,
+	groupingBlockName,
 	DEFAULT_CATEGORIES,
 } from '../reducer';
 
@@ -183,6 +184,30 @@ describe( 'freeformFallbackBlockName', () => {
 	} );
 } );
 
+describe( 'groupingBlockName', () => {
+	it( 'should return null as default state', () => {
+		expect( groupingBlockName( undefined, {} ) ).toBeNull();
+	} );
+
+	it( 'should set the grouping block name', () => {
+		const state = groupingBlockName( null, {
+			type: 'SET_GROUPING_BLOCK_NAME',
+			name: 'core/group',
+		} );
+
+		expect( state ).toBe( 'core/group' );
+	} );
+
+	it( 'should reset the group fallback block name', () => {
+		const state = groupingBlockName( 'core/group', {
+			type: 'REMOVE_BLOCK_TYPES',
+			names: [ 'core/group' ],
+		} );
+
+		expect( state ).toBeNull();
+	} );
+} );
+
 describe( 'unregisteredFallbackBlockName', () => {
 	it( 'should return null as default state', () => {
 		expect( unregisteredFallbackBlockName( undefined, {} ) ).toBeNull();

packages/blocks/src/store/test/selectors.js

@@ -4,6 +4,7 @@
 import {
 	getChildBlockNames,
 	isMatchingSearchTerm,
+	getGroupingBlockName,
 } from '../selectors';
 
 describe( 'selectors', () => {
@@ -199,4 +200,14 @@ describe( 'selectors', () => {
 			} );
 		} );
 	} );
+
+	describe( 'getGroupingBlockName', () => {
+		it( 'returns the grouping block name from state', () => {
+			const state = {
+				groupingBlockName: 'core/group',
+			};
+
+			expect( getGroupingBlockName( state ) ).toEqual( 'core/group' );
+		} );
+	} );
 } );