diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..863c815f3
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,25 @@
+{
+	"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"
+				]
+			}
+		} ]
+	],
+	"plugins": [
+		[ "transform-react-jsx", {
+			"pragma": "wp.element.createElement"
+		} ],
+		"transform-class-properties",
+		"transform-object-rest-spread",
+		"lodash"
+	]
+}
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..2b1060cea
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+assets/build
+assets/js
+node_modules
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..60dbae418
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,176 @@
+module.exports = {
+	root: true,
+	parser: 'babel-eslint',
+	extends: [
+		'wordpress',
+		'plugin:wordpress/esnext',
+		'plugin:react/recommended',
+		'plugin:jsx-a11y/recommended',
+	],
+	env: {
+		browser: true,
+		es6: true,
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+	globals: {
+		wp: true,
+		window: true,
+		document: true,
+		"jQuery": true,
+		"ajaxurl": true,
+		"woo_localized_data": true
+	},
+	plugins: [
+		'wordpress',
+		'react',
+		'jsx-a11y',
+	],
+	settings: {
+		react: {
+			pragma: 'wp',
+		},
+	},
+	rules: {
+		'array-bracket-spacing': [ 'error', 'always' ],
+		'arrow-parens': [ 'error', 'always' ],
+		'arrow-spacing': 'error',
+		'brace-style': [ 'error', '1tbs' ],
+		camelcase: [ 'error', { properties: 'never' } ],
+		'comma-dangle': [ 'error', 'always-multiline' ],
+		'comma-spacing': 'error',
+		'comma-style': 'error',
+		'computed-property-spacing': [ 'error', 'always' ],
+		'dot-notation': 'error',
+		'eol-last': 'error',
+		eqeqeq: 'error',
+		'func-call-spacing': 'error',
+		indent: [ 'error', 'tab', { SwitchCase: 1 } ],
+		'jsx-a11y/label-has-for': [ 'error', {
+			required: 'id',
+		} ],
+		'jsx-a11y/media-has-caption': 'off',
+		'jsx-a11y/no-noninteractive-tabindex': 'off',
+		'jsx-a11y/role-has-required-aria-props': 'off',
+		'jsx-quotes': 'error',
+		'key-spacing': 'error',
+		'keyword-spacing': 'error',
+		'lines-around-comment': 'off',
+		'no-alert': 'error',
+		'no-bitwise': 'error',
+		'no-caller': 'error',
+		'no-console': 'error',
+		'no-debugger': 'error',
+		'no-dupe-args': 'error',
+		'no-dupe-keys': 'error',
+		'no-duplicate-case': 'error',
+		'no-else-return': 'error',
+		'no-eval': 'error',
+		'no-extra-semi': 'error',
+		'no-fallthrough': 'error',
+		'no-lonely-if': 'error',
+		'no-mixed-operators': 'error',
+		'no-mixed-spaces-and-tabs': 'error',
+		'no-multiple-empty-lines': [ 'error', { max: 1 } ],
+		'no-multi-spaces': 'error',
+		'no-multi-str': 'off',
+		'no-negated-in-lhs': 'error',
+		'no-nested-ternary': 'error',
+		'no-redeclare': 'error',
+		'no-restricted-syntax': [
+			'error',
+			{
+				selector: 'CallExpression[callee.name=/^__|_n|_x$/]:not([arguments.0.type=/^Literal|BinaryExpression$/])',
+				message: 'Translate function arguments must be string literals.',
+			},
+			{
+				selector: 'CallExpression[callee.name=/^_n|_x$/]:not([arguments.1.type=/^Literal|BinaryExpression$/])',
+				message: 'Translate function arguments must be string literals.',
+			},
+			{
+				selector: 'CallExpression[callee.name=_nx]:not([arguments.2.type=/^Literal|BinaryExpression$/])',
+				message: 'Translate function arguments must be string literals.',
+			},
+		],
+		'no-shadow': 'error',
+		'no-undef': 'error',
+		'no-undef-init': 'error',
+		'no-unreachable': 'error',
+		'no-unsafe-negation': 'error',
+		'no-unused-expressions': 'error',
+		'no-unused-vars': 'error',
+		'no-useless-return': 'error',
+		'no-whitespace-before-property': 'error',
+		'object-curly-spacing': [ 'error', 'always' ],
+		'padded-blocks': [ 'error', 'never' ],
+		'quote-props': [ 'error', 'as-needed' ],
+		'react/display-name': 'off',
+		'react/jsx-curly-spacing': [ 'error', {
+			when: 'always',
+			children: true,
+		} ],
+		'react/jsx-equals-spacing': 'error',
+		'react/jsx-indent': [ 'error', 'tab' ],
+		'react/jsx-indent-props': [ 'error', 'tab' ],
+		'react/jsx-key': 'error',
+		'react/jsx-tag-spacing': 'error',
+		'react/no-children-prop': 'off',
+		'react/prop-types': 'off',
+		semi: 'error',
+		'semi-spacing': 'error',
+		'space-before-blocks': [ 'error', 'always' ],
+		'space-before-function-paren': [ 'error', {
+			anonymous: 'never',
+			named: 'never',
+			asyncArrow: 'always',
+		} ],
+		'space-in-parens': [ 'error', 'always' ],
+		'space-infix-ops': [ 'error', { int32Hint: false } ],
+		'space-unary-ops': [ 'error', {
+			overrides: {
+				'!': true,
+				yield: true,
+			},
+		} ],
+		'valid-jsdoc': [ 'error', {
+			prefer: {
+				arg: 'param',
+				argument: 'param',
+				extends: 'augments',
+				returns: 'return',
+			},
+			preferType: {
+				array: 'Array',
+				bool: 'boolean',
+				Boolean: 'boolean',
+				float: 'number',
+				Float: 'number',
+				int: 'number',
+				integer: 'number',
+				Integer: 'number',
+				Number: 'number',
+				object: 'Object',
+				String: 'string',
+				Void: 'void',
+			},
+			requireParamDescription: false,
+			requireReturn: false,
+		} ],
+		'valid-typeof': 'error',
+		yoda: 'off',
+	},
+	overrides: [
+		{
+			files: 'packages/**/*.js?',
+			settings: {
+				react: {
+					pragma: 'createElement',
+				},
+			},
+		},
+	],
+};
diff --git a/Gruntfile.js b/Gruntfile.js
index 4d0407493..e958dd7e9 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,5 +1,6 @@
-/* jshint node:true */
-module.exports = function( grunt ){
+/* eslint-disable */
+
+module.exports = function( grunt ) {
 	'use strict';
 
 	grunt.initConfig({
@@ -9,6 +10,7 @@ module.exports = function( grunt ){
 			fonts: 'assets/font',
 			images: 'assets/images',
 			js: 'assets/js',
+			blocks: 'assets/blocks',
 			build: 'tmp/build',
 			svn: 'tmp/release-svn'
 		},
@@ -16,6 +18,12 @@ module.exports = function( grunt ){
 		shell: {
 			buildMixtape: {
 				command: 'node_modules/.bin/mixtape build'
+			},
+			webpack: {
+				command: 'cross-env BABEL_ENV=default NODE_ENV=production webpack'
+			},
+			webpackDev: {
+				command: 'cross-env BABEL_ENV=default webpack --watch'
 			}
 		},
 
@@ -274,7 +282,10 @@ module.exports = function( grunt ){
 
 	grunt.registerTask( 'build-mixtape', [ 'shell:buildMixtape' ] );
 
-	grunt.registerTask( 'build', [ 'gitinfo', 'clean', 'check-mixtape', 'check-mixtape-fatal', 'test', 'copy' ] );
+	grunt.registerTask( 'build-blocks', [ 'shell:webpack' ] );
+	grunt.registerTask( 'build-blocks:dev', [ 'shell:webpackDev' ] );
+
+	grunt.registerTask( 'build', [ 'gitinfo', 'clean', 'check-mixtape', 'check-mixtape-fatal', 'test', 'build-blocks', 'copy' ] );
 
 	grunt.registerTask( 'deploy', [ 'checkbranch:master', 'checkrepo', 'build', 'wp_deploy' ] );
 	grunt.registerTask( 'deploy-unsafe', [ 'build', 'wp_deploy' ] );
diff --git a/includes/class-wp-job-manager-blocks.php b/includes/class-wp-job-manager-blocks.php
new file mode 100644
index 000000000..dad09abeb
--- /dev/null
+++ b/includes/class-wp-job-manager-blocks.php
@@ -0,0 +1,56 @@
+<?php
+/**
+ * Handles Job Manager's Gutenberg Blocks.
+ *
+ * @package wp-job-manager
+ * @since 1.32.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * WP_Job_Manager_Blocks
+ */
+class WP_Job_Manager_Blocks {
+	/**
+	 * The static instance of the WP_Job_Manager_Blocks
+	 *
+	 * @var self
+	 */
+	private static $_instance = null;
+
+	/**
+	 * Singleton instance getter
+	 *
+	 * @return self
+	 */
+	public static function get_instance() {
+		if ( ! self::$_instance ) {
+			self::$_instance = new WP_Job_Manager_Blocks();
+		}
+
+		return self::$_instance;
+	}
+
+	/**
+	 * Instance constructor
+	 */
+	private function __construct() {
+		if ( ! function_exists( 'register_block_type' ) ) {
+			return;
+		}
+
+		add_action( 'init', array( $this, 'register_blocks' ) );
+	}
+
+	/**
+	 * Register all Gutenblocks
+	 */
+	public function register_blocks() {
+		// Add script includes for gutenblocks.
+	}
+}
+
+WP_Job_Manager_Blocks::get_instance();
diff --git a/package.json b/package.json
index 97c87b92d..409887401 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,29 @@
   "license": "GPL-2.0+",
   "repository": "automattic/wp-job-manager",
   "main": "Gruntfile.js",
+  "scripts": {
+    "build": "BABEL_ENV=default NODE_ENV=production webpack",
+    "clean": "rimraf assets/build",
+    "dev": "BABEL_ENV=default webpack --watch",
+    "lint": "eslint --ext js,jsx assets/blocks"
+  },
   "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.5",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
+    "clean-webpack-plugin": "^0.1.19",
+    "cross-env": "^5.2.0",
+    "css-loader": "^0.28.11",
+    "eslint": "^5.0.1",
+    "eslint-config-wordpress": "^2.0.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.10.0",
+    "eslint-plugin-wordpress": "git://github.com/WordPress-Coding-Standards/eslint-plugin-wordpress.git#1774343f6226052a46b081e01db3fca8793cc9f1",
     "grunt": "~1.0.1",
     "grunt-checkbranch": "^1.0.4",
     "grunt-checkrepo": "^0.1.0",
@@ -31,10 +53,22 @@
     "grunt-wp-i18n": "^1.0.2",
     "grunt-wp-readme-to-markdown": "^2.0.0",
     "grunt-zip": "^0.17.1",
-    "mixtape": "git+https://github.com/Automattic/mixtape.git#faca4e486ae88661bd642c1b44e058b9bc461fa2"
+    "lodash-webpack-plugin": "^0.11.5",
+    "mixtape": "git+https://github.com/Automattic/mixtape.git#faca4e486ae88661bd642c1b44e058b9bc461fa2",
+    "node-sass": "^4.9.0",
+    "rimraf": "^2.6.2",
+    "sass-loader": "^7.0.3",
+    "style-loader": "^0.21.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.8"
   },
   "engines": {
     "node": ">=0.8.0",
     "npm": ">=1.1.0"
+  },
+  "dependencies": {
+    "lodash": "^4.17.10",
+    "react": "^16.4.1"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 000000000..cb79959ca
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,56 @@
+/* global require, module, process, __dirname */
+
+const CleanWebpackPlugin = require( 'clean-webpack-plugin' );
+const LodashModuleReplacementPlugin = require( 'lodash-webpack-plugin' );
+const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin' );
+
+const blockNames = [
+	// Add the name of the block as a directory in the assets/blocks directory.
+];
+
+const webpackConfig = {
+	mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+
+	entry: Object.assign(
+		blockNames.reduce( ( blocks, blockName ) => {
+			const path = `./assets/blocks/${ blockName }/index.jsx`;
+			blocks[ blockName ] = path;
+			return blocks;
+		}, {} )
+	),
+	output: {
+		filename: 'assets/build/blocks/[name].js',
+		path: __dirname,
+	},
+	module: {
+		rules: [
+			{
+				test: /.jsx$/,
+				use: 'babel-loader',
+				exclude: /node_modules/,
+			},
+			{
+				test: /\.css$/,
+				use: [
+					'style-loader',
+					'css-loader',
+				],
+			},
+			{
+				test: /\.scss$/,
+				use: [
+					'style-loader',
+					'css-loader',
+					'sass-loader',
+				],
+			},
+		],
+	},
+	plugins: [
+		new CleanWebpackPlugin( [ 'assets/build/blocks' ] ),
+		new LodashModuleReplacementPlugin(),
+		new UglifyJsPlugin(),
+	],
+};
+
+module.exports = webpackConfig;
diff --git a/wp-job-manager.php b/wp-job-manager.php
index 03f111059..22cbf5182 100644
--- a/wp-job-manager.php
+++ b/wp-job-manager.php
@@ -72,6 +72,7 @@ public function __construct() {
 		include_once( JOB_MANAGER_PLUGIN_DIR . '/includes/class-wp-job-manager-api.php' );
 		include_once( JOB_MANAGER_PLUGIN_DIR . '/includes/class-wp-job-manager-forms.php' );
 		include_once( JOB_MANAGER_PLUGIN_DIR . '/includes/class-wp-job-manager-geocode.php' );
+		include_once( JOB_MANAGER_PLUGIN_DIR . '/includes/class-wp-job-manager-blocks.php' );
 		include_once( JOB_MANAGER_PLUGIN_DIR . '/includes/class-wp-job-manager-cache-helper.php' );
 		include_once( JOB_MANAGER_PLUGIN_DIR . '/includes/helper/class-wp-job-manager-helper.php' );
 		include_once( JOB_MANAGER_PLUGIN_DIR . '/includes/abstracts/abstract-wp-job-manager-email.php' );