Extract the getSupportedStyles selector to the blocks store as a priv…

…ate selector (#47606)

packages/blocks/package.json

@@ -37,6 +37,7 @@
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/dom": "file:../dom",
 		"@wordpress/element": "file:../element",
+		"@wordpress/experiments": "file:../experiments",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",

packages/blocks/src/api/raw-handling/test/utils.js

@@ -3,47 +3,15 @@
  */
 import deepFreeze from 'deep-freeze';
 
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
 import { getBlockContentSchemaFromTransforms, isPlain } from '../utils';
-import { store as mockStore } from '../../../store';
-import { STORE_NAME as mockStoreName } from '../../../store/constants';
-
-jest.mock( '@wordpress/data', () => {
-	return {
-		select: jest.fn( ( store ) => {
-			switch ( store ) {
-				case [ mockStoreName ]:
-				case mockStore: {
-					return {
-						hasBlockSupport: ( blockName, supports ) => {
-							return (
-								blockName === 'core/paragraph' &&
-								supports === 'anchor'
-							);
-						},
-					};
-				}
-			}
-		} ),
-		combineReducers: () => {
-			const mock = jest.fn();
-			return mock;
-		},
-		createReduxStore: () => {
-			const mock = jest.fn();
-			return mock;
-		},
-		register: () => {
-			const mock = jest.fn();
-			return mock;
-		},
-		createRegistryControl() {
-			return jest.fn();
-		},
-	};
-} );
 
 describe( 'isPlain', () => {
 	it( 'should return true for plain text', () => {
@@ -65,6 +33,19 @@ describe( 'isPlain', () => {
 } );
 
 describe( 'getBlockContentSchema', () => {
+	beforeAll( () => {
+		registerBlockType( 'core/paragraph', {
+			title: 'Paragraph',
+			supports: {
+				anchor: true,
+			},
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( 'core/paragraph' );
+	} );
+
 	const myContentSchema = {
 		strong: {},
 		em: {},

packages/blocks/src/experiments.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/blocks'
+	);

packages/blocks/src/store/index.js

@@ -8,8 +8,10 @@ import { createReduxStore, register } from '@wordpress/data';
  */
 import reducer from './reducer';
 import * as selectors from './selectors';
+import * as privateSelectors from './private-selectors';
 import * as actions from './actions';
 import { STORE_NAME } from './constants';
+import { unlock } from '../experiments';
 
 /**
  * Store definition for the blocks namespace.
@@ -25,3 +27,4 @@ export const store = createReduxStore( STORE_NAME, {
 } );
 
 register( store );
+unlock( store ).registerPrivateSelectors( privateSelectors );

packages/blocks/src/store/private-selectors.js

@@ -0,0 +1,155 @@
+/**
+ * External dependencies
+ */
+import createSelector from 'rememo';
+import { get } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { getBlockType } from './selectors';
+import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY } from '../api/constants';
+
+const ROOT_BLOCK_SUPPORTS = [
+	'background',
+	'backgroundColor',
+	'color',
+	'linkColor',
+	'buttonColor',
+	'fontFamily',
+	'fontSize',
+	'fontStyle',
+	'fontWeight',
+	'lineHeight',
+	'padding',
+	'contentSize',
+	'wideSize',
+	'blockGap',
+	'textDecoration',
+	'textTransform',
+	'letterSpacing',
+];
+
+/**
+ * Filters the list of supported styles for a given element.
+ *
+ * @param {string[]}         blockSupports list of supported styles.
+ * @param {string|undefined} name          block name.
+ * @param {string|undefined} element       element name.
+ *
+ * @return {string[]} filtered list of supported styles.
+ */
+function filterElementBlockSupports( blockSupports, name, element ) {
+	return blockSupports.filter( ( support ) => {
+		if ( support === 'fontSize' && element === 'heading' ) {
+			return false;
+		}
+
+		// This is only available for links
+		if ( support === 'textDecoration' && ! name && element !== 'link' ) {
+			return false;
+		}
+
+		// This is only available for heading
+		if (
+			support === 'textTransform' &&
+			! name &&
+			! [ 'heading', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ].includes(
+				element
+			)
+		) {
+			return false;
+		}
+
+		// This is only available for headings
+		if (
+			support === 'letterSpacing' &&
+			! name &&
+			! [ 'heading', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ].includes(
+				element
+			)
+		) {
+			return false;
+		}
+
+		return true;
+	} );
+}
+
+/**
+ * Returns the list of supported styles for a given block name and element.
+ */
+export const getSupportedStyles = createSelector(
+	( state, name, element ) => {
+		if ( ! name ) {
+			return filterElementBlockSupports(
+				ROOT_BLOCK_SUPPORTS,
+				name,
+				element
+			);
+		}
+
+		const blockType = getBlockType( state, name );
+
+		if ( ! blockType ) {
+			return [];
+		}
+
+		const supportKeys = [];
+
+		// Check for blockGap support.
+		// Block spacing support doesn't map directly to a single style property, so needs to be handled separately.
+		// Also, only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
+		if (
+			blockType?.supports?.spacing?.blockGap &&
+			blockType?.supports?.spacing?.__experimentalSkipSerialization !==
+				true &&
+			! blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
+				( spacingType ) => spacingType === 'blockGap'
+			)
+		) {
+			supportKeys.push( 'blockGap' );
+		}
+
+		// check for shadow support
+		if ( blockType?.supports?.shadow ) {
+			supportKeys.push( 'shadow' );
+		}
+
+		Object.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {
+			if ( ! STYLE_PROPERTY[ styleName ].support ) {
+				return;
+			}
+
+			// Opting out means that, for certain support keys like background color,
+			// blocks have to explicitly set the support value false. If the key is
+			// unset, we still enable it.
+			if ( STYLE_PROPERTY[ styleName ].requiresOptOut ) {
+				if (
+					STYLE_PROPERTY[ styleName ].support[ 0 ] in
+						blockType.supports &&
+					get(
+						blockType.supports,
+						STYLE_PROPERTY[ styleName ].support
+					) !== false
+				) {
+					supportKeys.push( styleName );
+					return;
+				}
+			}
+
+			if (
+				get(
+					blockType.supports,
+					STYLE_PROPERTY[ styleName ].support,
+					false
+				)
+			) {
+				supportKeys.push( styleName );
+			}
+		} );
+
+		return filterElementBlockSupports( supportKeys, name, element );
+	},
+	( state, name ) => [ state.blockTypes[ name ] ]
+);