Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build: Support custom mobile Demo editor setup configuration #54957

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -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
Expand Up @@ -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.

<details><summary>Example setup-local.js</summary>

```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 = `
<!-- wp:heading -->
<h2 class="wp-block-heading">Just a Heading</h2>
<!-- /wp:heading -->
`;
```

</details>

### 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.
Expand Down
1 change: 1 addition & 0 deletions packages/react-native-editor/metro.config.js
Expand Up @@ -27,6 +27,7 @@ module.exports = {
inlineRequires: false,
},
} ),
unstable_allowRequireContext: true, // Used for optional setup configuration.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'd need to keep an eye on this unstable parameter when upgrading Metro (probably in the next React Native upgrade effort), in case it produces a failure in loading the local setup.

},
server: {
enhanceMiddleware: ( middleware ) => ( req, res, next ) => {
Expand Down
6 changes: 6 additions & 0 deletions packages/react-native-editor/src/index.js
Expand Up @@ -51,6 +51,12 @@ const registerGutenberg = ( {
// Initialize editor
this.editorComponent = setup();

// Apply optional setup configuration, enabling modification via hooks.
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 );

Expand Down