<!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>[8711] sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks: WordCamp Blocks: Refactor Sessions to use data store, other improvements</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/8711">8711</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/8711","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>coreymckrill</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2019-05-01 22:10:19 +0000 (Wed, 01 May 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'>WordCamp Blocks: Refactor Sessions to use data store, other improvements
* Memoize the select options
* Add missing doc blocks
* JS linting cleanup
Props vedjain, coreymckrill</pre>
<h3>Modified Paths</h3>
<ul>
<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="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: 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 2019-05-01 22:08:54 UTC (rev 8710)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-content.js 2019-05-01 22:10:19 UTC (rev 8711)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,7 +1,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * External dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { get } from 'lodash';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { get } from 'lodash';
</ins><span class="cx" style="display: block; padding: 0 10px"> import classnames from 'classnames';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -8,23 +8,36 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * WordPress dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> const { Component } = wp.element;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-const { __ } = wp.i18n;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const { __ } = wp.i18n;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import {ItemTitle, ItemHTMLContent, ItemPermalink} 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';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { ItemTitle, ItemHTMLContent, ItemPermalink, BlockNoContent } 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';
+import { filterEntities } from '../blocks-store';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Component for the section of each session post that displays information about the session's speakers.
+ *
+ * @param {Object} session
+ *
+ * @return {Element}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function SessionSpeakers( { session } ) {
</span><span class="cx" style="display: block; padding: 0 10px"> let speakerData = get( session, '_embedded.speakers', [] );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> speakerData = speakerData.map( ( speaker ) => {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const { link = '' } = speaker;
- let { title = {} } = speaker;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( speaker.hasOwnProperty( 'code' ) ) {
+ // The wporg username given for this speaker returned an error.
+ return null;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const { link } = speaker;
+ let { title = {} } = speaker;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> title = title.rendered.trim() || __( 'Unnamed', 'wordcamporg' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! link ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -32,10 +45,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return (
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <a
- key={ link }
- href={ link }
- >
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <a key={ link } href={ link }>
</ins><span class="cx" style="display: block; padding: 0 10px"> { title }
</span><span class="cx" style="display: block; padding: 0 10px"> </a>
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -54,6 +64,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Component for the section of each session post that displays metadata including date, time, and location (track).
+ *
+ * @param {Object} session
+ *
+ * @return {Element}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function SessionMeta( { session } ) {
</span><span class="cx" style="display: block; padding: 0 10px"> let metaContent;
</span><span class="cx" style="display: block; padding: 0 10px"> const terms = get( session, '_embedded[\'wp:term\']', [] ).flat();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -97,6 +114,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Component for the section of each session post that displays a session's assigned categories.
+ *
+ * @param {Object} session
+ *
+ * @return {Element}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function SessionCategory( { session } ) {
</span><span class="cx" style="display: block; padding: 0 10px"> let categoryContent;
</span><span class="cx" style="display: block; padding: 0 10px"> const terms = get( session, '_embedded[\'wp:term\']', [] ).flat();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -129,21 +153,107 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Component for displaying the block content.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> class SessionsBlockContent extends Component {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- hasSpeaker( session ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Run additional operations during component initialization.
+ *
+ * @param {Object} props
+ */
+ constructor( props ) {
+ super( props );
+
+ this.getFilteredPosts = this.getFilteredPosts.bind( this );
+ }
+
+ /**
+ * Determine if a session has related speaker data.
+ *
+ * @param {Object} session
+ *
+ * @return {boolean}
+ */
+ static hasSpeaker( session ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return get( session, '_embedded.speakers', [] ).length > 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Filter and sort the content that will be rendered.
+ *
+ * @returns {Array}
+ */
+ getFilteredPosts() {
+ const { attributes, entities } = this.props;
+ const { wcb_session: posts } = entities;
+ const { mode, item_ids, sort } = attributes;
+
+ const args = {};
+
+ if ( Array.isArray( item_ids ) && item_ids.length > 0 ) {
+ let fieldName;
+
+ switch ( mode ) {
+ case 'wcb_session':
+ fieldName = 'id';
+ break;
+ case 'wcb_track':
+ fieldName = 'session_track';
+ break;
+ case 'wcb_session_category':
+ fieldName = 'session_category';
+ break;
+ }
+
+ args.filter = [
+ {
+ fieldName : fieldName,
+ fieldValue : item_ids,
+ },
+ ];
+ }
+
+ if ( 'session_time' !== sort ) {
+ args.sort = sort;
+ }
+
+ let filtered = filterEntities( posts, args );
+
+ if ( Array.isArray( filtered ) && 'session_time' === sort ) {
+ filtered = filtered.sort( ( a, b ) => {
+ return Number( a.meta._wcpt_session_time ) - Number( b.meta._wcpt_session_time );
+ } );
+ }
+
+ return filtered;
+ }
+
+ /**
+ * Render the block content.
+ *
+ * @return {Element}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> render() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const { attributes, sessionPosts } = this.props;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const { attributes } = this.props;
</ins><span class="cx" style="display: block; padding: 0 10px"> const { show_speaker, show_images, image_align, featured_image_width, content, show_meta, show_category } = attributes;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const posts = this.getFilteredPosts();
+ const isLoading = ! Array.isArray( posts );
+ const hasPosts = ! isLoading && posts.length > 0;
+
+ if ( isLoading || ! hasPosts ) {
+ return (
+ <BlockNoContent loading={ isLoading } />
+ );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> return (
</span><span class="cx" style="display: block; padding: 0 10px"> <GridContentLayout
</span><span class="cx" style="display: block; padding: 0 10px"> className="wordcamp-sessions-block"
</span><span class="cx" style="display: block; padding: 0 10px"> { ...this.props }
</span><span class="cx" style="display: block; padding: 0 10px"> >
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- { sessionPosts.map( ( post ) =>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ { posts.map( ( post ) =>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div
</span><span class="cx" style="display: block; padding: 0 10px"> key={ post.slug }
</span><span class="cx" style="display: block; padding: 0 10px"> className={ classnames(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -160,7 +270,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> link={ post.link }
</span><span class="cx" style="display: block; padding: 0 10px"> />
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- { show_speaker && this.hasSpeaker( post ) &&
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ { show_speaker && this.constructor.hasSpeaker( post ) &&
</ins><span class="cx" style="display: block; padding: 0 10px"> <SessionSpeakers session={ post } />
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsblockcontrolsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: 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 2019-05-01 22:08:54 UTC (rev 8710)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-controls.js 2019-05-01 22:10:19 UTC (rev 8711)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,33 +7,29 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * WordPress dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> const { Button, Placeholder } = wp.components;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-const { __ } = wp.i18n;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const { __ } = wp.i18n;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { BlockControls, PlaceholderNoContent, PlaceholderSpecificMode } from '../shared/block-controls';
-import SessionsBlockContent from './block-content';
-import SessionsSelect from './sessions-select';
-import { LABEL } from './index';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { BlockControls, PlaceholderSpecificMode } from '../shared/block-controls';
+import SessionsBlockContent from './block-content';
+import SessionsSelect from './sessions-select';
+import { LABEL } from './index';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Component for displaying a UI within the block.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> class SessionsBlockControls extends BlockControls {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Render the internal block UI.
+ *
+ * @return {Element}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> render() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const { icon, attributes, setAttributes, sessionPosts } = this.props;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const { icon, attributes, setAttributes } = this.props;
</ins><span class="cx" style="display: block; padding: 0 10px"> const { mode } = attributes;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const hasPosts = Array.isArray( sessionPosts ) && sessionPosts.length;
-
- if ( mode && ! hasPosts ) {
- return (
- <PlaceholderNoContent
- icon={ icon }
- label={ LABEL }
- loading={ ! Array.isArray( sessionPosts ) }
- />
- );
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> let output;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> switch ( mode ) {
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionseditjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: 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 2019-05-01 22:08:54 UTC (rev 8710)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/edit.js 2019-05-01 22:10:19 UTC (rev 8711)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,65 +1,29 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * External dependencies
- */
-import { isUndefined, pickBy, split } from 'lodash';
-
-/**
</del><span class="cx" style="display: block; padding: 0 10px"> * WordPress dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-const apiFetch = wp.apiFetch;
-const { withSelect } = wp.data;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const { withSelect } = wp.data;
</ins><span class="cx" style="display: block; padding: 0 10px"> const { Component, Fragment } = wp.element;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-const { addQueryArgs } = wp.url;
</del><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import SessionsBlockControls from './block-controls';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import SessionsBlockControls from './block-controls';
</ins><span class="cx" style="display: block; padding: 0 10px"> import SessionsInspectorControls from './inspector-controls';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import GridToolbar from '../shared/grid-layout/toolbar';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import GridToolbar from '../shared/grid-layout/toolbar';
</ins><span class="cx" style="display: block; padding: 0 10px"> import { ICON } from './index';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { WC_BLOCKS_STORE } from '../blocks-store';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> const blockData = window.WordCampBlocks.sessions || {};
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-const MAX_POSTS = 100;
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-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,
-};
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Top-level component for the editing UI for the block.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> class SessionsEdit extends Component {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- constructor( props ) {
- super( props );
-
- this.fetchSessionDetails();
- }
-
- fetchSessionDetails() {
- 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 ),
- } );
-
- this.state = {
- allSessionPosts: allSessionPosts, // Promise
- allSessionTracks: allSessionTracks, // Promise
- allSessionCategories: allSessionCategories, // Promise
- }
- }
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Render the block's editing UI.
+ *
+ * @return {Element}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> render() {
</span><span class="cx" style="display: block; padding: 0 10px"> const { mode } = this.props.attributes;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -68,13 +32,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <SessionsBlockControls
</span><span class="cx" style="display: block; padding: 0 10px"> icon={ ICON }
</span><span class="cx" style="display: block; padding: 0 10px"> { ...this.props }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- { ...this.state }
</del><span class="cx" style="display: block; padding: 0 10px"> />
</span><span class="cx" style="display: block; padding: 0 10px"> { mode &&
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <Fragment>
- <SessionsInspectorControls { ...this.props } />
- <GridToolbar { ...this.props } />
- </Fragment>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <Fragment>
+ <SessionsInspectorControls { ...this.props } />
+ <GridToolbar { ...this.props } />
+ </Fragment>
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> </Fragment>
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -81,49 +44,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-const sessionsSelect = ( select, props ) => {
- const { mode, item_ids, sort } = props.attributes;
- const { getEntityRecords } = select( 'core' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const sessionsSelect = ( select ) => {
+ const { getEntities } = select( WC_BLOCKS_STORE );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const args = {
- per_page : MAX_POSTS, // -1 is not allowed for per_page.
- _embed : true,
- context : 'view',
- _wcpt_session_type : 'session',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const entities = {
+ wcb_session : getEntities( 'postType', 'wcb_session', { _embed: true } ),
+ wcb_track : getEntities( 'taxonomy', 'wcb_track' ),
+ wcb_session_category : getEntities( 'taxonomy', 'wcb_session_category' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 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 };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return {
+ blockData,
+ entities,
+ };
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> export const edit = withSelect( sessionsSelect )( SessionsEdit );
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: 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 2019-05-01 22:08:54 UTC (rev 8710)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/index.js 2019-05-01 22:10:19 UTC (rev 8711)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13,7 +13,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> export const ICON = 'list-view';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> const supports = {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'align': [ 'wide', 'full' ],
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ align: [ 'wide', 'full' ],
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> export const settings = {
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionsinspectorcontrolsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: 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 2019-05-01 22:08:54 UTC (rev 8710)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/inspector-controls.js 2019-05-01 22:10:19 UTC (rev 8711)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -9,10 +9,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import GridInspectorControl from '../shared/grid-layout/inspector-control';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import GridInspectorControl from '../shared/grid-layout/inspector-control';
</ins><span class="cx" style="display: block; padding: 0 10px"> import FeaturedImageInspectorControls from '../shared/featured-image/inspector-control';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Component for block controls that appear in the Inspector Panel.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> class SessionsInspectorControls extends Component {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Render the controls.
+ *
+ * @return {Element}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> render() {
</span><span class="cx" style="display: block; padding: 0 10px"> const { attributes, setAttributes, blockData } = this.props;
</span><span class="cx" style="display: block; padding: 0 10px"> const { show_speaker, content, show_meta, show_category, sort } = attributes;
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsessionssessionsselectjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: 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 2019-05-01 22:08:54 UTC (rev 8710)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/sessions-select.js 2019-05-01 22:10:19 UTC (rev 8711)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,137 +1,127 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * External dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { get, includes } from 'lodash';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { every, flatMap, includes } from 'lodash';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * WordPress dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-const { Dashicon } = wp.components;
</del><span class="cx" style="display: block; padding: 0 10px"> const { Component } = wp.element;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-const { __ } = wp.i18n;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const { __ } = wp.i18n;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import ItemSelect from '../shared/item-select';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import ItemSelect, { buildOptions, Option } from '../shared/item-select';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Component for selecting posts/terms for populating the block content.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> class SessionsSelect extends Component {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Run additional operations during component initialization.
+ *
+ * @param {Object} props
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> constructor( props ) {
</span><span class="cx" style="display: block; padding: 0 10px"> super( props );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- this.state = {
- wcb_session : [],
- wcb_track : [],
- wcb_session_category : [],
- loading : true,
- };
-
- this.buildSelectOptions = this.buildSelectOptions.bind( this );
- this.fetchSelectOptions( props );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ this.buildSelectOptions = this.buildSelectOptions.bind( this );
+ this.getCurrentSelectValue = this.getCurrentSelectValue.bind( this );
+ this.isLoading = this.isLoading.bind( this );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- fetchSelectOptions( props ) {
- const { allSessionPosts, allSessionTracks, allSessionCategories } = props;
- const promises = [];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Build or retrieve the options that will populate the Select dropdown.
+ *
+ * @return {Array}
+ */
+ buildSelectOptions() {
+ const { entities } = this.props;
+ const { wcb_session, wcb_track, wcb_session_category } = entities;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- promises.push( allSessionPosts.then(
- ( fetchedPosts ) => {
- const posts = fetchedPosts.map( ( post ) => {
- const image = get( post, '_embedded[\'wp:featuredmedia\'].media_details.sizes.thumbnail.source_url', '' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const optionGroups = [
+ {
+ entityType : 'post',
+ type : 'wcb_session',
+ label : __( 'Sessions', 'wordcamporg' ),
+ items : wcb_session,
+ },
+ {
+ entityType : 'term',
+ type : 'wcb_track',
+ label : __( 'Tracks', 'wordcamporg' ),
+ items : wcb_track,
+ },
+ {
+ entityType : 'term',
+ type : 'wcb_session_category',
+ label : __( 'Session Categories', 'wordcamporg' ),
+ items : wcb_session_category,
+ },
+ ];
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return {
- label : post.title.rendered.trim() || __( '(Untitled)', 'wordcamporg' ),
- value : post.id,
- type : 'wcb_session',
- image : image,
- };
- } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return buildOptions( optionGroups );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- this.setState( { wcb_session: posts } );
- }
- ).catch() );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Determine the currently selected options in the Select dropdown based on block attributes.
+ *
+ * @return {Array}
+ */
+ getCurrentSelectValue() {
+ const { attributes } = this.props;
+ const { mode, item_ids } = attributes;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- [ allSessionTracks, allSessionCategories ].forEach( ( promise ) => {
- promises.push( promise.then(
- ( fetchedTerms ) => {
- const terms = fetchedTerms.map( ( term ) => {
- return {
- label : term.name.trim() || __( '(Untitled)', 'wordcamporg' ),
- value : term.id,
- type : term.taxonomy,
- count : term.count || 0,
- };
- } );
-
- const [ firstTerm ] = terms;
- this.setState( { [ firstTerm.type ]: terms } );
- }
- ).catch() );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const options = flatMap( this.buildSelectOptions(), ( group ) => {
+ return group.options;
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- Promise.all( promises ).then( () => {
- this.setState( { loading: false } );
- } );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ let value = [];
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- buildSelectOptions( mode ) {
- const { getOwnPropertyDescriptors } = Object;
- const options = [];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( mode && item_ids.length ) {
+ value = options.filter( ( option ) => {
+ return mode === option.type && includes( item_ids, option.value );
+ } );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const labels = {
- wcb_session : __( 'Sessions', 'wordcamporg' ),
- wcb_track : __( 'Tracks', 'wordcamporg' ),
- wcb_session_category : __( 'Session Categories', 'wordcamporg' ),
- };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return value;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- for ( const type in getOwnPropertyDescriptors( this.state ) ) {
- if ( ( ! mode || type === mode ) && this.state[ type ].length ) {
- options.push( {
- label : labels[ type ],
- options : this.state[ type ],
- } );
- }
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Check if all of the entity groups have finished loading.
+ *
+ * @return {boolean}
+ */
+ isLoading() {
+ const { entities } = this.props;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return options;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return ! every( entities, ( value ) => {
+ return Array.isArray( value );
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Render an ItemSelect component with block-specific settings.
+ *
+ * @return {Element}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> render() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const { icon, label, attributes, setAttributes } = this.props;
- const { mode, item_ids } = attributes;
- const options = this.buildSelectOptions( mode );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const { icon, label, setAttributes } = this.props;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- let value = [];
-
- if ( mode && item_ids.length ) {
- const modeOptions = get( options, '[0].options', [] );
-
- value = modeOptions.filter( ( option ) => {
- return includes( item_ids, option.value );
- } );
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> return (
</span><span class="cx" style="display: block; padding: 0 10px"> <ItemSelect
</span><span class="cx" style="display: block; padding: 0 10px"> className="wordcamp-sessions-select"
</span><span class="cx" style="display: block; padding: 0 10px"> label={ label }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- value={ value }
- buildSelectOptions={ this.buildSelectOptions }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ value={ this.getCurrentSelectValue() }
</ins><span class="cx" style="display: block; padding: 0 10px"> onChange={ ( changed ) => setAttributes( changed ) }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- mode={ mode }
</del><span class="cx" style="display: block; padding: 0 10px"> selectProps={ {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- isLoading : this.state.loading,
- formatGroupLabel : ( groupData ) => {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ options : this.buildSelectOptions(),
+ isLoading : this.isLoading(),
+ formatOptionLabel : ( optionData ) => {
</ins><span class="cx" style="display: block; padding: 0 10px"> return (
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span className="wordcamp-item-select-option-group-label">
- { groupData.label }
- </span>
- );
- },
- formatOptionLabel: ( optionData ) => {
- return (
- <SessionsOption
- icon={ icon }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <Option
+ icon={ includes( [ 'wcb_track', 'wcb_session_category' ], optionData.type ) ? icon : null }
</ins><span class="cx" style="display: block; padding: 0 10px"> { ...optionData }
</span><span class="cx" style="display: block; padding: 0 10px"> />
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -142,67 +132,4 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function SessionsOption( { type, icon, 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={ icon }
- 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={ icon }
- 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>
- );
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> export default SessionsSelect;
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksincludessessionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: 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 2019-05-01 22:08:54 UTC (rev 8710)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/includes/sessions.php 2019-05-01 22:10:19 UTC (rev 8711)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -111,6 +111,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'attribute'
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> [
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'align' => get_shared_definition( 'align_block', 'attribute' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'className' => get_shared_definition( 'string_empty', 'attribute' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'featured_image_width' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'integer',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -216,6 +217,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @return array
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function get_session_posts( array $attributes ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( empty( $attributes['mode'] ) ) {
+ return [];
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $post_args = [
</span><span class="cx" style="display: block; padding: 0 10px"> 'post_type' => 'wcb_session',
</span><span class="cx" style="display: block; padding: 0 10px"> 'post_status' => 'publish',
</span></span></pre>
</div>
</div>
</body>
</html>