Skip to content

Commit

Permalink
feat: Add settings and flesh out further
Browse files Browse the repository at this point in the history
  • Loading branch information
@claudiulodro
claudiulodro committed Jan 30, 2020
1 parent d66485a commit f343d99
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 16 deletions.
131 changes: 126 additions & 5 deletions src/blocks/video-playlist/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,15 @@
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { Component, Fragment } from '@wordpress/element';
import { Placeholder, Spinner } from '@wordpress/components';
import { Placeholder, Spinner, PanelBody, PanelRow, RangeControl, ToggleControl, TextControl, Button } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import { addQueryArgs } from '@wordpress/url';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Internal dependencies.
*/
import AutocompleteTokenField from '../../components/autocomplete-tokenfield';

class Edit extends Component {
constructor( props ) {
Expand All @@ -13,6 +21,7 @@ class Edit extends Component {
isLoading: false,
error: '',
embed: '',
videoToAdd: '',
};
}

Expand Down Expand Up @@ -42,7 +51,7 @@ class Edit extends Component {
}

renderPlaceholder() {
const { isLoading, error } = this.state;
const { isLoading, error, embed } = this.state;

if ( isLoading ) {
return <Placeholder icon={ <Spinner /> } className="component-placeholder__align-center" />;
Expand All @@ -58,16 +67,128 @@ class Edit extends Component {
);
}

if ( ! embed.length ) {
return (
<Placeholder
icon="warning"
label={ __( 'Error', 'newspack-blocks' ) }
instructions={ __( 'No videos found', 'newspack-blocks' ) }
/>
);
}

return null;
}

fetchCategorySuggestions = search => {
return apiFetch( {
path: addQueryArgs( '/wp/v2/categories', {
search,
per_page: 20,
_fields: 'id,name',
orderby: 'count',
order: 'desc',
} ),
} ).then( function( categories ) {
return categories.map( category => ( {
value: category.id,
label: decodeEntities( category.name ) || __( '(no title)', 'newspack-blocks' ),
} ) );
} );
};
fetchSavedCategories = categoryIDs => {
return apiFetch( {
path: addQueryArgs( '/wp/v2/categories', {
per_page: 100,
_fields: 'id,name',
include: categoryIDs.join( ',' ),
} ),
} ).then( function( categories ) {
return categories.map( category => ( {
value: category.id,
label: decodeEntities( category.name ) || __( '(no title)', 'newspack-blocks' ),
} ) );
} );
};

addManualVideo = () => {
const { attributes, setAttributes } = this.props;
const { videos } = this.attributes;
const { videoToAdd } = this.state;

videos.push( videoToAdd );
setAttributes( { videos } );
this.setState( { videoToAdd: '' } );
}

render() {
const { embed } = this.state;
const { attributes, setAttributes } = this.props;
const { manual, videos, categories, videosToShow } = attributes;
const { embed, isLoading, videoToAdd } = this.state;

return (
<Fragment>
{ this.renderPlaceholder() }
<div className="wp-block-embed__wrapper" dangerouslySetInnerHTML={ { __html: embed } } />
{ ( isLoading || '' === embed ) && this.renderPlaceholder() }
{ ! ( isLoading || '' === embed ) && (
<div dangerouslySetInnerHTML={ { __html: embed } } />
) }
<InspectorControls>
<PanelBody title={ __( 'Settings', 'newspack-blocks' ) } initialOpen={ true }>
<PanelRow>
<ToggleControl
label={ __( 'Manually select videos', 'newspack-blocks' ) }
checked={ manual }
onChange={ () => setAttributes( { manual: ! manual } ) }
/>
</PanelRow>
{ manual && (
<Fragment>
{ videos.map( function( video, index ) {
<div>
{ video }
<span>X</span>
</div>
} ) }
<TextControl
label={ __( 'Add video', 'newspack-blocks' ) }
value={ videoToAdd }
onChange={ ( _videoToAdd ) => this.setState( { videoToAdd: _videoToAdd } ) }
/>
<Button
isSecondary
onClick={ () => this.addManualVideo() }
>
{ __( 'Add', 'newspack-blocks' ) }
</Button>
</Fragment>
) }
{ ! manual && (
<Fragment>
<RangeControl
className='videosToShow'
label={ __( 'Videos', 'newspack-blocks' ) }
help={ __(
"The maximum number of videos to pull from posts.",
'newspack-blocks'
) }
value={ videosToShow }
onChange={ _videosToShow => setAttributes( { videosToShow: _videosToShow } ) }
min={ 1 }
max={ 30 }
required
/>
<AutocompleteTokenField
key="categories"
tokens={ categories || [] }
onChange={ _categories => setAttributes( { categories: _categories } ) }
fetchSuggestions={ this.fetchCategorySuggestions }
fetchSavedInfo={ this.fetchSavedCategories }
label={ __( 'Categories', 'newspack-blocks' ) }
/>
</Fragment>
) }
</PanelBody>
</InspectorControls>
</Fragment>
);
}
Expand Down
10 changes: 7 additions & 3 deletions src/blocks/video-playlist/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
@import '../../shared/sass/colors';
@import '../../shared/sass/placeholder';

.wp-block-newspack-blocks-video-playlist {
background: $color__primary;
border: 5px solid red;
.wpbnbvp::before {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: 1;
}
6 changes: 5 additions & 1 deletion src/blocks/video-playlist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,14 @@ export const settings = {
type: 'array',
default: [],
},
videosToShow: {
type: 'integer',
default: 5
},
},
supports: {
html: false,
// align: false,
align: false,
},
edit,
save: () => null, // to use view.php
Expand Down
27 changes: 20 additions & 7 deletions src/blocks/video-playlist/view.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ function newspack_blocks_register_video_playlist() {
'type' => 'array',
'default' => [],
],
'videosToShow' => [
"type" => "integer",
"default" => 5,
],
),
'render_callback' => 'newspack_blocks_render_block_video_playlist',
)
Expand All @@ -52,7 +56,8 @@ function newspack_blocks_get_video_playlist( $args ) {
$defaults = [
'categories' => [],
'videos' => [],
'limit' => 5,
'videosToShow' => 5,
'className' => '',
];
$args = wp_parse_args( $args, $defaults );

Expand All @@ -64,7 +69,7 @@ function newspack_blocks_get_video_playlist( $args ) {

$html = '';
if ( $videos ) {
$html = newspack_blocks_get_video_playlist_html( $videos );
$html = newspack_blocks_get_video_playlist_html( $videos, $args );
}

return [
Expand All @@ -76,15 +81,15 @@ function newspack_blocks_get_video_playlist( $args ) {
function newspack_blocks_get_video_playlist_videos( $args ) {
$defaults = [
'categories' => [],
'limit' => 5,
'videosToShow' => 5,
];
$args = wp_parse_args( $args, $defaults );

$query_args = [
'post_type' => 'post',
'post_status' => 'publish',
's' => 'core-embed/youtube',
'posts_per_page' => $args['limit'],
'posts_per_page' => $args['videosToShow'],
];

$videos = [];
Expand All @@ -99,10 +104,10 @@ function newspack_blocks_get_video_playlist_videos( $args ) {
}
}

return array_slice( array_unique( $videos ), 0, $args['limit'] );
return array_slice( array_unique( $videos ), 0, $args['videosToShow'] );
}

function newspack_blocks_get_video_playlist_html( $videos ) {
function newspack_blocks_get_video_playlist_html( $videos, $args = [] ) {
$video_ids = [];
foreach ( $videos as $video ) {
$url_parts = wp_parse_url( $video );
Expand All @@ -125,9 +130,17 @@ function newspack_blocks_get_video_playlist_html( $videos ) {
$url .= '&playlist=' . implode( ',', array_slice( $video_ids, 1 ) );
}

$classes = 'wp-block-newspack-blocks-video-playlist wpbnbvp wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio';
if ( ! empty( $args['className'] ) ) {
$classes .= $args['className'];
}
ob_start();
?>
<iframe width="560" height="315" src="<?php echo esc_attr( $url ); ?>" frameborder="0" allowfullscreen></iframe>
<figure class='<?php echo esc_attr( $classes ); ?>'>
<div class='wp-block-embed__wrapper'>
<iframe width='960' height='540' src='<?php echo esc_attr( $url ); ?>' frameborder='0' allowfullscreen></iframe>
</div>
</figure>
<?php
return ob_get_clean();
}

0 comments on commit f343d99

Please sign in to comment.