[RNMobile] Global styles provider (#21637)

* use edit wrapper props

* use context to pass wrapper styles

* split to globalStyles and wrapperProps

* fix import name

* fix paragraph block

* add default value to the wrapperProps in compose

* change heading and paragraph to support other wrapperprops

* rename globalStyle to mergedStyle and merge styles before passing

* use wrapperProps in button edit

* add some inline comments

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

@@ -7,6 +7,7 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import { GlobalStylesContext } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import {
@@ -48,23 +49,39 @@ class BlockListBlock extends Component {
 
  getBlockForType() {
  return (
- <BlockEdit
- name={ this.props.name }
- isSelected={ this.props.isSelected }
- attributes={ this.props.attributes }
- setAttributes={ this.props.onChange }
- onFocus={ this.onFocus }
- onReplace={ this.props.onReplace }
- insertBlocksAfter={ this.insertBlocksAfter }
- mergeBlocks={ this.props.mergeBlocks }
- onCaretVerticalPositionChange={
- this.props.onCaretVerticalPositionChange
- }
- clientId={ this.props.clientId }
- parentWidth={ this.props.parentWidth }
- contentStyle={ this.props.contentStyle }
- onDeleteBlock={ this.props.onDeleteBlock }
- />
+ <GlobalStylesContext.Consumer>
+ { ( globalStyle ) => {
+ const mergedStyle = {
+ ...globalStyle,
+ ...this.props.wrapperProps.style,
+ };
+ return (
+ <GlobalStylesContext.Provider value={ mergedStyle }>
+ <BlockEdit
+ name={ this.props.name }
+ isSelected={ this.props.isSelected }
+ attributes={ this.props.attributes }
+ setAttributes={ this.props.onChange }
+ onFocus={ this.onFocus }
+ onReplace={ this.props.onReplace }
+ insertBlocksAfter={ this.insertBlocksAfter }
+ mergeBlocks={ this.props.mergeBlocks }
+ onCaretVerticalPositionChange={
+ this.props.onCaretVerticalPositionChange
+ }
+ // Block level styles
+ wrapperProps={ this.props.wrapperProps }
+ // inherited styles merged with block level styles
+ mergedStyle={ mergedStyle }
+ clientId={ this.props.clientId }
+ parentWidth={ this.props.parentWidth }
+ contentStyle={ this.props.contentStyle }
+ onDeleteBlock={ this.props.onDeleteBlock }
+ />
+ </GlobalStylesContext.Provider>
+ );
+ } }
+ </GlobalStylesContext.Consumer>
  );
  }
 
@@ -252,6 +269,9 @@ export default compose( [
  isAncestorSelected,
  isTouchable,
  isDimmed,
+ wrapperProps: blockType.getEditWrapperProps
+ ? blockType.getEditWrapperProps( attributes ) || {}
+ : {},
  };
  } ),
  withDispatch( ( dispatch, ownProps, { select } ) => {

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

@@ -172,22 +172,22 @@ class ButtonEdit extends Component {
  }
 
  getBackgroundColor() {
- const { backgroundColor, attributes } = this.props;
- const { style } = attributes;
+ const { backgroundColor, wrapperProps } = this.props;
 
  return (
- ( style && style.color && style.color.background ) ||
+ wrapperProps?.style?.backgroundColor ||
+ // We still need the `backgroundColor.color` to support colors from the color pallete (not custom ones)
  backgroundColor.color ||
  styles.fallbackButton.backgroundColor
  );
  }
 
  getTextColor() {
- const { textColor, attributes } = this.props;
- const { style } = attributes;
+ const { textColor, wrapperProps } = this.props;
 
  return (
- ( style && style.color && style.color.text ) ||
+ wrapperProps?.style?.color ||
+ // We still need the `textColor.color` to support colors from the color pallete (not custom ones)
  textColor.color ||
  styles.fallbackButton.color
  );

packages/block-library/src/heading/edit.js

@@ -23,14 +23,16 @@ import {
 } from '@wordpress/block-editor';
 import { Platform } from '@wordpress/element';
 
-function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
- const { align, content, level, placeholder, style } = attributes;
+function HeadingEdit( {
+ attributes,
+ setAttributes,
+ mergeBlocks,
+ onReplace,
+ mergedStyle,
+} ) {
+ const { align, content, level, placeholder } = attributes;
  const tagName = 'h' + level;
 
- const styles = {
- color: style && style.color && style.color.text,
- };
-
  return (
  <>
  <BlockControls>
@@ -88,7 +90,7 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
  } ) }
  placeholder={ placeholder || __( 'Write heading…' ) }
  textAlign={ align }
- style={ styles }
+ style={ mergedStyle }
  />
  </>
  );

packages/block-library/src/media-text/edit.native.js

@@ -184,13 +184,13 @@ class MediaTextEdit extends Component {
  backgroundColor,
  setAttributes,
  isSelected,
+ wrapperProps,
  } = this.props;
  const {
  isStackedOnMobile,
  mediaPosition,
  mediaWidth,
  verticalAlignment,
- style,
  } = attributes;
  const { containerWidth } = this.state;
 
@@ -223,8 +223,7 @@ class MediaTextEdit extends Component {
  : {} ),
  ...( isSelected && styles[ 'is-selected' ] ),
  backgroundColor:
- ( style && style.color && style.color.background ) ||
- backgroundColor.color,
+ wrapperProps?.style?.backgroundColor || backgroundColor.color,
  };
 
  const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;

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

@@ -16,13 +16,14 @@ function ParagraphBlock( {
  mergeBlocks,
  onReplace,
  setAttributes,
- style: oldStyle,
+ mergedStyle,
+ style,
 } ) {
- const { align, content, placeholder, style } = attributes;
+ const { align, content, placeholder } = attributes;
 
  const styles = {
- ...oldStyle,
- color: style && style.color && style.color.text,
+ ...mergedStyle,
+ ...style,
  };
 
  return (

packages/components/src/index.native.js

@@ -60,3 +60,9 @@ export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint';
 export { default as LinearGradient } from './mobile/linear-gradient';
+
+export {
+ default as GlobalStylesContext,
+ useGlobalStyles,
+ withGlobalStyles,
+} from './mobile/global-styles-context';

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

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+const GlobalStylesContext = createContext( { style: {} } );
+
+export const useGlobalStyles = () => {
+ const globalStyles = useContext( GlobalStylesContext );
+
+ return globalStyles;
+};
+
+export const withGlobalStyles = ( WrappedComponent ) => ( props ) => (
+ <GlobalStylesContext.Consumer>
+ { ( globalStyles ) => (
+ <WrappedComponent { ...props } globalStyles={ globalStyles } />
+ ) }
+ </GlobalStylesContext.Consumer>
+);
+
+export default GlobalStylesContext;