This library was generated with Angular CLI version 8.0.3.
It is an Angular version of the Wordpress Gutenberg Block Editor.
The packages uses the latest Gutenberg version.
Run npm install ng-gutenberg --save
file.
Import NgGutenbergModule
in your project (import { NgGutenbergModule } from 'ng-gutenberg'
)
Add the following lines to your polyfills.ts
(<any>window).process = {
env: {
NODE_ENV:'production'
}
};
(<any>window).global = window
To use the default style, you can import @import "ng-gutenberg/ng-gutenberg"
in your styles.scss
Add the BlockEditorProviderComponent to your template with the following code:
<block-editor-provider *ngIf="blocks" [blocks]="blocks" (blocksChange)="onBlocksChanged($event)" contentClass="gutenberg__editor"></block-editor-provider>
or
<block-editor-provider *ngIf="blocks" [(blocks)]="blocks" contentClass="gutenberg__editor"></block-editor-provider>
In your typescript component, make sure that you added a parameter of type IBlock[]
.
This component only accepts an array of IBlock as a parameter. If you want to use HTML you must parse that HTML first to an IBlock[]. To do that you can use import { serialize, parse } from '@wordpress/blocks'
. Eg:
this.blocks = parse(html);
onBlocksChanged(item: IBlock[]) {
var html = serialize(item);
}
Depending on your Angular build configuration this may not work on Production. To fix this you can install @angular-builders/custom-webpack
with NPM.
Update your angular.json
file with the following information:
Under build
:
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js",
"mergeStrategies": {
"optimization": "replace",
"module.optimization": "replace"
},
"replaceDuplicatePlugins": true
},
...
}
Under serve
:
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js",
"mergeStrategies": {
"optimization": "replace",
"module.optimization": "replace"
},
"replaceDuplicatePlugins": true
},
...
},
Then create a custom-webpack.config.js
file with the following content:
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserPlugin({
parallel: true,
cache: true,
terserOptions: {
ecma: 8,
warnings: false,
parse: {},
compress:false,
mangle: true,
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: true,
keep_classnames: true,
keep_fnames: true,
safari10: true
}
})]
}
};