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

Commit

Permalink
Eliminate duplication of static markup for editor by doing basic de-a…
Browse files Browse the repository at this point in the history 
…mplification
  • Loading branch information
@westonruter
westonruter committed Apr 5, 2018
1 parent 912f8c2 commit 2feb47a
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 122 deletions.
22 changes: 22 additions & 0 deletions blocks/amp-transformer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@

const elementMapping = {
'amp-img': 'img'
};

/**
* 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 deamplifiy( element ) {
if ( 'string' === typeof element ) {
return element;
}
const htmlElement = elementMapping[ element.type ];
if ( htmlElement ) {
return wp.element.createElement( elementMapping[ element.type ], element.props, wp.element.Children.map( element.props.children, deamplifiy ) );
} else {
return wp.element.cloneElement( element, element.props, wp.element.Children.map( element.props.children, deamplifiy ) );
}
}
197 changes: 75 additions & 122 deletions blocks/featured/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,77 @@
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

import { deamplifiy } 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 className='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 className='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 className='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 className='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 className='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 className='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.
*/
Expand All @@ -24,130 +95,12 @@ export default registerBlockType(

// Copied from Travel template HTML, removed amp tags not to break edit.
edit() {
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>
);
return deamplifiy( renderStaticFeaturedBlock() );
},
save() {
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>
);

// @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();
}
},
);

0 comments on commit 2feb47a

Please sign in to comment.