<!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>[8513] sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks: Blocks: Add Sponsor Block.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/8513">8513</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/8513","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>vedjain</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2019-03-25 09:45:49 +0000 (Mon, 25 Mar 2019)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Blocks: Add Sponsor Block.
See the discussion here https://make.wordpress.org/community/2018/10/24/wordcamp-block-organizers-and-sponsors/
props coreymckrill, iandunn, vedjain</pre>
<h3>Added Paths</h3>
<ul>
<li>sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/</li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsponsorsblockcontentjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/block-content.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsponsorsblockcontrolsjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/block-controls.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsponsorseditjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/edit.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsponsorsindexjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/index.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsponsorsinspectorcontrolsjs">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/inspector-controls.js</a></li>
<li><a href="#sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksincludessponsorsphp">sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/includes/sponsors.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsponsorsblockcontentjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/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/sponsors/block-content.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/block-content.js 2019-03-25 09:45:49 UTC (rev 8513)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,178 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * External dependencies.
+ */
+import { get, difference } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies.
+ */
+const { Component } = wp.element;
+
+/**
+ * Internal dependencies.
+ */
+import FeaturedImage from '../shared/featured-image';
+import GridContentLayout from '../shared/grid-layout/block-content';
+import { ItemTitle, ItemHTMLContent } from '../shared/block-content';
+
+/**
+ * Renders individual sponsor post inside editor.
+ *
+ * @param sponsorPost
+ * @param attributes
+ * @param onFeatureImageChange
+ * @returns {*}
+ * @constructor
+ */
+function SponsorDetail( { sponsorPost, attributes, onFeatureImageChange } ) {
+
+ const {
+ show_name, show_logo, show_desc
+ } = attributes;
+
+ const featuredImageSizes = get( sponsorPost, "_embedded.wp:featuredmedia[0].media_details.sizes", {} );
+
+ return (
+ <div className={ "wordcamp-sponsor-details"}>
+
+ { ( show_name || show_name === undefined ) &&
+ <ItemTitle
+ className='wordcamp-sponsor-title'
+ headingLevel={ 3 }
+ title={ sponsorPost.title.rendered.trim() }
+ link={ sponsorPost.link }
+ />
+ }
+ { ( show_logo || show_logo === undefined ) &&
+ <FeaturedImage
+ className={"wordcamp-sponsor-featured-image wordcamp-sponsor-logo"}
+ wpMediaDetails={featuredImageSizes}
+ alt={sponsorPost.title.rendered}
+ attributes={attributes}
+ />
+ }
+ { ( show_desc || show_desc === undefined ) &&
+ <ItemHTMLContent
+ className={ classnames( 'wordcamp-sponsor-content' ) }
+ content={ sponsorPost.content.rendered.trim() }
+ />
+ }
+ </div>
+ );
+}
+
+/**
+ * Component for rendering Sponsors post inside editor.
+ */
+class SponsorBlockContent extends Component {
+
+ constructor( props ) {
+ super();
+
+ this.state = {
+ selectedPosts: [],
+ sortBy: 'name_asc',
+ };
+ }
+ /**
+ * Call back for when featured image URL is changed for a post.
+ * We are storing the URL object as JSON stringified value because I was
+ * not able to get object type to work properly. Maybe its not supported in
+ * Gutenberg yet.
+ *
+ * @param sponsorId
+ * @param imageURL
+ */
+ setFeaturedImageURL( sponsorId, imageURL) {
+ const sponsor_image_urls = this.sponsorImageUrl || {};
+ sponsor_image_urls[ sponsorId ] = imageURL;
+ this.sponsorImageUrl = sponsor_image_urls;
+
+ const { setAttributes } = this.props;
+ const sponsor_image_urls_latest = this.sponsorImageUrl;
+ setAttributes( { sponsor_image_urls: encodeURIComponent( JSON.stringify( sponsor_image_urls_latest ) ) } );
+ }
+
+ componentWillReceiveProps( nextProps ) {
+ // Sort the sponsor posts. Since this could potentially be expensive, lets do it in componentWillReceiveProps hook and set state with result if anything is changed.
+ const { selectedPosts: newSelectedPosts, attributes: newAttributes, sponsorTermOrder: newSponsorTermOrder } = nextProps;
+ const { sort_by: newSortBy } = newAttributes;
+ const newSelectedPostIds = newSelectedPosts.map( post => post.id ).sort();
+
+ const { selectedPosts, sortBy } = this.state;
+ const selectedPostsIds = selectedPosts.map( post => post.id ).sort();
+
+ if ( sortBy === newSortBy && newSelectedPosts.length === selectedPosts.length && difference( selectedPostsIds, newSelectedPostIds ).length === 0 ) {
+ // Everything is same. No need to calculate sorting. Lets bail.
+ return;
+ }
+
+ let sortedPosts;
+
+ switch ( newSortBy ) {
+ case 'sponsor_level' :
+ if ( ! Array.isArray( newSponsorTermOrder ) ||
+ newSponsorTermOrder.length === 0 ) {
+ break;
+ }
+ sortedPosts = newSelectedPosts.sort( ( sponsor1, sponsor2 ) => {
+ return newSponsorTermOrder.indexOf( ( sponsor1.sponsor_level || [] )[0] ) - newSponsorTermOrder.indexOf( ( sponsor2.sponsor_level || [] )[0] )
+ } );
+ break;
+
+ case 'name_desc' :
+ sortedPosts = newSelectedPosts.sort( ( sponsor1, sponsor2 ) => {
+ const title1 = sponsor1.title.rendered.trim();
+ const title2 = sponsor2.title.rendered.trim();
+ return title1 > title2 ? -1 : 1 ;
+ } );
+ break;
+
+ case 'name_asc' :
+ default:
+ sortedPosts = newSelectedPosts.sort( ( sponsor1, sponsor2 ) => {
+ const title1 = sponsor1.title.rendered.trim();
+ const title2 = sponsor2.title.rendered.trim();
+ return title1 < title2 ? -1 : 1 ;
+ } );
+ break;
+ }
+ this.setState(
+ {
+ selectedPosts: sortedPosts,
+ sortBy: newSortBy,
+ }
+ );
+ }
+
+ /**
+ * Renders Sponsor Block content inside editor.
+ *
+ * @returns {*}
+ */
+ render() {
+ const { attributes } = this.props;
+ const { selectedPosts } = this.state;
+
+ return (
+ <GridContentLayout
+ { ...this.props }
+ >
+ {
+ selectedPosts.map( ( post ) => {
+ return (
+ <SponsorDetail
+ sponsorPost={ post }
+ attributes={ attributes }
+ />
+ )
+ } )
+ }
+ </GridContentLayout>
+ )
+ }
+
+}
+
+export default SponsorBlockContent;
</ins></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsponsorsblockcontrolsjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/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/sponsors/block-controls.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/block-controls.js 2019-03-25 09:45:49 UTC (rev 8513)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,345 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { get, includes, intersection } from 'lodash';
+
+/**
+ * WordPress dependencies.
+ */
+const { decodeEntities } = wp.htmlEntities;
+const { __ } = wp.i18n;
+
+/**
+ * Internal dependencies.
+ */
+import { BlockControls, PlaceholderNoContent } from "../shared/block-controls";
+import SponsorBlockContent from './block-content';
+import ItemSelect from '../shared/item-select'
+const { Button, Placeholder } = wp.components;
+
+const LABEL = __( 'Sponsors', 'wordcamporg' );
+
+function SponsorOption( option ) {
+ if ( 'post' === option.type ) {
+ return SponsorPostOption( option );
+ } else {
+ return SponsorLevelOption( option );
+ }
+}
+
+function SponsorPostOption( sponsor ) {
+ const imageUrl = get( sponsor.featuredImageData, 'sizes.thumbnail.source_url', false );
+ return(
+ <span>
+ {
+ imageUrl &&
+ <img
+ width={24}
+ height={24}
+ src={ imageUrl }
+ alt={ sponsor.label }
+ />
+ }
+ { sponsor.label }
+ </span>
+ );
+}
+
+function SponsorLevelOption( sponsorLevel ) {
+ return(
+ <span className="wordcamp-item-select-option-label">
+ { sponsorLevel.label }
+ <span className="wordcamp-item-select-option-label-term-count">
+ { sponsorLevel.count }
+ </span>
+ </span>
+ );
+}
+
+/**
+ * Implements sponsor block controls.
+ */
+class SponsorBlockControls extends BlockControls {
+
+ constructor( props ) {
+ super(props);
+ this.state = {
+ posts : [],
+ terms : [],
+ loading : true,
+ selectedPosts : [],
+ sponsorTermOrder : []
+ };
+ }
+
+ /**
+ * Set selectedPosts in state so that SponsorsContentBlock can use them.
+ */
+ setSelectedPosts() {
+ const { fetchedPosts, sponsorTermOrder } = this.state;
+ const { attributes } = this.props;
+ const { post_ids, term_ids, mode } = attributes;
+
+ if ( ! fetchedPosts || ! fetchedPosts.length ) {
+ return;
+ }
+
+ const selectedPosts = [];
+ for ( const post of fetchedPosts ) {
+ if ( ! post.hasOwnProperty( 'id' ) ) {
+ continue;
+ }
+ switch ( mode ) {
+ case 'all':
+ selectedPosts.push( post );
+ break;
+ case 'specific_posts':
+ if ( -1 !== post_ids.indexOf( post.id ) ) {
+ selectedPosts.push( post );
+ }
+ break;
+ case 'specific_terms':
+ if ( intersection( term_ids, post.sponsor_level || [] ) .length ) {
+ selectedPosts.push( post );
+ }
+ break;
+ default :
+ break;
+ }
+ }
+ this.setState( { selectedPosts } );
+ }
+
+ /**
+ * Initialize posts and terms arrays and sets loading state till promises
+ * are not resolved. We will also set posts and terms in array that we want to display.
+ */
+ componentWillMount() {
+ this.isStillMounted = true;
+
+ const { sponsorPosts, sponsorLevels, siteSettings } = this.props;
+
+ const parsedPosts = sponsorPosts.then(
+ ( fetchedPosts ) => {
+
+ const posts = fetchedPosts.map(
+ ( post ) => {
+
+ return {
+ label: decodeEntities(post.title.rendered.trim()) ||
+ __('(Untitled)', 'wordcamporg'),
+ value: post.id,
+ type: 'post',
+ featuredImageData: get( post,
+ '_embedded.wp:featuredmedia[0].media_details', '' ),
+ }
+ }
+ );
+ if ( this.isStillMounted ) {
+ this.setState( { fetchedPosts } );
+ this.setState( { posts } );
+ }
+ }
+ ).catch( (e) => {
+ console.error("Error fetching data", e );
+ });
+
+ const parsedTerms = sponsorLevels.then(
+ ( fetchedTerms ) => {
+ const terms = fetchedTerms.map( ( term ) => {
+ return {
+ label : decodeEntities( term.name ) || __( '(Untitled)', 'wordcamporg' ),
+ value : term.id,
+ type : 'term',
+ count : term.count,
+ };
+ } );
+
+ if ( this.isStillMounted ) {
+ this.setState( { fetchedTerms } );
+ this.setState( { terms } );
+ }
+ }
+ ).catch( (e) => {
+ console.error("Error fetching data", e );
+ });
+
+ const parsedSettings = siteSettings.then(
+ ( fetchedSettings ) => {
+ const sponsorTermOrder = fetchedSettings.wcb_sponsor_level_order;
+ this.setState( { sponsorTermOrder } );
+ }
+ );
+
+ Promise.all( [ parsedPosts, parsedTerms, parsedSettings ] ).then( () => {
+ this.setState( { loading: false } );
+ // Enqueue set selected posts in next event loop, so that state is up to date when `setSelectedPosts` method actually runs.
+ setTimeout( () => this.setSelectedPosts() );
+ } );
+ }
+
+ componentWillUnmount() {
+ this.isStillMounted = false;
+ }
+
+ /**
+ * Sets `mode`, `term_ids` and `post_ids` attribute when `Apply` button is
+ * clicked. Pass `onChange` prop to override.
+ *
+ * @param selectedOptions Array of values, type of selected options
+ */
+ onChange( selectedOptions = {} ) {
+ const { setAttributes } = this.props;
+ const newValue = selectedOptions.item_ids;
+ const chosen = selectedOptions.mode;
+
+ if ( newValue && chosen ) {
+
+ switch ( chosen ) {
+ case 'post' :
+ setAttributes( {
+ mode : 'specific_posts',
+ post_ids : newValue,
+ } );
+ break;
+
+ case 'term' :
+ setAttributes( {
+ mode : 'specific_terms',
+ term_ids : newValue,
+ } );
+ break;
+ }
+ } else {
+ setAttributes( {
+ mode : '',
+ post_ids : [],
+ term_ids : [],
+ } );
+ }
+
+ setTimeout( () => this.setSelectedPosts() );
+ }
+
+ /**
+ * Generate options array to be passed to select2.
+ */
+ buildSelectOptions() {
+ const { posts, terms } = this.state;
+ const options = [];
+
+ options.push( {
+ label : __( 'Sponsor Levels', 'wordcamporg' ),
+ options : terms,
+ } );
+
+ options.push( {
+ label : __( 'Sponsors', 'wordcamporg' ),
+ options : posts,
+ } );
+
+ return options;
+ }
+
+ /**
+ * Renders Sponsor Block Control view
+ */
+ render() {
+ const { sponsorPosts, attributes, setAttributes } = this.props;
+ const { mode, post_ids, term_ids } = attributes;
+ const { fetchedPosts, posts, terms, selectedPosts, sponsorTermOrder } = this.state;
+ const hasPosts = Array.isArray( fetchedPosts ) && fetchedPosts.length;
+
+ // Check if posts are still loading.
+ if ( mode && ! hasPosts ) {
+ return (
+ <PlaceholderNoContent
+ label = { LABEL }
+ loading = { () => {
+ return ! Array.isArray( sponsorPosts );
+ } }
+ />
+ )
+ }
+
+ let selectedOptions = [];
+
+ switch ( mode ) {
+ case 'all' :
+ break;
+ case 'specific_posts' :
+ selectedOptions = posts.filter( ( post ) => {
+ return includes( post_ids, post.value );
+ } );
+ break;
+ case 'specific_terms' :
+ selectedOptions = terms.filter( ( term ) => {
+ return includes( term_ids, term.value );
+ } );
+ break;
+ default:
+ break;
+ }
+
+ return (
+ <div>
+
+ <SponsorBlockContent
+ selectedPosts={ selectedPosts }
+ sponsorTermOrder = { sponsorTermOrder }
+ {...this.props}
+ />
+
+ {'all' !== mode &&
+ <Placeholder
+ icon='heart'
+ label = { __('Sponsors', 'wordcamporg') }
+ >
+ <div className='' >
+ <Button
+ isDefault
+ isLarge
+ onClick = {
+ () => {
+ setAttributes( { mode: 'all' } );
+ setTimeout( () => this.setSelectedPosts() );
+ }
+ }
+ >
+ { __('List all sponsors', 'wordcamporg') }
+ </Button>
+ </div>
+ <div className="wordcamp-block-edit-mode-option">
+ <ItemSelect
+ buildSelectOptions={
+ () => {
+ return this.buildSelectOptions()
+ }
+ }
+ isLoading={this.state.loading}
+ onChange={
+ (selectedOptions) => {
+ return this.onChange(selectedOptions);
+ }
+ }
+ selectProps={
+ {
+ formatOptionLabel: (optionData) => {
+ return (
+ <SponsorOption {...optionData} />
+ );
+ }
+ }
+ }
+ label={__('Or, choose specific sponsors or levels',
+ 'wordcamporg')}
+ value={ selectedOptions }
+ {...this.props}
+ />
+ </div>
+ </Placeholder>
+ }
+ </div>
+ );
+ }
+
+}
+
+export default SponsorBlockControls;
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsponsorseditjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/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/sponsors/edit.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/edit.js 2019-03-25 09:45:49 UTC (rev 8513)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,90 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Displays sponsor block.
+ */
+import SponsorInspectorControls from './inspector-controls';
+import SponsorBlockControls from './block-controls';
+import GridToolbar from '../shared/grid-layout/toolbar';
+
+/**
+ WordPress dependencies.
+ **/
+const { withSelect } = wp.data;
+const { Component, Fragment } = wp.element;
+const apiFetch = wp.apiFetch;
+const { addQueryArgs } = wp.url;
+
+const MAX_PAGE = 100;
+
+class SponsorsEdit extends Component {
+
+ /**
+ * Constructor for SponsorsEdit block.
+ *
+ * @param props
+ */
+ constructor( props ) {
+ super();
+
+ this.state = {};
+ }
+
+ componentWillMount() {
+ const sponsorQuery = {
+ orderby : 'title',
+ order : 'asc',
+ per_page: MAX_PAGE,
+ _embed : true,
+ };
+
+ const sponsorLevelQuery = {
+ orderby : 'id',
+ order: 'asc',
+ per_page: MAX_PAGE,
+ _embed: true
+ };
+
+ this.setState(
+ {
+ sponsorPosts: apiFetch( { path: addQueryArgs( '/wp/v2/sponsors', sponsorQuery ) } ),
+ sponsorLevels: apiFetch( { path: addQueryArgs( '/wp/v2/sponsor_level', sponsorLevelQuery ) } ),
+ siteSettings: apiFetch( { path: addQueryArgs( '/wp/v2/settings', {} ) } ),
+ }
+ );
+ }
+
+ /**
+ * Renders SponsorEdit component.
+ */
+ render() {
+ const { sponsorPosts, sponsorLevels, siteSettings } = this.state;
+ const { attributes } = this.props;
+ const { mode } = attributes;
+
+ return (
+ <Fragment>
+ {
+ <SponsorBlockControls
+ sponsorPosts = { sponsorPosts }
+ sponsorLevels = { sponsorLevels }
+ siteSettings = { siteSettings }
+ { ...this.props }
+ />
+ }
+ <Fragment>
+ <SponsorInspectorControls
+ sponsorPosts = { sponsorPosts }
+ sponsorLevels = { sponsorLevels }
+ {...this.props}
+ />
+ {mode &&
+ <GridToolbar
+ {...this.props}
+ />
+ }
+ </Fragment>
+ </Fragment>
+ )
+ }
+}
+
+export const edit = SponsorsEdit;
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsponsorsindexjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/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/sponsors/index.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/index.js 2019-03-25 09:45:49 UTC (rev 8513)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,22 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+/**
+ * Internal dependencies.
+ */
+import { edit } from './edit.js';
+
+export const name = 'wordcamp/sponsors';
+
+export const settings = {
+ title : __( 'Sponsors', 'wordcamporg' ),
+ description : __( "We wouldn't have WordCamp without their support.", 'wordcamporg' ),
+ icon : 'heart',
+ category : 'wordcamp',
+ edit,
+ save : function() {
+ return null;
+ },
+};
</ins></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksassetssrcsponsorsinspectorcontrolsjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/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/sponsors/inspector-controls.js (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/inspector-controls.js 2019-03-25 09:45:49 UTC (rev 8513)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,90 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies.
+ */
+const { Component } = wp.element;
+const { InspectorControls } = wp.editor;
+const { PanelBody, PanelRow, ToggleControl, SelectControl } = wp.components;
+const { __ } = wp.i18n;
+
+/**
+ * Internal dependencies
+ */
+import GridInspectorControl from '../shared/grid-layout/inspector-control';
+import FeaturedImageInspectorControls from '../shared/featured-image/inspector-control';
+
+/**
+ * Class for defining Inspector control in sponsor block.
+ */
+class SponsorInspectorControls extends Component {
+
+ /**
+ * Renders inspector controls.
+ */
+ render() {
+
+ const sortOptions = [
+ { label : __( 'Name (A to Z)', 'wordcamporg' ), value : 'name_asc' },
+ { label : __( 'Name (Z to A)', 'wordcamporg' ), value : 'name_desc' },
+ { label : __( 'Sponsor Level', 'wordcamporg' ), value : 'sponsor_level' },
+ ];
+
+ const { attributes, setAttributes } = this.props;
+ const {
+ show_name, show_logo, show_desc, sort_by
+ } = attributes;
+
+ return (
+ <InspectorControls>
+ <GridInspectorControl
+ { ...this.props }
+ />
+ <PanelBody
+ title = { __( 'Content Settings', 'wordcamporg' ) }
+ initialOpen = { true }
+ >
+ <PanelRow>
+ <ToggleControl
+ label = { __( 'Name', 'wordcamporg' ) }
+ help = { __( 'Show or hide sponsor name', 'wordcamporg' ) }
+ checked = { show_name === undefined ? true : show_name }
+ onChange={ ( value ) => setAttributes( { show_name: value } ) }
+ />
+ </PanelRow>
+ <PanelRow>
+ <ToggleControl
+ label = { __( 'Logo', 'wordcamporg' ) }
+ help = { __( 'Show or hide sponsor logo', 'wordcamporg' ) }
+ checked = { show_logo === undefined ? true : show_logo }
+ onChange={ ( value ) => setAttributes( { show_logo: value } ) }
+ />
+ </PanelRow>
+ <PanelRow>
+ <ToggleControl
+ label = { __( 'Description', 'wordcamporg' ) }
+ help = { __( 'Show or hide sponsor description', 'wordcamporg' ) }
+ checked = { show_desc === undefined ? true : show_desc }
+ onChange={ ( value ) => setAttributes( { show_desc: value } ) }
+ />
+ </PanelRow>
+ <PanelRow>
+ <SelectControl
+ label = { __( 'Sort by', 'wordcamporg' ) }
+ options = { sortOptions }
+ value = { sort_by || 'name_asc' }
+ onChange={ ( value ) => setAttributes( { sort_by: value } ) }
+ help = { __( 'Select whether to sort by name or sponsor level. Order of sponsor level can be configure by going to Sponsor -> Order Sponsor Levels admin menu.') }
+ />
+ </PanelRow>
+ </PanelBody>
+ <FeaturedImageInspectorControls
+ title = { __( 'Logo size', 'wordcamporg' ) }
+ help = { __( 'Specify logo width, or select a predefined size.', 'wordcamporg' ) }
+ selectLabel = { __( 'Size', 'wordcamporg') }
+ { ...this.props }
+ />
+ </InspectorControls>
+ )
+ }
+}
+
+export default SponsorInspectorControls;
</ins></span></pre></div>
<a id="sitestrunkwordcamporgpublic_htmlwpcontentmupluginsblocksincludessponsorsphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/includes/sponsors.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/sponsors.php (rev 0)
+++ sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/includes/sponsors.php 2019-03-25 09:45:49 UTC (rev 8513)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,213 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+
+namespace WordCamp\Blocks\Sponsors;
+use WordCamp\Blocks;
+use function WordCamp\Blocks\Shared\Components\{ render_grid_layout };
+
+defined( 'WPINC' ) || die();
+
+/**
+ * Register sponsor block and enqueue scripts.
+ */
+function init() {
+ register_block_type(
+ 'wordcamp/sponsors',
+ [
+ 'attributes' => get_attributes_schema(),
+ 'editor_script' => 'wordcamp-blocks',
+ 'editor_style' => 'wordcamp-blocks',
+ 'style' => 'wordcamp-blocks',
+ 'render_callback' => __NAMESPACE__ . '\render',
+ ]
+ );
+}
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Renders content of Sponsor block based on attributes.
+ *
+ * @param $attributes
+ *
+ * @return false|string
+ */
+function render( $attributes ) {
+ $sponsors = get_sponsor_posts( $attributes );
+
+ $container_classes = array(
+ 'wordcamp-sponsors-block',
+ 'wordcamp-sponsors-list',
+ );
+
+ $rendered_sponsor_posts = array();
+
+ foreach ( $sponsors as $sponsor ) {
+ ob_start();
+ require Blocks\PLUGIN_DIR . 'view/sponsors.php';
+ $rendered_sponsor_posts[] = ob_get_clean();
+ }
+
+ $html = render_grid_layout( $attributes['layout'], $attributes['grid_columns'], $rendered_sponsor_posts, $container_classes );
+ return $html;
+}
+
+/**
+ * Return sponsor posts what will rendered based on attributes.
+ *
+ * @param $attributes
+ *
+ * @return array
+ */
+function get_sponsor_posts( $attributes ) {
+ if ( empty( $attributes[ 'mode' ] ) ) {
+ return array();
+ }
+
+ $post_args = array(
+ 'post_type' => 'wcb_sponsor',
+ 'post_status' => 'publish',
+ 'posts_per_page' => - 1,
+ );
+
+ switch ( $attributes[ 'mode' ] ) {
+ case 'specific_posts':
+ $post_args['post__in'] = $attributes['post_ids'];
+ break;
+ case 'specific_terms':
+ $post_args['tax_query'] = [
+ [
+ 'taxonomy' => 'wcb_sponsor_level',
+ 'field' => 'id',
+ 'terms' => $attributes['term_ids'],
+ ],
+ ];
+ break;
+ }
+
+ switch ( $attributes[ 'sort_by' ] ) {
+ case 'name_asc':
+ $post_args['orderby'] = 'title';
+ $post_args['order'] = 'asc';
+ break;
+ case 'name_desc' :
+ $post_args['orderby'] = 'title';
+ $post_args['order'] = 'desc';
+ break;
+ // We will deal with case `sponsor_level` later.
+ }
+
+ $posts = get_posts( $post_args );
+
+ if ( 'sponsor_level' === $attributes[ 'sort_by' ] ) {
+ usort( $posts, sponsor_level_sort( $posts ) );
+ }
+
+ return $posts;
+}
+
+/**
+ * Helper function for sorting based on sponsor levels.
+ *
+ * @param array $posts Sponsor posts to sort.
+ *
+ * @return
+ */
+function sponsor_level_sort( $posts ) {
+ $sponsor_level_order = get_option( 'wcb_sponsor_level_order' );
+ $sponsor_terms_cache = array();
+
+ //Build the terms cache.
+ foreach ( $posts as $post ) {
+ $sponsor_level_terms = get_the_terms( $post->ID, 'wcb_sponsor_level' );
+ if ( is_array( $sponsor_level_terms ) ) {
+ $sponsor_terms_cache[ $post->ID ] = wp_list_pluck( $sponsor_level_terms, 'term_id' )[0];
+ } else {
+ $sponsor_terms_cache[ $post->ID ] = array();
+ }
+ }
+
+ return function ( $sponsor1, $sponsor2 ) use ( $sponsor_level_order, $sponsor_terms_cache ) {
+ $index1 = array_search( $sponsor_terms_cache[ $sponsor1->ID ], $sponsor_level_order );
+ $index2 = array_search( $sponsor_terms_cache[ $sponsor2->ID ], $sponsor_level_order );
+
+ if ( false === $index1 && false === $index2 ) {
+ return 0;
+ }
+
+ if ( false === $index1 ) {
+ return 1;
+ }
+
+ if ( false === $index2 ) {
+ return -1;
+ }
+
+ return $index1 - $index2;
+ };
+}
+
+/**
+ * Get attribute schema for Sponsor block
+ *
+ * @return array
+ */
+function get_attributes_schema() {
+ return array(
+ 'mode' => array(
+ 'type' => 'string',
+ ),
+ 'post_ids' => array(
+ 'type' => 'array',
+ 'default' => array(),
+ 'items' => array(
+ 'type' => 'integer',
+ ),
+ ),
+ 'term_ids' => array(
+ 'type' => 'array',
+ 'default' => array(),
+ 'items' => array(
+ 'type' => 'integer',
+ ),
+ ),
+ 'sponsor_image_urls' => array(
+ 'type' => 'string',
+ 'default' => '{}',
+ ),
+ 'show_name' => array(
+ 'type' => 'bool',
+ 'default' => true,
+ ),
+ 'show_logo' => array(
+ 'type' => 'bool',
+ 'default' => true,
+ ),
+ 'show_desc' => array(
+ 'type' => 'bool',
+ 'default' => true,
+ ),
+ 'grid_columns' => array(
+ 'type' => 'integer',
+ 'minimum' => 1,
+ 'maximum' => 4,
+ 'default' => 1
+ ),
+ 'layout' => [
+ 'type' => 'string',
+ 'enum' => array( 'list', 'grid' ),
+ 'default' => 'list',
+ ],
+ 'featured_image_height' => array(
+ 'type' => 'integer',
+ 'default' => 150
+ ),
+ 'featured_image_width' => array(
+ 'type' => 'integer',
+ 'default' => 150
+ ),
+ 'sort_by' => array(
+ 'type' => 'string',
+ 'default' => 'name_asc',
+ ),
+ );
+}
</ins></span></pre>
</div>
</div>
</body>
</html>