Merge pull request #47 from jazzsequence/feature/1.3.0-gutenblocks

Feature/1.3.0 gutenblocks

Author: jazzsequence

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": [ "@wordpress/default" ]
+}

.gitignore

@@ -28,6 +28,12 @@ bower_components
 .bower-registry
 .bower-tmp
 
+### Don't version control lock files
+*.lock
+package-lock.json
+
+### Don't version control the yeoman generator file.
+.yo-rc.json
 
 ### Node ###
 # Logs

README.md

@@ -39,6 +39,9 @@ You can checkout a live [demo](https://jazzsequence.com/games/) of the plugin (w
 
 ## Changelog ##
 
+### 1.3.0 ###
+* Added first Gutenberg block! Now you can add your games list in Gutenberg rather than using a shortcode. More Gutenberg blocks to come.
+
 ### 1.2.0 ###
 * Added integration with Board Game Geek API. Games can now be added by searching BGG for matching titles and information imported and automatically added to new games.
 * Fixed an issue where games with an indeterminate max number of players was displaying a 0 value (e.g. `2 - 0 players`) and combined that with games with an unrealistically large number of players (e.g. `2 - 99 players`) to display `{{min_players}}+ players` e.g. `2+ players`.

assets/css/editor.css

@@ -0,0 +1,7 @@
+/**
+ * Games Collector
+ * https://github.com/jazzsequence/games-collector
+ *
+ * Copyright (c) 2017 Chris Reynolds
+ * Licensed under the GPLv3+ license.
+ */

assets/css/games-collector.css

@@ -0,0 +1,28 @@
+/**
+ * Games Collector
+ * https://github.com/jazzsequence/games-collector
+ *
+ * Copyright (c) 2017 Chris Reynolds
+ * Licensed under the GPLv3+ license.
+ */
+.games-filter-group {
+  display: block;
+  padding: 0 0 2em; }
+
+.game-title {
+  font-size: 1.2em; }
+
+.game-single {
+  margin: 0 0 1em; }
+
+.game-info {
+  font-size: 0.9em;
+  line-height: 1.1em; }
+  .game-info span.game-min-players, .game-info span.gc-attribute {
+    padding-right: 0em; }
+
+div.game-attributes {
+  display: block; }
+
+svg.gc-icon {
+  height: 1.1em; }

assets/css/main.css

@@ -0,0 +1,8 @@
+/**
+ * Games Collector Frontend
+ *
+ * All the js that isn't relating to Isotope.
+ */
+
+// Load the frontend styles.
+import '../../sass/style.scss'

assets/js/blocks/frontend.js

@@ -0,0 +1,127 @@
+/**
+ * Games Collector Editor
+ *
+ * All the js that is admin-only (e.g. Gutenberg).
+ */
+
+// Define the textdomain.
+wp.i18n.setLocaleData( { '': {} }, 'games-collector' );
+
+// Load WP.
+// import WPAPI from 'wpapi';
+// import 'whatwg-fetch';
+// import apiFetch from '@wordpress/api-fetch';
+// import { addQueryArgs } from '@wordpress/url';
+
+// Load the editor-specific styles.
+import '../../sass/editor.scss';
+
+// Load front-end styles.
+import '../../sass/style.scss';
+
+// Load the Gutenberg icons.
+import icons from './icons';
+
+// Load internal Gutenberg stuff.
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
+const {
+	Spinner,
+	TextControl,
+} = wp.components;
+const { withSelect } = wp.data;
+
+/**
+ * Make the first letter of a string uppercase.
+ *
+ * Mirror's PHP's ucfirst function.
+ *
+ * @param  {string} string The string to process.
+ * @return {string}        The string with the first letter capitalized.
+ */
+function ucfirst( string ) {
+	return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+// Register the all games Gutenberg block.
+registerBlockType( 'games-collector/add-all-games', {
+	title: __( 'All Games', 'games-collector' ),
+	description: __( 'Add all games to any post or page.', 'games-collector' ),
+	category: 'widgets',
+	icon: {
+		src: icons.dice
+	},
+	keywords: [
+		__( 'Games Collector', 'games-collector' ),
+		__( 'game list', 'games-collector' ),
+		__( 'all games', 'games-collector' ),
+	],
+	edit: withSelect( query => {
+			return {
+				posts: query( 'core' ).getEntityRecords( 'postType', 'gc_game', { per_page: -1, orderby: 'title', order: 'asc' } )
+			};
+		} )( ( { posts, className, isSelected } ) => {
+			if ( ! posts ) {
+				return (
+					<p className={ className } >
+						<Spinner />
+						{ __( 'Loading Posts', 'games-collector' ) }
+					</p>
+				);
+			}
+			if ( 0 === posts.length ) {
+				return <p>{ __( 'No Posts', 'games-collector' ) }</p>;
+			}
+			return (
+				<div className={ className }>
+					{ posts.map( post => {
+						let divId       = `game-${ post.id }-info`,
+							title       = ( 'undefined' !== typeof post.url ) ? `
+								<a href=${ post.url.toString() }><span className="game-title" id="game-${ post.id }-title">${ post.title.rendered }</span></a>` : `<span className="game-title" id="game-${ post.id }-title">${ post.title.rendered }</span>`,
+							numPlayers  = {
+								id: `game-${ post.id }-num-players`,
+								total: (
+									'undefined' === typeof post.max_players ||
+									post.min_players[0] === post.max_players[0]
+								) ? post.min_players[0] : `${ post.min_players[0] } - ${ post.max_players[0] }`,
+							},
+							playingTime = {
+								id: `game-${ post.id }-playing-time`,
+								message: `${ post.time } minutes`,
+							},
+							age         = {
+								id: `game-${ post.id }-age`,
+								message: `${ post.age }+`,
+							},
+							difficulty  = {
+								id: `game-${ post.id }-difficulty`,
+							},
+							attributes  = {
+								id: `game-${ post.id }-attributes`,
+								message: `${ post.attributes.join( ', ' ) }`,
+							};
+
+						return (
+							<div className={ className }>
+								<div dangerouslySetInnerHTML={{ __html: title }} />
+								<div className="game-info" id={ divId }>
+									<span className="gc-icon icon-game-players">{ icons.players }</span><span className="game-num-players" id={ numPlayers.id }>{ numPlayers.total }</span>
+									<span className="gc-icon icon-game-time">{ icons.time }</span><span className="game-playing-time" id={ playingTime.id }>{ playingTime.message }</span>
+									<span className="gc-icon icon-game-age">{ icons.age }</span><span className="game-age" id={ age.id }>{ age.message }</span>
+									<span className="gc-icon icon-game-difficulty">{ icons.difficulty }</span><span className="game-difficulty" id={ difficulty.id }>{ ucfirst( post.difficulty[0] ) }</span>
+									<div className="game-attributes">
+										<span className="gc-icon icon-game-attributes">{ icons.tags }</span><span className="game-attributes" id={ attributes.id }>{ attributes.message }</span>
+									</div>
+								</div>
+							</div>
+						);
+					}) }
+				</div>
+			);
+		} ) // end withSelect
+	, // end edit
+	save() {
+		// Rendering in PHP
+		return null;
+	},
+});

assets/js/blocks/icons.js

@@ -4,6 +4,8 @@
 window.GamesCollector = {};
 ( function( window, $, plugin ) {
 
+	var Isotope = require( 'isotope-layout' );
+
 	// Constructor.
 	plugin.init = function() {
 		plugin.cache();
@@ -19,7 +21,7 @@ window.GamesCollector = {};
 			window: $(window),
 			list: $( '.games-collector-list' ),
 			buttons: $( '.games-filter-group' ),
-			grid: $( '.games-collector-list' ).isotope({
+			grid: new Isotope( '.games-collector-list', {
 				itemSelector: '.game-single',
 				vertical: {
 					horizontalAlignment: 0