PostTypeSupportCheck: Handle support keys sub-features

Author: Mamaduka

packages/editor/src/components/post-type-support-check/index.js

@@ -9,6 +9,22 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+function checkSupport( supports = {}, key ) {
+	// Check for top-level support keys.
+	if ( supports[ key ] !== undefined ) {
+		return !! supports[ key ];
+	}
+
+	const [ topKey, subKey ] = key.split( '.' );
+	const [ subProperties ] = Array.isArray( supports[ topKey ] )
+		? supports[ topKey ]
+		: [];
+
+	return Array.isArray( subProperties )
+		? subProperties.includes( subKey )
+		: !! subProperties?.[ subKey ];
+}
+
 /**
  * A component which renders its own children only if the current editor post
  * type supports one of the given `supportKeys` prop.
@@ -31,7 +47,7 @@ function PostTypeSupportCheck( { children, supportKeys } ) {
 	if ( postType ) {
 		isSupported = (
 			Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
-		).some( ( key ) => !! postType.supports[ key ] );
+		).some( ( key ) => checkSupport( postType.supports, key ) );
 	}
 
 	if ( ! isSupported ) {

packages/editor/src/components/post-type-support-check/test/index.js

@@ -96,4 +96,41 @@ describe( 'PostTypeSupportCheck', () => {
 
 		expect( container ).not.toHaveTextContent( 'Supported' );
 	} );
+
+	it( 'renders its children when post type supports a sub-feature', () => {
+		setupUseSelectMock( {
+			supports: {
+				editor: [ [ 'block-comments' ] ],
+			},
+		} );
+		const { container } = render(
+			<PostTypeSupportCheck supportKeys="editor.block-comments">
+				Supported
+			</PostTypeSupportCheck>
+		);
+
+		expect( container ).toHaveTextContent( 'Supported' );
+	} );
+
+	it( 'renders its children when post type supports some of the sub-features', () => {
+		setupUseSelectMock( {
+			supports: {
+				editor: [ [ 'block-comments' ] ],
+				test: [
+					{
+						example: false,
+					},
+				],
+			},
+		} );
+		const { container } = render(
+			<PostTypeSupportCheck
+				supportKeys={ [ 'editor.block-comments', 'test.example' ] }
+			>
+				Supported
+			</PostTypeSupportCheck>
+		);
+
+		expect( container ).toHaveTextContent( 'Supported' );
+	} );
 } );