Block library: Refactor color supports handling for mobile (#22502)

WordPress · May 26, 2020 · a917162 · a917162
1 parent f717994
commit a917162
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 42 deletions.
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -32,9 +32,13 @@ import ColorPanel from './color-panel';
 export const COLOR_SUPPORT_KEY = '__experimentalColor';
 
 const hasColorSupport = ( blockType ) =>
-	hasBlockSupport( blockType, COLOR_SUPPORT_KEY );
+	Platform.OS === 'web' && hasBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
 const hasGradientSupport = ( blockType ) => {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
 	return isObject( colorSupport ) && !! colorSupport.gradients;

diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
@@ -5,5 +5,16 @@
 		"verticalAlignment": {
 			"type": "string"
 		}
+	},
+	"supports": {
+		"align": [
+			"wide",
+			"full"
+		],
+		"html": false,
+		"lightBlockWrapper": true,
+		"__experimentalColor": {
+			"gradients": true
+		}
 	}
 }
diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { columns as icon } from '@wordpress/icons';
-import { Platform } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -23,12 +23,6 @@ export const settings = {
 	description: __(
 		'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.'
 	),
-	supports: {
-		align: [ 'wide', 'full' ],
-		html: false,
-		lightBlockWrapper: true,
-		__experimentalColor: Platform.OS === 'web' && { gradients: true },
-	},
 	variations,
 	example: {
 		innerBlocks: [

diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
@@ -6,5 +6,17 @@
 			"type": "string",
 			"default": "div"
 		}
+	},
+	"supports": {
+		"align": [
+			"wide",
+			"full"
+		],
+		"anchor": true,
+		"html": false,
+		"lightBlockWrapper": true,
+		"__experimentalColor": {
+			"gradients": true
+		}
 	}
 }
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import { group as icon } from '@wordpress/icons';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -88,13 +87,6 @@ export const settings = {
 			},
 		],
 	},
-	supports: {
-		align: [ 'wide', 'full' ],
-		anchor: true,
-		html: false,
-		lightBlockWrapper: true,
-		__experimentalColor: Platform.OS === 'web' && { gradients: true },
-	},
 	transforms: {
 		from: [
 			{
@@ -148,7 +140,6 @@ export const settings = {
 			},
 		],
 	},
-
 	edit,
 	save,
 	deprecated,

diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
@@ -18,5 +18,14 @@
 		"placeholder": {
 			"type": "string"
 		}
+	},
+	"supports": {
+		"className": false,
+		"anchor": true,
+		"__unstablePasteTextInline": true,
+		"lightBlockWrapper": true,
+		"__experimentalColor": true,
+		"__experimentalLineHeight": true,
+		"__experimentalFontSize": true
 	}
 }
diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
@@ -8,7 +8,6 @@ import { isEmpty } from 'lodash';
  */
 import { heading as icon } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,15 +29,6 @@ export const settings = {
 	),
 	icon,
 	keywords: [ __( 'title' ), __( 'subtitle' ) ],
-	supports: {
-		className: false,
-		anchor: true,
-		__unstablePasteTextInline: true,
-		lightBlockWrapper: true,
-		__experimentalColor: Platform.OS === 'web',
-		__experimentalLineHeight: true,
-		__experimentalFontSize: true,
-	},
 	example: {
 		attributes: {
 			content: __( 'Code is Poetry' ),

diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
@@ -76,5 +76,15 @@
 		"focalPoint": {
 			"type": "object"
 		}
+	},
+	"supports": {
+		"align": [
+			"wide",
+			"full"
+		],
+		"html": false,
+		"__experimentalColor": {
+			"gradients": true
+		}
 	}
 }
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { mediaAndText as icon } from '@wordpress/icons';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,11 +22,6 @@ export const settings = {
 	description: __( 'Set media and words side-by-side for a richer layout.' ),
 	icon,
 	keywords: [ __( 'image' ), __( 'video' ) ],
-	supports: {
-		align: [ 'wide', 'full' ],
-		html: false,
-		__experimentalColor: Platform.OS === 'web' && { gradients: true },
-	},
 	example: {
 		attributes: {
 			mediaType: 'image',

diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
@@ -25,5 +25,13 @@
 				"rtl"
 			]
 		}
+	},
+	"supports": {
+		"className": false,
+		"__unstablePasteTextInline": true,
+		"lightBlockWrapper": true,
+		"__experimentalColor": true,
+		"__experimentalLineHeight": true,
+		"__experimentalFontSize": true
 	}
 }
diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
@@ -8,7 +8,6 @@ import { isEmpty } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { paragraph as icon } from '@wordpress/icons';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -41,14 +40,6 @@ export const settings = {
 			dropCap: true,
 		},
 	},
-	supports: {
-		className: false,
-		__unstablePasteTextInline: true,
-		lightBlockWrapper: true,
-		__experimentalColor: Platform.OS === 'web',
-		__experimentalLineHeight: true,
-		__experimentalFontSize: true,
-	},
 	__experimentalLabel( attributes, { context } ) {
 		if ( context === 'accessibility' ) {
 			const { content } = attributes;