Mobile - Global styles: Set theme's background and text color

packages/block-editor/src/components/block-list/block.native.js

@@ -48,11 +48,13 @@ function BlockForType( {
 	parentWidth,
 	wrapperProps,
 	blockWidth,
+	baseGlobalStyles,
 } ) {
 	const defaultColors = useSetting( 'color.palette' ) || emptyArray;
 	const globalStyle = useGlobalStyles();
 	const mergedStyle = useMemo( () => {
 		return getMergedGlobalStyles(
+			baseGlobalStyles,
 			globalStyle,
 			wrapperProps.style,
 			attributes,
@@ -300,6 +302,7 @@ export default compose( [
 	withSelect( ( select, { clientId, rootClientId } ) => {
 		const {
 			getBlockIndex,
+			getSettings,
 			isBlockSelected,
 			__unstableGetBlockWithoutInnerBlocks,
 			getSelectedBlockClientId,
@@ -347,6 +350,9 @@ export default compose( [
 			isDescendantOfParentSelected ||
 			isParentSelected ||
 			parentId === '';
+		const baseGlobalStyles = getSettings()
+			?.__experimentalGlobalStylesBaseStyles;
+
 		return {
 			icon,
 			name: name || 'core/missing',
@@ -360,6 +366,7 @@ export default compose( [
 			isParentSelected,
 			firstToSelectId,
 			isTouchable,
+			baseGlobalStyles,
 			wrapperProps: getWrapperProps(
 				attributes,
 				blockType.getEditWrapperProps

packages/block-editor/src/components/provider/index.native.js

@@ -10,6 +10,7 @@ import { useEffect } from '@wordpress/element';
 import withRegistryProvider from './with-registry-provider';
 import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';
+import { BlockRefsProvider } from './block-refs-provider';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
@@ -24,7 +25,7 @@ function BlockEditorProvider( props ) {
 	// Syncs the entity provider with changes in the block-editor store.
 	useBlockSync( props );
 
-	return children;
+	return <BlockRefsProvider>{ children }</BlockRefsProvider>;
 }
 
 export default withRegistryProvider( BlockEditorProvider );

packages/block-editor/src/hooks/color.js

@@ -234,7 +234,7 @@ export function ColorEdit( props ) {
 		localAttributes.current = attributes;
 	}, [ attributes ] );
 
-	if ( ! hasColorSupport( blockName ) || Platform.OS !== 'web' ) {
+	if ( ! hasColorSupport( blockName ) ) {
 		return null;
 	}
 

packages/block-library/src/paragraph/edit.native.js

@@ -30,6 +30,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,
+		} ),
 		...mergedStyle,
 		...style,
 	};

packages/components/src/mobile/global-styles-context/index.native.js

@@ -22,16 +22,21 @@ const GlobalStylesContext = createContext( { style: {} } );
 GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
 
 export const getMergedGlobalStyles = (
+	baseGlobalStyles,
 	globalStyle,
 	wrapperPropsStyle,
 	blockAttributes,
 	defaultColors
 ) => {
+	const baseGlobalColors = {
+		baseColors: baseGlobalStyles || {},
+	};
 	const blockStyleAttributes = pick(
 		blockAttributes,
 		BLOCK_STYLE_ATTRIBUTES
 	);
 	const mergedStyle = {
+		...baseGlobalColors,
 		...globalStyle,
 		...wrapperPropsStyle,
 	};

packages/edit-post/src/components/layout/index.native.js

@@ -9,7 +9,11 @@ import SafeArea from 'react-native-safe-area';
  */
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
-import { BottomSheetSettings, FloatingToolbar } from '@wordpress/block-editor';
+import {
+	BottomSheetSettings,
+	FloatingToolbar,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import {
 	HTMLTextInput,
@@ -101,7 +105,7 @@ class Layout extends Component {
 	}
 
 	render() {
-		const { getStylesFromColorScheme, mode } = this.props;
+		const { getStylesFromColorScheme, mode, globalStyles } = this.props;
 
 		const isHtmlView = mode === 'text';
 
@@ -118,6 +122,16 @@ class Layout extends Component {
 			bottom: this.state.safeAreaInsets.bottom,
 		};
 
+		const editorStyles = [
+			getStylesFromColorScheme(
+				styles.background,
+				styles.backgroundDark
+			),
+			globalStyles?.background && {
+				backgroundColor: globalStyles.background,
+			},
+		];
+
 		return (
 			<Tooltip.Slot>
 				<SafeAreaView
@@ -128,12 +142,7 @@ class Layout extends Component {
 					onLayout={ this.onRootViewLayout }
 				>
 					<AutosaveMonitor disableIntervalChecks />
-					<View
-						style={ getStylesFromColorScheme(
-							styles.background,
-							styles.backgroundDark
-						) }
-					>
+					<View style={ editorStyles }>
 						{ isHtmlView ? this.renderHTML() : this.renderVisual() }
 						{ ! isHtmlView && Platform.OS === 'android' && (
 							<FloatingToolbar />
@@ -176,9 +185,14 @@ export default compose( [
 			editorStore
 		);
 		const { getEditorMode } = select( editPostStore );
+		const { getSettings } = select( blockEditorStore );
+		const globalStyles = getSettings()?.__experimentalGlobalStylesBaseStyles
+			?.color;
+
 		return {
 			isReady: isEditorReady(),
 			mode: getEditorMode(),
+			globalStyles,
 		};
 	} ),
 	withPreferredColorScheme,

packages/editor/src/components/post-title/index.native.js

@@ -19,6 +19,8 @@ import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { pasteHandler } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -107,12 +109,20 @@ class PostTitle extends Component {
 			borderStyle,
 			isDimmed,
 			postType,
+			globalStyles,
 		} = this.props;
 
 		const decodedPlaceholder = decodeEntities( placeholder );
 		const borderColor = this.props.isSelected
 			? focusedBorderColor
 			: 'transparent';
+		const titleStyles = {
+			...style,
+			...( globalStyles?.text && {
+				color: globalStyles.text,
+				placeholderColor: globalStyles.text,
+			} ),
+		};
 
 		return (
 			<View
@@ -134,7 +144,7 @@ class PostTitle extends Component {
 					unstableOnFocus={ this.props.onSelect }
 					onBlur={ this.props.onBlur } // always assign onBlur as a props
 					multiline={ false }
-					style={ style }
+					style={ titleStyles }
 					styles={ styles }
 					fontSize={ 24 }
 					fontWeight={ 'bold' }
@@ -159,30 +169,34 @@ class PostTitle extends Component {
 export default compose(
 	withSelect( ( select ) => {
 		const { isPostTitleSelected, getEditedPostAttribute } = select(
-			'core/editor'
-		);
-
-		const { getSelectedBlockClientId, getBlockRootClientId } = select(
-			'core/block-editor'
+			editorStore
 		);
+		const {
+			getSelectedBlockClientId,
+			getBlockRootClientId,
+			getSettings,
+		} = select( blockEditorStore );
 
 		const selectedId = getSelectedBlockClientId();
 		const selectionIsNested = !! getBlockRootClientId( selectedId );
+		const globalStyles = getSettings()?.__experimentalGlobalStylesBaseStyles
+			?.color;
 
 		return {
 			postType: getEditedPostAttribute( 'type' ),
 			isAnyBlockSelected: !! selectedId,
 			isSelected: isPostTitleSelected(),
 			isDimmed: selectionIsNested,
+			globalStyles,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
 		const { undo, redo, togglePostTitleSelection } = dispatch(
-			'core/editor'
+			editorStore
 		);
 
 		const { clearSelectedBlock, insertDefaultBlock } = dispatch(
-			'core/block-editor'
+			blockEditorStore
 		);
 
 		return {

packages/rich-text/src/component/index.native.js

@@ -3,21 +3,18 @@
 /**
  * External dependencies
  */
+import { View, Platform } from 'react-native';
+import { get, pickBy, debounce, isString } from 'lodash';
+import memize from 'memize';
+
 /**
  * WordPress dependencies
  */
 import RCTAztecView from '@wordpress/react-native-aztec';
-import { View, Platform } from 'react-native';
 import {
 	showUserSuggestions,
 	showXpostSuggestions,
 } from '@wordpress/react-native-bridge';
-import { get, pickBy, debounce, isString } from 'lodash';
-import memize from 'memize';
-
-/**
- * WordPress dependencies
- */
 import { BlockFormatControls } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
@@ -982,10 +979,12 @@ export class RichText extends Component {
 						text: html,
 						eventCount: this.lastEventCount,
 						selection,
-						linkTextColor: defaultTextDecorationColor,
+						linkTextColor:
+							style?.linkColor || defaultTextDecorationColor,
 					} }
 					placeholder={ this.props.placeholder }
 					placeholderTextColor={
+						style?.placeholderColor ||
 						this.props.placeholderTextColor ||
 						defaultPlaceholderTextColor
 					}