From 69769f4ec71ff7845b8b14287322463a137e5aa7 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Sun, 1 Oct 2023 14:59:08 -0500 Subject: [PATCH 1/3] build: Support custom mobile Demo editor setup configuration Applying optional setup configuration files allows developers to modify the Demo editor environment via Hooks, e.g. to set custom `initialHtml` for the editor. --- .gitignore | 1 + packages/react-native-editor/metro.config.js | 1 + packages/react-native-editor/src/index.js | 4 ++++ 3 files changed, 6 insertions(+) diff --git a/.gitignore b/.gitignore index b5cd0124e5d4b..48cd7580beed1 100644 --- a/.gitignore +++ b/.gitignore @@ -48,3 +48,4 @@ test/storybook-playwright/specs/__snapshots__ test/storybook-playwright/specs/*-snapshots/** test/gutenberg-test-themes/twentytwentyone test/gutenberg-test-themes/twentytwentythree +packages/react-native-editor/src/setup-local.js diff --git a/packages/react-native-editor/metro.config.js b/packages/react-native-editor/metro.config.js index 05e57e3cfbcab..307853a612c8c 100644 --- a/packages/react-native-editor/metro.config.js +++ b/packages/react-native-editor/metro.config.js @@ -27,6 +27,7 @@ module.exports = { inlineRequires: false, }, } ), + unstable_allowRequireContext: true, // Used for optional setup configuration. }, server: { enhanceMiddleware: ( middleware ) => ( req, res, next ) => { diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js index a4ca31e3e9488..e8b8f44dc3c41 100644 --- a/packages/react-native-editor/src/index.js +++ b/packages/react-native-editor/src/index.js @@ -51,6 +51,10 @@ const registerGutenberg = ( { // Initialize editor this.editorComponent = setup(); + // Apply optional setup configuration, enabling modification via hooks. + const req = require.context( './', false, /setup-local\.js$/ ); + req.keys().forEach( ( key ) => req( key ).default() ); + // Dispatch pre-render hooks. doAction( 'native.pre-render', parentProps ); From fdff64c1145bb12017e07b966fabbb9cb91ac987 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Sun, 1 Oct 2023 15:51:34 -0500 Subject: [PATCH 2/3] test: Disable local Demo editor configuration for tests The `require.context` function is undefined in the test environment, as it is a Metro-specific capability. The most straightforward way to avoid test failures is to disable this code that relates to the local development workflow. --- packages/react-native-editor/src/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js index e8b8f44dc3c41..32ba1c6f3441d 100644 --- a/packages/react-native-editor/src/index.js +++ b/packages/react-native-editor/src/index.js @@ -52,8 +52,10 @@ const registerGutenberg = ( { this.editorComponent = setup(); // Apply optional setup configuration, enabling modification via hooks. - const req = require.context( './', false, /setup-local\.js$/ ); - req.keys().forEach( ( key ) => req( key ).default() ); + if ( typeof require.context === 'function' ) { + const req = require.context( './', false, /setup-local\.js$/ ); + req.keys().forEach( ( key ) => req( key ).default() ); + } // Dispatch pre-render hooks. doAction( 'native.pre-render', parentProps ); From 92725d2a5a2166162a70170c7f691eaa23626201 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Thu, 5 Oct 2023 12:21:16 -0400 Subject: [PATCH 3/3] docs: Document Demo editor customization Contributors will likely never discover or benefit from this customization ability if it is not documented. --- .../getting-started-react-native.md | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/contributors/code/react-native/getting-started-react-native.md b/docs/contributors/code/react-native/getting-started-react-native.md index e13ac748aaf29..53d5f7eee5a12 100644 --- a/docs/contributors/code/react-native/getting-started-react-native.md +++ b/docs/contributors/code/react-native/getting-started-react-native.md @@ -71,6 +71,40 @@ npm run native ios -- -- --simulator="iPhone Xs Max" To see a list of all of your available iOS devices, use `xcrun simctl list devices`. +### Customizing the Demo Editor + +By default, the Demo editor renders most of the supported core blocks. This is helpful to showcase the editor's capabilities, but can be distracting when focusing on a specific block or feature. One can customize the editor's intial state by leveraging the `native.block_editor_props` hook in a `packages/react-native-editor/src/setup-local.js` file. + +
Example setup-local.js + +```js +/** + * WordPress dependencies + */ +import { addFilter } from '@wordpress/hooks'; + +export default () => { + addFilter( + 'native.block_editor_props', + 'core/react-native-editor', + ( props ) => { + return { + ...props, + initialHtml, + }; + } + ); +}; + +const initialHtml = ` + +

Just a Heading

+ +`; +``` + +
+ ### Troubleshooting If the Android emulator doesn't start correctly, or compiling fails with `Could not initialize class org.codehaus.groovy.runtime.InvokerHelper` or similar, it may help to double check the set up of your development environment against the latest requirements in [React Native's documentation](https://reactnative.dev/docs/environment-setup). With Android Studio, for example, you will need to configure the `ANDROID_HOME` environment variable and ensure that your version of JDK matches the latest requirements.