Refactor individual feature support checks

WordPress · Mar 24, 2021 · 0f3b345 · 0f3b345
1 parent 4374a77
commit 0f3b345
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 64 deletions.
diff --git a/packages/block-editor/src/hooks/border-color.js b/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;
  }
 

diff --git a/packages/block-editor/src/hooks/border-radius.js b/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;
 }
diff --git a/packages/block-editor/src/hooks/border-style.js b/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;
 };
diff --git a/packages/block-editor/src/hooks/border-width.js b/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;
 };
diff --git a/packages/block-editor/src/hooks/border.js b/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.