-
-
Save m-miller/6fb5f63d34ad06d353d4255d1f23e203 to your computer and use it in GitHub Desktop.
Integrating Gutenberg Blocks in Existing WordPress Plugins | https://www.ibenic.com/integrating-gutenberg-blocks-in-plugins
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"presets": [ | |
[ | |
"env", | |
{ | |
"modules": false | |
} | |
] | |
], | |
"plugins": [ | |
"transform-object-rest-spread", | |
[ | |
"transform-react-jsx", | |
{ | |
"pragma": "wp.element.createElement" | |
} | |
] | |
], | |
"env": { | |
"default": { | |
"plugins": ["transform-runtime"] | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
node_modules/ | |
.DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Class MyPlugin_Blocks | |
*/ | |
class MyPlugin_Blocks { | |
/** | |
* MyPlugin_Blocks constructor. | |
*/ | |
public function __construct() { | |
add_action( 'plugins_loaded', array( $this, 'run' ) ); | |
} | |
/** | |
* Run it and load Gutenberg blocks. | |
*/ | |
public function run() { | |
if ( ! function_exists( 'is_gutenberg_page' ) ) { | |
return; | |
} | |
add_action( 'init', array( $this, 'register_blocks' ) ); | |
} | |
/** | |
* Register the Blocks. | |
* Const PLUGIN_FILE is a reference to the main plugin file, can be defined in the main file: | |
* define( 'PLUGIN_FILE', __FILE__ ); | |
*/ | |
public function register_blocks() { | |
wp_register_script( | |
'myplugin-gutenberg', | |
plugins_url( 'assets/dist/js/gutenberg.js', PLUGIN_FILE ), | |
array( 'wp-blocks', 'wp-element' ) | |
); | |
register_block_type( 'myplugin/myblock', array( | |
'editor_script' => 'myplugin-gutenberg' | |
) ); | |
} | |
} | |
new MyPlugin_Blocks(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "my-plugin", | |
"title": "My Plugin", | |
"version": "1.0.0", | |
"description": "", | |
"main": "index.js", | |
"scripts": { | |
"start": "npm install && npm run watch", | |
"dev": "cross-env webpack", | |
"production": "cross-env NODE_ENV=production webpack", | |
"build": "npm run production", | |
"watch": "cross-env webpack --watch", | |
"lint": "npm run lint:js & npm run lint:scss", | |
"lint:js": "eslint assets/src/**/*.js blocks/**/*.js", | |
"lint:scss": "stylelint assets/src/**/*.scss" | |
}, | |
"dependencies": { | |
"npm": "^5.7.1", | |
"query-string": "^5.1.1", | |
"script-loader": "^0.7.2" | |
}, | |
"devDependencies": { | |
"autoprefixer": "^7.2.6", | |
"babel-core": "^6.26.3", | |
"babel-eslint": "^8.2.6", | |
"babel-loader": "^7.1.5", | |
"babel-plugin-transform-object-rest-spread": "^6.26.0", | |
"babel-plugin-transform-react-jsx": "^6.24.1", | |
"babel-plugin-transform-runtime": "^6.23.0", | |
"babel-polyfill": "^6.26.0", | |
"babel-preset-env": "^1.7.0", | |
"browser-sync": "^2.24.6", | |
"browser-sync-webpack-plugin": "^1.2.0", | |
"clean-webpack-plugin": "^0.1.19", | |
"copy-webpack-plugin": "^4.5.2", | |
"cross-env": "3.2.4", | |
"css-loader": "^0.28.11", | |
"cssnano": "^3.10.0", | |
"eslint": "^4.19.1", | |
"eslint-config-wordpress": "^2.0.0", | |
"eslint-plugin-react": "^7.10.0", | |
"expose-loader": "latest", | |
"extract-text-webpack-plugin": "^3.0.0", | |
"file-loader": "^1.1.11", | |
"imagemin-webpack-plugin": "^1.6.1", | |
"node-sass": "^4.9.1", | |
"postcss-loader": "^2.1.6", | |
"sass-loader": "^6.0.7", | |
"style-loader": "^0.18.2", | |
"stylelint-config-wordpress": "^12.0.0", | |
"url-loader": "^0.5.9", | |
"webpack": "^3.12.0", | |
"webpack-rtl-plugin": "^1.7.0", | |
"wp-pot": "latest" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const webpack = require( 'webpack' ); // WebPack module | |
const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); // command to copy files | |
const path = require( 'path' ); // for path | |
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); // for extracting css/scss from JS | |
const inProduction = ('production' === process.env.NODE_ENV); // if in production | |
const ImageminPlugin = require( 'imagemin-webpack-plugin' ).default; // Optimize images | |
const CleanWebpackPlugin = require( 'clean-webpack-plugin' ); // To clean (remove files) | |
const WebpackRTLPlugin = require( 'webpack-rtl-plugin' ); // for RTL support (optional) | |
const wpPot = require( 'wp-pot' ); // For creating .pot files | |
const config = { | |
// Ensure modules like magnific know jQuery is external (loaded via WP). | |
externals: { | |
$: 'jQuery', | |
jquery: 'jQuery' | |
}, | |
devtool: 'source-map', | |
module: { | |
rules: [ | |
// Use Babel to compile JS. | |
{ | |
test: /\.js$/, | |
exclude: /node_modules/, | |
loaders: [ | |
'babel-loader' | |
] | |
}, | |
] | |
}, | |
plugins: [ | |
// Removes the "dist" folder before building. | |
new CleanWebpackPlugin( [ 'assets/dist' ] ), | |
// Extract CSS to /css/ | |
new ExtractTextPlugin( 'css/[name].css' ), | |
// Create RTL css. | |
new WebpackRTLPlugin() | |
] | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ... requires | |
const config = { | |
// ... | |
module: { | |
rules: [ | |
// Use Babel to compile JS. | |
{ | |
test: /\.js$/, | |
exclude: /node_modules/, | |
loaders: [ | |
'babel-loader' | |
] | |
}, | |
// Create RTL styles. | |
{ | |
test: /\.css$/, | |
loader: ExtractTextPlugin.extract( 'style-loader' ) | |
}, | |
// SASS to CSS. | |
{ | |
test: /\.scss$/, | |
use: ExtractTextPlugin.extract( { | |
use: [ { | |
loader: 'css-loader', | |
options: { | |
sourceMap: true | |
} | |
}, { | |
loader: 'postcss-loader', | |
options: { | |
sourceMap: true | |
} | |
}, { | |
loader: 'sass-loader', | |
options: { | |
sourceMap: true, | |
outputStyle: (inProduction ? 'compressed' : 'nested') | |
} | |
} ] | |
} ) | |
}, | |
// Image files. | |
{ | |
test: /\.(png|jpe?g|gif|svg)$/, | |
use: [ | |
{ | |
loader: 'file-loader', | |
options: { | |
name: 'images/[name].[ext]', | |
publicPath: '../' | |
} | |
} | |
] | |
} | |
] | |
}, | |
// Plugins. Gotta have em'. | |
plugins: [//...] | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ... requires | |
// ... config | |
module.exports = [ | |
// Adding entry points and output to the config. | |
Object.assign({ | |
entry: { | |
'frontend': ['./assets/frontend/style.scss', './assets/frontend/script.js'], | |
'backend': ['./assets/backend/style.scss', './assets/backend/script.js'], | |
}, | |
output: { | |
path: path.join( __dirname, './assets/dist/' ), | |
filename: 'js/[name].js', | |
}, | |
}, config), | |
// Adding our blocks JS as gutenberg.js and babel polyfill. | |
Object.assign({ | |
entry: { | |
'babel-polyfill': 'babel-polyfill', | |
'gutenberg': './blocks/load.js' | |
}, | |
// Tell webpack where to output. | |
output: { | |
path: path.resolve( __dirname, './resources/dist/' ), | |
filename: 'js/[name].js' | |
}, | |
}, config) | |
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ... requires | |
// ... config | |
// ... entry points | |
// inProd? | |
if ( inProduction ) { | |
// POT file. | |
wpPot( { | |
package: 'my-plugin', | |
domain: 'my-plugin', | |
destFile: 'languages/my-plugin.pot', | |
relativeTo: './', | |
} ); | |
// Uglify JS. | |
config.plugins.push( new webpack.optimize.UglifyJsPlugin( { sourceMap: true } ) ); | |
// Minify CSS. | |
config.plugins.push( new webpack.LoaderOptionsPlugin( { minimize: true } ) ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const webpack = require( 'webpack' ); | |
const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); | |
const path = require( 'path' ); | |
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); | |
const inProduction = ('production' === process.env.NODE_ENV); | |
const BrowserSyncPlugin = require( 'browser-sync-webpack-plugin' ); | |
const ImageminPlugin = require( 'imagemin-webpack-plugin' ).default; | |
const CleanWebpackPlugin = require( 'clean-webpack-plugin' ); | |
const WebpackRTLPlugin = require( 'webpack-rtl-plugin' ); | |
const wpPot = require( 'wp-pot' ); | |
const config = { | |
// Ensure modules like magnific know jQuery is external (loaded via WP). | |
externals: { | |
$: 'jQuery', | |
jquery: 'jQuery' | |
}, | |
devtool: 'source-map', | |
module: { | |
rules: [ | |
// Use Babel to compile JS. | |
{ | |
test: /\.js$/, | |
exclude: /node_modules/, | |
loaders: [ | |
'babel-loader' | |
] | |
}, | |
// Create RTL styles. | |
{ | |
test: /\.css$/, | |
loader: ExtractTextPlugin.extract( 'style-loader' ) | |
}, | |
// SASS to CSS. | |
{ | |
test: /\.scss$/, | |
use: ExtractTextPlugin.extract( { | |
use: [ { | |
loader: 'css-loader', | |
options: { | |
sourceMap: true | |
} | |
}, { | |
loader: 'postcss-loader', | |
options: { | |
sourceMap: true | |
} | |
}, { | |
loader: 'sass-loader', | |
options: { | |
sourceMap: true, | |
outputStyle: (inProduction ? 'compressed' : 'nested') | |
} | |
} ] | |
} ) | |
}, | |
// Image files. | |
{ | |
test: /\.(png|jpe?g|gif|svg)$/, | |
use: [ | |
{ | |
loader: 'file-loader', | |
options: { | |
name: 'images/[name].[ext]', | |
publicPath: '../' | |
} | |
} | |
] | |
} | |
] | |
}, | |
// Plugins. Gotta have em'. | |
plugins: [ | |
// Removes the "dist" folder before building. | |
new CleanWebpackPlugin( [ 'resources/dist' ] ), | |
new ExtractTextPlugin( 'css/[name].css' ), | |
// Create RTL css. | |
new WebpackRTLPlugin() | |
] | |
}; | |
module.exports = [ | |
Object.assign({ | |
entry: { | |
'frontend': ['./resources/frontend/wp-convertkit.scss', './resources/frontend/wp-convertkit.js'], | |
'backend': ['./resources/backend/wp-convertkit.scss', './resources/backend/wp-convertkit.js'], | |
}, | |
output: { | |
path: path.join( __dirname, './resources/dist/' ), | |
filename: 'js/[name].js', | |
}, | |
}, config), | |
Object.assign({ | |
entry: { | |
'babel-polyfill': 'babel-polyfill', | |
'gutenberg': './blocks/load.js' | |
}, | |
// Tell webpack where to output. | |
output: { | |
path: path.resolve( __dirname, './resources/dist/' ), | |
filename: 'js/[name].js' | |
}, | |
}, config) | |
]; | |
// inProd? | |
if ( inProduction ) { | |
// POT file. | |
wpPot( { | |
package: 'ConvertKit', | |
domain: 'convertkit', | |
destFile: 'languages/convertkit.pot', | |
relativeTo: './', | |
} ); | |
// Uglify JS. | |
config.plugins.push( new webpack.optimize.UglifyJsPlugin( { sourceMap: true } ) ); | |
// Minify CSS. | |
config.plugins.push( new webpack.LoaderOptionsPlugin( { minimize: true } ) ); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment