<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[8514] sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks: Blocks: Add Session block.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/8514">8514</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/8514","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>vedjain</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2019-03-25 09:46:00 +0000 (Mon, 25 Mar 2019)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Blocks: Add Session block.
See the discussion here https://make.wordpress.org/community/2018/10/30/wordcamp-block-sessions/
props coreymckrill, iandunn, vedjain</pre>
<h3>Added Paths</h3>
<ul>
<li>sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/</li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsblockcontentjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-content.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsblockcontrolsjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-controls.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionseditjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/edit.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsindexjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/index.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsinspectorcontrolsjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/inspector-controls.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionssessionsselectjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/sessions-select.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksincludessessionsphp">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/includes/sessions.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsblockcontentjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-content.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-content.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-content.js 2019-03-25 09:46:00 UTC (rev 8514)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,218 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+const { Disabled } = wp.components;
+const { Component } = wp.element;
+const { decodeEntities } = wp.htmlEntities;
+const { __ } = wp.i18n;
+
+/**
+ * Internal dependencies
+ */
+import { ItemTitle, ItemHTMLContent } from '../shared/block-content';
+import { tokenSplit, arrayTokenReplace, intersperse, listify } from '../shared/i18n';
+import GridContentLayout from '../shared/grid-layout/block-content';
+import FeaturedImage from '../shared/featured-image';
+
+function SessionSpeakers( { session } ) {
+ let speakerData = get( session, '_embedded.speakers', [] );
+
+ speakerData = speakerData.map( ( speaker ) => {
+ let { link = '', title = {} } = speaker;
+ title = title.rendered || __( 'Unnamed', 'wordcamporg' );
+
+ if ( ! link ) {
+ return decodeEntities( title.trim() );
+ }
+
+ return (
+ <a
+ key={ link }
+ href={ link }
+ >
+ { decodeEntities( title.trim() ) }
+ </a>
+ );
+ } );
+
+ const speakers = arrayTokenReplace(
+ /* translators: %s is a list of names. */
+ tokenSplit( __( 'Presented by %s', 'wordcamporg' ) ),
+ [ listify( speakerData ) ]
+ );
+
+ return (
+ <div className="wordcamp-item-meta wordcamp-session-speakers">
+ { speakers }
+ </div>
+ );
+}
+
+function SessionImage( { session } ) {
+ let image;
+
+ const url = get( session, '_embedded[\'wp:featuredmedia\'].media_details.sizes.thumbnail.source_url', '' );
+
+ if ( url ) {
+ image = (
+ <img
+ src={ url }
+ alt={ decodeEntities( session.title.rendered.trim() ) }
+ className={ classnames( 'wordcamp-session-image' ) }
+ />
+ );
+ } else {
+ image = (
+ <div className="wordcamp-session-default-image" />
+ );
+ }
+
+ return image;
+}
+
+function SessionDetails( { session, show_meta, show_category } ) {
+ let meta, metaContent, category;
+ const terms = get( session, '_embedded[\'wp:term\']', [] ).flat();
+
+ if ( show_meta ) {
+ if ( session.session_track.length ) {
+ const [ firstTrack ] = terms.filter( ( term ) => {
+ return 'wcb_track' === term.taxonomy;
+ } );
+
+ metaContent = 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 ),
+ (
+ <span className={ classnames( 'wordcamp-session-track', 'wordcamp-session-track-' + decodeEntities( firstTrack.slug.trim() ) ) }>
+ { decodeEntities( firstTrack.name.trim() ) }
+ </span>
+ ),
+ ]
+ );
+ } else {
+ metaContent = 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 ),
+ ]
+ );
+ }
+
+ meta = (
+ <div className="wordcamp-session-time-location">
+ { metaContent }
+ </div>
+ );
+ }
+
+ if ( show_category && session.session_category.length ) {
+ /* translators: used between list items, there is a space after the comma */
+ const separator = __( ', ', 'wordcamporg' );
+ const categories = terms
+ .filter( ( term ) => {
+ return 'wcb_session_category' === term.taxonomy;
+ } )
+ .map( ( term ) => {
+ return (
+ <span
+ key={ term.slug }
+ className={ classnames( 'wordcamp-session-category', 'wordcamp-session-category-' + decodeEntities( term.slug ) ) }
+ >
+ { decodeEntities( term.name.trim() ) }
+ </span>
+ );
+ } );
+
+ category = (
+ <div className="wordcamp-session-categories">
+ { intersperse( categories, separator ) }
+ </div>
+ );
+ }
+
+ return (
+ <div className="wordcamp-item-meta wordcamp-session-details">
+ { meta }
+ { category }
+ </div>
+ );
+}
+
+class SessionsBlockContent extends Component {
+ hasSpeaker( session ) {
+ return get( session, '_embedded.speakers', [] ).length > 0;
+ }
+
+ render() {
+ const { attributes, sessionPosts } = this.props;
+ const { className, show_speaker, show_images, image_align, featured_image_height, featured_image_width, content, excerpt_more, show_meta, show_category } = attributes;
+ const featuredImageSize = { height: featured_image_height, width: featured_image_width };
+
+ return (
+ <GridContentLayout { ...this.props } >
+ { sessionPosts.map( ( post ) =>
+ <div
+ key={ post.slug }
+ className={ classnames(
+ 'wordcamp-block-post-list-item',
+ 'wordcamp-session',
+ 'wordcamp-session-' + decodeEntities( post.slug ),
+ 'wordcamp-clearfix'
+ ) }
+ >
+ <ItemTitle
+ className="wordcamp-session-title"
+ headingLevel={ 3 }
+ title={ post.title.rendered.trim() }
+ link={ post.link }
+ />
+
+ { show_speaker && this.hasSpeaker( post ) &&
+ <SessionSpeakers session={ post } />
+ }
+
+ { show_images &&
+ <FeaturedImage
+ className={'wordcamp-session-image-container align-' + decodeEntities( image_align ) }
+ size={featuredImageSize}
+ wpMediaDetails={ get( post, "_embedded.wp:featuredmedia[0].media_details.sizes", {} ) }
+ alt={post.title.rendered}
+ />
+ }
+
+ { 'none' !== content &&
+ <ItemHTMLContent
+ className={ classnames( 'wordcamp-session-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' ) }
+ />
+ }
+
+ { ( show_meta || show_category ) &&
+ <SessionDetails
+ session={ post }
+ show_meta={ show_meta }
+ show_category={ show_category }
+ />
+ }
+ </div>
+ ) }
+ </GridContentLayout>
+ );
+ }
+}
+
+export default SessionsBlockContent;
</ins></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsblockcontrolsjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-controls.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-controls.js 2019-03-25 09:46:00 UTC (rev 8514)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,98 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+const { Button, Placeholder } = wp.components;
+const { __ } = wp.i18n;
+
+/**
+ * Internal dependencies
+ */
+import { BlockControls, PlaceholderNoContent, PlaceholderSpecificMode } from '../shared/block-controls';
+import SessionsBlockContent from './block-content';
+import SessionsSelect from './sessions-select';
+
+const LABEL = __( 'Sessions', 'wordcamporg' );
+
+class SessionsBlockControls extends BlockControls {
+ render() {
+ const { icon, attributes, setAttributes, sessionPosts } = this.props;
+ const { mode } = attributes;
+
+ const hasPosts = Array.isArray( sessionPosts ) && sessionPosts.length;
+
+ if ( mode && ! hasPosts ) {
+ return (
+ <PlaceholderNoContent
+ icon={ icon }
+ label={ LABEL }
+ loading={ ! Array.isArray( sessionPosts ) }
+ />
+ );
+ }
+
+ let output;
+
+ switch ( mode ) {
+ case 'all' :
+ output = (
+ <SessionsBlockContent { ...this.props } />
+ );
+ break;
+
+ case 'wcb_session' :
+ case 'wcb_track' :
+ case 'wcb_session_category' :
+ output = (
+ <PlaceholderSpecificMode
+ label={ this.getModeLabel( mode ) }
+ icon={ icon }
+ content={
+ <SessionsBlockContent { ...this.props } />
+ }
+ placeholderChildren={
+ <SessionsSelect { ...this.props } />
+ }
+ />
+ );
+ break;
+
+ default :
+ output = (
+ <Placeholder
+ className={ classnames( 'wordcamp-block-edit-placeholder', 'wordcamp-block-edit-placeholder-no-mode' ) }
+ icon={ icon }
+ label={ LABEL }
+ >
+ <div className="wordcamp-block-edit-mode-option">
+ <Button
+ isDefault
+ isLarge
+ onClick={ () => {
+ setAttributes( { mode: 'all' } );
+ } }
+ >
+ { this.getModeLabel( 'all' ) }
+ </Button>
+ </div>
+
+ <div className="wordcamp-block-edit-mode-option">
+ <SessionsSelect
+ label={ __( 'Choose specific sessions, tracks, or categories', 'wordcamporg' ) }
+ { ...this.props }
+ />
+ </div>
+ </Placeholder>
+ );
+ break;
+ }
+
+ return output;
+ }
+}
+
+export default SessionsBlockControls;
</ins></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionseditjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/edit.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/edit.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/edit.js 2019-03-25 09:46:00 UTC (rev 8514)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,142 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * External dependencies
+ */
+import { isUndefined, pickBy, split } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+const apiFetch = wp.apiFetch;
+const { withSelect } = wp.data;
+const { Component, Fragment } = wp.element;
+const { addQueryArgs } = wp.url;
+
+/**
+ * Internal dependencies
+ */
+import SessionsBlockControls from './block-controls';
+import SessionsInspectorControls from './inspector-controls';
+import GridToolbar from '../shared/grid-layout/toolbar';
+
+const blockData = window.WordCampBlocks.sessions || {};
+
+const SESSIONS_ICON = 'list-view';
+const MAX_POSTS = 100;
+
+const ALL_POSTS_QUERY = {
+ orderby : 'title',
+ order : 'asc',
+ per_page : MAX_POSTS,
+ _embed : true,
+};
+
+const ALL_TERMS_QUERY = {
+ orderby : 'name',
+ order : 'asc',
+ per_page : MAX_POSTS,
+};
+
+class SessionsEdit extends Component {
+ constructor( props ) {
+ super();
+
+ this.state = {
+ allSessionPosts : null,
+ allSessionTracks : null,
+ allSessionCategories : null,
+ };
+ }
+
+ componentWillMount() {
+ this.isStillMounted = true;
+
+ const allSessionPosts = apiFetch( {
+ path: addQueryArgs( `/wp/v2/sessions`, ALL_POSTS_QUERY ),
+ } );
+ const allSessionTracks = apiFetch( {
+ path: addQueryArgs( `/wp/v2/session_track`, ALL_TERMS_QUERY ),
+ } );
+ const allSessionCategories = apiFetch( {
+ path: addQueryArgs( `/wp/v2/session_category`, ALL_TERMS_QUERY ),
+ } );
+
+ if ( this.isStillMounted ) {
+ this.setState( {
+ allSessionPosts : allSessionPosts, // Promise
+ allSessionTracks : allSessionTracks, // Promise
+ allSessionCategories : allSessionCategories, // Promise
+ } );
+ }
+ }
+
+ componentWillUnmount() {
+ this.isStillMounted = false;
+ }
+
+ render() {
+ const { mode } = this.props.attributes;
+
+ return (
+ <Fragment>
+ <SessionsBlockControls
+ icon={ SESSIONS_ICON }
+ { ...this.props }
+ { ...this.state }
+ />
+ { mode &&
+ <Fragment>
+ <SessionsInspectorControls { ...this.props } />
+ <GridToolbar { ...this.props } />
+ </Fragment>
+ }
+ </Fragment>
+ );
+ }
+}
+
+const sessionsSelect = ( select, props ) => {
+ const { mode, item_ids, sort } = props.attributes;
+ const { getEntityRecords } = select( 'core' );
+
+ const args = {
+ per_page : MAX_POSTS, // -1 is not allowed for per_page.
+ _embed : true,
+ context : 'view',
+ _wcpt_session_type : 'session',
+ };
+
+ if ( 'session_time' !== sort ) {
+ const [ orderby, order ] = split( sort, '_', 2 );
+ args.orderby = orderby;
+ args.order = order;
+ }
+
+ if ( Array.isArray( item_ids ) ) {
+ switch ( mode ) {
+ case 'wcb_session':
+ args.include = item_ids;
+ break;
+ case 'wcb_track':
+ args.session_track = item_ids;
+ break;
+ case 'wcb_session_category':
+ args.session_category = item_ids;
+ break;
+ }
+ }
+
+ const sessionsQuery = pickBy( args, ( value ) => ! isUndefined( value ) );
+
+ const sessionPosts = getEntityRecords( 'postType', 'wcb_session', sessionsQuery );
+
+ // todo Is there a way to do this sorting via REST API parameters?
+ if ( Array.isArray( sessionPosts ) && 'session_time' === sort ) {
+ sessionPosts.sort( ( a, b ) => {
+ return Number( a.meta._wcpt_session_time ) - Number( b.meta._wcpt_session_time );
+ } );
+ }
+
+ return { blockData, sessionPosts };
+};
+
+export const edit = withSelect( sessionsSelect )( SessionsEdit );
</ins></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsindexjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/index.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/index.js 2019-03-25 09:46:00 UTC (rev 8514)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,22 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+/**
+ * Internal dependencies
+ */
+import { edit } from './edit.js';
+
+export const name = 'wordcamp/sessions';
+
+export const settings = {
+ title : __( 'Sessions', 'wordcamporg' ),
+ description : __( 'Add a list of sessions.', 'wordcamporg' ),
+ icon : 'list-view',
+ category : 'wordcamp',
+ edit,
+ save : function() {
+ return null;
+ },
+};
</ins></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsinspectorcontrolsjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/inspector-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/inspector-controls.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/inspector-controls.js 2019-03-25 09:46:00 UTC (rev 8514)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,91 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies
+ */
+const { PanelBody, PanelRow, SelectControl, ToggleControl } = wp.components;
+const { InspectorControls } = wp.editor;
+const { Component, Fragment } = wp.element;
+const { __ } = wp.i18n;
+
+/**
+ * Internal dependencies
+ */
+import GridInspectorControl from '../shared/grid-layout/inspector-control';
+import FeaturedImageInspectorControls from '../shared/featured-image/inspector-control';
+
+class SessionsInspectorControls extends Component {
+ render() {
+ const { attributes, setAttributes, blockData } = this.props;
+ const { show_speaker, content, excerpt_more, show_meta, show_category, sort } = attributes;
+ const { options } = blockData;
+
+ return (
+ <InspectorControls>
+ <GridInspectorControl { ...this.props } />
+ <PanelBody title={ __( 'Content Settings', 'wordcamporg' ) } initialOpen={ true }>
+ <PanelRow>
+ <SelectControl
+ label={ __( 'Description', 'wordcamporg' ) }
+ value={ content || 'full' }
+ options={ options.content }
+ onChange={ ( value ) => setAttributes( { content: value } ) }
+ />
+ </PanelRow>
+ { 'excerpt' === content &&
+ <PanelRow>
+ <ToggleControl
+ label={ __( 'Read More Link', 'wordcamporg' ) }
+ help={ __( 'Show a link at the end of the excerpt (some themes already include this)', 'wordcamporg' ) }
+ checked={ excerpt_more === undefined ? false : excerpt_more }
+ onChange={ ( value ) => setAttributes( { excerpt_more: value } ) }
+ />
+ </PanelRow>
+ }
+ <PanelRow>
+ <ToggleControl
+ label={ __( 'Details', 'wordcamporg' ) }
+ help={ __( 'Show date, time, and track.', 'wordcamporg' ) }
+ checked={ show_meta === undefined ? false : show_meta }
+ onChange={ ( value ) => setAttributes( { show_meta: value } ) }
+ />
+ </PanelRow>
+ <PanelRow>
+ <ToggleControl
+ label={ __( 'Categories', 'wordcamporg' ) }
+ help={ __( 'Show session categories.', 'wordcamporg' ) }
+ checked={ show_category === undefined ? false : show_category }
+ onChange={ ( value ) => setAttributes( { show_category: value } ) }
+ />
+ </PanelRow>
+ <PanelRow>
+ <ToggleControl
+ label={ __( 'Speakers', 'wordcamporg' ) }
+ help={ __( 'Show session speakers.', 'wordcamporg' ) }
+ checked={ show_speaker === undefined ? false : show_speaker }
+ onChange={ ( value ) => setAttributes( { show_speaker: value } ) }
+ />
+ </PanelRow>
+ </PanelBody>
+
+ <FeaturedImageInspectorControls
+ title = { __( 'Image size', 'wordcamporg' ) }
+ help = { __( 'Specify image height and width, or select a predefined size.', 'wordcamporg' ) }
+ selectLabel = { __( 'Size', 'wordcamporg') }
+ { ...this.props }
+ />
+
+ <PanelBody title={ __( 'Sorting', 'wordcamporg' ) }>
+ <PanelRow>
+ <SelectControl
+ label={ __( 'Sort by', 'wordcamporg' ) }
+ value={ sort }
+ options={ options.sort || 'session_time' }
+ onChange={ ( value ) => setAttributes( { sort: value } ) }
+ />
+ </PanelRow>
+ </PanelBody>
+ </InspectorControls>
+ );
+ }
+}
+
+export default SessionsInspectorControls;
</ins></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionssessionsselectjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/sessions-select.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/sessions-select.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/sessions-select.js 2019-03-25 09:46:00 UTC (rev 8514)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,214 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * External dependencies
+ */
+import { get, includes } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+const { Dashicon } = wp.components;
+const { Component } = wp.element;
+const { decodeEntities } = wp.htmlEntities;
+const { __ } = wp.i18n;
+
+/**
+ * Internal dependencies
+ */
+import ItemSelect from '../shared/item-select';
+
+class SessionsSelect extends Component {
+ constructor( props ) {
+ super();
+
+ this.state = {
+ wcb_session : [],
+ wcb_track : [],
+ wcb_session_category : [],
+ loading : true,
+ };
+
+ this.buildSelectOptions = this.buildSelectOptions.bind( this );
+ }
+
+ componentWillMount() {
+ this.isStillMounted = true;
+
+ const { allSessionPosts, allSessionTracks, allSessionCategories } = this.props;
+ const promises = [];
+
+ promises.push( allSessionPosts.then(
+ ( fetchedPosts ) => {
+ const posts = fetchedPosts.map( ( post ) => {
+ const image = get( post, '_embedded[\'wp:featuredmedia\'].media_details.sizes.thumbnail.source_url', '' );
+
+ return {
+ label : decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)', 'wordcamporg' ),
+ value : post.id,
+ type : 'wcb_session',
+ image : image,
+ };
+ } );
+
+ if ( this.isStillMounted ) {
+ this.setState( { wcb_session: posts } );
+ }
+ }
+ ).catch() );
+
+ [ allSessionTracks, allSessionCategories ].forEach( ( promise ) => {
+ promises.push( promise.then(
+ ( fetchedTerms ) => {
+ const terms = fetchedTerms.map( ( term ) => {
+ return {
+ label : decodeEntities( term.name ) || __( '(Untitled)', 'wordcamporg' ),
+ value : term.id,
+ type : term.taxonomy,
+ count : term.count || 0,
+ };
+ } );
+
+ if ( this.isStillMounted ) {
+ const [ firstTerm ] = terms;
+ this.setState( { [ firstTerm.type ]: terms } );
+ }
+ }
+ ).catch() );
+ } );
+
+ Promise.all( promises ).then( () => {
+ this.setState( { loading: false } );
+ } );
+ }
+
+ componentWillUnmount() {
+ this.isStillMounted = false;
+ }
+
+ buildSelectOptions( mode ) {
+ const options = [];
+
+ const labels = {
+ wcb_session : __( 'Sessions', 'wordcamporg' ),
+ wcb_track : __( 'Tracks', 'wordcamporg' ),
+ wcb_session_category : __( 'Session Categories', 'wordcamporg' ),
+ };
+
+ for ( const type in this.state ) {
+ if ( this.state.hasOwnProperty( type ) && ( ! mode || type === mode ) && this.state[ type ].length ) {
+ options.push( {
+ label : labels[ type ],
+ options : this.state[ type ],
+ } );
+ }
+ }
+
+ return options;
+ }
+
+ render() {
+ const { label, attributes, setAttributes } = this.props;
+ const { mode, item_ids } = attributes;
+ const options = this.buildSelectOptions( mode );
+
+ let value = [];
+
+ if ( mode && item_ids.length ) {
+ const modeOptions = get( options, '[0].options', [] );
+
+ value = modeOptions.filter( ( option ) => {
+ return includes( item_ids, option.value );
+ } );
+ }
+
+ return (
+ <ItemSelect
+ className="wordcamp-sessions-select"
+ label={ label }
+ value={ value }
+ buildSelectOptions={ this.buildSelectOptions }
+ onChange={ ( changed ) => setAttributes( changed ) }
+ mode={ mode }
+ selectProps={ {
+ isLoading : this.state.loading,
+ formatGroupLabel : ( groupData ) => {
+ return (
+ <span className="wordcamp-item-select-option-group-label">
+ { groupData.label }
+ </span>
+ );
+ },
+ formatOptionLabel: ( optionData ) => {
+ return (
+ <SessionsOption { ...optionData } />
+ );
+ },
+ } }
+ />
+ );
+ }
+}
+
+function SessionsOption( { type, label = '', image = '', count = 0 } ) {
+ let optImage, optContent;
+
+ switch ( type ) {
+ case 'wcb_session' :
+ if ( image ) {
+ optImage = (
+ <img
+ className="wordcamp-item-select-option-image"
+ src={ image }
+ alt={ label }
+ width={ 24 }
+ height={ 24 }
+ />
+ );
+ } else {
+ optImage = (
+ <div className="wordcamp-item-select-option-icon-container">
+ <Dashicon
+ className="wordcamp-item-select-option-icon"
+ icon={ 'list-view' }
+ size={ 16 }
+ />
+ </div>
+ );
+ }
+ optContent = (
+ <span className="wordcamp-item-select-option-label">
+ { label }
+ </span>
+ );
+ break;
+
+ case 'wcb_track' :
+ case 'wcb_session_category' :
+ optImage = (
+ <div className="wordcamp-item-select-option-icon-container">
+ <Dashicon
+ className="wordcamp-item-select-option-icon"
+ icon={ 'list-view' }
+ size={ 16 }
+ />
+ </div>
+ );
+ optContent = (
+ <span className="wordcamp-item-select-option-label">
+ { label }
+ <span className="wordcamp-item-select-option-label-term-count">
+ { count }
+ </span>
+ </span>
+ );
+ break;
+ }
+
+ return (
+ <div className="wordcamp-item-select-option">
+ { optImage }
+ { optContent }
+ </div>
+ );
+}
+
+export default SessionsSelect;
</ins></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksincludessessionsphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/includes/sessions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/includes/sessions.php (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/includes/sessions.php 2019-03-25 09:46:00 UTC (rev 8514)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,384 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+
+namespace WordCamp\Blocks\Sessions;
+use WordCamp\Blocks;
+use function WordCamp\Blocks\Shared\Components\{ render_grid_layout };
+
+defined( 'WPINC' ) || die();
+
+/**
+ * Register block types and enqueue scripts.
+ *
+ * @return void
+ */
+function init() {
+ register_block_type(
+ 'wordcamp/sessions',
+ [
+ 'attributes' => get_attributes_schema(),
+ 'render_callback' => __NAMESPACE__ . '\render',
+ 'editor_script' => 'wordcamp-blocks',
+ 'editor_style' => 'wordcamp-blocks',
+ 'style' => 'wordcamp-blocks',
+ ]
+ );
+}
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Render the block on the front end.
+ *
+ * @param array $attributes Block attributes.
+ *
+ * @return string
+ */
+function render( $attributes ) {
+
+ if ( ! $attributes['mode'] ) {
+ return;
+ }
+
+ $html = '';
+ $defaults = wp_list_pluck( get_attributes_schema(), 'default' );
+ $attributes = wp_parse_args( $attributes, $defaults );
+ $sessions = get_session_posts( $attributes );
+
+ $speakers = [];
+ if ( ! empty( $sessions ) && true === $attributes['show_speaker'] ) {
+ $speakers = get_session_speakers( wp_list_pluck( $sessions, 'ID' ) );
+ }
+
+ $container_classes = [
+ 'wordcamp-block',
+ 'wordcamp-block-post-list',
+ 'wordcamp-sessions-block',
+ sanitize_html_class( $attributes['className'] ),
+ ];
+
+ $rendered_session_posts = [];
+ foreach ( $sessions as $session ) {
+ ob_start();
+ require Blocks\PLUGIN_DIR . 'view/sessions.php';
+ $rendered_session_posts[] = ob_get_clean();
+ }
+
+ $html = render_grid_layout(
+ $attributes['layout'],
+ $attributes['grid_columns'],
+ $rendered_session_posts,
+ $container_classes
+ );
+ return $html;
+}
+
+/**
+ * Add data to be used by the JS scripts in the block editor.
+ *
+ * @param array $data
+ *
+ * @return array
+ */
+function add_script_data( array $data ) {
+ $data['sessions'] = [
+ 'schema' => get_attributes_schema(),
+ 'options' => get_options(),
+ ];
+
+ return $data;
+}
+
+add_filter( 'wordcamp_blocks_script_data', __NAMESPACE__ . '\add_script_data' );
+
+/**
+ * Get the schema for the block's attributes.
+ *
+ * @return array
+ */
+function get_attributes_schema() {
+ return [
+ 'mode' => [
+ 'type' => 'string',
+ 'enum' => wp_list_pluck( get_options( 'mode' ), 'value' ),
+ 'default' => '',
+ ],
+ 'item_ids' => [
+ 'type' => 'array',
+ 'default' => [],
+ 'items' => [
+ 'type' => 'integer',
+ ],
+ ],
+ 'sort' => [
+ 'type' => 'string',
+ 'enum' => wp_list_pluck( get_options( 'sort' ), 'value' ),
+ 'default' => 'session_time',
+ ],
+ 'className' => [
+ 'type' => 'string',
+ 'default' => '',
+ ],
+ 'show_speaker' => [
+ 'type' => 'bool',
+ 'default' => false,
+ ],
+ 'show_images' => [
+ 'type' => 'bool',
+ 'default' => true,
+ ],
+ 'image_size' => [
+ 'type' => 'integer',
+ 'minimum' => 25,
+ 'maximum' => 600,
+ 'default' => 150,
+ ],
+ 'image_align' => [
+ 'type' => 'string',
+ 'enum' => wp_list_pluck( get_options( 'align' ), 'value' ),
+ 'default' => 'none',
+ ],
+ 'content' => [
+ 'type' => 'string',
+ 'enum' => wp_list_pluck( get_options( 'content' ), 'value' ),
+ 'default' => 'full',
+ ],
+ 'excerpt_more' => [
+ 'type' => 'bool',
+ 'default' => false,
+ ],
+ 'show_meta' => [
+ 'type' => 'bool',
+ 'default' => false,
+ ],
+ 'show_category' => [
+ 'type' => 'bool',
+ 'default' => false,
+ ],
+ 'layout' => [
+ 'type' => 'string',
+ 'enum' => array( 'list', 'grid' ),
+ 'default' => 'list',
+ ],
+ 'grid_columns' => array(
+ 'type' => 'integer',
+ 'minimum' => 1,
+ 'maximum' => 4,
+ 'default' => 1
+ ),
+ 'featured_image_height' => array(
+ 'type' => 'integer',
+ 'default' => 150
+ ),
+ 'featured_image_width' => array(
+ 'type' => 'integer',
+ 'default' => 150
+ ),
+ ];
+}
+
+/**
+ * Get the label/value pairs for all options or a specific type.
+ *
+ * @param string $type
+ *
+ * @return array
+ */
+function get_options( $type = '' ) {
+ $options = [
+ 'align' => [
+ [
+ 'label' => _x( 'None', 'alignment option', 'wordcamporg' ),
+ 'value' => 'none',
+ ],
+ [
+ 'label' => _x( 'Left', 'alignment option', 'wordcamporg' ),
+ 'value' => 'left',
+ ],
+ [
+ 'label' => _x( 'Center', 'alignment option', 'wordcamporg' ),
+ 'value' => 'center',
+ ],
+ [
+ 'label' => _x( 'Right', 'alignment option', 'wordcamporg' ),
+ 'value' => 'right',
+ ],
+ ],
+ 'content' => [
+ [
+ 'label' => _x( 'Full', 'content option', 'wordcamporg' ),
+ 'value' => 'full',
+ ],
+ [
+ 'label' => _x( 'Excerpt', 'content option', 'wordcamporg' ),
+ 'value' => 'excerpt',
+ ],
+ [
+ 'label' => _x( 'None', 'content option', 'wordcamporg' ),
+ 'value' => 'none',
+ ],
+ ],
+ 'mode' => [
+ [
+ 'label' => '',
+ 'value' => '',
+ ],
+ [
+ 'label' => _x( 'List all sessions', 'mode option', 'wordcamporg' ),
+ 'value' => 'all',
+ ],
+ [
+ 'label' => _x( 'Choose sessions', 'mode option', 'wordcamporg' ),
+ 'value' => 'wcb_session',
+ ],
+ [
+ 'label' => _x( 'Choose tracks', 'mode option', 'wordcamporg' ),
+ 'value' => 'wcb_track',
+ ],
+ [
+ 'label' => _x( 'Choose session categories', 'mode option', 'wordcamporg' ),
+ 'value' => 'wcb_session_category',
+ ],
+ ],
+ 'sort' => [
+ [
+ 'label' => _x( 'Day and Time', 'sort option', 'wordcamporg' ),
+ 'value' => 'session_time',
+ ],
+ [
+ 'label' => _x( 'A → Z', 'sort option', 'wordcamporg' ),
+ 'value' => 'title_asc',
+ ],
+ [
+ 'label' => _x( 'Z → A', 'sort option', 'wordcamporg' ),
+ 'value' => 'title_desc',
+ ],
+ [
+ 'label' => _x( 'Newest to Oldest', 'sort option', 'wordcamporg' ),
+ 'value' => 'date_desc',
+ ],
+ [
+ 'label' => _x( 'Oldest to Newest', 'sort option', 'wordcamporg' ),
+ 'value' => 'date_asc',
+ ],
+ ],
+ ];
+
+ if ( $type ) {
+ if ( ! empty( $options[ $type ] ) ) {
+ return $options[ $type ];
+ } else {
+ return [];
+ }
+ }
+
+ return $options;
+}
+
+/**
+ * Get the posts to display in the block.
+ *
+ * @param array $attributes
+ *
+ * @return array
+ */
+function get_session_posts( array $attributes ) {
+ $post_args = [
+ 'post_type' => 'wcb_session',
+ 'post_status' => 'publish',
+ 'posts_per_page' => -1,
+ 'meta_query' => [
+ 'relation' => 'AND',
+ [
+ 'relation' => 'OR',
+ [
+ 'key' => '_wcpt_session_type',
+ 'value' => 'session',
+ 'compare' => '=',
+ ],
+ [
+ 'key' => '_wcpt_session_type',
+ 'value' => '',
+ 'compare' => 'NOT EXISTS',
+ ],
+ ],
+ ],
+ ];
+
+ switch ( $attributes['sort'] ) {
+ case 'session_time':
+ $post_args['meta_key'] = '_wcpt_session_time';
+ $post_args['orderby'] = 'meta_value_num title';
+ $post_args['order'] = 'asc';
+ break;
+
+ case 'title_asc':
+ case 'title_desc':
+ case 'date_desc':
+ case 'date_asc':
+ $sort = explode( '_', $attributes['sort'] );
+
+ if ( 2 === count( $sort ) ) {
+ $post_args['orderby'] = $sort[0];
+ $post_args['order'] = $sort[1];
+ }
+ break;
+ }
+
+ switch ( $attributes['mode'] ) {
+ case 'wcb_session':
+ $post_args['post__in'] = $attributes['item_ids'];
+ break;
+
+ case 'wcb_track':
+ case 'wcb_session_category':
+ $post_args['tax_query'] = [
+ [
+ 'taxonomy' => $attributes['mode'],
+ 'field' => 'id',
+ 'terms' => $attributes['item_ids'],
+ ],
+ ];
+ break;
+ }
+
+ return get_posts( $post_args );
+}
+
+/**
+ * Get speaker posts grouped by session.
+ *
+ * @param array $session_ids
+ *
+ * @return array
+ */
+function get_session_speakers( array $session_ids ) {
+ $speakers_by_session = [];
+
+ $session_args = [
+ 'post_type' => 'wcb_session',
+ 'post_status' => 'publish',
+ 'posts_per_page' => -1,
+ 'post__in' => $session_ids,
+ ];
+
+ $session_posts = get_posts( $session_args );
+
+ foreach ( $session_posts as $session ) {
+ $speaker_ids = get_post_meta( $session->ID, '_wcpt_speaker_id', false );
+
+ if ( ! empty( $speaker_ids ) ) {
+ $speaker_args = [
+ 'post_type' => 'wcb_speaker',
+ 'post_status' => 'publish',
+ 'posts_per_page' => -1,
+ 'post__in' => $speaker_ids,
+ 'orderby' => 'post__in',
+ 'order' => 'ASC',
+ ];
+
+ $speakers_by_session[ $session->ID ] = get_posts( $speaker_args );
+ }
+ }
+
+ return $speakers_by_session;
+}
</ins></span></pre>
</div>
</div>
</body>
</html>