<!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>[BuddyPress][12684] trunk/src: BP Blocks: Include private Groups into the BP Group Autocompleter</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://buddypress.trac.wordpress.org/changeset/12684">12684</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://buddypress.trac.wordpress.org/changeset/12684","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>imath</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2020-07-07 09:57:23 +0000 (Tue, 07 Jul 2020)</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'>BP Blocks: Include private Groups into the BP Group Autocompleter
So far the BP Group block was only listed public group. Thanks to some improvements about the BP Autocompleter React component, we are now also including private groups.
This commit also includes some other improvements:
- Prepare BP Blocks for the Block Editor's style changes to be introduced into WordPress 5.5.
- Improve the BP Autocompleter React component so that it's more useful. We can now use it to send specific query arguments to the BP component's endpoint and use callback function to return the Component's item slug.
- Improve both blocks (Group and member) so that they use this slug callback function to respectively display the Group status and the Member's mention name.
Props iamthewebb
Fixes <a href="http://buddypress.trac.wordpress.org/ticket/8272">#8272</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcbpcorebpcoreblocksphp">trunk/src/bp-core/bp-core-blocks.php</a></li>
<li><a href="#trunksrcbpcorejsblockcomponentsjs">trunk/src/bp-core/js/block-components.js</a></li>
<li><a href="#trunksrcbpgroupscssblocksgrouprtlcss">trunk/src/bp-groups/css/blocks/group-rtl.css</a></li>
<li><a href="#trunksrcbpgroupscssblocksgroupcss">trunk/src/bp-groups/css/blocks/group.css</a></li>
<li><a href="#trunksrcbpgroupsjsblocksgroupjs">trunk/src/bp-groups/js/blocks/group.js</a></li>
<li><a href="#trunksrcbpmemberscssblocksmemberrtlcss">trunk/src/bp-members/css/blocks/member-rtl.css</a></li>
<li><a href="#trunksrcbpmemberscssblocksmembercss">trunk/src/bp-members/css/blocks/member.css</a></li>
<li><a href="#trunksrcbpmembersjsblocksmemberjs">trunk/src/bp-members/js/blocks/member.js</a></li>
<li><a href="#trunksrcjsbpcorejsblockcomponentscomponentsautocompleterjs">trunk/src/js/bp-core/js/block-components/components/autocompleter.js</a></li>
<li><a href="#trunksrcjsbpgroupsjsblocksgroupjs">trunk/src/js/bp-groups/js/blocks/group.js</a></li>
<li><a href="#trunksrcjsbpmembersjsblocksmemberjs">trunk/src/js/bp-members/js/blocks/member.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcbpcorebpcoreblocksphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-core/bp-core-blocks.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-core/bp-core-blocks.php 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/bp-core/bp-core-blocks.php 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -36,6 +36,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'wp-components',
</span><span class="cx" style="display: block; padding: 0 10px"> 'wp-i18n',
</span><span class="cx" style="display: block; padding: 0 10px"> 'wp-api-fetch',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'wp-url',
</ins><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> bp_get_version()
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span></span></pre></div>
<a id="trunksrcbpcorejsblockcomponentsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-core/js/block-components.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-core/js/block-components.js 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/bp-core/js/block-components.js 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -260,6 +260,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var Popover = wp.components.Popover;
</span><span class="cx" style="display: block; padding: 0 10px"> var _wp = wp,
</span><span class="cx" style="display: block; padding: 0 10px"> apiFetch = _wp.apiFetch;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var addQueryArgs = wp.url.addQueryArgs;
</ins><span class="cx" style="display: block; padding: 0 10px"> var __ = wp.i18n.__;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> var AutoCompleter = /*#__PURE__*/function (_Component) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -290,7 +291,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var search = this.state.search;
</span><span class="cx" style="display: block; padding: 0 10px"> var _this$props = this.props,
</span><span class="cx" style="display: block; padding: 0 10px"> component = _this$props.component,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- objectStatus = _this$props.objectStatus;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ objectQueryArgs = _this$props.objectQueryArgs;
</ins><span class="cx" style="display: block; padding: 0 10px"> this.setState({
</span><span class="cx" style="display: block; padding: 0 10px"> search: value
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -302,17 +303,18 @@
</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"> var path = '/buddypress/v1/' + component;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var queryArgs = {};
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if (value) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- path += '?search=' + encodeURIComponent(value);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ queryArgs.search = encodeURIComponent(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">- if (objectStatus) {
- path += '&status=' + objectStatus;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if (objectQueryArgs) {
+ queryArgs = Object.assign(queryArgs, objectQueryArgs);
</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"> apiFetch({
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- path: path
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ path: addQueryArgs(path, queryArgs)
</ins><span class="cx" style="display: block; padding: 0 10px"> }).then(function (items) {
</span><span class="cx" style="display: block; padding: 0 10px"> _this2.setState({
</span><span class="cx" style="display: block; padding: 0 10px"> items: items
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -348,7 +350,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var _this$props2 = this.props,
</span><span class="cx" style="display: block; padding: 0 10px"> ariaLabel = _this$props2.ariaLabel,
</span><span class="cx" style="display: block; padding: 0 10px"> placeholder = _this$props2.placeholder,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- useAvatar = _this$props2.useAvatar;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ useAvatar = _this$props2.useAvatar,
+ slugValue = _this$props2.slugValue;
</ins><span class="cx" style="display: block; padding: 0 10px"> var itemsList;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if (!ariaLabel) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -378,10 +381,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }), createElement("span", {
</span><span class="cx" style="display: block; padding: 0 10px"> key: "name",
</span><span class="cx" style="display: block; padding: 0 10px"> className: "editor-autocompleters__user-name"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }, item.name), item.mention_name && createElement("span", {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, item.name), slugValue && null !== slugValue(item) && createElement("span", {
</ins><span class="cx" style="display: block; padding: 0 10px"> key: "slug",
</span><span class="cx" style="display: block; padding: 0 10px"> className: "editor-autocompleters__user-slug"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }, item.mention_name));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, slugValue(item)));
</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="trunksrcbpgroupscssblocksgrouprtlcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-groups/css/blocks/group-rtl.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-groups/css/blocks/group-rtl.css 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/bp-groups/css/blocks/group-rtl.css 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -116,3 +116,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+[data-type="bp/group"] input.components-placeholder__input {
+ flex: 1 1 auto;
+ border-radius: 2px;
+ border: 1px solid #757575;
+ padding: 6px 8px;
+}
</ins></span></pre></div>
<a id="trunksrcbpgroupscssblocksgroupcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-groups/css/blocks/group.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-groups/css/blocks/group.css 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/bp-groups/css/blocks/group.css 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -116,3 +116,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> float: right;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+[data-type="bp/group"] input.components-placeholder__input {
+ flex: 1 1 auto;
+ border-radius: 2px;
+ border: 1px solid #757575;
+ padding: 6px 8px;
+}
</ins></span></pre></div>
<a id="trunksrcbpgroupsjsblocksgroupjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-groups/js/blocks/group.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-groups/js/blocks/group.js 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/bp-groups/js/blocks/group.js 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -155,7 +155,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> label: __('Full', 'buddypress'),
</span><span class="cx" style="display: block; padding: 0 10px"> value: 'full'
</span><span class="cx" style="display: block; padding: 0 10px"> }];
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var GROUP_STATI = {
+ public: __('Public', 'buddypress'),
+ private: __('Private', 'buddypress'),
+ hidden: __('Hidden', 'buddypress')
+};
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var getSlugValue = function getSlugValue(item) {
+ if (item && item.status && GROUP_STATI[item.status]) {
+ return GROUP_STATI[item.status];
+ }
+
+ return null;
+};
+
</ins><span class="cx" style="display: block; padding: 0 10px"> var editGroup = function editGroup(_ref) {
</span><span class="cx" style="display: block; padding: 0 10px"> var attributes = _ref.attributes,
</span><span class="cx" style="display: block; padding: 0 10px"> setAttributes = _ref.setAttributes,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -174,7 +187,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> instructions: __('Start typing the name of the group you want to feature into this post.', 'buddypress')
</span><span class="cx" style="display: block; padding: 0 10px"> }, createElement(AutoCompleter, {
</span><span class="cx" style="display: block; padding: 0 10px"> component: "groups",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- objectStatus: "public",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ objectQueryArgs: {
+ 'show_hidden': false
+ },
+ slugValue: getSlugValue,
</ins><span class="cx" style="display: block; padding: 0 10px"> ariaLabel: __('Group\'s name', 'buddypress'),
</span><span class="cx" style="display: block; padding: 0 10px"> placeholder: __('Enter Group\'s name here…', 'buddypress'),
</span><span class="cx" style="display: block; padding: 0 10px"> onSelectItem: setAttributes,
</span></span></pre></div>
<a id="trunksrcbpmemberscssblocksmemberrtlcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-members/css/blocks/member-rtl.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-members/css/blocks/member-rtl.css 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/bp-members/css/blocks/member-rtl.css 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -108,3 +108,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 18px 0 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+[data-type="bp/member"] input.components-placeholder__input {
+ flex: 1 1 auto;
+ border-radius: 2px;
+ border: 1px solid #757575;
+ padding: 6px 8px;
+}
</ins></span></pre></div>
<a id="trunksrcbpmemberscssblocksmembercss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-members/css/blocks/member.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-members/css/blocks/member.css 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/bp-members/css/blocks/member.css 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -108,3 +108,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 18px 0 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+[data-type="bp/member"] input.components-placeholder__input {
+ flex: 1 1 auto;
+ border-radius: 2px;
+ border: 1px solid #757575;
+ padding: 6px 8px;
+}
</ins></span></pre></div>
<a id="trunksrcbpmembersjsblocksmemberjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-members/js/blocks/member.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-members/js/blocks/member.js 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/bp-members/js/blocks/member.js 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -156,6 +156,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> value: 'full'
</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">+var getSlugValue = function getSlugValue(item) {
+ if (item && item.mention_name) {
+ return item.mention_name;
+ }
+
+ return null;
+};
+
</ins><span class="cx" style="display: block; padding: 0 10px"> var editMember = function editMember(_ref) {
</span><span class="cx" style="display: block; padding: 0 10px"> var attributes = _ref.attributes,
</span><span class="cx" style="display: block; padding: 0 10px"> setAttributes = _ref.setAttributes,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -175,6 +183,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> instructions: __('Start typing the name of the member you want to feature into this post.', 'buddypress')
</span><span class="cx" style="display: block; padding: 0 10px"> }, createElement(AutoCompleter, {
</span><span class="cx" style="display: block; padding: 0 10px"> component: "members",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ slugValue: getSlugValue,
</ins><span class="cx" style="display: block; padding: 0 10px"> ariaLabel: __('Member\'s username', 'buddypress'),
</span><span class="cx" style="display: block; padding: 0 10px"> placeholder: __('Enter Member\'s username here…', 'buddypress'),
</span><span class="cx" style="display: block; padding: 0 10px"> onSelectItem: setAttributes,
</span></span></pre></div>
<a id="trunksrcjsbpcorejsblockcomponentscomponentsautocompleterjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/bp-core/js/block-components/components/autocompleter.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/bp-core/js/block-components/components/autocompleter.js 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/js/bp-core/js/block-components/components/autocompleter.js 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4,6 +4,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> const { Component, Fragment, createElement } = wp.element;
</span><span class="cx" style="display: block; padding: 0 10px"> const { Popover } = wp.components;
</span><span class="cx" style="display: block; padding: 0 10px"> const { apiFetch } = wp;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const { addQueryArgs } = wp.url;
</ins><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="cx" style="display: block; padding: 0 10px"> class AutoCompleter extends Component {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -22,7 +23,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> searchItemName( value ) {
</span><span class="cx" style="display: block; padding: 0 10px"> const { search } = this.state;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const { component, objectStatus } = this.props;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const { component, objectQueryArgs } = this.props;
</ins><span class="cx" style="display: block; padding: 0 10px"> this.setState( { search: value } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( value.length < search.length ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -30,16 +31,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"> let path= '/buddypress/v1/' + component;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ let queryArgs = {};
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( value ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- path += '?search=' + encodeURIComponent( value );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ queryArgs.search = encodeURIComponent( 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">- if ( objectStatus ) {
- path += '&status=' + objectStatus;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( objectQueryArgs ) {
+ queryArgs = Object.assign( queryArgs, objectQueryArgs );
</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">- apiFetch( { path: path } ).then( items => {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ apiFetch( { path: addQueryArgs( path, queryArgs ) } ).then( items => {
</ins><span class="cx" style="display: block; padding: 0 10px"> this.setState( { items: items } );
</span><span class="cx" style="display: block; padding: 0 10px"> }, error => {
</span><span class="cx" style="display: block; padding: 0 10px"> this.setState( { error: error.message } );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -61,7 +63,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> render() {
</span><span class="cx" style="display: block; padding: 0 10px"> const { search, items } = this.state;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- let { ariaLabel, placeholder, useAvatar } = this.props;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ let { ariaLabel, placeholder, useAvatar, slugValue } = this.props;
</ins><span class="cx" style="display: block; padding: 0 10px"> let itemsList;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! ariaLabel ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -85,10 +87,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> { useAvatar && (
</span><span class="cx" style="display: block; padding: 0 10px"> <img key="avatar" className="editor-autocompleters__user-avatar" alt="" src={ item.avatar_urls.thumb } />
</span><span class="cx" style="display: block; padding: 0 10px"> ) }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> <span key="name" className="editor-autocompleters__user-name">{ item.name }</span>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- { item.mention_name && (
- <span key="slug" className="editor-autocompleters__user-slug">{ item.mention_name }</span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ { slugValue && null !== slugValue( item ) && (
+ <span key="slug" className="editor-autocompleters__user-slug">{ slugValue( item ) }</span>
</ins><span class="cx" style="display: block; padding: 0 10px"> ) }
</span><span class="cx" style="display: block; padding: 0 10px"> </button>
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span></span></pre></div>
<a id="trunksrcjsbpgroupsjsblocksgroupjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/bp-groups/js/blocks/group.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/bp-groups/js/blocks/group.js 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/js/bp-groups/js/blocks/group.js 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -30,6 +30,20 @@
</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">+const GROUP_STATI = {
+ public: __( 'Public', 'buddypress' ),
+ private: __( 'Private', 'buddypress' ),
+ hidden: __( 'Hidden', 'buddypress' ),
+};
+
+const getSlugValue = ( item ) => {
+ if ( item && item.status && GROUP_STATI[ item.status ] ) {
+ return GROUP_STATI[ item.status ];
+ }
+
+ return null;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> const editGroup = ( { attributes, setAttributes, bpSettings } ) => {
</span><span class="cx" style="display: block; padding: 0 10px"> const { isAvatarEnabled, isCoverImageEnabled } = bpSettings;
</span><span class="cx" style="display: block; padding: 0 10px"> const { avatarSize, displayDescription, displayActionButton, displayCoverImage } = attributes;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -43,7 +57,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> >
</span><span class="cx" style="display: block; padding: 0 10px"> <AutoCompleter
</span><span class="cx" style="display: block; padding: 0 10px"> component="groups"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- objectStatus="public"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ objectQueryArgs={ { 'show_hidden': false } }
+ slugValue={ getSlugValue }
</ins><span class="cx" style="display: block; padding: 0 10px"> ariaLabel={ __( 'Group\'s name', 'buddypress' ) }
</span><span class="cx" style="display: block; padding: 0 10px"> placeholder={ __( 'Enter Group\'s name here…', 'buddypress' ) }
</span><span class="cx" style="display: block; padding: 0 10px"> onSelectItem={ setAttributes }
</span></span></pre></div>
<a id="trunksrcjsbpmembersjsblocksmemberjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/bp-members/js/blocks/member.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/bp-members/js/blocks/member.js 2020-07-05 12:41:13 UTC (rev 12683)
+++ trunk/src/js/bp-members/js/blocks/member.js 2020-07-07 09:57:23 UTC (rev 12684)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -30,6 +30,14 @@
</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">+const getSlugValue = ( item ) => {
+ if ( item && item.mention_name ) {
+ return item.mention_name;
+ }
+
+ return null;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> const editMember = ( { attributes, setAttributes, bpSettings } ) => {
</span><span class="cx" style="display: block; padding: 0 10px"> const { isAvatarEnabled, isMentionEnabled, isCoverImageEnabled } = bpSettings;
</span><span class="cx" style="display: block; padding: 0 10px"> const { avatarSize, displayMentionSlug, displayActionButton, displayCoverImage } = attributes;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -43,6 +51,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> >
</span><span class="cx" style="display: block; padding: 0 10px"> <AutoCompleter
</span><span class="cx" style="display: block; padding: 0 10px"> component="members"
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ slugValue={ getSlugValue }
</ins><span class="cx" style="display: block; padding: 0 10px"> ariaLabel={ __( 'Member\'s username', 'buddypress' ) }
</span><span class="cx" style="display: block; padding: 0 10px"> placeholder={ __( 'Enter Member\'s username here…', 'buddypress' ) }
</span><span class="cx" style="display: block; padding: 0 10px"> onSelectItem={ setAttributes }
</span></span></pre>
</div>
</div>
</body>
</html>