@wordpress/block-editor 15.21.0 → 15.22.1-next.v.202606191442.0

package/src/components/rich-text/index.js

@@ -51,36 +51,6 @@ inputEventContext.displayName = 'inputEventContext';
 
 const instanceIdKey = Symbol( 'instanceId' );
 
-/**
- * Removes props used for the native version of RichText so that they are not
- * passed to the DOM element and log warnings.
- *
- * @param {Object} props Props to filter.
- *
- * @return {Object} Filtered props.
- */
-function removeNativeProps( props ) {
-	const {
-		__unstableMobileNoFocusOnMount,
-		deleteEnter,
-		placeholderTextColor,
-		textAlign,
-		selectionColor,
-		tagsToEliminate,
-		disableEditingMenu,
-		fontSize,
-		fontFamily,
-		fontWeight,
-		fontStyle,
-		minWidth,
-		maxWidth,
-		disableSuggestions,
-		disableAutocorrection,
-		...restProps
-	} = props;
-	return restProps;
-}
-
 export function RichTextWrapper(
 	{
 		children,
@@ -113,8 +83,6 @@ export function RichTextWrapper(
 	},
 	forwardedRef
 ) {
-	props = removeNativeProps( props );
-
 	if ( onSplit ) {
 		deprecated( 'wp.blockEditor.RichText onSplit prop', {
 			since: '6.4',
@@ -532,7 +500,7 @@ const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
 			__unstableAllowPrefixTransformations,
 			readOnly,
 			...contentProps
-		} = removeNativeProps( props );
+		} = props;
 		return (
 			<Tag
 				ref={ ref }

package/src/components/unit-control/README.md

@@ -1,6 +1,6 @@
 # UnitControl
 
-UnitControl component allows the user to set a value as well as a unit (e.g. `px`). The allowed units are derived from the (experimental) `theme.json` settings file .
+UnitControl component allows the user to set a value as well as a unit (e.g. `px`). The allowed units are derived from the (experimental) `theme.json` settings file.
 
 ```js
 // theme.json

package/src/components/url-popover/README.md

@@ -123,7 +123,7 @@ drawer.
 ## Useful UI pieces
 
 The URLPopover exposes two components that may be used as child components to make the UI creation process easier.
-Although in the editor these components are used inside URLPopover and they were built with URLPopover use cases in mind, it maybe is possible and perfectly fine to use them standalone if they fit a use-case.
+Although in the editor these components are used inside URLPopover and they were built with URLPopover use cases in mind, it may be possible and perfectly fine to use them standalone if they fit a use-case.
 
 ### LinkViewer
 

package/src/components/use-block-commands/index.js

@@ -93,8 +93,8 @@ const getTransformCommands = () =>
 		}
 
 		// Simple block transformation based on the `Block Transforms` API.
-		function onBlockTransform( name ) {
-			const newBlocks = switchToBlockType( blocks, name );
+		function onBlockTransform( name, variationName ) {
+			const newBlocks = switchToBlockType( blocks, name, variationName );
 			replaceBlocks( clientIds, newBlocks );
 			selectForMultipleBlocks( newBlocks );
 		}
@@ -117,7 +117,7 @@ const getTransformCommands = () =>
 
 		const commands = possibleBlockTransformations.map(
 			( transformation ) => {
-				const { name, title, icon } = transformation;
+				const { id, name, title, icon, variationName } = transformation;
 				/*
 				 * Command menu uses Icon from @wordpress/icons, which expects a ReactElement
 				 * (cloneElement). Normalize to blockDefaultIcon to avoid crash. See #55668 / PR #55676.
@@ -132,13 +132,13 @@ const getTransformCommands = () =>
 				return {
 					name:
 						'core/block-editor/transform-to-' +
-						name.replace( '/', '-' ),
+						( id || name ).replace( /\//g, '-' ),
 					/* translators: %s: Block or block variation name. */
 					label: sprintf( __( 'Transform to %s' ), title ),
 					icon: blockIcon?.src,
 					category: 'command',
 					callback: ( { close } ) => {
-						onBlockTransform( name );
+						onBlockTransform( name, variationName );
 						close();
 					},
 				};

package/src/hooks/anchor.js

@@ -5,7 +5,6 @@ import { addFilter } from '@wordpress/hooks';
 import { TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -53,8 +52,6 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 		return null;
 	}
 
-	const isWeb = Platform.OS === 'web';
-
 	return (
 		<InspectorControls group="advanced">
 			<TextControl
@@ -65,23 +62,18 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 					<>
 						{ __(
 							'Enter a word or two—without spaces—to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'
-						) }
-						{ isWeb && (
-							<>
-								{ ' ' }
-								<ExternalLink
-									href={ __(
-										'https://wordpress.org/documentation/article/page-jumps/'
-									) }
-								>
-									{ __( 'Learn more about anchors' ) }
-								</ExternalLink>
-							</>
-						) }
+						) }{ ' ' }
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/documentation/article/page-jumps/'
+							) }
+						>
+							{ __( 'Learn more about anchors' ) }
+						</ExternalLink>
 					</>
 				}
 				value={ anchor || '' }
-				placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
+				placeholder={ null }
 				onChange={ ( nextValue ) => {
 					nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
 					setAttributes( {

package/src/hooks/block-fields/index.js

@@ -14,6 +14,7 @@ import { useContext, useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { replacePatternOverridesDefaultBinding } from '../../utils/block-bindings';
 import BlockContext from '../../components/block-context';
 import BlockIcon from '../../components/block-icon';
 import useBlockDisplayTitle from '../../components/block-title/use-block-display-title';
@@ -80,15 +81,39 @@ function BlockFields( {
 				return _attributes;
 			}
 
+			/*
+			 * The pattern overrides `__default` binding is a placeholder, not
+			 * a real attribute: expand it to the block's bindable attributes
+			 * before resolving values, as other bindings consumers do.
+			 */
+			const { __experimentalBlockBindingsSupportedAttributes } =
+				select( blockEditorStore ).getSettings();
+			const bindableAttributes =
+				__experimentalBlockBindingsSupportedAttributes?.[
+					blockType?.name
+				];
+			const bindings = bindableAttributes
+				? replacePatternOverridesDefaultBinding(
+						_attributes.metadata.bindings,
+						bindableAttributes
+				  )
+				: _attributes.metadata.bindings;
+
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			return Object.entries( _attributes.metadata.bindings ).reduce(
+			return Object.entries( bindings ).reduce(
 				( acc, [ attribute, binding ] ) => {
+					// Skip a `__default` binding that could not be expanded:
+					// it is not a real block attribute.
+					if ( attribute === '__default' ) {
+						return acc;
+					}
 					const source = getBlockBindingsSource( binding.source );
 					if ( ! source ) {
 						return acc;
 					}
 					const values = source.getValues( {
 						select,
+						clientId,
 						context: blockContext,
 						bindings: { [ attribute ]: binding },
 					} );
@@ -97,7 +122,7 @@ function BlockFields( {
 				_attributes
 			);
 		},
-		[ blockContext, clientId ]
+		[ blockContext, clientId, blockType?.name ]
 	);
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );

package/src/hooks/border.js

@@ -8,7 +8,7 @@ import clsx from 'clsx';
  */
 import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
 import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
-import { Platform, useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -217,10 +217,6 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
  * @return {boolean} Whether there is support.
  */
 export function hasBorderSupport( blockName, feature = 'any' ) {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );
 
 	if ( support === true ) {

package/src/hooks/color.js

@@ -8,7 +8,7 @@ import clsx from 'clsx';
  */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, Platform, useCallback } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -55,10 +55,6 @@ const hasColorSupport = ( blockNameOrType ) => {
 };
 
 const hasLinkColorSupport = ( blockType ) => {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
 	return (
@@ -342,7 +338,6 @@ export function ColorEdit( {
 
 	const enableContrastChecking =
 		! isStateSelected &&
-		Platform.OS === 'web' &&
 		! value?.color?.gradient &&
 		( settings?.color?.text || settings?.color?.link ) &&
 		// Contrast checking is enabled by default.

package/src/hooks/dimensions.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Platform, useState, useEffect, useCallback } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
@@ -171,10 +171,6 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
  * @return {boolean} Whether there is support.
  */
 export function hasDimensionsSupport( blockName, feature = 'any' ) {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const support = getBlockSupport( blockName, DIMENSIONS_SUPPORT_KEY );
 
 	if ( support === true ) {
@@ -194,6 +190,14 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
+export function isExplicitAspectRatio( aspectRatio ) {
+	if ( ! aspectRatio ) {
+		return false;
+	}
+
+	return `${ aspectRatio }`.trim().toLowerCase() !== 'auto';
+}
+
 export default {
 	useBlockProps,
 	attributeKeys: [ 'height', 'minHeight', 'width', 'style' ],
@@ -210,8 +214,11 @@ function useBlockProps( { name, height, minHeight, style } ) {
 		return {};
 	}
 
+	const hasExplicitAspectRatio = isExplicitAspectRatio(
+		style?.dimensions?.aspectRatio
+	);
 	const className = clsx( {
-		'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
+		'has-aspect-ratio': hasExplicitAspectRatio,
 	} );
 
 	// Allow dimensions-based inline style overrides to override any global styles rules that
@@ -219,12 +226,12 @@ function useBlockProps( { name, height, minHeight, style } ) {
 	const inlineStyleOverrides = {};
 
 	// Apply rules to unset incompatible styles.
-	// Note that a set `aspectRatio` will win out if both an aspect ratio and height-related properties are set.
+	// Note that an explicit `aspectRatio` will win out if both an aspect ratio and height-related properties are set.
 	// This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio
 	// that is set should be intentional and should override any existing height properties. The Cover block
 	// and dimensions controls have logic that will manually clear the aspect ratio if height properties
 	// are set.
-	if ( style?.dimensions?.aspectRatio ) {
+	if ( hasExplicitAspectRatio ) {
 		// To ensure the aspect ratio does not get overridden by `minHeight` or `height` unset any existing rule.
 		inlineStyleOverrides.minHeight = 'unset';
 		inlineStyleOverrides.height = 'unset';

package/src/hooks/fit-text.js

@@ -23,6 +23,7 @@ import { store as blockEditorStore } from '../store';
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 import InspectorControls from '../components/inspector-controls';
 import FitTextSizeWarning from '../components/fit-text-size-warning';
+import { unlock } from '../lock-unlock';
 
 export const FIT_TEXT_SUPPORT_KEY = 'typography.fitText';
 
@@ -248,9 +249,24 @@ export function FitTextControl( {
 	fontSize,
 	style,
 } ) {
+	const hasSelectedStyleState = useSelect(
+		( select ) => {
+			const { hasSelectedStyleState: hasSelectedBlockStyleState } =
+				unlock( select( blockEditorStore ) );
+
+			return hasSelectedBlockStyleState( clientId );
+		},
+		[ clientId ]
+	);
+
 	if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
 		return null;
 	}
+
+	if ( hasSelectedStyleState ) {
+		return null;
+	}
+
 	return (
 		<ToolsPanelItem
 			hasValue={ () => fitText }

package/src/hooks/layout-child.js

@@ -28,6 +28,24 @@ const RESPONSIVE_BREAKPOINTS = {
 	tablet: '@media (480px < width <= 782px)',
 };
 
+// These are the serialized `selfStretch` values. `max` used to be called
+// "Fixed" in the UI, but was renamed and replaced by `fixedNoShrink`.
+const FLEX_CHILD_LAYOUT_VALUES = {
+	fit: 'fit',
+	grow: 'fill',
+	max: 'fixed',
+	fixed: 'fixedNoShrink',
+};
+
+const FLEX_SIZE_VALUES = [
+	FLEX_CHILD_LAYOUT_VALUES.max,
+	FLEX_CHILD_LAYOUT_VALUES.fixed,
+];
+
+function isFlexSizeValue( value ) {
+	return FLEX_SIZE_VALUES.includes( value );
+}
+
 function serializeRule( { selector, declarations } ) {
 	return `${ selector } {
 		${ Object.entries( declarations )
@@ -60,6 +78,7 @@ export function getChildLayoutStyleRules( {
 		columnSpan,
 		rowSpan,
 	} = effectiveLayout;
+	const baseSelfStretch = layout.selfStretch;
 	const { columnCount, minimumColumnWidth } = parentLayout;
 	const rules = [];
 
@@ -69,10 +88,30 @@ export function getChildLayoutStyleRules( {
 		hasViewportOverride( 'selfStretch' ) ||
 		hasViewportOverride( 'flexSize' )
 	) {
-		if ( selfStretch === 'fixed' && flexSize ) {
+		if (
+			hasViewportOverrides &&
+			( selfStretch === FLEX_CHILD_LAYOUT_VALUES.fit ||
+				selfStretch === FLEX_CHILD_LAYOUT_VALUES.grow ) &&
+			isFlexSizeValue( baseSelfStretch ) &&
+			layout.flexSize
+		) {
+			declarations[ 'flex-basis' ] = 'unset';
+			if ( baseSelfStretch === FLEX_CHILD_LAYOUT_VALUES.fixed ) {
+				declarations[ 'flex-shrink' ] = 'unset';
+			}
+		}
+		if ( isFlexSizeValue( selfStretch ) && flexSize ) {
 			declarations[ 'flex-basis' ] = flexSize;
+			if ( selfStretch === FLEX_CHILD_LAYOUT_VALUES.fixed ) {
+				declarations[ 'flex-shrink' ] = '0';
+			} else if (
+				hasViewportOverrides &&
+				baseSelfStretch === FLEX_CHILD_LAYOUT_VALUES.fixed
+			) {
+				declarations[ 'flex-shrink' ] = 'unset';
+			}
 			declarations[ 'box-sizing' ] = 'border-box';
-		} else if ( selfStretch === 'fill' ) {
+		} else if ( selfStretch === FLEX_CHILD_LAYOUT_VALUES.grow ) {
 			declarations[ 'flex-grow' ] = '1';
 		}
 	}

package/src/hooks/list-view.js

@@ -50,26 +50,25 @@ export function ListViewPanel( { clientId, name } ) {
 		useDispatch( blockEditorStore )
 	);
 
-	const isEnabled = hasListViewSupport( name );
-	const { hasChildren, isNestedListView } = useSelect(
+	const { isEnabled, hasChildren, isNestedListView } = useSelect(
 		( select ) => {
-			const { getBlockCount, getBlockParents, getBlockName } =
-				select( blockEditorStore );
+			const {
+				getBlockCount,
+				getBlockParents,
+				shouldRenderBlockListView,
+			} = unlock( select( blockEditorStore ) );
 
 			// Avoid showing List Views for both parent and child blocks that have support.
 			// In this situation the parent will show the child in its list already.
 			// Search parents to see if there's one that also has support, and if so skip rendering.
 			// This matches closely the logic in the `BlockCard` component.
 			const parents = getBlockParents( clientId, false );
-			const _isNestedListView = parents.find( ( parentId ) => {
-				const parentName = getBlockName( parentId );
-				return (
-					parentName === 'core/navigation' ||
-					hasBlockSupport( parentName, 'listView' )
-				);
-			} );
+			const _isNestedListView = parents.find( ( parentId ) =>
+				shouldRenderBlockListView( parentId )
+			);
 
 			return {
+				isEnabled: shouldRenderBlockListView( clientId ),
 				hasChildren: !! getBlockCount( clientId ),
 				isNestedListView: _isNestedListView,
 			};

package/src/hooks/position.js

@@ -11,7 +11,7 @@ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { BaseControl, CustomSelectControl } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useMemo, Platform } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -264,32 +264,28 @@ export function PositionPanelPure( {
 		: DEFAULT_OPTION;
 
 	// Only display position controls if there is at least one option to choose from.
-	return Platform.select( {
-		web:
-			options.length > 1 ? (
-				<InspectorControls group="position">
-					<BaseControl help={ stickyHelpText }>
-						<CustomSelectControl
-							__next40pxDefaultSize
-							label={ __( 'Position' ) }
-							hideLabelFromVision
-							describedBy={ sprintf(
-								// translators: %s: Currently selected position.
-								__( 'Currently selected position: %s' ),
-								selectedOption.name
-							) }
-							options={ options }
-							value={ selectedOption }
-							onChange={ ( { selectedItem } ) => {
-								onChangeType( selectedItem.value );
-							} }
-							size="__unstable-large"
-						/>
-					</BaseControl>
-				</InspectorControls>
-			) : null,
-		native: null,
-	} );
+	return options.length > 1 ? (
+		<InspectorControls group="position">
+			<BaseControl help={ stickyHelpText }>
+				<CustomSelectControl
+					__next40pxDefaultSize
+					label={ __( 'Position' ) }
+					hideLabelFromVision
+					describedBy={ sprintf(
+						// translators: %s: Currently selected position.
+						__( 'Currently selected position: %s' ),
+						selectedOption.name
+					) }
+					options={ options }
+					value={ selectedOption }
+					onChange={ ( { selectedItem } ) => {
+						onChangeType( selectedItem.value );
+					} }
+					size="__unstable-large"
+				/>
+			</BaseControl>
+		</InspectorControls>
+	) : null;
 }
 
 export default {

package/src/hooks/style.js

@@ -29,6 +29,7 @@ import {
 	DIMENSIONS_SUPPORT_KEY,
 	SPACING_SUPPORT_KEY,
 	DimensionsPanel,
+	isExplicitAspectRatio,
 } from './dimensions';
 import {
 	cleanEmptyObject,
@@ -134,6 +135,72 @@ function getStateFallbackBorderStyles( stateStyles ) {
 	return cleanEmptyObject( { border: cleanEmptyObject( fallbackBorder ) } );
 }
 
+/**
+ * Returns background reset CSS for a state that sets a solid background color.
+ *
+ * When a state sets `color.background` (a solid color) without also setting a
+ * gradient (`color.gradient` or `background.gradient`), any gradient applied to
+ * the default state via an inline `background` shorthand or `background-image`
+ * declaration must be explicitly cleared. Without this, the gradient image layer
+ * remains visible even though the solid hover color wins `background-color`.
+ *
+ * @param {Object} stateStyles State style object.
+ * @param {string} selector    CSS selector for the generated style.
+ * @return {string|undefined} CSS string with background-image reset, or undefined.
+ */
+function getStateBackgroundResetCSS( stateStyles, selector ) {
+	const hasSolidBackground = !! stateStyles?.color?.background;
+
+	if ( ! hasSolidBackground ) {
+		return undefined;
+	}
+
+	const hasColorGradient = !! stateStyles?.color?.gradient;
+	const hasBackgroundGradient =
+		!! stateStyles?.background?.gradient ||
+		!! stateStyles?.background?.backgroundImage;
+
+	if ( hasColorGradient || hasBackgroundGradient ) {
+		return undefined;
+	}
+
+	const declaration = 'background-image: unset !important';
+	return selector
+		? `${ selector } { ${ declaration }; }`
+		: `${ declaration };`;
+}
+
+/**
+ * Returns fallback dimension styles that keep state styles aligned with the
+ * default dimensions block-support output.
+ *
+ * @param {Object} stateStyles State style object.
+ * @return {Object|undefined} Style object containing fallback dimension styles.
+ */
+function getStateFallbackDimensionStyles( stateStyles ) {
+	const dimensions = stateStyles?.dimensions;
+	if ( ! dimensions ) {
+		return undefined;
+	}
+
+	if ( isExplicitAspectRatio( dimensions.aspectRatio ) ) {
+		return {
+			dimensions: {
+				minHeight: 'unset',
+				height: 'unset',
+			},
+		};
+	}
+
+	if ( dimensions.minHeight || dimensions.height ) {
+		return {
+			dimensions: {
+				aspectRatio: 'unset',
+			},
+		};
+	}
+}
+
 /**
  * Generates CSS for a block instance state style object.
  *
@@ -146,14 +213,25 @@ function getStateFallbackBorderStyles( stateStyles ) {
  * @return {string} Generated stylesheet.
  */
 export function getStateStylesCSS( stateStyles, selector ) {
-	const css = compileCSS( stateStyles, { selector } );
+	const fallbackDimensionStyles =
+		getStateFallbackDimensionStyles( stateStyles );
+	const stylesWithDimensionFallbacks = fallbackDimensionStyles
+		? mergeStyleObjects( stateStyles, fallbackDimensionStyles )
+		: stateStyles;
+	const css = compileCSS( stylesWithDimensionFallbacks, { selector } );
 	const importantCSS = css ? css.replace( /;/g, ' !important;' ) : undefined;
 	const fallbackBorderStyles = getStateFallbackBorderStyles( stateStyles );
 	const fallbackCSS = fallbackBorderStyles
 		? compileCSS( fallbackBorderStyles, { selector } )
 		: undefined;
+	const backgroundResetCSS = getStateBackgroundResetCSS(
+		stateStyles,
+		selector
+	);
 
-	return [ importantCSS, fallbackCSS ].filter( Boolean ).join( '\n' );
+	return [ importantCSS, fallbackCSS, backgroundResetCSS ]
+		.filter( Boolean )
+		.join( '\n' );
 }
 
 function isPlainObject( value ) {

package/src/hooks/supports.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { Platform } from '@wordpress/element';
 
 const ALIGN_SUPPORT_KEY = 'align';
 const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
@@ -120,10 +119,6 @@ export const getAlignWideSupport = ( nameOrType ) =>
  * @return {boolean} Whether there is support.
  */
 export function hasBorderSupport( nameOrType, feature = 'any' ) {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const support = getBlockSupport( nameOrType, BORDER_SUPPORT_KEY );
 
 	if ( support === true ) {
@@ -177,10 +172,6 @@ export const hasColorSupport = ( nameOrType ) => {
  * @return {boolean} Whether the block supports the feature.
  */
 export const hasLinkColorSupport = ( nameOrType ) => {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
 	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
 
 	return (