[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/**

.gitignore

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

blocks/discover/index.js

@@ -0,0 +1,71 @@
+/**
+ * Internal block libraries.
+ */
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
+
+/**
+ * Register block.
+ */
+export default registerBlockType(
+	'amp-travel/discover',
+	{
+		title: __( 'Discover block' ),
+		category: 'common',
+		icon: 'wordpress-alt',
+		keywords: [
+			__( 'Adventures' ),
+			__( 'Travel' )
+		],
+
+		// Copy from Travel HTML template.
+		edit: props => {
+			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>
+			);
+		},
+		save: props => {
+			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>
+			);
+		}
+	},
+);

blocks/featured/index.js

@@ -0,0 +1,153 @@
+/* globals travelGlobals */
+/* jscs:disable validateQuoteMarks */
+
+/**
+ * Internal block libraries.
+ */
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
+
+/**
+ * Register block.
+ */
+export default registerBlockType(
+	'amp-travel/featured',
+	{
+		title: __( 'Featured' ),
+		category: 'common',
+		icon: 'wordpress-alt',
+		keywords: [
+			__( 'Featured destinations' ),
+			__( 'Adventures' ),
+			__( 'Travel' )
+		],
+
+		// Copied from Travel template HTML, removed amp tags not to break edit.
+		edit: props => {
+			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'>
+									<img src={travelGlobals.themeUrl + '/img/new-york.jpg'} />
+									<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'>
+										<img src={travelGlobals.themeUrl + '/img/barcelona.jpg'} />
+										<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'>
+										<img src={travelGlobals.themeUrl + '/img/paris.jpg'} />
+										<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'>
+										<img src={travelGlobals.themeUrl + '/img/tokyo.jpg'} />
+										<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'>
+										<img src={travelGlobals.themeUrl + '/img/chicago.jpg'} />
+										<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'>
+									<img src={travelGlobals.themeUrl + '/img/reykjavik.jpg'} />
+									<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>
+			);
+		},
+		save: props => {
+			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>
+			);
+		}
+	},
+);

blocks/hero/demo-places.json

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