Skip to content

Instantly share code, notes, and snippets.

@jrtashjian
Created April 11, 2019 19:25
Show Gist options
  • Save jrtashjian/4d1be64d139389d14773245b745d4456 to your computer and use it in GitHub Desktop.
Save jrtashjian/4d1be64d139389d14773245b745d4456 to your computer and use it in GitHub Desktop.
Get With Gutenberg - Getting Started with Block Development in ES.Next • https://getwithgutenberg.com/2019/03/getting-started-with-block-development-in-es-next/
> 1%
ie >= 11
last 1 Android versions
last 1 ChromeAndroid versions
last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versions
last 2 iOS versions
last 2 Edge versions
last 2 Opera versions
# Create our plugin folder and move into it
mkdir wp-content/plugins/esnext-starter
cd wp-content/plugins/esnext-starter
# Initialize our NPM package.json file.
npm init -y
# Install webpack
npm install --save-dev webpack webpack-cli
# Install Babel
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
# Install utility for using environment variables across platforms.
npm install --save-dev cross-env
const externals = {
wp: 'wp',
react: 'React',
'react-dom': 'ReactDOM',
};
const isProduction = process.env.NODE_ENV === 'production';
const mode = isProduction ? 'production' : 'development';
module.exports = {
mode,
entry: './block.js',
output: {
path: __dirname,
filename: 'block.build.js',
},
externals,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
};
const externals = {
wp: 'wp',
react: 'React',
'react-dom': 'ReactDOM',
};
const isProduction = process.env.NODE_ENV === 'production';
const mode = isProduction ? 'production' : 'development';
module.exports = {
mode,
entry: './block.js',
output: {
path: __dirname,
filename: 'block.build.js',
},
externals,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
};
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "cross-env webpack --watch"
}
<?php
function gwg_block_assets() {
wp_enqueue_style(
'gwg-style-css',
plugin_dir_url( __FILE__ ) . 'style.css'
);
}
add_action( 'enqueue_block_assets', 'gwg_block_assets' );
<?php
function gwg_editor_assets() {
wp_enqueue_script(
'gwg-block-js',
plugin_dir_url( __FILE__ ) . 'block.build.js',
[],
false,
true // Enqueue script in the footer.
);
wp_enqueue_style(
'gwg-editor-css',
plugin_dir_url( __FILE__ ) . 'editor.css',
);
}
add_action( 'enqueue_block_editor_assets', 'gwg_editor_assets' );
const { registerBlockType } = wp.blocks;
registerBlockType('gwg/esnext-starter', {
title: 'Get With Gutenberg - ES.Next Starter',
category: 'common',
edit(props) {
return <p className{props.className}>Hello editor.</p>
},
save(props) {
return <p className{props.className}>Hello saved content.</p>
},
});
{
"presets": [ "@babel/preset-env", "@babel/preset-react" ]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment