Feature/add block structure from theme scaffold

.gitignore

@@ -21,6 +21,7 @@ tmtags
 *.un~
 Session.vim
 *.swp
+.vscode
 
 # Mac OSX
 .DS_Store

themes/10up-theme/.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[{*.json,*.yml,.babelrc,.bowerrc,.browserslistrc,.postcssrc}]
+indent_style = space
+indent_size = 2
+
+[*.txt,wp-config-sample.php]
+end_of_line = crlf

themes/10up-theme/.eslintignore

@@ -0,0 +1,6 @@
+assets/js/vendor
+assets/js/admin/vendor
+assets/js/frontend/vendor
+assets/js/shared/vendor
+webpack.config.babel.js
+tests

themes/10up-theme/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@10up/eslint-config/wordpress",
+  "rules": {},
+  "globals": {
+	  "module": true,
+	  "process": true
+  }
+}

themes/10up-theme/functions.php

@@ -10,12 +10,13 @@
 define( 'TENUP_THEME_TEMPLATE_URL', get_template_directory_uri() );
 define( 'TENUP_THEME_PATH', get_template_directory() . '/' );
 define( 'TENUP_THEME_INC', TENUP_THEME_PATH . 'includes/' );
+define( 'TENUP_THEME_BLOCK_DIR', TENUP_THEME_INC . 'blocks/' );
 
 require_once TENUP_THEME_INC . 'core.php';
 require_once TENUP_THEME_INC . 'overrides.php';
 require_once TENUP_THEME_INC . 'template-tags.php';
 require_once TENUP_THEME_INC . 'utility.php';
-require_once TENUP_THEME_INC . 'blocks/blocks.php';
+require_once TENUP_THEME_INC . 'blocks.php';
 
 // Run the setup functions.
 TenUpTheme\Core\setup();

themes/10up-theme/includes/blocks.php

@@ -0,0 +1,130 @@
+<?php
+/**
+ * Gutenberg Blocks setup
+ *
+ * @package TenUpScaffold\Core
+ */
+
+namespace TenUpTheme\Blocks;
+
+use TenUpTheme\Blocks\Example;
+
+
+/**
+ * Set up blocks
+ *
+ * @return void
+ */
+function setup() {
+	$n = function( $function ) {
+		return __NAMESPACE__ . "\\$function";
+	};
+
+	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_THEME_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_THEME_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;
+}
+
+/**
+ * Enqueue shared frontend and editor JavaScript for blocks.
+ *
+ * @return void
+ */
+function blocks_scripts() {
+
+	wp_enqueue_script(
+		'blocks',
+		TENUP_THEME_TEMPLATE_URL . '/dist/blocks.js',
+		[],
+		TENUP_THEME_VERSION,
+		true
+	);
+}
+
+
+/**
+ * Enqueue editor-only JavaScript/CSS for blocks.
+ *
+ * @return void
+ */
+function blocks_editor_styles() {
+	wp_enqueue_style(
+		'editor-style',
+		TENUP_THEME_TEMPLATE_URL . '/dist/editor-style.css',
+		[],
+		TENUP_THEME_VERSION
+	);
+
+}
+
+/**
+ * Filters the registered block categories.
+ *
+ * @param array  $categories Registered categories.
+ * @param object $post       The post object.
+ *
+ * @return array Filtered categories.
+ */
+function blocks_categories( $categories, $post ) {
+	if ( ! in_array( $post->post_type, array( 'post', 'page' ), true ) ) {
+		return $categories;
+	}
+
+	return array_merge(
+		$categories,
+		array(
+			array(
+				'slug'  => 'tenup-scaffold-blocks',
+				'title' => __( 'Custom Blocks', 'tenup-theme' ),
+			),
+		)
+	);
+}

themes/10up-theme/includes/blocks/example-block/block.json

@@ -0,0 +1,18 @@
+{
+	"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/example-block.js"
+}

themes/10up-theme/includes/blocks/example-block/edit.js

@@ -0,0 +1,42 @@
+/**
+ * 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.
+ * @param {Object}   props.attributes             Block attributes.
+ * @param {string}   props.attributes.customTitle Custom title to be displayed.
+ * @param {string}   props.className              Class name for the block.
+ * @param {Function} props.setAttributes          Sets the value for block attributes.
+ * @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;

themes/10up-theme/includes/blocks/example-block/index.css

@@ -0,0 +1,9 @@
+/**
+ * Example Block
+ * This file is for CSS admin overrides only.
+ * Use theme files for standard CSS work.
+ */
+.wp-block-example-block__title {
+	border: 3px dashed #ccc;
+	padding: 1em;
+}

themes/10up-theme/includes/blocks/example-block/index.js

@@ -1,22 +1,30 @@
 /**
- * Example block
+ * Example-block
+ * Custom title block -- feel free to delete
  */
 
-/* eslint-disable react/prop-types */
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { registerBlockType } from '@wordpress/blocks';
 
-const { __ } = wp.i18n;
-const { registerBlockType } = wp.blocks;
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import { name } from './block.json';
 
-registerBlockType('tenup/example-block', {
-	title: __('Example Block', 'tenup-theme'),
-	category: 'tenup-theme-blocks',
-	icon: 'smiley',
-	edit: ({ className }) => {
-		return (
-			<div className={className}>
-				<h1>Example Block Editor</h1>
-			</div>
-		);
-	},
-	save: () => null,
+/* Uncomment for CSS overrides in the admin */
+// import './index.css';
+
+/**
+ * Register block
+ */
+registerBlockType(name, {
+	title: __('Example Block'),
+	description: __('An Example Block'),
+	edit,
+	save,
 });