Your IP : 216.73.217.154
# Block Editor Compatibility
This file describes steps to start developing Blocks for Edit Flow.
Currently, the following Edit Flow modules are compatible with Gutenberg Block Editor:
* Custom Statuses
### Setup
*Note:* This document assumes you have a working knowledge of modern JavaScript and its tooling. Including npm, Webpack, and React.
Prerequisites: `npm`.
From the plugin's folder run:
```
npm i
```
This should leave you with everything you need for development, including a local copy of Webpack and webpack-cli.
## Anatomy of an Edit Flow block.
There are two parts for adding Block Editor compatibility to modules.
#### PHP
On the PHP side, we mostly just need to make sure the block assets are enqueued when they are needed. There is a [Block_Editor_Compatible](common/php/trait-block-editor-compatible.php) trait that gives access to helpful methods related to the block editor when used within modules.
#### JavaScript
##### Development
To start the Webpack in watch mode:
```npm run dev```
##### Build for production
To generate optimized/minified production-ready files:
```npm run build```
##### File Structure
```
blocks/
# Source files:
src/
module-slug/
block.js # Gutenberg Block code for the module
editor.scss # Editor styles
style.scss # Front-end styles
# Build
dist/
module-slug.build.js # Built block js
module-slug.editor.build.css # Built editor CSS
module-slug.style.build.css # Built front-end CSS
```
The files from `dist/` should be enqueued in the compat class for the module.