Preliminary Gutenberg support.

assets/scripts/blocks/hero-unit/block.js

@@ -0,0 +1,118 @@
+/* eslint-disable no-restricted-globals */
+( function ( blocks, i18n, element, _ ) {
+	let el = element.createElement;
+
+	wp.blocks.registerBlockType( 'aldine/hero-unit', {
+		title: i18n.__( 'Hero Unit', 'pressbooks-aldine' ),
+
+		icon: 'flag',
+
+		category: 'layout',
+
+		attributes: {
+			title: {
+				type:     'array',
+				source:   'children',
+				selector: 'h2',
+			},
+			content: {
+				type:     'array',
+				source:   'children',
+				selector: 'p',
+			},
+		},
+
+		edit: function ( props ) {
+			let focusedEditable = props.focus
+				? props.focus.editable || 'title'
+				: null;
+			let attributes = props.attributes;
+
+			return el(
+				'div',
+				{ className: props.className },
+				el( blocks.Editable, {
+					tagName:     'h2',
+					className:   'hero__title',
+					inline:      false,
+					placeholder: i18n.__(
+						'About Pressbooks',
+						'pressbooks-aldine'
+					),
+					value:    attributes.title,
+					onChange: function ( value ) {
+						props.setAttributes( { title: value } );
+					},
+					focus:   focusedEditable === 'title' ? focus : null,
+					onFocus: function ( focus ) {
+						props.setFocus(
+							_.extend( {}, focus, { editable: 'title' } )
+						);
+					},
+				} ),
+				el( blocks.Editable, {
+					tagName:     'p',
+					className:   'hero__content',
+					inline:      false,
+					placeholder: i18n.__(
+						'Kogi ennui ugh plaid, hella neutra kitsch cloud bread next level twee taiyaki. Live-edge paleo fixie whatever farm-to-table snackwave, meditation fam man braid next level viral. Four loko waistcoat mustache cloud bread activated charcoal food truck pabst roof party ugh kitsch raw denim edison bulb man braid 8-bit try-hard. Activated charcoal put a bird on it tilde meggings farm-to-table coloring book. Before they sold out four dollar toast stumptown actually.',
+						'pressbooks-gutenberg'
+					),
+					value:    attributes.content,
+					onChange: function ( value ) {
+						props.setAttributes( { content: value } );
+					},
+					focus:   focusedEditable === 'content' ? focus : null,
+					onFocus: function ( focus ) {
+						props.setFocus(
+							_.extend( {}, focus, { editable: 'content' } )
+						);
+					},
+				} ),
+				el(
+					'p',
+					{ classname: 'hero__cta' },
+					el( blocks.Editable, {
+						tagName:     'a',
+						className:   'call-to-action',
+						inline:      false,
+						placeholder: i18n.__( 'Learn More', 'pressbooks-aldine' ),
+						value:       attributes.cta,
+						onChange:    function ( value ) {
+							props.setAttributes( { cta: value } );
+						},
+						focus:   focusedEditable === 'cta' ? focus : null,
+						onFocus: function ( focus ) {
+							props.setFocus(
+								_.extend( {}, focus, { editable: 'cta' } )
+							);
+						},
+					} )
+				)
+			);
+		},
+		save: function ( props ) {
+			let attributes = props.attributes;
+
+			return el(
+				'div',
+				{ className: props.className },
+				el(
+					'h2',
+					{ className: 'hero__title' },
+					attributes.title
+				),
+				el(
+					'p',
+					{ className: 'hero__content' },
+					attributes.content
+				),
+				el(
+					'p',
+					{ classname: 'hero__cta' },
+					el( 'a', { classname: 'call-to-action' }, attributes.cta )
+				)
+			);
+		},
+	} );
+} )( window.wp.blocks, window.wp.i18n, window.wp.element, window._ );

assets/styles/blocks/hero-unit/editor.scss

@@ -0,0 +1 @@
+/**	TODO **/

dist/mix-manifest.json

@@ -1,6 +1,8 @@
 {
-    "/scripts/aldine.js": "/scripts/aldine.js?id=c8641d03dfb38dc75e0d",
-    "/styles/aldine.css": "/styles/aldine.css?id=f76caf89bff3fa5dbd29",
-    "/styles/editor.css": "/styles/editor.css?id=6e790d6de9d8bda7eabf",
-    "/scripts/customizer.js": "/scripts/customizer.js?id=f1f1f4225cba4c1b35f2"
+    "/scripts/aldine.js": "/scripts/aldine.js?id=efcb42c04ca82ffdf060",
+    "/styles/aldine.css": "/styles/aldine.css?id=3a484b180e7757a8b6c7",
+    "/styles/editor.css": "/styles/editor.css?id=16680c95cc79caed750f",
+    "/styles/blocks/hero-unit/editor.css": "/styles/blocks/hero-unit/editor.css?id=d41d8cd98f00b204e980",
+    "/scripts/customizer.js": "/scripts/customizer.js?id=f1f1f4225cba4c1b35f2",
+    "/scripts/blocks/hero-unit/block.js": "/scripts/blocks/hero-unit/block.js?id=bb2a9d7ae4e646a7919d"
 }

dist/scripts/blocks/hero-unit/block.js

@@ -0,0 +1 @@
+!function(e){function t(a){if(o[a])return o[a].exports;var n=o[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var o={};t.m=e,t.c=o,t.d=function(e,o,a){t.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(o,"a",o),o},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}({2:function(e,t,o){e.exports=o("wSxJ")},wSxJ:function(e,t){!function(e,t,o,a){var n=o.createElement;wp.blocks.registerBlockType("aldine/hero-unit",{title:t.__("Hero Unit","pressbooks-aldine"),icon:"flag",category:"layout",attributes:{title:{type:"array",source:"children",selector:"h2"},content:{type:"array",source:"children",selector:"p"}},edit:function(o){var l=o.focus?o.focus.editable||"title":null,c=o.attributes;return n("div",{className:o.className},n(e.Editable,{tagName:"h2",className:"hero__title",inline:!1,placeholder:t.__("About Pressbooks","pressbooks-aldine"),value:c.title,onChange:function(e){o.setAttributes({title:e})},focus:"title"===l?focus:null,onFocus:function(e){o.setFocus(a.extend({},e,{editable:"title"}))}}),n(e.Editable,{tagName:"p",className:"hero__content",inline:!1,placeholder:t.__("Kogi ennui ugh plaid, hella neutra kitsch cloud bread next level twee taiyaki. Live-edge paleo fixie whatever farm-to-table snackwave, meditation fam man braid next level viral. Four loko waistcoat mustache cloud bread activated charcoal food truck pabst roof party ugh kitsch raw denim edison bulb man braid 8-bit try-hard. Activated charcoal put a bird on it tilde meggings farm-to-table coloring book. Before they sold out four dollar toast stumptown actually.","pressbooks-gutenberg"),value:c.content,onChange:function(e){o.setAttributes({content:e})},focus:"content"===l?focus:null,onFocus:function(e){o.setFocus(a.extend({},e,{editable:"content"}))}}),n("p",{classname:"hero__cta"},n(e.Editable,{tagName:"a",className:"call-to-action",inline:!1,placeholder:t.__("Learn More","pressbooks-aldine"),value:c.cta,onChange:function(e){o.setAttributes({cta:e})},focus:"cta"===l?focus:null,onFocus:function(e){o.setFocus(a.extend({},e,{editable:"cta"}))}})))},save:function(e){var t=e.attributes;return n("div",{className:e.className},n("h2",{className:"hero__title"},t.title),n("p",{className:"hero__content"},t.content),n("p",{classname:"hero__cta"},n("a",{classname:"call-to-action"},t.cta)))}})}(window.wp.blocks,window.wp.i18n,window.wp.element,window._)}});

inc/actions/namespace.php

@@ -202,3 +202,20 @@ function output_custom_colors() {
 function remove_admin_bar_callback() {
 	remove_action( 'wp_head', '_admin_bar_bump_cb' );
 }
+
+/**
+ * Enqueue block editor assets.
+ */
+function enqueue_block_editor_assets() {
+	$assets = new Assets( 'pressbooks-aldine', 'theme' );
+	$assets->setSrcDirectory( 'assets' )->setDistDirectory( 'dist' );
+
+	wp_enqueue_script( 'aldine/hero-unit-block', $assets->getPath( 'scripts/blocks/hero-unit/block.js' ), [
+		'wp-blocks',
+		'wp-i18n',
+		'wp-element',
+	], null );
+	wp_enqueue_style( 'aldine/hero-unit-block', $assets->getPath( 'scripts/blocks/hero-unit/block.css' ), [
+		'wp-blocks',
+	], null );
+}

package.json

@@ -41,7 +41,8 @@
 			"cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 		"rmdist": "rimraf dist",
 		"lint": "npm run -s lint:scripts && npm run -s lint:styles",
-		"lint:scripts": "node_modules/eslint/bin/eslint.js \"assets/scripts/*.js\"",
+		"lint:scripts":
+			"node_modules/eslint/bin/eslint.js \"assets/scripts/**/*.js\"",
 		"lint:styles":
 			"node_modules/stylelint/bin/stylelint.js \"assets/styles/**/*.scss\" --syntax scss",
 		"test": "npm run -s lint"

webpack.mix.js

@@ -36,13 +36,21 @@ mix.browserSync( {
 // Sass
 mix.sass( `${assets}/styles/aldine.scss`, `${dist}/styles/aldine.css` );
 mix.sass( `${assets}/styles/editor.scss`, `${dist}/styles/editor.css` );
+mix.sass(
+	`${assets}/styles/blocks/hero-unit/editor.scss`,
+	`${dist}/styles/blocks/hero-unit/editor.css`
+);
 
 // Javascript
 mix.autoload( { jquery: [ '$', 'window.jQuery', 'jQuery' ] } );
 
 mix
 	.js( `${assets}/scripts/aldine.js`, `${dist}/scripts` )
-	.js( `${assets}/scripts/customizer.js`, `${dist}/scripts` );
+	.js( `${assets}/scripts/customizer.js`, `${dist}/scripts` )
+	.js(
+		`${assets}/scripts/blocks/hero-unit/block.js`,
+		`${dist}/scripts/blocks/hero-unit`
+	);
 
 // Assets
 mix