[RNMobile] Support Theme Colors and Gradients (#22197)

* Expose editor theme colors to editor settings from parent apps * Fix style issues * Added support for updating theme color asynchronously * Add support for custom gradients * Add mocks to gutenberg bridge for tests * Modify button to support theme gradients * Fix format issue * Adjust color picker to pull from settings instead of the default colors * Refactor to simplify the call to settings
WordPress · Jun 3, 2020 · 34aca74 · 34aca74
1 parent 6e38764
commit 34aca74
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 18 deletions.
diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js
@@ -9,10 +9,7 @@ import {
 } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import {
- InspectorControls,
- SETTINGS_DEFAULTS as defaultSettings,
-} from '@wordpress/block-editor';
+import { InspectorControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -22,6 +19,7 @@ import styles from './container.native.scss';
 function BottomSheetSettings( {
  editorSidebarOpened,
  closeGeneralSidebar,
+ settings,
  ...props
 } ) {
  return (
@@ -38,7 +36,7 @@ function BottomSheetSettings( {
  case colorsUtils.subsheets.color:
  return (
  <ColorSettings
- defaultSettings={ defaultSettings }
+ defaultSettings={ settings }
  { ...bottomSheetProps }
  { ...extraProps }
  />
@@ -56,8 +54,9 @@ function BottomSheetSettings( {
 export default compose( [
  withSelect( ( select ) => {
  const { isEditorSidebarOpened } = select( 'core/edit-post' );
-
+ const { getSettings } = select( 'core/block-editor' );
  return {
+ settings: getSettings(),
  editorSidebarOpened: isEditorSidebarOpened(),
  };
  } ),

diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
@@ -18,7 +18,7 @@ import {
  withColors,
  InspectorControls,
  BlockControls,
- SETTINGS_DEFAULTS,
+ __experimentalUseGradient,
 } from '@wordpress/block-editor';
 import {
  TextControl,
@@ -175,17 +175,11 @@ class ButtonEdit extends Component {
  }
 
  getBackgroundColor() {
- const { backgroundColor, attributes } = this.props;
+ const { backgroundColor, attributes, gradientValue } = this.props;
  const { gradient, customGradient } = attributes;
- const defaultGradients = SETTINGS_DEFAULTS.gradients;
 
  if ( customGradient || gradient ) {
- return (
- customGradient ||
- defaultGradients.find(
- ( defaultGradient ) => defaultGradient.slug === gradient
- ).gradient
- );
+ return customGradient || gradientValue;
  }
  const colorAndStyleProps = getColorAndStyleProps( attributes );
  return (
@@ -547,6 +541,7 @@ export default compose( [
  withInstanceId,
  withColors( 'backgroundColor', { textColor: 'color' } ),
  withSelect( ( select, { clientId } ) => {
+ const { gradientValue } = __experimentalUseGradient();
  const { isEditorSidebarOpened } = select( 'core/edit-post' );
  const {
  getSelectedBlockClientId,
@@ -559,6 +554,7 @@ export default compose( [
  const numOfButtons = getBlockCount( parentId );
 
  return {
+ gradientValue,
  selectedId,
  editorSidebarOpened: isEditorSidebarOpened(),
  numOfButtons,

diff --git a/packages/edit-post/src/editor.native.js b/packages/edit-post/src/editor.native.js
@@ -45,7 +45,9 @@ class Editor extends Component {
  hasFixedToolbar,
  focusMode,
  hiddenBlockTypes,
- blockTypes
+ blockTypes,
+ colors,
+ gradients
  ) {
  settings = {
  ...settings,
@@ -70,6 +72,14 @@ class Editor extends Component {
  );
  }
 
+ if ( colors !== undefined ) {
+ settings.colors = colors;
+ }
+
+ if ( gradients !== undefined ) {
+ settings.gradients = gradients;
+ }
+
  return settings;
  }
 
@@ -103,6 +113,8 @@ class Editor extends Component {
  blockTypes,
  post,
  postType,
+ colors,
+ gradients,
  ...props
  } = this.props;
 
@@ -111,7 +123,9 @@ class Editor extends Component {
  hasFixedToolbar,
  focusMode,
  hiddenBlockTypes,
- blockTypes
+ blockTypes,
+ colors,
+ gradients
  );
 
  const normalizedPost = post || {

diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js
@@ -7,6 +7,7 @@ import RNReactNativeGutenbergBridge, {
  subscribeUpdateHtml,
  subscribeSetTitle,
  subscribeMediaAppend,
+ subscribeUpdateTheme,
 } from 'react-native-gutenberg-bridge';
 
 /**
@@ -98,6 +99,12 @@ class NativeEditorProvider extends Component {
  this.props.insertBlock( newBlock, insertionIndex );
  }
  );
+
+ this.subscriptionParentUpdateTheme = subscribeUpdateTheme(
+ ( theme ) => {
+ this.props.updateSettings( theme );
+ }
+ );
  }
 
  componentWillUnmount() {
@@ -120,6 +127,10 @@ class NativeEditorProvider extends Component {
  if ( this.subscriptionParentMediaAppend ) {
  this.subscriptionParentMediaAppend.remove();
  }
+
+ if ( this.subscriptionParentUpdateTheme ) {
+ this.subscriptionParentUpdateTheme.remove();
+ }
  }
 
  componentDidUpdate( prevProps ) {
@@ -221,13 +232,14 @@ export default compose( [
  } ),
  withDispatch( ( dispatch ) => {
  const { editPost, resetEditorBlocks } = dispatch( 'core/editor' );
- const { clearSelectedBlock, insertBlock } = dispatch(
+ const { updateSettings, clearSelectedBlock, insertBlock } = dispatch(
  'core/block-editor'
  );
  const { switchEditorMode } = dispatch( 'core/edit-post' );
  const { addEntities, receiveEntityRecords } = dispatch( 'core' );
 
  return {
+ updateSettings,
  addEntities,
  clearSelectedBlock,
  insertBlock,

diff --git a/test/native/setup.js b/test/native/setup.js
@@ -14,6 +14,7 @@ jest.mock( 'react-native-gutenberg-bridge', () => {
  subscribeUpdateHtml: jest.fn(),
  subscribeMediaAppend: jest.fn(),
  subscribeAndroidModalClosed: jest.fn(),
+ subscribeUpdateTheme: jest.fn(),
  subscribePreferredColorScheme: () => 'light',
  editorDidMount: jest.fn(),
  editorDidAutosave: jest.fn(),