Skip to content

Commit

Permalink
Blocks: Speakers: Update to use the newly added common components.
Browse files Browse the repository at this point in the history 
Note that this is condensation of multiple commits. Original pull request: #33

props coreymckrill, iandunn, vedjain
  • Loading branch information
@vedanshujain
vedanshujain committed Mar 22, 2019
1 parent 9f9155a commit 749aa29
Show file tree
Hide file tree
Showing 11 changed files with 257 additions and 464 deletions.
4 changes: 4 additions & 0 deletions public_html/wp-content/mu-plugins/blocks/assets/src/blocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,14 @@ const { registerBlockType } = wp.blocks;
/**
* Internal dependencies
*/
import * as sessions from './sessions/';
import * as speakers from './speakers/';
import * as sponsors from './sponsors/';

[
sessions,
speakers,
sponsors,
].forEach( ( { name, settings } ) => {
registerBlockType( name, settings );
} );
182 changes: 86 additions & 96 deletions public_html/wp-content/mu-plugins/blocks/assets/src/speakers/block-content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,53 +8,103 @@ import classnames from 'classnames';
* WordPress dependencies
*/
const { Disabled } = wp.components;
const { Component, Fragment, RawHTML } = wp.element;
const { Component, Fragment } = wp.element;
const { decodeEntities } = wp.htmlEntities;
const { __, _n, sprintf } = wp.i18n;
const { __, _n } = wp.i18n;

/**
* Internal dependencies
*/
import AvatarImage from '../shared/avatar';
import { ItemTitle, ItemHTMLContent } from '../shared/block-content';
import { tokenSplit, arrayTokenReplace } from '../shared/i18n';
import GridContentLayout from '../shared/grid-layout/block-content';
import './block-content.scss';

function SpeakerSessions( { speaker, tracks } ) {
const sessions = get( speaker, '_embedded.sessions', [] );

let output = ( <Fragment>{ null }</Fragment> );

if ( sessions.length ) {
output = (
<div className={ classnames( 'wordcamp-item-meta', 'wordcamp-speaker-sessions' ) }>
<h4 className="wordcamp-speaker-sessions-heading">
{ _n( 'Session', 'Sessions', sessions.length, 'wordcamporg' ) }
</h4>

<ul className="wordcamp-speaker-sessions-list">
{ sessions.map( ( session ) =>
<li
key={ session.slug }
className="wordcamp-speaker-session-content"
>
<Disabled>
<a
className="wordcamp-speaker-session-link"
href={ session.link }
>
{ decodeEntities( session.title.rendered.trim() ) || __( '(Untitled)', 'wordcamporg' ) }
</a>
<span className="wordcamp-speaker-session-info">
{ session.session_track.length &&
arrayTokenReplace(
/* translators: 1: A date; 2: A time; 3: A location; */
tokenSplit( __( '%1$s at %2$s in %3$s', 'wordcamporg' ) ),
decodeEntities( session.session_date_time.date ),
decodeEntities( session.session_date_time.time ),
get( tracks.find( ( value ) => {
const [ firstTrackId ] = session.session_track;
return parseInt( value.id ) === firstTrackId;
} ), 'name' )
)
}
{ ! session.session_track.length &&
arrayTokenReplace(
/* translators: 1: A date; 2: A time; */
tokenSplit( __( '%1$s at %2$s', 'wordcamporg' ), ),
decodeEntities( session.session_date_time.date ),
decodeEntities( session.session_date_time.time )
)
}
</span>
</Disabled>
</li>
) }
</ul>
</div>
);
}

return output;
}

class SpeakersBlockContent extends Component {
render() {
const { attributes, speakerPosts, tracks } = this.props;
const {
layout, grid_columns, className,
show_avatars, avatar_size, avatar_align,
content, excerpt_more, show_session,
} = attributes;

const containerClasses = [
'wordcamp-speakers-block',
'layout-' + layout,
className,
];

if ( 'grid' === layout ) {
containerClasses.push( 'grid-columns-' + Number( grid_columns ) );
}

return (
<ul className={ classnames( containerClasses ) }>
<GridContentLayout
{ ...this.props }
>
{ speakerPosts.map( ( post ) =>
<li
<div
key={ post.slug }
className={ classnames(
'wordcamp-speaker',
'wordcamp-speaker-' + decodeEntities( post.slug ),
'wordcamp-clearfix'
) }
>
<h3 className="wordcamp-speaker-name-heading">
<Disabled>
<a href={ post.link }>
{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)', 'wordcamporg' ) }
</a>
</Disabled>
</h3>
<ItemTitle
className="wordcamp-speaker-title"
headingLevel={ 3 }
title={ post.title.rendered.trim() }
link={ post.link }
/>

{ show_avatars &&
<div className={ classnames( 'wordcamp-speaker-avatar-container', 'align-' + decodeEntities( avatar_align ) ) }>
Expand All @@ -72,83 +122,23 @@ class SpeakersBlockContent extends Component {
}

{ ( 'none' !== content ) &&
<div className={ classnames( 'wordcamp-speaker-content', 'wordcamp-speaker-content-' + decodeEntities( content ) ) }>
{ 'full' === content &&
<Disabled>
<RawHTML children={ post.content.rendered.trim() } />
<p className="wordcamp-speaker-permalink">
<a href={ post.link }>
{ __( 'Visit speaker page', 'wordcamporg' ) }
</a>
</p>
</Disabled>
}
{ 'excerpt' === content &&
<Disabled>
<RawHTML children={ post.excerpt.rendered.trim() } />
{ excerpt_more &&
<p className="wordcamp-speaker-permalink">
<a href={ post.link }>
{ __( 'Read more', 'wordcamporg' ) }
</a>
</p>
}
</Disabled>
}
</div>
<ItemHTMLContent
className={ classnames( 'wordcamp-speaker-content-' + decodeEntities( content ) ) }
content={ 'full' === content ? post.content.rendered.trim() : post.excerpt.rendered.trim() }
link={ ( 'full' === content || excerpt_more ) ? post.link : null }
linkText={ 'full' === content ? __( 'Visit session page', 'wordcamporg' ) : __( 'Read more', 'wordcamporg' ) }
/>
}

{ true === show_session && post._embedded.sessions &&
<Fragment>
<h4 className="wordcamp-speaker-session-heading">
{ _n( 'Session', 'Sessions', post._embedded.sessions.length, 'wordcamporg' ) }
</h4>

<ul className="wordcamp-speaker-session-list">
{ post._embedded.sessions.map( ( session ) =>
<li
key={ session.slug }
className="wordcamp-speaker-session-content"
>
<Disabled>
<a
className="wordcamp-speaker-session-link"
href={ session.link }
>
{ decodeEntities( session.title.rendered.trim() ) || __( '(Untitled)', 'wordcamporg' ) }
</a>
<br />
<span className="wordcamp-speaker-session-info">
{ session.session_track.length &&
sprintf(
/* translators: 1: A date; 2: A time; 3: A location; */
__( '%1$s at %2$s in %3$s', 'wordcamporg' ),
session.session_date_time.date,
session.session_date_time.time,
get( tracks.find( ( value ) => {
const [ firstTrackId ] = session.session_track;
return parseInt( value.id ) === firstTrackId;
} ), 'name' )
)
}
{ ! session.session_track.length &&
sprintf(
/* translators: 1: A date; 2: A time; */
__( '%1$s at %2$s', 'wordcamporg' ),
session.session_date_time.date,
session.session_date_time.time
)
}
</span>
</Disabled>
</li>
) }
</ul>
</Fragment>
{ true === show_session &&
<SpeakerSessions
speaker={ post }
tracks={ tracks }
/>
}
</li>,
</div>,
) }
</ul>
</GridContentLayout>
);
}
}
Expand Down
53 changes: 0 additions & 53 deletions public_html/wp-content/mu-plugins/blocks/assets/src/speakers/block-content.scss
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,3 @@
.wordcamp-clearfix:after {
content: "";
display: table;
clear: both;
}

.wordcamp-speakers-block {
/* The double-ampersand defeats an overzealous ul rule in Core's editor-blocks.css. */
/* https://css-tricks.com/the-sass-ampersand/#article-header-id-11 */
&#{&},
.block-editor &#{&} {
list-style: none;
margin: 0 0 1em 0;
}

&.layout-list > li {
margin-bottom: 1em;
&:last-child {
margin-bottom: 0;
}
}

@media ( min-width: 400px ) {
&.layout-grid {
display: grid;
grid-template-columns: repeat( 2, 1fr );
grid-column-gap: 1em;
grid-row-gap: 1em;

/* Ensure columns maintain equal widths. */
/* https://stackoverflow.com/a/43312314 */
min-height: 0;
min-width: 0;
& .wordcamp-speaker {
overflow: hidden;
min-width: 0;
}
}
}

@media ( min-width: 600px ) {
&.layout-grid.grid-columns-3 {
grid-template-columns: repeat( 3, 1fr );
}
}

@media ( min-width: 800px ) {
&.layout-grid.grid-columns-4 {
grid-template-columns: repeat( 4, 1fr );
}
}
}

.wordcamp-speaker-session-list {
/* See note above about the double-ampersand. */
ul#{&},
Expand Down
Loading

0 comments on commit 749aa29

Please sign in to comment.