diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js index cf4e79c0f724e1..65d91e5bebfedb 100644 --- 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 index 7ced3df65401a6..fc074809e2706c 100644 --- a/packages/block-editor/src/hooks/border-radius.js +++ b/packages/block-editor/src/hooks/border-radius.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { getBlockSupport } from '@wordpress/blocks'; import { RangeControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -9,7 +8,7 @@ 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 index 5248ceff2e8d24..2af46c5b9ee6fa 100644 --- 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 index 3ec210319b3de0..be8afd3b1d0662 100644 --- a/packages/block-editor/src/hooks/border-width.js +++ b/packages/block-editor/src/hooks/border-width.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { getBlockSupport } from '@wordpress/blocks'; import { RangeControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -9,7 +8,7 @@ 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 index ad943ec2b1ae1f..7b4230217546eb 100644 --- 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.