<!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>[8710] sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks: WordCamp Blocks: Refactor Organizers 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/8710">8710</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/8710","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:08:54 +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 Organizers 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_htmlwpcontentmupluginsblocksassetssrcorganizersblockcontentjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/block-content.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizersblockcontrolsjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/block-controls.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizerseditjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/edit.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizersindexjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/index.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizersinspectorcontrolsjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/inspector-controls.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizersorganizersselectjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/organizers-select.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizerstoolbarjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/toolbar.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksincludesorganizersphp">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/includes/organizers.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizersblockcontentjs"></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/organizers/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/organizers/block-content.js 2019-05-01 21:58:20 UTC (rev 8709)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/block-content.js 2019-05-01 22:08:54 UTC (rev 8710)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,26 +7,81 @@
</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><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 { AvatarImage } from '../shared/avatar';
-import {ItemTitle, ItemHTMLContent, ItemPermalink} from '../shared/block-content';
-import GridContentLayout from '../shared/grid-layout/block-content';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { AvatarImage } from '../shared/avatar';
+import { BlockNoContent, ItemTitle, ItemHTMLContent } from '../shared/block-content';
+import GridContentLayout from '../shared/grid-layout/block-content';
+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 displaying the block content.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> class OrganizersBlockContent 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
+ */
+ constructor( props ) {
+ super( props );
+
+ this.getFilteredPosts = this.getFilteredPosts.bind( this );
+ }
+
+ /**
+ * Filter and sort the content that will be rendered.
+ *
+ * @returns {Array}
+ */
+ getFilteredPosts() {
+ const { attributes, entities } = this.props;
+ const { wcb_organizer: posts } = entities;
+ const { mode, item_ids, sort } = attributes;
+
+ const args = {};
+
+ if ( Array.isArray( item_ids ) && item_ids.length > 0 ) {
+ args.filter = [
+ {
+ fieldName : mode === 'wcb_organizer' ? 'id' : 'organizer_team',
+ fieldValue : item_ids,
+ },
+ ];
+ }
+
+ args.sort = sort;
+
+ return filterEntities( posts, args );
+ }
+
+ /**
+ * 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, organizerPosts } = 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_avatars, avatar_size, avatar_align, content } = 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-organizers-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">- { organizerPosts.map( ( post ) => /* Note that organizer posts are not 'public', so there are no permalinks. */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ { posts.map( ( post ) => /* Note that organizer posts are not 'public', so there are no permalinks. */
</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">@@ -55,7 +110,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> content={ 'full' === content ? post.content.rendered.trim() : post.excerpt.rendered.trim() }
</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">- </div>,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> ) }
</span><span class="cx" style="display: block; padding: 0 10px"> </GridContentLayout>
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizersblockcontrolsjs"></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/organizers/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/organizers/block-controls.js 2019-05-01 21:58:20 UTC (rev 8709)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/block-controls.js 2019-05-01 22:08:54 UTC (rev 8710)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12,28 +12,24 @@
</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 OrganizersBlockContent from './block-content';
-import OrganizersSelect from './organizers-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 OrganizersBlockContent from './block-content';
+import OrganizersSelect from './organizers-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 OrganizersBlockControls 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, organizerPosts } = this.props;
- const { mode } = attributes;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const { icon, attributes, setAttributes } = this.props;
+ const { mode } = 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">- const hasPosts = Array.isArray( organizerPosts ) && organizerPosts.length;
-
- if ( mode && ! hasPosts ) {
- return (
- <PlaceholderNoContent
- icon={ icon }
- label={ LABEL }
- loading={ ! Array.isArray( organizerPosts ) }
- />
- );
- }
-
</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_htmlwpcontentmupluginsblocksassetssrcorganizerseditjs"></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/organizers/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/organizers/edit.js 2019-05-01 21:58:20 UTC (rev 8709)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/edit.js 2019-05-01 22:08:54 UTC (rev 8710)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,15 +1,8 @@
</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;
</del><span class="cx" style="display: block; padding: 0 10px"> const { withSelect } = wp.data;
</span><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="lines" style="display: block; padding: 0 10px; color: #888">@@ -18,49 +11,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> import OrganizersInspectorControls from './inspector-controls';
</span><span class="cx" style="display: block; padding: 0 10px"> import OrganizersToolbar from './toolbar';
</span><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.organizers || {};
</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,
-};
-
-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 OrganizersEdit extends Component {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- constructor( props ) {
- super( props );
-
- this.state = {
- allOrganizerPosts : null,
- allOrganizerTerms : null,
- };
-
- this.fetchOrganizerDetails();
- }
-
- fetchOrganizerDetails() {
- const allOrganizerPosts = apiFetch( {
- path: addQueryArgs( '/wp/v2/organizers', ALL_POSTS_QUERY ),
- } );
-
- const allOrganizerTerms = apiFetch( {
- path: addQueryArgs( '/wp/v2/organizer_team', ALL_TERMS_QUERY ),
- } );
-
- this.state = {
- allOrganizerPosts : allOrganizerPosts, // Promise
- allOrganizerTerms : allOrganizerTerms, // 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">@@ -69,7 +32,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <OrganizersBlockControls
</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">
</span><span class="cx" style="display: block; padding: 0 10px"> { '' !== mode &&
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -83,37 +45,17 @@
</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 organizerSelect = ( select, props ) => {
- const { mode, item_ids, sort } = props.attributes;
- const { getEntityRecords } = select( 'core' );
- const [ orderby, order ] = split( sort, '_', 2 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const organizerSelect = ( 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 = {
- orderby : orderby,
- order : order,
- per_page : MAX_POSTS, // -1 is not allowed for per_page.
- context : 'view',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const entities = {
+ wcb_organizer : getEntities( 'postType', 'wcb_organizer', { _embed: true } ),
+ wcb_organizer_team : getEntities( 'taxonomy', 'wcb_organizer_team' ),
</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 ( Array.isArray( item_ids ) ) {
- switch ( mode ) {
- case 'wcb_organizer':
- args.include = item_ids;
- break;
- case 'wcb_organizer_team':
- args.organizer_team = item_ids;
- break;
- }
- }
-
- const organizersQuery = pickBy(
- args,
- ( value ) => ! isUndefined( value )
- );
-
</del><span class="cx" style="display: block; padding: 0 10px"> return {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- blockData : blockData,
- organizerPosts : getEntityRecords( 'postType', 'wcb_organizer', organizersQuery ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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">
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizersindexjs"></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/organizers/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/organizers/index.js 2019-05-01 21:58:20 UTC (rev 8709)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/index.js 2019-05-01 22:08:54 UTC (rev 8710)
</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 = 'groups';
</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_htmlwpcontentmupluginsblocksassetssrcorganizersinspectorcontrolsjs"></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/organizers/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/organizers/inspector-controls.js 2019-05-01 21:58:20 UTC (rev 8709)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/inspector-controls.js 2019-05-01 22:08:54 UTC (rev 8710)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -33,11 +33,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> sort : {},
</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 block controls that appear in the Inspector Panel.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> class OrganizerInspectorControls 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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const { attributes, setAttributes, blockData } = this.props;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const { attributes, setAttributes, blockData } = this.props;
</ins><span class="cx" style="display: block; padding: 0 10px"> const { show_avatars, avatar_size, avatar_align, content, sort } = attributes;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const { schema = DEFAULT_SCHEMA, options = DEFAULT_OPTIONS } = blockData;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const { schema = DEFAULT_SCHEMA, options = DEFAULT_OPTIONS } = blockData;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return (
</span><span class="cx" style="display: block; padding: 0 10px"> <InspectorControls>
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizersorganizersselectjs"></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/organizers/organizers-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/organizers/organizers-select.js 2019-05-01 21:58:20 UTC (rev 8709)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/organizers-select.js 2019-05-01 22:08:54 UTC (rev 8710)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,12 +1,11 @@
</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><span class="cx" style="display: block; padding: 0 10px"> const { __ } = wp.i18n;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13,126 +12,111 @@
</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 { AvatarImage } from '../shared/avatar';
-import ItemSelect from '../shared/item-select';
-import { ICON } from './index';
</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 OrganizersSelect 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_organizer : [],
- wcb_organizer_team : [],
- 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 { allOrganizerPosts, allOrganizerTerms } = props;
</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_organizer, wcb_organizer_team } = 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">- const parsedPosts = allOrganizerPosts.then(
- ( fetchedPosts ) => {
- const posts = fetchedPosts.map( ( post ) => {
- return {
- label : post.title.rendered.trim() || __( '(Untitled)', 'wordcamporg' ),
- value : post.id,
- type : 'wcb_organizer',
- avatar : post.avatar_urls[ '24' ],
- };
- } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const optionGroups = [
+ {
+ entityType : 'post',
+ type : 'wcb_organizer',
+ label : __( 'Organizers', 'wordcamporg' ),
+ items : wcb_organizer,
+ },
+ {
+ entityType : 'term',
+ type : 'wcb_organizer_team',
+ label : __( 'Teams', 'wordcamporg' ),
+ items : wcb_organizer_team,
+ },
+ ];
</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_organizer: posts } );
- }
- );
</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">- const parsedTerms = allOrganizerTerms.then(
- ( fetchedTerms ) => {
- const terms = fetchedTerms.map( ( term ) => {
- return {
- label : term.name.trim() || __( '(Untitled)', 'wordcamporg' ),
- value : term.id,
- type : 'wcb_organizer_team',
- count : term.count,
- };
- } );
</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">- this.setState( { wcb_organizer_team: terms } );
- }
- );
-
- Promise.all( [ parsedPosts, parsedTerms ] ).then( () => {
- this.setState( { loading: false } );
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
</del><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">+ 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">- const labels = {
- wcb_organizer : __( 'Organizers', 'wordcamporg' ),
- wcb_organizer_team : __( 'Teams', 'wordcamporg' ),
- };
-
- for ( const type in getOwnPropertyDescriptors( this.state ) ) {
- if ( ! this.state[ type ].length ) {
- continue;
- }
-
- if ( mode && type !== mode ) {
- continue;
- }
-
- options.push( {
- label : labels[ type ],
- options : this.state[ type ],
</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><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">- return options;
</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><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- render() {
- const { 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">+ /**
+ * 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">- let value = [];
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( mode && item_ids.length ) {
- const modeOptions = get( options, '[0].options', [] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Render an ItemSelect component with block-specific settings.
+ *
+ * @return {Element}
+ */
+ render() {
+ const { 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">- 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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- className="wordcamp-organizer-select"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ className="wordcamp-organizers-select"
</ins><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>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <Option { ...optionData } />
</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">- formatOptionLabel: ( optionData ) => {
- return (
- <OrganizersOption { ...optionData } />
- );
- },
</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"> );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -139,53 +123,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 OrganizersOption( { type, label = '', avatar = '', count = 0 } ) {
- let image, content;
-
- switch ( type ) {
- case 'wcb_organizer' :
- image = (
- <AvatarImage
- className="wordcamp-item-select-option-avatar"
- name={ label }
- size={ 24 }
- url={ avatar }
- />
- );
- content = (
- <span className="wordcamp-item-select-option-label">
- { label }
- </span>
- );
- break;
-
- case 'wcb_organizer_team' :
- image = (
- <div className="wordcamp-item-select-option-icon-container">
- <Dashicon
- className="wordcamp-item-select-option-icon"
- icon={ ICON }
- size={ 16 }
- />
- </div>
- );
- content = (
- <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">
- { image }
- { content }
- </div>
- );
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> export default OrganizersSelect;
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcorganizerstoolbarjs"></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/organizers/toolbar.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/organizers/toolbar.js 2019-05-01 21:58:20 UTC (rev 8709)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/toolbar.js 2019-05-01 22:08:54 UTC (rev 8710)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5,7 +5,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> const { BlockControls } = wp.editor;
</span><span class="cx" style="display: block; padding: 0 10px"> const { Component } = wp.element;
</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 adding UI buttons to the top of the block.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> class OrganizersToolbar extends Component {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Render the toolbar.
+ *
+ * @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 { layout } = attributes;
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksincludesorganizersphp"></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/organizers.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/organizers.php 2019-05-01 21:58:20 UTC (rev 8709)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/includes/organizers.php 2019-05-01 22:08:54 UTC (rev 8710)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -90,6 +90,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_organizer_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_organizer',
</span><span class="cx" style="display: block; padding: 0 10px"> 'post_status' => 'publish',
</span></span></pre>
</div>
</div>
</body>
</html>