new block

block-editor/index.js

@@ -0,0 +1 @@
+import './style.scss'

block-editor/style.scss

@@ -0,0 +1,7 @@
+.editor-inserter__block .svg-inline--fa {
+  margin-bottom: 3px;
+}
+
+.components-icon-button .svg-inline--fa {
+  margin: auto;
+}

blocks/colour-cta/block.js

@@ -26,6 +26,7 @@ import {
 import {
 	relativeRange 
 } from '@gblx/utils/math'
+import Icon from '@gblx/fontawesome'
 import Wrapper from './wrapper'
 import Content from './content'
 import Callout from './callout'
@@ -39,7 +40,7 @@ import './block.scss'
  */
 class ColourCTABlock {
 	title = __('Colour CTA', 'gblx')
-	icon = 'megaphone'
+	icon = <Icon icon="mouse-pointer" />
 	category = 'widgets'
 	attributes = {
 		headerText: {

blocks/featured-posts/block.js

@@ -0,0 +1,21 @@
+import { __ } from '@wordpress/i18n'
+import {
+  registerBlockType 
+} from '@wordpress/blocks'
+import Icon from '@gblx/fontawesome'
+
+class FeaturedPostsBlock {
+  title = __('Featured Posts', 'gblx')
+	icon = <Icon icon="thumbtack" />
+	category = 'widgets'
+	attributes = {
+  }
+  edit = () => {
+    return ''
+  }
+  save = () => {
+    return ''
+  }
+}
+
+registerBlockType('gblx/featured-posts', new FeaturedPostsBlock())

blocks/image-cta/block.js

@@ -26,6 +26,7 @@ import {
 import {
 	relativeRange 
 } from '@gblx/utils/math'
+import Icon from '@gblx/fontawesome'
 import Wrapper from './wrapper'
 import Content from './content'
 import Callout from './callout'
@@ -39,7 +40,7 @@ import './block.scss'
  */
 class ImageCTABlock {
 	title = __('Image CTA', 'gblx')
-	icon = 'megaphone'
+	icon = <Icon icon="mouse-pointer" />
 	category = 'widgets'
 	attributes = {
 		headerText: {

blocks/widget-columns/block.js

@@ -20,6 +20,7 @@ import {
 import {
   RangeControl
 } from '@gblx/components'
+import Icon from '@gblx/fontawesome'
 import Range from 'lodash/range'
 import classNames from 'classnames'
 import Image from './image'
@@ -31,7 +32,7 @@ import './block.scss'
 
 class WidgetColumnsBlock {
   title = __('Widget Columns', 'gblx')
-	icon = 'columns'
+	icon = <Icon icon="columns" />
 	category = 'widgets'
 	attributes = {
     spacing: {

core/fontawesome/index.js

@@ -0,0 +1,9 @@
+import fontawesome from '@fortawesome/fontawesome'
+
+fontawesome.library.add(
+  require('@fortawesome/fontawesome-free-solid/faMousePointer'),
+  require('@fortawesome/fontawesome-free-solid/faColumns'),
+  require('@fortawesome/fontawesome-free-solid/faThumbtack')
+)
+
+export { default } from '@fortawesome/react-fontawesome'

includes/functions-blocks.php

@@ -46,7 +46,16 @@ function register_block_types() {
           'script' => 'gblx-widget-columns',
           'style'  => 'gblx-widget-columns'
         )
-      )
+        ),
+        'gblx/featured-posts' => array(
+          'basename' => 'featured-posts',
+          'config'   => array(
+            'editor_script' => 'gblx-featured-posts-editor',
+            'editor_style'  => 'gblx-featured-posts-editor',
+            'script' => 'gblx-featured-posts',
+            'style'  => 'gblx-featured-posts'
+          )
+        )
   );
 
   foreach( $block_types as $type => $block ) {

includes/functions-scripts.php

@@ -10,6 +10,9 @@
 // Register default scripts
 add_action( 'init', 'gblx\register_default_scripts' );
 
+// Enqueue block editor scripts
+add_action( 'enqueue_block_editor_assets', 'gblx\enqueue_block_editor_scripts' );
+
 /**
  * Register frontend and admin scripts for a block
  * 
@@ -84,6 +87,18 @@ function get_script_version( $file ) {
   if ( in_dev_mode() ) {
     return @filemtime( plugin_dir( $file ) );
   }
-
   return VERSION;
+}
+
+/**
+ * Enqueue scripts for the Gutenberg editor
+ * 
+ * @action enqueue_block_editor_assets
+ * 
+ * @since 1.0.1
+ * @return void
+ */
+function enqueue_block_editor_scripts() {
+  $version = get_script_version( plugin_dir( 'dist/block-editor.js' ) );
+  wp_enqueue_script( 'gblx-block-editor', plugins_url( 'dist/block-editor.js', plugin_file() ), null, $version );
 }

package.json

@@ -34,9 +34,12 @@
     "webpack-merge": "^4.1.2"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.5",
+    "@fortawesome/fontawesome-free-solid": "^5.0.9",
+    "@fortawesome/react-fontawesome": "^0.0.18",
     "classnames": "^2.2.5",
     "lodash": "^4.17.5",
     "prop-types": "^15.6.1",
-    "react": "^16.2.0"
+    "react": "^16.2.0"  
   }
 }

webpack.config.js

@@ -3,17 +3,24 @@ const { flatMap, assign } = require('lodash')
 const BLOCKS = [
   'colour-cta',
   'image-cta',
-  'widget-columns'
+  'widget-columns',
+  'featured-posts'
 ]
 
-const ENTRY_POINTS = flatMap(BLOCKS, entry => [ 
-  { [`${entry}/editor`]: `${__dirname}/blocks/${entry}/block.js` }, 
-  { [`${entry}/public`]: `${__dirname}/blocks/${entry}/pkg.js`   } 
+const ENTRY_POINTS = {
+  'block-editor': `${__dirname}/block-editor/index.js`
+}
+
+const blockPaths = flatMap(BLOCKS, entry => [ 
+    { [`${entry}/editor`]: `${__dirname}/blocks/${entry}/block.js` }, 
+    { [`${entry}/public`]: `${__dirname}/blocks/${entry}/pkg.js`   } 
 ])
-.reduce((entries, entry) => assign(entries, entry));
+.reduce(
+  (entries, entry) => assign(entries, entry)
+)
 
 module.exports = {
-  entry: ENTRY_POINTS,
+  entry: assign(ENTRY_POINTS, blockPaths),
   module: {
     rules: [
       {

yarn.lock

@@ -2,6 +2,28 @@
 # yarn lockfile v1
 
 
+"@fortawesome/fontawesome-common-types@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.3.tgz#8475e0f2d1ad1f858c4ec2e76ed9a2456a09ad83"
+
+"@fortawesome/fontawesome-free-solid@^5.0.9":
+  version "5.0.9"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.9.tgz#456155a1cd82a0342ffe6a869d5a54fdadd78548"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.3"
+
+"@fortawesome/fontawesome@^1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.5.tgz#c7cfafdd3364245626293cc670357f9fb8487170"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.3"
+
+"@fortawesome/react-fontawesome@^0.0.18":
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.0.18.tgz#4e0eb1cf9797715a67bb7705ae084fa0a410f185"
+  dependencies:
+    humps "^2.0.1"
+
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@@ -2721,6 +2743,10 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
+humps@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+
 iconv-lite@^0.4.17, iconv-lite@~0.4.13:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -4474,7 +4500,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.0, prop-types@^15.6.1:
+prop-types@^15.5.6, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -4591,6 +4617,12 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-fontawesome@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/react-fontawesome/-/react-fontawesome-1.6.1.tgz#eddce17e7dc731aa09fd4a186688a61793a16c5c"
+  dependencies:
+    prop-types "^15.5.6"
+
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"