Skip to content
This repository has been archived by the owner on Jan 10, 2023. It is now read-only.

[Gutenberg] Build a base layer for Homepage #13

Merged
merged 28 commits into from
Apr 11, 2018
Merged
Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
7cfcb28
Add base for Gutenberg blocks + blocks base for activity-list, discov…
miina Mar 27, 2018
5876ef3
Empty index.
miina Mar 27, 2018
2c6744d
Remove featured block.
miina Mar 27, 2018
c2cf477
Add index.php file placeholder. Add copied style from Travel theme.
miina Mar 27, 2018
4d74f0d
Add featured block.
miina Mar 28, 2018
f963aac
Add Popular block.
miina Mar 28, 2018
bd1ab4a
Add Hero block.
miina Mar 28, 2018
5e8e3aa
Add Travel Angle block for design.
miina Mar 28, 2018
59f25d5
Improve block's name.
miina Mar 28, 2018
4480d69
Fix some CS issues.
miina Mar 28, 2018
97bbaf2
Add Mustache template to Hero block.
miina Mar 29, 2018
0eac19d
Add demo.json file for amp-list. Fix some editor validation issues.
miina Mar 29, 2018
472ede6
Add a workaround for React not supporting [src].
miina Mar 29, 2018
d301cc0
Merge branch 'develop' into feature/12-gutenberg_blocks_base
ThierryA Mar 30, 2018
f7ada7e
Fix some CS issues.
miina Mar 30, 2018
5f74431
Fix gitignore.
miina Mar 30, 2018
876899b
Merge branch 'develop' into feature/12-gutenberg_blocks_base
ThierryA Mar 30, 2018
912f8c2
Use same method for save and edit where possible. Fix some indent iss…
miina Apr 4, 2018
2feb47a
Eliminate duplication of static markup for editor by doing basic de-a…
westonruter Apr 5, 2018
d46ede6
Fix dev-lib being able to run eslint; fix some eslint issues
westonruter Apr 5, 2018
b18c6c4
Fix eslint issues.
miina Apr 5, 2018
ca8c0ce
Fix AMP validation issues. Reuse the same method for edit-save within…
miina Apr 5, 2018
946e1f5
Move blocks-related code away from functions.php file. Add allowed ht…
miina Apr 5, 2018
2edb79a
Remove comment. Fix phpcs.
miina Apr 5, 2018
81529db
Merge amp-img allowed atts with img.
miina Apr 6, 2018
ff30b34
Restructure.
miina Apr 9, 2018
f9d9361
Restructure theme code.
miina Apr 11, 2018
7f23e78
Add init method to blocks class.
miina Apr 11, 2018
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -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"]
}
}
}
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
**/*.min.js
**/node_modules/**
**/vendor/**
**/assets/**
20 changes: 20 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -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"
}
}
4 changes: 0 additions & 4 deletions .eslintrc.js

This file was deleted.

3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.DS_Store
vendor
node_modules
/node_modules
.idea
package-lock.json
1 change: 1 addition & 0 deletions assets/css/editor-blocks.css

Large diffs are not rendered by default.

360 changes: 360 additions & 0 deletions assets/js/editor-blocks.js

Large diffs are not rendered by default.

218 changes: 218 additions & 0 deletions blocks/activity-list/index.js

Large diffs are not rendered by default.

47 changes: 47 additions & 0 deletions blocks/amp-transformer.js
Original file line number Diff line number Diff line change
@@ -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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason eslint is throwing There should be no spaces inside this paren. (space-in-parens) error for this line. Without the spaces it's throwing spaces missing error. Not sure what I'm missing here, any thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've noticed that too. Seems like a bug in eslint.

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 ) );
}
}
54 changes: 54 additions & 0 deletions blocks/discover/index.js
Original file line number Diff line number Diff line change
@@ -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();
}
}
);
105 changes: 105 additions & 0 deletions blocks/featured/index.js
Original file line number Diff line number Diff line change
@@ -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() {

// @todo WARNING: If the user does not have unfiltered_html, then the amp-img elements will be removed from the saved post_content! Should wp_kses_allowed_html be filtered to allow all AMP elements and attributes that will be used in blocks here?
return renderStaticFeaturedBlock();
}
}
);
14 changes: 14 additions & 0 deletions blocks/hero/demo-places.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"items": [
{
"predictions": [
{
"description": "Barcelona"
},
{
"description": "Tokyo"
}
]
}
]
}
Loading