Feature/203 gutenberg block structure

config/webpack.config.common.js

@@ -88,7 +88,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,

config/webpack.settings.js

@@ -15,7 +15,7 @@ module.exports = {
 		'styleguide-style': './assets/css/styleguide/styleguide.css',
 
 		// Blocks
-		'example-block': './includes/blocks/example-block/register.js',
+		'example-block': './includes/blocks/example-block/',
 	},
 	filename: {
 		js: 'js/[name].js',
@@ -24,6 +24,7 @@ module.exports = {
 	paths: {
 		src: {
 			base: './assets/',
+			blocks: './includes/blocks/',
 			css: './assets/css/',
 			js: './assets/js/',
 		},

includes/blocks.php

@@ -26,16 +26,23 @@ function setup() {
 	// Require custom blocks.
 	require_once TENUP_SCAFFOLD_BLOCK_DIR . '/example-block/register.php';
 
-	// Filter the plugins URL to allow us to have blocks in themes with linked assets. i.e editorScripts
-	add_filter( 'plugins_url', $n( 'filter_plugins_url' ), 10, 2 );
+	add_filter( 'init', $n( 'register' ) );
 
-	// Call block register functions.
-	Example\register();
+}
 
+/**
+ * Register Blocks.
+ */
+function register() {
+	// 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 );
+	// Register Blocks
+	Example\register();
+	// <---- Add blocks here...
 	// Remove the filter after we register the blocks
-	remove_filter( 'plugins_url', $n( 'filter_plugins_url' ), 10, 2 );
-
+	remove_filter( 'plugins_url', __NAMESPACE__ . '\filter_plugins_url', 10 );
 }
+
 /**
  * Filter the plugins_url to allow us to use assets from theme.
  *
@@ -46,8 +53,7 @@ function setup() {
  */
 function filter_plugins_url( $url, $path ) {
 	$file = preg_replace( '/\.\.\//', '', $path );
-	$url  = trailingslashit( get_stylesheet_directory_uri() ) . $file;
-	return $url;
+	return trailingslashit( get_stylesheet_directory_uri() ) . $file;
 }
 
 /**

includes/blocks/example-block/block.json

@@ -9,5 +9,6 @@
 			"type" : "string"
 		}
 	},
-	"editorScript": "file:../../../dist/js/example-block.js"
-}
+	"editorScript": "file:../../../dist/js/example-block.js",
+	"editorStyle": "file:../../../dist/css/example-block.css"
+}

includes/blocks/example-block/edit.js

@@ -16,26 +16,23 @@ import { editPropsShape } from './props-shape';
  * @param {Object} props The block props
  * @return {Function} Render the edit screen
  */
-const ExampleBockEdit = (props) => {
-	const {
-		attributes: { customTitle },
-		className,
-		setAttributes,
-	} = props;
-
+const ExampleBockEdit = ({
+	attributes: { customTitle: currentTitle },
+	className,
+	setAttributes,
+}) => {
 	return (
-		<div className={className}>
+		<div className={`${className}`}>
 			<RichText
+				className="wp-block-example-block__title"
 				tagName="h2"
 				placeholder={__('Custom Title')}
-				value={customTitle}
-				onChange={(title) => setAttributes({ customTitle: title })}
+				value={currentTitle}
+				onChange={(customTitle) => setAttributes({ customTitle })}
 			/>
 		</div>
 	);
 };
 // Set the propTypes
-ExampleBockEdit.propTypes = {
-	...editPropsShape,
-};
+ExampleBockEdit.propTypes = editPropsShape;
 export default ExampleBockEdit;

includes/blocks/example-block/index.css

@@ -0,0 +1,7 @@
+/**
+ * Example Block
+ */
+.wp-block-example-block__title {
+	border: 3px dashed #ccc;
+	padding: 1em;
+}

includes/blocks/example-block/register.js → includes/blocks/example-block/index.js

@@ -14,14 +14,13 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import edit from './edit';
 import save from './save';
-import json from './block.json';
-
-const { name } = json;
+import { name } from './block.json';
+import './index.css';
 
 /**
  * Register block
  */
-export default registerBlockType(name, {
+registerBlockType(name, {
 	title: __('Example Block'),
 	description: __('An Example Block'),
 	edit,

includes/blocks/example-block/markup.php

@@ -3,9 +3,24 @@
  * Example block markup
  *
  * @package TenUpScaffold\Blocks\Example
+ *
+ * @var $args
  */
 
+// Set defaults.
+$args = wp_parse_args(
+	$args,
+	[
+		'attributes' => [
+			'customTitle' => __( 'Custom title default', 'tenup' ),
+		],
+		'class_name' => 'wp-block-tenup-example',
+	]
+);
+
 ?>
-<h2 class="example-block-title">
-	<?php echo wp_kses_post( $attributes['customTitle'] ); ?>
-</h2>
+<div class="<?php echo esc_attr( $args['class_name'] ); ?>">
+	<h2 class="wp-block-example-block__title">
+		<?php echo wp_kses_post( $args['attributes']['customTitle'] ); ?>
+	</h2>
+</div>

includes/blocks/example-block/register.php

@@ -34,6 +34,16 @@ function register() {
  */
 function render_block_callback( $attributes, $content, $block ) {
 	ob_start();
-	require TENUP_SCAFFOLD_BLOCK_DIR . 'example-block/markup.php';
+	get_template_part(
+		'includes/blocks/example-block/markup',
+		null,
+		[
+			'class_name' => 'wp-block-tenup-example',
+			'attributes' => $attributes,
+			'content'    => $content,
+			'block'      => $block,
+		]
+	);
+
 	return ob_get_clean();
 }

includes/blocks/example-block/save.js

@@ -3,8 +3,6 @@
  *
  * @return {null} Dynamic blocks do not save the HTML.
  */
-const ExampleBlockSave = () => {
-	return null;
-};
+const ExampleBlockSave = () => null;
 
 export default ExampleBlockSave;