Refactor individual feature support checks

packages/block-editor/src/hooks/border-color.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,10 +18,9 @@ import {
 	getColorObjectByColorValue,
 } from '../components/colors';
 import useEditorFeature from '../components/use-editor-feature';
-import { BORDER_SUPPORT_KEY } from './border';
+import { hasBorderFeatureSupport } from './border';
 import { cleanEmptyObject } from './utils';
 
-const BORDER_COLOR_SUPPORT_KEY = 'color';
 const EMPTY_ARRAY = [];
 
 /**
@@ -82,17 +80,6 @@ export function BorderColorEdit( props ) {
 	);
 }
 
-/**
- * Determines if there is border color support.
- *
- * @param  {string|Object} blockType Block name or Block Type object.
- * @return {boolean}                 Whether there is support.
- */
-export function hasBorderColorSupport( blockType ) {
-	const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
-	return !! ( true === support || support?.color );
-}
-
 /**
  * Custom hook that checks if border color settings have been disabled.
  *
@@ -101,7 +88,7 @@ export function hasBorderColorSupport( blockType ) {
  */
 export function useIsBorderColorDisabled( { name: blockName } = {} ) {
 	const isDisabled = ! useEditorFeature( 'border.customColor' );
-	return ! hasBorderColorSupport( blockName ) || isDisabled;
+	return ! hasBorderFeatureSupport( 'color', blockName ) || isDisabled;
 }
 
 /**
@@ -112,7 +99,7 @@ export function useIsBorderColorDisabled( { name: blockName } = {} ) {
  * @return {Object}          Updated block settings.
  */
 function addAttributes( settings ) {
-	if ( ! hasBorderColorSupport( settings ) ) {
+	if ( ! hasBorderFeatureSupport( 'color', settings ) ) {
 		return settings;
 	}
 
@@ -142,7 +129,7 @@ function addAttributes( settings ) {
  * @return {Object}            Filtered props to apply to save element.
  */
 function addSaveProps( props, blockType, attributes ) {
-	if ( ! hasBlockSupport( blockType, BORDER_COLOR_SUPPORT_KEY ) ) {
+	if ( ! hasBorderFeatureSupport( 'color', blockType ) ) {
 		return props;
 	}
 
@@ -167,7 +154,7 @@ function addSaveProps( props, blockType, attributes ) {
  * @return {Object}         Filtered block settings.
  */
 function addEditProps( settings ) {
-	if ( ! hasBlockSupport( settings, BORDER_COLOR_SUPPORT_KEY ) ) {
+	if ( ! hasBorderFeatureSupport( 'color', settings ) ) {
 		return settings;
 	}
 

packages/block-editor/src/hooks/border-radius.js

@@ -1,15 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { getBlockSupport } from '@wordpress/blocks';
 import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useEditorFeature from '../components/use-editor-feature';
-import { BORDER_SUPPORT_KEY } from './border';
+import { hasBorderFeatureSupport } from './border';
 import { cleanEmptyObject } from './utils';
 
 const MIN_BORDER_RADIUS_VALUE = 0;
@@ -60,17 +59,6 @@ export function BorderRadiusEdit( props ) {
 	);
 }
 
-/**
- * Determines if there is border radius support.
- *
- * @param  {string|Object} blockType Block name or Block Type object.
- * @return {boolean}                 Whether there is support.
- */
-export function hasBorderRadiusSupport( blockType ) {
-	const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
-	return !! ( true === support || support?.radius );
-}
-
 /**
  * Custom hook that checks if border radius settings have been disabled.
  *
@@ -79,5 +67,5 @@ export function hasBorderRadiusSupport( blockType ) {
  */
 export function useIsBorderRadiusDisabled( { name: blockName } = {} ) {
 	const isDisabled = ! useEditorFeature( 'border.customRadius' );
-	return ! hasBorderRadiusSupport( blockName ) || isDisabled;
+	return ! hasBorderFeatureSupport( 'radius', blockName ) || isDisabled;
 }

packages/block-editor/src/hooks/border-style.js

@@ -1,14 +1,9 @@
-/**
- * WordPress dependencies
- */
-import { getBlockSupport } from '@wordpress/blocks';
-
 /**
  * Internal dependencies
  */
 import BorderStyleControl from '../components/border-style-control';
 import useEditorFeature from '../components/use-editor-feature';
-import { BORDER_SUPPORT_KEY } from './border';
+import { hasBorderFeatureSupport } from './border';
 import { cleanEmptyObject } from './utils';
 
 /**
@@ -47,17 +42,6 @@ export const BorderStyleEdit = ( props ) => {
 	);
 };
 
-/**
- * Determines if there is border style support.
- *
- * @param  {string|Object} blockType Block name or block type object.
- * @return {boolean}                 Whether there is support.
- */
-export const hasBorderStyleSupport = ( blockType ) => {
-	const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
-	return !! ( true === support || support?.style );
-};
-
 /**
  * Custom hook that checks if border style settings have been disabled.
  *
@@ -66,5 +50,5 @@ export const hasBorderStyleSupport = ( blockType ) => {
  */
 export const useIsBorderStyleDisabled = ( { name: blockName } = {} ) => {
 	const isDisabled = ! useEditorFeature( 'border.customStyle' );
-	return ! hasBorderStyleSupport( blockName ) || isDisabled;
+	return ! hasBorderFeatureSupport( 'style', blockName ) || isDisabled;
 };

packages/block-editor/src/hooks/border-width.js

@@ -1,15 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { getBlockSupport } from '@wordpress/blocks';
 import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useEditorFeature from '../components/use-editor-feature';
-import { BORDER_SUPPORT_KEY } from './border';
+import { hasBorderFeatureSupport } from './border';
 import { cleanEmptyObject } from './utils';
 
 const MIN_BORDER_WIDTH = 0;
@@ -56,17 +55,6 @@ export const BorderWidthEdit = ( props ) => {
 	);
 };
 
-/**
- * Determines if there is border width support.
- *
- * @param  {string|Object} blockType Block name or block type object.
- * @return {boolean}                 Whether there is support.
- */
-export const hasBorderWidthSupport = ( blockType ) => {
-	const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
-	return !! ( true === support || support?.width );
-};
-
 /**
  * Custom hook that checks if border width settings have been disabled.
  *
@@ -75,5 +63,5 @@ export const hasBorderWidthSupport = ( blockType ) => {
  */
 export const useIsBorderWidthDisabled = ( { name: blockName } = {} ) => {
 	const isDisabled = ! useEditorFeature( 'border.customWidth' );
-	return ! hasBorderWidthSupport( blockName ) || isDisabled;
+	return ! hasBorderFeatureSupport( 'width', blockName ) || isDisabled;
 };

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

@@ -59,6 +59,18 @@ export function hasBorderSupport( blockName ) {
 	);
 }
 
+/**
+ * Determines if there a specific border feature is supported.
+ *
+ * @param {string}        feature   Name of the border feature e.g.`radius`
+ * @param {string|Object} blockType Block name or block type object.
+ * @return { boolean }              Whether the border feature is supported.
+ */
+export function hasBorderFeatureSupport( feature, blockType ) {
+	const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
+	return !! ( true === support || ( support && support[ feature ] ) );
+}
+
 /**
  * Determines whether there is any block support for borders e.g. border radius,
  * style, width etc.