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

[Gutenberg] Add Popular homepage block. #32

Merged
merged 15 commits into from
Apr 12, 2018
Merged

[Gutenberg] Add Popular homepage block. #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
d340607
Start popular posts block.
miina Apr 5, 2018
a68ae44
Merge remote-tracking branch 'origin/feature/12-gutenberg_blocks_base…
miina Apr 9, 2018
3f3b38c
Merge CPT & resolve conflicts.
miina Apr 9, 2018
d8aa059
Add some adventure meta. Pull data dynamically.
miina Apr 9, 2018
cd8d212
Add PHP front-end rendering.
miina Apr 9, 2018
889b794
Fix CS.
miina Apr 9, 2018
0eb8481
Remove incorrect import.
miina Apr 11, 2018
41c647f
Fix pulling correct term. Fix metabox bug.
miina Apr 11, 2018
db27a75
Merge develop.
miina Apr 11, 2018
ab223b5
Merge develop & resolve conflicts.
miina Apr 12, 2018
365cbc2
Fixes from feedback. Remove editable title. Fix style.
miina Apr 12, 2018
376284c
Indent 2 lines, whitespace only.
kienstra Apr 12, 2018
ec4e344
Merge in develop, resolve conflicts.
kienstra Apr 12, 2018
f0c1cfc
Revert changes to style.css.
kienstra Apr 12, 2018
216d27e
Merge in develop, resolve conflicts.
kienstra Apr 12, 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
5 changes: 5 additions & 0 deletions assets/css/editor-blocks.css
View file
Open in desktop

Large diffs are not rendered by default.

146 changes: 145 additions & 1 deletion assets/js/editor-blocks.js
View file
Open in desktop

Large diffs are not rendered by default.

218 changes: 72 additions & 146 deletions blocks/popular/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,148 +4,8 @@
* Internal block libraries.
*/
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

import { deamplify } from '../amp-transformer';

/**
* Render the popular block.
*
* @return {wp.element.Component} Rendered component.
*/
const renderStaticPopularBlock = () => {
return (
<section className='travel-popular pb4 pt3 relative'>
<header className='max-width-3 mx-auto px1 md-px2'>
<h3 className='h1 bold line-height-2 md-hide lg-hide' aria-hidden='true'>Top Adventures<br/>Near You</h3>
<h3 className='h1 bold line-height-2 xs-hide sm-hide center'>Top Adventures Near You</h3>
</header>
<div className='overflow-scroll'>
<div className='travel-overflow-container'>
<div className='flex px1 md-px2 mxn1'>
<div className='m1 mt3 mb2'>
<div className='travel-popular-tilt-right mb1'>
<div className='relative travel-results-result'>
<a className='travel-results-result-link block relative' href='#'>
<amp-img class='block rounded' width='346' height='200' noloading='' src={ travelGlobals.themeUrl + '/img/surf-day.jpg' } srcset={ travelGlobals.themeUrl + '/img/[email protected] 2x, ' + travelGlobals.themeUrl + '/img/surf-day.jpg 1x' }></amp-img>
</a>
<div className='travel-results-result-like absolute top-0 right-0'>
<div className='p1'>
<label className='travel-like'>
<input type='checkbox' className='absolute'/>
<div className='travel-like-hearts circle inline-block relative'>
<div className='travel-like-heart-tiny travel-like-heart-solid absolute'></div>
<div className='travel-like-heart-tiny travel-like-heart-solid absolute'></div>
<div className='travel-like-heart-tiny travel-like-heart-solid absolute'></div>
<div className='travel-like-heart travel-like-heart-white absolute mx-auto '></div>
<div className='travel-like-heart travel-like-heart-solid absolute mx-auto '></div>
<div className='travel-like-heart travel-like-heart-outline absolute mx-auto '></div>
</div>
</label>
</div>
</div>
</div>
</div>

<div className='h2 line-height-2 mb1'>
<span className='travel-results-result-text'>Surf Day. Board and Wetsuits Included in Price!</span>
<span className='travel-results-result-subtext h3'>•</span>
<span className='travel-results-result-subtext h3'>$&nbsp;</span><span className='black bold'>100</span>
</div>

<div className='h4 line-height-2'>
<div className='inline-block relative mr1 h3 line-height-2'>
<div className='travel-results-result-stars green'>★★★★★</div>
</div>
<span className='travel-results-result-subtext mr1'>241 Reviews</span>
<span className='travel-results-result-subtext'><svg className='travel-icon' viewBox='0 0 77 100'><g fill='none' fillRule='evenodd'><path stroke='currentColor' strokeWidth='7.5' d='M38.794 93.248C58.264 67.825 68 49.692 68 38.848 68 22.365 54.57 9 38 9S8 22.364 8 38.85c0 10.842 9.735 28.975 29.206 54.398a1 1 0 0 0 1.588 0z'></path><circle cx='38' cy='39' r='10' fill='currentColor'></circle></g></svg> Oaxaca</span>
</div>
</div>
<div className='m1 mt3 mb2'>
<div className='travel-results-result relative mb1'>
<div className='relative travel-results-result'>
<a className='travel-results-result-link block relative' href='#'>
<amp-img class='block rounded' width='346' height='200' noloading='' src={ travelGlobals.themeUrl + '/imgdiscover-electronic-scene.jpg' } srcset={ travelGlobals.themeUrl + '/img/[email protected] 2x, ' + travelGlobals.themeUrl + '/img/discover-electronic-scene.jpg 1x' }></amp-img>
</a>
<div className='travel-results-result-flags absolute top-0 left-0'>
<div className='p1'><span className='travel-pill bold'>NEW</span></div>
</div>
<div className='travel-results-result-like absolute top-0 right-0'>
<div className='p1'>
<label className='travel-like'>
<input type='checkbox' className='absolute'/>
<div className='travel-like-hearts circle inline-block relative'>
<div className='travel-like-heart-tiny travel-like-heart-solid absolute'></div>
<div className='travel-like-heart-tiny travel-like-heart-solid absolute'></div>
<div className='travel-like-heart-tiny travel-like-heart-solid absolute'></div>
<div className='travel-like-heart travel-like-heart-white absolute mx-auto '></div>
<div className='travel-like-heart travel-like-heart-solid absolute mx-auto '></div>
<div className='travel-like-heart travel-like-heart-outline absolute mx-auto '></div>
</div>
</label>
</div>
</div>
</div>
</div>

<div className='h2 line-height-2 mb1'>
<span className='travel-results-result-text'>Discover Oaxaca&lsquo;s Electronic Music Scene with a Top DJ</span>
<span className='travel-results-result-subtext h3'>•</span>
<span className='travel-results-result-subtext h3'>$&nbsp;</span><span className='black bold'>113</span>
</div>

<div className='h4 line-height-2'>
<div className='inline-block relative mr1 h3 line-height-2'>
<div className='travel-results-result-stars green'>★★★★★</div>
</div>
<span className='travel-results-result-subtext mr1'>42 Reviews</span>
<span className='travel-results-result-subtext'><svg className='travel-icon' viewBox='0 0 77 100'><g fill='none' fillRule='evenodd'><path stroke='currentColor' strokeWidth='7.5' d='M38.794 93.248C58.264 67.825 68 49.692 68 38.848 68 22.365 54.57 9 38 9S8 22.364 8 38.85c0 10.842 9.735 28.975 29.206 54.398a1 1 0 0 0 1.588 0z'></path><circle cx='38' cy='39' r='10' fill='currentColor'></circle></g></svg> Oaxaca</span>
</div>
</div>
<div className='m1 mt3 mb2'>
<div className='travel-popular-tilt-left mb1'>
<div className='relative travel-results-result'>
<a className='travel-results-result-link block relative' href='#'>
<amp-img class='block rounded' width='346' height='200' noloading='' src={ travelGlobals.themeUrl + '/img/skateboard-around-city.jpg' } srcset={ travelGlobals.themeUrl + '/img/[email protected] 2x, ' + travelGlobals.themeUrl + '/img/skateboard-around-city.jpg 1x' }></amp-img>
</a>
<div className='travel-results-result-like absolute top-0 right-0'>
<div className='p1'>
<label className='travel-like'>
<input type='checkbox' className='absolute'/>
<div className='travel-like-hearts circle inline-block relative'>
<div className='travel-like-heart-tiny travel-like-heart-solid absolute'></div>
<div className='travel-like-heart-tiny travel-like-heart-solid absolute'></div>
<div className='travel-like-heart-tiny travel-like-heart-solid absolute'></div>
<div className='travel-like-heart travel-like-heart-white absolute mx-auto '></div>
<div className='travel-like-heart travel-like-heart-solid absolute mx-auto '></div>
<div className='travel-like-heart travel-like-heart-outline absolute mx-auto '></div>
</div>
</label>
</div>
</div>
</div>
</div>

<div className='h2 line-height-2 mb1'>
<span className='travel-results-result-text'>Skateboard Around the City</span>
<span className='travel-results-result-subtext h3'>•</span>
<span className='travel-results-result-subtext h3'>$&nbsp;</span><span className='black bold'>92</span>
</div>

<div className='h4 line-height-2'>
<div className='inline-block relative mr1 h3 line-height-2'>
<div className='travel-results-result-stars green'>★★★★★</div>
</div>
<span className='travel-results-result-subtext mr1'>17 Reviews</span>
<span className='travel-results-result-subtext'><svg className='travel-icon' viewBox='0 0 77 100'><g fill='none' fillRule='evenodd'><path stroke='currentColor' strokeWidth='7.5' d='M38.794 93.248C58.264 67.825 68 49.692 68 38.848 68 22.365 54.57 9 38 9S8 22.364 8 38.85c0 10.842 9.735 28.975 29.206 54.398a1 1 0 0 0 1.588 0z'></path><circle cx='38' cy='39' r='10' fill='currentColor'></circle></g></svg> Mexico City</span>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
const { registerBlockType, RichText } = wp.blocks;
const { Placeholder, withAPIData } = wp.components;

/**
* Register block.
Expand All @@ -162,11 +22,77 @@ export default registerBlockType(
__( 'Travel' )
],

edit() {
return deamplify( renderStaticPopularBlock() );
},
edit: withAPIData( () => {
return {
popularPosts: '/wp/v2/adventures?per_page=3&orderby=meta_value_num&meta_key=amp_travel_rating&_embed'
};
} )( ( { popularPosts } ) => { // eslint-disable-line
const popularPostsCount = 3;
const hasAdventures = Array.isArray( popularPosts.data ) && popularPosts.data.length;
if ( ! hasAdventures || popularPostsCount !== popularPosts.data.length ) {
return (
<Placeholder key='placeholder' icon='admin-post' label={ __( 'Adventures' ) } >
{ __( 'Not enough adventures with ratings found, add at least 3 to use the block.' ) }
</Placeholder>
);
}

const adventures = popularPosts.data;
const popularClasses = [
'travel-popular-tilt-right',
'travel-results-result',
'travel-popular-tilt-left'
];

return (
<section className='travel-popular pb4 pt3 relative'>
<header className='max-width-3 mx-auto px1 md-px2'>
<h3 className='h1 bold line-height-2'>{ __( 'Top Adventures' ) }</h3>
</header>
<div className='overflow-scroll'>
<div className='travel-overflow-container'>
<div className='flex px1 md-px2 mxn1'>
{ adventures.map( ( adventure, i ) => // eslint-disable-line
<div key='adventure' className='m1 mt3 mb2'>
<div className={ popularClasses[ i ] + ' mb1' }>
<div className='relative travel-results-result'>
<a className='travel-results-result-link block relative' href={ adventure.link }>
<img src={ adventure._embedded['wp:featuredmedia'][0].source_url } className='block rounded' width='346' height='200' ></img>
</a>
</div>
</div>

<div className='h2 line-height-2 mb1'>
<span className='travel-results-result-text'>{ adventure.title.rendered }</span>
<span className='travel-results-result-subtext h3'>•</span>
<span className='travel-results-result-subtext h3'>$&nbsp;</span><span className='black bold'>{ adventure.meta.amp_travel_price }</span>
</div>

<div className='h4 line-height-2'>
<div className='inline-block relative mr1 h3 line-height-2'>
<div className='travel-results-result-stars green'>
{ [ ...Array( parseInt( adventure.meta.amp_travel_rating ) ) ].map( () =>
'★'
) }
</div>
</div>
<span className='travel-results-result-subtext mr1'>{ adventure.meta.amp_travel_reviews } Reviews</span>
<span className='travel-results-result-subtext'><svg className='travel-icon' viewBox='0 0 77 100'><g fill='none' fillRule='evenodd'><path stroke='currentColor' strokeWidth='7.5' d='M38.794 93.248C58.264 67.825 68 49.692 68 38.848 68 22.365 54.57 9 38 9S8 22.364 8 38.85c0 10.842 9.735 28.975 29.206 54.398a1 1 0 0 0 1.588 0z'></path><circle cx='38' cy='39' r='10' fill='currentColor'></circle></g></svg>
{ adventure.meta.amp_travel_location }
</span>
</div>
</div>
) }
</div>
</div>
</div>
</section>
);
}),
save() {
return renderStaticPopularBlock();

// Handled by PHP.
return null;
}
}
);
125 changes: 124 additions & 1 deletion includes/class-amp-travel-blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@
*/
class AMP_Travel_Blocks {

/**
* Number of popular posts to display.
*
* @var int
*/
public static $popular_posts_count = 3;

/**
* Init Travel Blocks.
*/
Expand All @@ -20,11 +27,127 @@ public function init() {
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_editor_scripts' ) );
add_filter( 'the_content', array( $this, 'filter_the_content_amp_atts' ), 10, 1 );
add_filter( 'wp_kses_allowed_html', array( $this, 'filter_wp_kses_allowed_html' ), 10, 2 );
add_action( 'init', array( $this, 'register_block_travel_popular' ) );
add_action( 'init', array( $this, 'register_block_activity_list' ) );
add_action( 'init', array( $this, 'register_block_discover' ) );
}
}

/**
* Register Travel Popular block.
*/
public function register_block_travel_popular() {
if ( function_exists( 'register_block_type' ) ) {
register_block_type( 'amp-travel/popular', array(
'attributes' => array(
'heading' => array(
'type' => 'string',
'default' => __( 'Top Adventures', 'travel' ),
),
),
'render_callback' => array( $this, 'render_block_travel_popular' ),
) );
}
}

/**
* Frontend render for Popular block.
*
* @param array $attributes Block attributes.
* @return string Output.
*/
public function render_block_travel_popular( $attributes ) {
$output = '';

$adventures = get_posts(
array(
'post_type' => 'adventure',
'numberposts' => self::$popular_posts_count,
'orderby' => 'meta_value_num',
'meta_key' => 'amp_travel_rating',
)
);

if ( count( $adventures ) !== self::$popular_posts_count ) {
return $output;
}

$output .= '<section class="travel-popular pb4 pt3 relative">';

if ( ! empty( $attributes['heading'] ) ) {
$output .= '<header class="max-width-3 mx-auto px1 md-px2">
<h3 class="h1 bold line-height-2 md-hide lg-hide" aria-hidden="true">' . esc_html( $attributes['heading'] ) . '</h3>
<h3 class="h1 bold line-height-2 xs-hide sm-hide center">' . esc_html( $attributes['heading'] ) . '</h3>
</header>';
}

$output .= '<div class="overflow-scroll">
<div class="travel-overflow-container">
<div class="flex px1 md-px2 mxn1">';

$popular_classes = array(
'travel-popular-tilt-right',
'travel-results-result',
'travel-popular-tilt-left',
);

foreach ( $adventures as $index => $adventure ) {
$attachment_id = get_post_thumbnail_id( $adventure->ID );
$img_src = wp_get_attachment_image_url( $attachment_id, 'full' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id );
$price = get_post_meta( $adventure->ID, 'amp_travel_price', true );
$rating = round( (int) get_post_meta( $adventure->ID, 'amp_travel_rating', true ) );
$comments = wp_count_comments( $adventure->ID );
$locations = wp_get_post_terms( $adventure->ID, 'location', array(
'fields' => 'names',
) );

if ( is_wp_error( $locations ) || empty( $locations ) ) {
$location = '--';
} else {
$location = $locations[0];
}

$output .= '<div class="m1 mt3 mb2"><div class="' . esc_html( $popular_classes[ $index ] ) . ' mb1">
<div class="relative travel-results-result">
<a class="travel-results-result-link block relative" href="' . esc_url( get_the_permalink( $adventure->ID ) ) . '">
<amp-img class="block rounded" width="346" height="200" noloading="" src="' . esc_url( $img_src ) . '" srcset="' . esc_attr( $img_srcset ) . '"></amp-img>
</a>
</div>
</div>
<div class="h2 line-height-2 mb1">
<span class="travel-results-result-text">' . esc_html( get_the_title( $adventure->ID ) ) . '</span>
<span class="travel-results-result-subtext h3">•</span>
<span class="travel-results-result-subtext h3">$&nbsp;</span><span class="black bold">' . esc_html( $price ) . '</span>
</div>
<div class="h4 line-height-2">
<div class="inline-block relative mr1 h3 line-height-2">
<div class="travel-results-result-stars green">';

for ( $i = 0; $i < $rating; $i++ ) {
$output .= '★';
}

$output .= '</div>
</div>
<span class="travel-results-result-subtext mr1">' .
/* translators: %d: The number of reviews */
sprintf( esc_html__( '%d Reviews', 'travel' ), esc_html( $comments->approved ) ) . '</span>
<span class="travel-results-result-subtext"><svg class="travel-icon" viewBox="0 0 77 100"><g fill="none" fillRule="evenodd"><path stroke="currentColor" strokeWidth="7.5" d="M38.794 93.248C58.264 67.825 68 49.692 68 38.848 68 22.365 54.57 9 38 9S8 22.364 8 38.85c0 10.842 9.735 28.975 29.206 54.398a1 1 0 0 0 1.588 0z"></path><circle cx="38" cy="39" r="10" fill="currentColor"></circle></g></svg>
' . esc_html( $location ) . '</span>
</div>
</div>';

}

$output .= '</div>
</div>
</div>
</section>';

return $output;
}

/**
* Register Travel Activity List block type.
*/
Expand Down Expand Up @@ -113,7 +236,7 @@ public function enqueue_editor_scripts() {
wp_enqueue_script(
'travel-editor-blocks-js',
get_template_directory_uri() . '/assets/js/editor-blocks.js',
array( 'wp-i18n', 'wp-element', 'wp-blocks', 'wp-components', 'wp-api' )
array( 'underscore', 'wp-i18n', 'wp-element', 'wp-blocks', 'wp-components', 'wp-api' )
);

wp_localize_script(
Expand Down
Loading