Merge pull request #13 from xwp/feature/12-gutenberg_blocks_base

[Gutenberg] Build a base layer for Homepage

.babelrc

@@ -0,0 +1,24 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "modules": false
+      }
+    ]
+  ],
+  "plugins": [
+    "transform-object-rest-spread",
+    [
+      "transform-react-jsx",
+      {
+        "pragma": "wp.element.createElement"
+      }
+    ]
+  ],
+  "env": {
+    "default": {
+      "plugins": ["transform-runtime"]
+    }
+  }
+}

.eslintignore

@@ -1,3 +1,4 @@
 **/*.min.js
 **/node_modules/**
 **/vendor/**
+**/assets/**

.eslintrc

@@ -0,0 +1,20 @@
+{
+	"root": true,
+	"extends": [
+		"wordpress",
+		"plugin:react/recommended"
+	],
+	"parserOptions": {
+		"ecmaVersion": 6,
+		"sourceType": "module",
+		"ecmaFeatures": {
+			"jsx": true
+		}
+	},
+	"plugins": [
+		"react"
+	],
+	"rules": {
+		"react/react-in-jsx-scope": "off"
+	}
+}

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 vendor
-node_modules
+/node_modules
 .idea
+package-lock.json

blocks/amp-transformer.js

@@ -0,0 +1,47 @@
+
+const elementMapping = {
+	'amp-img': 'img'
+};
+const propsMapping = {
+	'class': 'className',
+	'srcset': 'srcSet'
+};
+const propsToRemove = [
+	'[value]',
+	'[class]',
+	'[disabled]'
+];
+
+/**
+ * De-AMP a React component.
+ *
+ * @param {wp.element.Component|string} element Element or string.
+ * @return {wp.element.Component|string} Transformed element or string.
+ */
+export function deamplify( element ) {
+	if ( 'string' === typeof element ) {
+		return element;
+	}
+
+	let filteredProps = {};
+
+	// Filter attributes.
+	_.each( element.props, ( v, prop ) => {
+		if ( -1 === propsToRemove.indexOf( prop ) ) {
+
+			// Eslint is giving "There should be no spaces inside this paren." error for the line.
+			if ( propsMapping[ prop ] ) { // eslint-disable-line
+				filteredProps[ propsMapping[ prop ] ] = v;
+			} else {
+				filteredProps[ prop ] = v;
+			}
+		}
+	});
+
+	const htmlElement = elementMapping[ element.type ];
+	if ( htmlElement ) {
+		return wp.element.createElement( elementMapping[ element.type ], filteredProps, wp.element.Children.map( element.props.children, deamplify ) );
+	} else {
+		return wp.element.createElement( element.type, filteredProps, wp.element.Children.map( element.props.children, deamplify ) );
+	}
+}

blocks/discover/index.js

@@ -0,0 +1,54 @@
+
+/**
+ * Internal block libraries.
+ */
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
+
+const renderStaticDiscoverBlock = () => {
+	return (
+		<section className='travel-discover py4 mb3 relative xs-hide sm-hide'>
+			<div className='max-width-3 mx-auto px1 md-px2'>
+				<div className='flex justify-between items-center'>
+					<header>
+						<h2 className='travel-discover-heading bold line-height-2 xs-hide sm-hide'>Discover<br className='md-hide lg-hide' /> Adventures</h2>
+						<div className='travel-discover-subheading h2 xs-hide sm-hide'>Get inspired and find your next big trip</div>
+					</header>
+
+					<div className='travel-discover-panel travel-shadow-hover px3 py2 ml1 mr3 myn3 xs-hide sm-hide'>
+						<div className='bold h2 line-height-2 my1'>From the blog</div>
+						<p className='travel-discover-panel-subheading h3 my1 line-height-2'>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit amet dolor set.
+						</p>
+						<p className='my1'>
+							<a className='travel-link' href='#'>Read more</a>
+						</p>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+};
+
+/**
+ * Register block.
+ */
+export default registerBlockType(
+	'amp-travel/discover',
+	{
+		title: __( 'Discover block' ),
+		category: 'common',
+		icon: 'wordpress-alt',
+		keywords: [
+			__( 'Adventures' ),
+			__( 'Travel' )
+		],
+
+		edit() {
+			return renderStaticDiscoverBlock();
+		},
+		save() {
+			return renderStaticDiscoverBlock();
+		}
+	}
+);

blocks/featured/index.js

@@ -0,0 +1,105 @@
+/* globals travelGlobals */
+/* jscs:disable validateQuoteMarks */
+
+/**
+ * Internal block libraries.
+ */
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
+
+import { deamplify } from '../amp-transformer';
+
+/**
+ * Render the featured block.
+ *
+ * @return {wp.element.Component} Rendered component.
+ */
+const renderStaticFeaturedBlock = () => {
+	return (
+		<section className='travel-featured pt3 relative clearfix'>
+			<header className='max-width-2 mx-auto px1 md-px2 relative'>
+				<h3 className='travel-featured-heading h1 bold line-height-2 mb2 center'>Featured Destinations</h3>
+			</header>
+			<div className='max-width-3 mx-auto relative'>
+				<div className='travel-featured-grid flex flex-wrap items-stretch'>
+					<div className='col-12 md-col-6 flex items-stretch flex-auto'>
+						<a href='travel-results.amp' className='travel-featured-tile flex flex-auto relative travel-featured-color-blue' on="tap:AMP.setState({fields_query: 'New York', query_query: 'New York'})">
+							<amp-img class='travel-object-cover flex-auto' layout='responsive' width='336' height='507' src={travelGlobals.themeUrl + '/img/new-york.jpg'}></amp-img>
+							<div className='travel-featured-overlay absolute z1 center top-0 right-0 bottom-0 left-0 white p2'>
+								<div className='travel-featured-tile-heading caps bold line-height-2 h3'>New York</div>
+								<div className='h5'>379 adventures</div>
+							</div>
+						</a>
+						<div className='flex flex-column items-stretch flex-auto'>
+							<a href='travel-results.amp' className='travel-featured-tile flex flex-auto relative travel-featured-color-cyan' on="tap:AMP.setState({fields_query: 'Barcelona', query_query: 'Barcelona'})">
+								<amp-img class='travel-object-cover flex-auto' layout='responsive' width='264' height='246' src={travelGlobals.themeUrl + '/img/barcelona.jpg'}></amp-img>
+								<div className='travel-featured-overlay absolute z1 center top-0 right-0 bottom-0 left-0 white p2'>
+									<div className='travel-featured-tile-heading bold caps line-height-2 h3'>Barcelona</div>
+									<div className='h5'>68 adventures</div>
+								</div>
+							</a>
+							<a href='travel-results.amp' className='travel-featured-tile flex flex-auto pointer relative travel-featured-color-orange' on="tap:AMP.setState({fields_query: 'Paris', query_query: 'Paris'})">
+								<amp-img class='travel-object-cover flex-auto' layout='responsive' width='264' height='264' src={travelGlobals.themeUrl + '/img/paris.jpg'}></amp-img>
+								<div className='travel-featured-overlay absolute z1 center top-0 right-0 bottom-0 left-0 white p2'>
+									<div className='travel-featured-tile-heading bold caps line-height-2 h3'>Paris</div>
+									<div className='h5'>221 adventures</div>
+								</div>
+							</a>
+						</div>
+					</div>
+					<div className='col-12 md-col-6 flex items-stretch flex-auto'>
+						<div className='flex flex-column items-stretch flex-auto'>
+							<a href='travel-results.amp' className='travel-featured-tile flex flex-auto pointer relative travel-featured-color-purple' on="tap:AMP.setState({fields_query: 'Tokyo', query_query: 'Tokyo'})">
+								<amp-img class='travel-object-cover flex-auto' layout='responsive' width='276' height='207' src={travelGlobals.themeUrl + '/img/tokyo.jpg'}></amp-img>
+								<div className='travel-featured-overlay absolute z1 center top-0 right-0 bottom-0 left-0 white p2'>
+									<div className='travel-featured-tile-heading caps bold line-height-2 h3'>Tokyo</div>
+									<div className='h5'>500+ adventures</div>
+								</div>
+							</a>
+							<a href='travel-results.amp' className='travel-featured-tile flex flex-auto relative travel-featured-color-cornflower' on="tap:AMP.setState({fields_query: 'Chicago', query_query: 'Chicago'})">
+								<amp-img class='travel-object-cover flex-auto' layout='responsive' width='264' height='286' src={travelGlobals.themeUrl + '/img/chicago.jpg'}></amp-img>
+								<div className='travel-featured-overlay absolute z1 center top-0 right-0 bottom-0 left-0 white p2'>
+									<div className='travel-featured-tile-heading caps bold line-height-2 h3'>Chicago</div>
+									<div className='h5'>143 adventures</div>
+								</div>
+							</a>
+						</div>
+						<a href='travel-results.amp' className='travel-featured-tile flex flex-auto relative travel-featured-color-teal' on="tap:AMP.setState({fields_query: 'Reykjavik', query_query: 'Reykjavik'})">
+							<amp-img class='travel-object-cover flex-auto' layout='responsive' width='312' height='507' src={travelGlobals.themeUrl + '/img/reykjavik.jpg'}></amp-img>
+							<div className='travel-featured-overlay absolute z1 center top-0 right-0 bottom-0 left-0 white p2'>
+								<div className='travel-featured-tile-heading caps bold h3'>Reykjavik</div>
+								<div className='h5'>87 adventures</div>
+							</div>
+						</a>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+};
+
+/**
+ * Register block.
+ */
+export default registerBlockType(
+	'amp-travel/featured',
+	{
+		title: __( 'Featured' ),
+		category: 'common',
+		icon: 'wordpress-alt',
+		keywords: [
+			__( 'Featured destinations' ),
+			__( 'Adventures' ),
+			__( 'Travel' )
+		],
+
+		edit() {
+			return deamplify( renderStaticFeaturedBlock() );
+		},
+		save() {
+
+			// Handled by PHP.
+			return null;
+		}
+	}
+);

blocks/hero/demo-places.json

@@ -0,0 +1,14 @@
+{
+  "items": [
+    {
+      "predictions": [
+        {
+          "description": "Barcelona"
+        },
+        {
+          "description": "Tokyo"
+        }
+      ]
+    }
+  ]
+}