Add job shortcode block

assets/blocks/job/edit.jsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import JobListing from './job-listing.jsx';
+import SelectJobListing from './select-job-listing.jsx';
+
+/**
+ * Edit UI for the Job block.
+ */
+const EditJob = ( { attributes, isSelected, jobListings, jobTypes, setAttributes } ) => {
+	const listing = find( jobListings, { id: attributes.jobId } );
+
+	if ( ! isSelected && listing ) {
+		return <JobListing listing={ listing } jobTypes={ jobTypes } />;
+	}
+
+	return <SelectJobListing attributes={ attributes } jobListings={ jobListings } setAttributes={ setAttributes } />;
+};
+
+export default withSelect( ( select, props ) => ( {
+	jobListings: select( 'wp-job-manager' ).getAllJobListings(),
+	jobTypes: select( 'wp-job-manager' ).getAllJobTypes()
+} ) )( EditJob );

assets/blocks/job/index.jsx

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import EditJob from './edit.jsx';
+import './style.scss';
+import registerStore from '../data';
+
+const attributesConfig = {
+	jobId: {
+		type: 'integer',
+		default: 0,
+	}
+};
+
+const edit = ( { className, ...props } ) => (
+	<div className={ className }>
+		<EditJob { ...props } />
+	</div>
+);
+
+const save = ( { attributes } ) => {
+	if ( ! attributes.id ) {
+		return;
+	}
+
+	return `[job id="${ attributes.id }"]`;
+};
+
+registerStore();
+
+registerBlockType( 'wp-job-manager/job', {
+	title: 'Job',
+	icon: 'list-view',
+	category: 'common',
+	attributes: applyFilters( 'wpjm_block_job_attributes_config', attributesConfig ),
+	edit,
+	save
+} );

includes/class-wp-job-manager-blocks.php

@@ -38,18 +38,27 @@ public static function get_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() {
+		if ( ! function_exists( 'register_block_type' ) ) {
+			return;
+		}
+
 		// Add script includes for gutenblocks.
+		wp_register_script(
+			'wp-job-manager-block-job',
+			JOB_MANAGER_PLUGIN_URL . '/assets/build/blocks/job.js',
+			array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-hooks' ),
+			'0.1.0'
+		);
+		register_block_type( 'wp-job-manager/job', array(
+			'editor_script' => 'wp-job-manager-block-job',
+		) );
 	}
 }
 

webpack.config.js

@@ -40,7 +40,7 @@ const webpackConfig = ( env, argv ) => {
 		},
 		plugins: [
 			new cleanWebpackPlugin( [ 'build/blocks' ] ),
-			new lodashModuleReplacementPlugin(),
+			new lodashModuleReplacementPlugin( { shorthands: true } ),
 			new miniCssExtractPlugin( {
 				filename: 'build/blocks/[name]/style.css'
 			} ),