Feature/203 gutenberg block structure

.gitignore

@@ -4,6 +4,7 @@ release
 vendor
 phpunit.xml
 .idea
+.vscode
 
 # Project Files
 dist

README.md

@@ -86,6 +86,16 @@ _* If your host machine's local version of PHP is <7.2, composer may produce the
 ```
 _To suppress this error, add the flag `--ignore-platform-reqs` (ie. `composer install --ignore-platform-reqs`)._
 
+## Custom Blocks
+The Theme Scaffolding supports custom blocks and leverages the Block API as of WordPress 5.5. Set up a custom block using the following steps:
+
+1. Define an entry point for the block in `/config/webpack.settings.js`. The entry point should in the format `{name}-block` i.e `hero-block`
+2. Add a directory for the block in `/includes/blocks/{name}-block`. i.e `/includes/blocks/hero-block`
+3. The block directory requires a `block.json` file.
+4. Refer to the `./includes/blocks/example-block` directory to see how the block files should be set up.
+
+To set up a custom block As such, each custom block must have an entry point defined in `/config/webpack.settings.js` and it's assets stored in `/includes/blocks/{block}`
+
 ## Automated Style Guide
 The Theme Scaffolding ships with a default style guide you can find in `/templates/page-styleguide.php`. This file contains all the basic HTML elements you would find at the very top of the cascade (headings, typography, tables, forms, etc.) These base elements will be styled and displayed as you naturally build out your CSS. The style guide also automatically pulls in the color variables used in the project. Any hex codes added into `/assets/css/frontend/global/variables.css` will be automatically displayed in the style guide. To set up your style guide, you just need to create a new page in WordPress and assign it the "Style Guide" template.
 

assets/css/blocks/index.css

@@ -9,7 +9,7 @@
 * create new partials here as needed
 */
 
-/* @import url("example-block-1.css"); */
+/* @import url("example-block.css"); */
 
 /* @import url("example-block-2.css"); */
 

assets/css/frontend/editor-style.css

@@ -8,4 +8,10 @@
 
 /* Gutenberg blocks */
 
+/*
+For Admin specific overrides please see use
+the index.css in the block directory.
+*/
+
+
 /* @import url("../blocks/index.css"); */

config/webpack.config.common.js

@@ -6,6 +6,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 const WebpackBar = require('webpackbar');
 const ImageminPlugin = require('imagemin-webpack-plugin').default;
+const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
 
 const isProduction = process.env.NODE_ENV === 'production';
 
@@ -31,7 +32,12 @@ module.exports = {
 	entry: configureEntries(),
 	output: {
 		path: path.resolve(process.cwd(), settings.paths.dist.base),
-		filename: settings.filename.js,
+		filename: (pathData) => {
+			return pathData.chunk.name.includes('block')
+				? settings.filename.block
+				: settings.filename.js;
+		},
+
 		/**
 		 * If multiple webpack runtimes (from different compilations) are used on the same webpage,
 		 * there is a risk of conflicts of on-demand chunks in the global namespace.
@@ -87,7 +93,10 @@ module.exports = {
 			// Styles.
 			{
 				test: /\.css$/,
-				include: path.resolve(process.cwd(), settings.paths.src.css),
+				include: [
+					path.resolve(process.cwd(), settings.paths.src.base),
+					path.resolve(process.cwd(), settings.paths.src.blocks),
+				],
 				use: [
 					{
 						loader: MiniCssExtractPlugin.loader,
@@ -126,6 +135,8 @@ module.exports = {
 		// Extract CSS into individual files.
 		new MiniCssExtractPlugin({
 			filename: settings.filename.css,
+			moduleFilename: ({ name }) =>
+				name.includes('block') ? settings.filename.blockCSS : settings.filename.css,
 			chunkFilename: '[id].css',
 		}),
 
@@ -153,5 +164,8 @@ module.exports = {
 
 		// Fancy WebpackBar.
 		new WebpackBar(),
+
+		// Extract dependencies
+		new DependencyExtractionWebpackPlugin({ injectPolyfill: true }),
 	],
 };

config/webpack.settings.js

@@ -3,32 +3,37 @@ module.exports = {
 	entries: {
 		// JS files.
 		admin: './assets/js/admin/admin.js',
-		blocks: './assets/js/blocks/blocks.js',
 		frontend: './assets/js/frontend/frontend.js',
 		shared: './assets/js/shared/shared.js',
 		styleguide: './assets/js/styleguide/styleguide.js',
-		'blocks-editor': './includes/blocks/blocks-editor.js',
 
 		// CSS files.
 		'admin-style': './assets/css/admin/admin-style.css',
 		'editor-style': './assets/css/frontend/editor-style.css',
 		'shared-style': './assets/css/shared/shared-style.css',
 		style: './assets/css/frontend/style.css',
 		'styleguide-style': './assets/css/styleguide/styleguide.css',
+
+		// Blocks
+		// Uncomment to build the example block.
+		// 'example-block': './includes/blocks/example-block/',
 	},
 	filename: {
 		js: 'js/[name].js',
 		css: 'css/[name].css',
+		block: 'blocks/[name]/editor.js',
+		blockCSS: 'blocks/[name]/editor.css',
 	},
 	paths: {
 		src: {
 			base: './assets/',
+			blocks: './includes/blocks/',
 			css: './assets/css/',
 			js: './assets/js/',
 		},
 		dist: {
 			base: './dist/',
-			clean: ['./images', './css', './js'],
+			clean: ['./images', './css', './js', './blocks'],
 		},
 	},
 	stats: {

functions.php

@@ -10,6 +10,7 @@
 define( 'TENUP_SCAFFOLD_TEMPLATE_URL', get_template_directory_uri() );
 define( 'TENUP_SCAFFOLD_PATH', get_template_directory() . '/' );
 define( 'TENUP_SCAFFOLD_INC', TENUP_SCAFFOLD_PATH . 'includes/' );
+define( 'TENUP_SCAFFOLD_BLOCK_DIR', TENUP_SCAFFOLD_INC . 'blocks/' );
 
 require_once TENUP_SCAFFOLD_INC . 'core.php';
 require_once TENUP_SCAFFOLD_INC . 'overrides.php';

includes/blocks.php

@@ -7,6 +7,9 @@
 
 namespace TenUpScaffold\Blocks;
 
+use TenUpScaffold\Blocks\Example;
+
+
 /**
  * Set up blocks
  *
@@ -17,10 +20,56 @@ function setup() {
 		return __NAMESPACE__ . "\\$function";
 	};
 
-	add_action( 'enqueue_block_assets', $n( 'blocks_scripts' ) );
-	add_action( 'enqueue_block_editor_assets', $n( 'blocks_editor_scripts' ) );
+	add_action( 'enqueue_block_editor_assets', $n( 'blocks_editor_styles' ) );
 
 	add_filter( 'block_categories', $n( 'blocks_categories' ), 10, 2 );
+
+	/*
+	// Uncomment to register custom blocks via the Block Library plugin.
+
+	add_filter( 'tenup_available_blocks', function ( $blocks ) {
+		$blocks['example-block'] = [
+			'dir' => TENUP_SCAFFOLD_BLOCK_DIR,
+		];
+		return $blocks;
+	} );
+	*/
+
+	/*
+	// Uncomment to register custom blocks via the theme.
+
+	add_action(
+		'init',
+		function() {
+			// Filter the plugins URL to allow us to have blocks in themes with linked assets. i.e editorScripts
+			//add_filter( 'plugins_url', __NAMESPACE__ . '\filter_plugins_url', 10, 2 );
+
+
+			// Require custom blocks.
+			require_once TENUP_SCAFFOLD_BLOCK_DIR . '/example-block/register.php';
+
+			// Call block register functions for each block.
+			Example\register();
+
+			// Remove the filter after we register the blocks
+			//remove_filter( 'plugins_url', __NAMESPACE__ . '\filter_plugins_url', 10, 2 );
+		}
+	);
+	*/
+
+}
+
+/**
+ * Filter the plugins_url to allow us to use assets from theme.
+ *
+ * @param string $url  The plugins url
+ * @param string $path The path to the asset.
+ *
+ * @return string The overridden url to the block asset.
+ */
+function filter_plugins_url( $url, $path ) {
+	$file = preg_replace( '/\.\.\//', '', $path );
+	return trailingslashit( get_stylesheet_directory_uri() ) . $file;
 }
 
 /**
@@ -45,16 +94,7 @@ function blocks_scripts() {
  *
  * @return void
  */
-function blocks_editor_scripts() {
-
-	wp_enqueue_script(
-		'blocks-editor',
-		TENUP_SCAFFOLD_TEMPLATE_URL . '/dist/js/blocks-editor.js',
-		[ 'wp-i18n', 'wp-element', 'wp-blocks', 'wp-components' ],
-		TENUP_SCAFFOLD_VERSION,
-		false
-	);
-
+function blocks_editor_styles() {
 	wp_enqueue_style(
 		'editor-style',
 		TENUP_SCAFFOLD_TEMPLATE_URL . '/dist/css/editor-style.css',

includes/blocks/example-block/block.json

@@ -0,0 +1,19 @@
+{
+	"title": "Example Block",
+	"description": "An Example Block",
+	"text-domain": "tenup-scaffold",
+	"name": "tenup/example",
+	"icon": "feedback",
+	"attributes":{
+		"customTitle": {
+			"type" : "string"
+		}
+  },
+  "example": {
+    "attributes":{
+      "customTitle": "Example Block"
+    }
+  },
+	"editorScript": "file:../../../dist/blocks/example-block/editor.js",
+	"editorStyle": "file:../../../dist/blocks/example-block/editor.css"
+}

includes/blocks/example-block/edit.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { editPropsShape } from './props-shape';
+
+/**
+ * Edit component.
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+ *
+ * @param {Object} props The block props
+ * @return {Function} Render the edit screen
+ */
+const ExampleBockEdit = ({
+	attributes: { customTitle: currentTitle },
+	className,
+	setAttributes,
+}) => {
+	return (
+		<div className={`${className}`}>
+			<RichText
+				className="wp-block-example-block__title"
+				tagName="h2"
+				placeholder={__('Custom Title')}
+				value={currentTitle}
+				onChange={(customTitle) => setAttributes({ customTitle })}
+			/>
+		</div>
+	);
+};
+// Set the propTypes
+ExampleBockEdit.propTypes = editPropsShape;
+export default ExampleBockEdit;