Create a gist now

Instantly share code, notes, and snippets.

@ahmadawais /.babelrc
Last active Jul 15, 2017

What would you like to do?
Basic Gutenberg Custom Block with ESNext, Webpack, BabelJS— https://github.com/ahmadawais/Gutenberg-Boilerplate/tree/master/block/02-basic-esnext
{
"presets": [
[ "env", {
"modules": false,
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 1 Android version",
"last 1 ChromeAndroid version",
"ie 11"
]
}
} ]
],
"plugins": [
[ "transform-react-jsx", {
"pragma": "wp.element.createElement"
} ]
]
}
# Packages #
############
*.7z
*.dmg
*.gz
*.bz2
*.iso
*.jar
*.rar
*.tar
*.zip
*.tgz
*.map
# Logs and databases #
######################
*.log
*.sql
# OS generated files #
######################
**.DS_Store*
ehthumbs.db
Icon?
Thumbs.db
._*
# Vim generated files #
######################
*.un~
# SASS #
##########
**/.sass-cache
**/.sass-cache/*
**/.map
# Composer #
##########
vendors/composer/
!assets/js/vendor/
wpcs/
composer.lock
# Bower #
##########
assets/bower_components/*
# Codekit #
##########
/codekit-config.json
*.codekit
**.codekit-cache/*
# NPM #
##########
node_modules
# Compiled Files and Build Dirs #
##########
/README.html
/build/
# PhpStrom Project Files #
.idea/
library/vendors/composer
assets/img/.DS_Store
assets/sass/HTML
assets/sass/Rails
HTML
Rails

Custom Gutenberg Block

This is a basic custom Gutenberg block. Files explained below.

Getting Started!

Read the files explained above. All of the files are heavily inline documented. All you have to do is following:

  • Open up your favorite terminal app.
  • Makes sure NodeJS and NPM are installed by running node -v or npm -v to check their versions.
  • Access this directory cd /path/to/gutenberg-boilerplate/block/02-basic-esnext/
  • Install node dependencies by running node install or sudo node install
  • For building the block.js file into block.build.js you can use run npm scripts.
  • To watch and build run npm run dev
  • To build for production run npm run build
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
/**
* BLOCK: Basic with ESNext
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*
* Using inline styles - no external stylesheet needed. Not recommended!
* because all of these styles will appear in `post_content`.
*/
var __ = wp.i18n.__;
var registerBlockType = wp.blocks.registerBlockType;
/**
* Register Basic Block.
*
* Registers a new block provided a unique name and an object defining its
* behavior. Once registered, the block is made available as an option to any
* editor interface where blocks are implemented.
*
* @param {string} name Block name.
* @param {Object} settings Block settings.
* @return {?WPBlock} The block, if it has been successfully
* registered; otherwise `undefined`.
*/
registerBlockType('gb/02-basic-esnext', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __('Basic ESNext', 'GB'), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
// The "edit" property must be a valid function.
edit: function edit(props) {
// Creates a <p class='wp-block-gb-01-basic'></p>.
return wp.element.createElement(
'p',
{ className: props.className },
'Hello World! \u2014 from the editor (02 Basic Block ESNext).'
);
},
// The "save" property must be specified and must be a valid function.
save: function save(props) {
return wp.element.createElement(
'p',
{ className: props.className },
'Hello World! \u2014 from the frontend (02 Basic Block ESNext).'
);
}
});
/***/ })
/******/ ]);
/**
* BLOCK: Basic with ESNext
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*
* Using inline styles - no external stylesheet needed. Not recommended!
* because all of these styles will appear in `post_content`.
*/
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
/**
* Register Basic Block.
*
* Registers a new block provided a unique name and an object defining its
* behavior. Once registered, the block is made available as an option to any
* editor interface where blocks are implemented.
*
* @param {string} name Block name.
* @param {Object} settings Block settings.
* @return {?WPBlock} The block, if it has been successfully
* registered; otherwise `undefined`.
*/
registerBlockType( 'gb/02-basic-esnext', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'Basic ESNext', 'GB' ), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
// The "edit" property must be a valid function.
edit: function( props ) {
// Creates a <p class='wp-block-gb-01-basic'></p>.
return (
<p className={ props.className }>Hello World! — from the editor (02 Basic Block ESNext).</p>
);
},
// The "save" property must be specified and must be a valid function.
save: function( props ) {
return (
<p className={ props.className }>Hello World! — from the frontend (02 Basic Block ESNext).</p>
);
},
} );
/**
* ----------------------------------------------------------------------------
* #.# Editor CSS
*
* BLOCK: 02-basic-esnext block CSS for the editor.
* ----------------------------------------------------------------------------
*/
.wp-block-gb-02-basic-esnext {
color: #000000;
background: #BADA55;
border: 0.2rem solid green;
padding: 2rem;
}
<?php
/**
* BLOCK: Basic ESNext
*
* Gutenberg Custom Block assets.
*
* @since 1.0.0
* @package GB
*/
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// Hook: Editor assets.
add_action( 'enqueue_block_editor_assets', 'gb_block_02_basic_esnext_editor_assets' );
/**
* Enqueue the block's assets for the editor.
*
* `wp-blocks`: includes block type registration and related functions.
* `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks.
* `wp-i18n`: To internationalize the block's. text.
*
* @since 1.0.0
*/
function gb_block_02_basic_esnext_editor_assets() {
// Scripts.
wp_enqueue_script(
'gb-block-02-basic-esnext', // Handle.
plugins_url( 'block.build.js', __FILE__ ), // Block.build.js: We register the block here. Built with Webpack.
array( 'wp-blocks', 'wp-i18n', 'wp-element' ), // Dependencies, defined above.
filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) // filemtime — Gets file modification time.
);
// Styles.
wp_enqueue_style(
'gb-block-02-basic-esnext-editor', // Handle.
plugins_url( 'editor.css', __FILE__ ), // Block editor CSS.
array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
);
} // End fucntion gb_block_02_basic_esnext_editor_assets().
// Hook: Frontend assets.
add_action( 'enqueue_block_assets', 'gb_block_02_basic_esnext_block_assets' );
/**
* Enqueue the block's assets for the frontend.
*
* @since 1.0.0
*/
function gb_block_02_basic_esnext_block_assets() {
// Styles.
wp_enqueue_style(
'gb-block-02-basic-esnext-frontend', // Handle.
plugins_url( 'style.css', __FILE__ ), // Block frontend CSS.
array( 'wp-blocks' ), // Dependency to include the CSS after it.
filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
);
} // End fucntion gb_block_02_basic_esnext_block_assets().
{
"name": "02-basic-esnext",
"version": "1.0.0",
"main": "block.js",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.6.0",
"cross-env": "^5.0.1",
"webpack": "^3.1.0"
},
"scripts": {
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
"dev": "cross-env BABEL_ENV=default webpack --watch"
}
}
/**
* ----------------------------------------------------------------------------
* #.# Frontend CSS
*
* BLOCK: 02-basic-esnext block CSS for the frontend.
* ----------------------------------------------------------------------------
*/
.wp-block-gb-02-basic-esnext {
color: #000000;
background: lightblue;
border: 0.2rem solid blue;
padding: 2rem;
}
/**
* Webpack Configuration
*
* Block: `02-basic-esnext` — The Webpack config file.
*
* Working of a Webpack can be very simple or complex. This is an intenally simple
* build configuration.
*
* Webpack basics — If you are new the Webpack here's all you need to know:
* 1. Webpack is a module bundler. It bundles different JS modules together.
* 2. It needs and entry point and an ouput to process file(s) and bundle them.
* 3. By default it only understands common JavaScript but you can make it
* understand other formats by way of adding a Webpack loader.
* 4. In the file below you will find an entry point, an ouput, and a babel-loader
* that tests all .js files excluding the ones in node_modules to process the
* ESNext and make it compatible with older browsers i.e. it converts the
* ESNext (new standards of JavaScript) into old JavaScript through a loader
* by Babel.
*
* Instructions: How to build or develop with this Webpack config:
* 1. In the command line browse the folder `02-basic-esnext` where
* this `webpack.config.js` file is present.
* 2. Run the `npm run dev` or `npm run build` for development or
* production respectively.
* 3. To read what these NPM Scripts do, read the `package.json` file.
*
* @since 1.0.0
*/
module.exports = {
entry: './block.js', // Webpack
output: {
path: __dirname,
filename: 'block.build.js',
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
],
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment