Mobile - Global styles: Block-specific styles (#30997)

* Mobile - Read global styles and set color palette and gradients * Mobile - Enable colors for blocks that support it * Parse all color variables * Mobile - Set background, title, text and link colors * Fix gradients * Add placeholder color * Add support to block styles * Add reset button in color picker * Fix placeholder colors * Fix paddings and remove Columns placeholder solid background * Don't reset paddings for inner blocks that have paddings already * Mobile - Block styles support * Add fallback text color to blocks * Adds new Prop for Global Styles Settings * Rename updateTheme to be more generic for update settings include GSS (#31566) * Fix wrong naming of subscribeUpdateEditorSettings * Update Gutenberg demo * Updates new props to rawStyles and rawFeatures * Update iOS Bridge for new values * Mobile - Global styles: Pass settings and set color palette and gradients (#30684) * Mobile - Read global styles and set color palette and gradients * Parse all color variables * Fix gradients * Update global styles mocked data * Move color settings * Removed added spaces * Add tests * Update experimental features path and prepare for rawGlobalStylesBaseStyles * Remove mock data and update code to use latest API changes * Removes Android rawFeatures prop * Mobile - Remove usage of rawFeatures * Remove rawFeatures * Adds raw Styles in React Native Bridge * Mobile - Pass rawStyles on initial props and fix colors and gradients * Add Raw Features back * Revert "Removes Android rawFeatures prop" This reverts commit 32a2b3a. * Add rawFeatures in the mobile editor * Mobile - Global styles: Set theme's background and text color (#30810) * Mobile - Read global styles and set color palette and gradients * Mobile - Enable colors for blocks that support it * Parse all color variables * Mobile - Set background, title, text and link colors * Fix gradients * Add placeholder color * Update global styles mocked data * Move color settings * Removed added spaces * Add tests * Update experimental features path and prepare for rawGlobalStylesBaseStyles * Add missing provider * Get the right color attribute * Remove mock data * Mobile - Fix base global colors * Remove old usage of useEditorFeature * Remove old mock data * Add support for block styles of the Verse block in mobile * Rename mergedStyle to style Co-authored-by: Antonis Lilis <antonis.lilis@automattic.com> Co-authored-by: Chip <chip.snyder3@gmail.com>
WordPress · Jul 7, 2021 · 0de0598 · 0de0598
1 parent 87a696e
commit 0de0598
Show file tree

Hide file tree

Showing 17 changed files with 166 additions and 57 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -58,7 +58,8 @@ function BlockForType( {
 			globalStyle,
 			wrapperProps.style,
 			attributes,
-			defaultColors
+			defaultColors,
+			name
 		);
 	}, [
 		defaultColors,
@@ -85,7 +86,7 @@ function BlockForType( {
 				// Block level styles
 				wrapperProps={ wrapperProps }
 				// inherited styles merged with block level styles
-				mergedStyle={ mergedStyle }
+				style={ mergedStyle }
 				clientId={ clientId }
 				parentWidth={ parentWidth }
 				contentStyle={ contentStyle }

diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
@@ -184,7 +184,7 @@ class ButtonEdit extends Component {
 	}
 
 	getBackgroundColor() {
-		const { attributes, colors, gradients } = this.props;
+		const { attributes, colors, gradients, style } = this.props;
 		const { backgroundColor, gradient } = attributes;
 
 		// Return named gradient value if available.
@@ -207,12 +207,13 @@ class ButtonEdit extends Component {
 			colorObject?.color ||
 			colorProps.style?.backgroundColor ||
 			colorProps.style?.background ||
+			style?.backgroundColor ||
 			styles.defaultButton.backgroundColor
 		);
 	}
 
 	getTextColor() {
-		const { attributes, colors } = this.props;
+		const { attributes, colors, style } = this.props;
 		const colorProps = getColorClassesAndStyles( attributes );
 
 		// Retrieve named color object to force inline styles for themes that
@@ -225,6 +226,7 @@ class ButtonEdit extends Component {
 		return (
 			colorObject?.color ||
 			colorProps.style?.color ||
+			style?.color ||
 			styles.defaultButton.color
 		);
 	}
@@ -375,11 +377,12 @@ class ButtonEdit extends Component {
 			mergeBlocks,
 			parentWidth,
 			setAttributes,
+			style,
 		} = this.props;
 		const {
 			placeholder,
 			text,
-			style,
+			style: buttonStyle,
 			url,
 			align = 'center',
 			width,
@@ -391,7 +394,7 @@ class ButtonEdit extends Component {
 			return null;
 		}
 
-		const borderRadius = style?.border?.radius;
+		const borderRadius = buttonStyle?.border?.radius;
 
 		const borderRadiusValue = Number.isInteger( borderRadius )
 			? borderRadius
@@ -463,7 +466,7 @@ class ButtonEdit extends Component {
 						} }
 						textAlign={ align }
 						placeholderTextColor={
-							styles.placeholderTextColor.color
+							style?.color || styles.placeholderTextColor.color
 						}
 						identifier="text"
 						tagName="p"

diff --git a/packages/block-library/src/column/editor.native.scss b/packages/block-library/src/column/editor.native.scss
@@ -5,13 +5,11 @@
 .columnPlaceholder {
 	flex: 1;
 	padding: $block-selected-to-content;
-	background-color: $white;
 	border: $border-width dashed $gray;
 	border-radius: 4px;
 }
 
 .columnPlaceholderDark {
-	background-color: $black;
 	border: $border-width dashed $gray-70;
 }
 

diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
@@ -442,7 +442,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 )( memo( ColumnsEditContainer ) );
 
 const ColumnsEdit = ( props ) => {
-	const { clientId, isSelected } = props;
+	const { clientId, isSelected, style } = props;
 	const {
 		columnCount,
 		isDefaultColumns,
@@ -505,7 +505,7 @@ const ColumnsEdit = ( props ) => {
 	}, [] );
 
 	return (
-		<>
+		<View style={ style }>
 			<ColumnsEditContainerWrapper
 				columnCount={ columnCount }
 				innerWidths={ memoizedInnerWidths }
@@ -520,7 +520,7 @@ const ColumnsEdit = ( props ) => {
 				clientId={ clientId }
 				isVisible={ isVisible }
 			/>
-		</>
+		</View>
 	);
 };
 

diff --git a/packages/block-library/src/group/edit.native.js b/packages/block-library/src/group/edit.native.js
@@ -32,7 +32,7 @@ function GroupEdit( {
 	isSelected,
 	isLastInnerBlockSelected,
 	getStylesFromColorScheme,
-	mergedStyle,
+	style,
 	blockWidth,
 } ) {
 	const { align } = attributes;
@@ -79,13 +79,13 @@ function GroupEdit( {
 		<View
 			style={ [
 				isSelected && hasInnerBlocks && styles.innerBlocks,
-				mergedStyle,
+				style,
 				isSelected &&
 					hasInnerBlocks &&
-					mergedStyle?.backgroundColor &&
+					style?.backgroundColor &&
 					styles.hasBackgroundAppender,
 				isLastInnerBlockSelected &&
-					mergedStyle?.backgroundColor &&
+					style?.backgroundColor &&
 					styles.isLastInnerBlockSelected,
 			] }
 		>

diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
@@ -25,7 +25,7 @@ function HeadingEdit( {
 	setAttributes,
 	mergeBlocks,
 	onReplace,
-	mergedStyle,
+	style,
 	clientId,
 } ) {
 	const { textAlign, content, level, placeholder } = attributes;
@@ -34,7 +34,7 @@ function HeadingEdit( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
-		style: mergedStyle,
+		style,
 	} );
 
 	return (

diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
@@ -41,6 +41,7 @@ export default function ListEdit( {
 	setAttributes,
 	mergeBlocks,
 	onReplace,
+	style,
 } ) {
 	const { ordered, values, type, reversed, start, placeholder } = attributes;
 	const tagName = ordered ? 'ol' : 'ul';
@@ -132,7 +133,9 @@ export default function ListEdit( {
 		</>
 	);
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		style,
+	} );
 
 	return (
 		<>

diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js
@@ -254,7 +254,7 @@ class MediaTextEdit extends Component {
 			setAttributes,
 			isSelected,
 			isRTL,
-			wrapperProps,
+			style,
 			blockWidth,
 		} = this.props;
 		const {
@@ -273,14 +273,21 @@ class MediaTextEdit extends Component {
 			? 100
 			: this.state.mediaWidth || mediaWidth;
 		const widthString = `${ temporaryMediaWidth }%`;
+		const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
+		const innerBlockWidthString = `${ innerBlockWidth }%`;
 
-		const innerBlockContainerStyle = ! shouldStack
-			? styles.innerBlock
-			: {
-					...( mediaPosition === 'left'
-						? styles.innerBlockStackMediaLeft
-						: styles.innerBlockStackMediaRight ),
-			  };
+		const innerBlockContainerStyle = [
+			{ width: innerBlockWidthString },
+			! shouldStack
+				? styles.innerBlock
+				: {
+						...( mediaPosition === 'left'
+							? styles.innerBlockStackMediaLeft
+							: styles.innerBlockStackMediaRight ),
+				  },
+			( style?.backgroundColor || backgroundColor.color ) &&
+				styles.innerBlockPaddings,
+		];
 
 		const containerStyles = {
 			...styles[ 'wp-block-media-text' ],
@@ -295,14 +302,10 @@ class MediaTextEdit extends Component {
 				? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ]
 				: {} ),
 			...( isSelected && styles[ 'is-selected' ] ),
-			backgroundColor:
-				wrapperProps?.style?.backgroundColor || backgroundColor.color,
+			backgroundColor: style?.backgroundColor || backgroundColor.color,
 			paddingBottom: 0,
 		};
 
-		const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
-		const innerBlockWidthString = `${ innerBlockWidth }%`;
-
 		const mediaContainerStyle = [
 			{ flex: 1 },
 			shouldStack
@@ -375,12 +378,7 @@ class MediaTextEdit extends Component {
 					>
 						{ this.renderMediaArea( shouldStack ) }
 					</View>
-					<View
-						style={ {
-							width: innerBlockWidthString,
-							...innerBlockContainerStyle,
-						} }
-					>
+					<View style={ innerBlockContainerStyle }>
 						<InnerBlocks
 							template={ TEMPLATE }
 							blockWidth={ blockWidth }

diff --git a/packages/block-library/src/media-text/style.native.scss b/packages/block-library/src/media-text/style.native.scss
@@ -141,6 +141,10 @@ $media-to-text: 12px;
 	padding-left: $media-to-text;
 }
 
+.innerBlockPaddings {
+	padding: 0 $media-to-text $media-to-text;
+}
+
 // Media STACK
 .mediaStackLeft {
 	margin-bottom: $media-to-text;

diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
@@ -19,7 +19,6 @@ function ParagraphBlock( {
 	mergeBlocks,
 	onReplace,
 	setAttributes,
-	mergedStyle,
 	style,
 	clientId,
 } ) {
@@ -30,12 +29,11 @@ function ParagraphBlock( {
 	const { align, content, placeholder } = attributes;
 
 	const styles = {
-		...( mergedStyle?.baseColors && {
-			color: mergedStyle.baseColors?.color?.text,
-			placeholderColor: mergedStyle.baseColors?.color?.text,
-			linkColor: mergedStyle.baseColors?.elements?.link?.color?.text,
+		...( style?.baseColors && {
+			color: style.baseColors?.color?.text,
+			placeholderColor: style.color || style.baseColors?.color?.text,
+			linkColor: style.baseColors?.elements?.link?.color?.text,
 		} ),
-		...mergedStyle,
 		...style,
 	};
 

diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
@@ -27,14 +27,14 @@ export default function QuoteEdit( {
 	onReplace,
 	className,
 	insertBlocksAfter,
-	mergedStyle,
+	style,
 } ) {
 	const { align, value, citation } = attributes;
 	const blockProps = useBlockProps( {
 		className: classnames( className, {
 			[ `has-text-align-${ align }` ]: align,
 		} ),
-		style: mergedStyle,
+		style,
 	} );
 
 	return (

diff --git a/packages/block-library/src/verse/edit.js b/packages/block-library/src/verse/edit.js
@@ -19,12 +19,14 @@ export default function VerseEdit( {
 	setAttributes,
 	mergeBlocks,
 	onRemove,
+	style,
 } ) {
 	const { textAlign, content } = attributes;
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
+		style,
 	} );
 
 	return (

diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
@@ -12,12 +12,14 @@ import {
 	Text,
 } from 'react-native';
 import { map, uniq } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */