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

Commit

Permalink
Update Featured Destinations block to new API
Browse files Browse the repository at this point in the history 
There's still work needed in the styling,
as the block seems to overflow the container.
  • Loading branch information
@kienstra
kienstra committed Apr 3, 2019
1 parent e597eb1 commit 31705f2
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 112 deletions.
141 changes: 29 additions & 112 deletions blocks/featured/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
/* globals travelGlobals */
/* jscs:disable validateQuoteMarks */
/* eslint-disable space-in-parens */

/**
* Internal block libraries.
*/
const { __ } = wp.i18n;
const { registerBlockType, InspectorControls } = wp.blocks;
const { Placeholder, withAPIData, TextControl, PanelBody } = wp.components;
const { registerBlockType } = wp.blocks;
const { PanelBody, Placeholder, ServerSideRender, TextControl } = wp.components;
const { InspectorControls } = wp.editor;
const { Fragment } = wp.element;

const blockName = 'amp-travel/featured';
/**
* Register block.
*/
export default registerBlockType(
'amp-travel/featured',
blockName,
{
title: __( 'Featured Destinations' ),
category: 'common',
Expand All @@ -23,124 +26,38 @@ export default registerBlockType(
__( 'Travel' )
],

edit: withAPIData( () => {
return {
featuredLocations: '/wp/v2/locations?per_page=6&meta_value=1&meta_key=amp_travel_featured'
};
} )( ( { featuredLocations, isSelected, setAttributes, attributes: { heading } } ) => { // eslint-disable-line
const hasLocations = Array.isArray( featuredLocations.data ) && 6 <= featuredLocations.data.length;
if ( ! hasLocations ) {
return (
<Placeholder key='placeholder'
icon='admin-post'
label={ __( 'Locations' ) }
>
{ __( 'Not enough featured locations found. Please add at least six "Locations" terms, select an image, and check "Featured destination."' ) }
</Placeholder>
);
}

const locations = featuredLocations.data;
const imgStyles = [
{
width: 336,
height: 507
},
{
width: 264,
height: 246
},
{
width: 264,
height: 264
},
{
width: 276,
height: 207
},
{
width: 264,
height: 286
},
{
width: 312,
height: 507
}
];
edit( { attributes, isSelected, setAttributes } ) {
const { heading } = attributes;
const ssrAttributes = Object.assign( {}, attributes, { context: 'server-side-render' } );

const placeholder = (
<Placeholder key='placeholder'
icon='admin-post'
label={__('Locations')}
>
</Placeholder>
);
return [
isSelected && (
<InspectorControls key='inspector'>
<PanelBody title={ __( 'Featured Destinations settings' ) }>
<PanelBody title={__('Featured Destinations settings', 'travel')}>
<TextControl
label={ __( 'Featured Destinations Header' ) }
value={ heading }
onChange={ ( value ) => setAttributes( { heading: value } ) } // eslint-disable-line
label={__('Featured Destinations Header')}
value={heading}
onChange={(value) => setAttributes({ heading: value })}
/>
</PanelBody>
</InspectorControls>
),
<section key='featured' 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'>{ heading }</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={ locations[0].link } className='travel-featured-tile flex flex-auto relative travel-featured-color-blue'>
<img className='travel-object-cover flex-auto' layout='responsive' style={ imgStyles[0] } width='336' height='507' src={ locations[0].meta.amp_travel_location_img }></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'>{ locations[0].name }</div>
<div className='h5'>{ locations[0].count + __( ' adventures' ) }</div>
</div>
</a>
<div className='flex flex-column items-stretch flex-auto'>
<a href={ locations[1].link } className='travel-featured-tile flex flex-auto relative travel-featured-color-cyan'>
<img className='travel-object-cover flex-auto' layout='responsive' style={ imgStyles[1] } width='264' height='246' src={ locations[1].meta.amp_travel_location_img }></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'>{ locations[1].name }</div>
<div className='h5'>{ locations[1].count + __( ' adventures' ) }</div>
</div>
</a>
<a href={ locations[2].link } className='travel-featured-tile flex flex-auto pointer relative travel-featured-color-orange'>
<img className='travel-object-cover flex-auto' layout='responsive' style={ imgStyles[2] } width='264' height='264' src={ locations[2].meta.amp_travel_location_img }></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'>{ locations[2].name }</div>
<div className='h5'>{ locations[2].count + __( ' 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={ locations[3].link } className='travel-featured-tile flex flex-auto pointer relative travel-featured-color-purple'>
<img className='travel-object-cover flex-auto' layout='responsive' style={ imgStyles[3] } width='276' height='207' src={ locations[3].meta.amp_travel_location_img }></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'>{ locations[3].name }</div>
<div className='h5'>{ locations[3].count + __( ' adventures' ) }</div>
</div>
</a>
<a href={ locations[4].link } className='travel-featured-tile flex flex-auto relative travel-featured-color-cornflower'>
<img className='travel-object-cover flex-auto' layout='responsive' style={ imgStyles[4] } width='264' height='286' src={ locations[4].meta.amp_travel_location_img }></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'>{ locations[4].name }</div>
<div className='h5'>{ locations[4].count + __( ' adventures' ) }</div>
</div>
</a>
</div>
<a href={ locations[5].link } className='travel-featured-tile flex flex-auto relative travel-featured-color-teal'>
<img className='travel-object-cover flex-auto' layout='responsive' style={ imgStyles[5] } width='312' height='507' src={ locations[5].meta.amp_travel_location_img }></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'>{ locations[5].name }</div>
<div className='h5'>{ locations[5].count + __( ' adventures' ) }</div>
</div>
</a>
</div>
</div>
</div>
</section>
<Fragment key="discover-ssr">
<ServerSideRender
block={blockName}
attributes={ssrAttributes}
/>
</Fragment>
];
} ), // eslint-disable-line
},

save() {

// Render in PHP.
Expand Down
6 changes: 6 additions & 0 deletions includes/class-amp-travel-blocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -485,6 +485,9 @@ public function register_block_travel_featured() {
'type' => 'string',
'default' => __( 'Featured destinations', 'travel' ),
),
'context' => array(
'type' => 'string',
),
),
'render_callback' => array( $this, 'render_block_travel_featured' ),
) );
Expand All @@ -508,6 +511,9 @@ public function render_block_travel_featured( $attributes ) {

// The count has to be 6 to fill the grid.
if ( count( $locations ) !== self::FEATURED_LOCATIONS_COUNT ) {
if ( isset( $attributes['context'] ) && 'server-side-render' === $attributes['context'] ) {
return __( 'Not enough featured locations found. Please add at least six "Locations" terms, select an image, and check "Featured destination."', 'travel' );
}
return '';
}

Expand Down

0 comments on commit 31705f2

Please sign in to comment.