diff --git src/bp-core/bp-core-blocks.php src/bp-core/bp-core-blocks.php
index d2cda8de1..f2f7a8c2c 100644
--- src/bp-core/bp-core-blocks.php
+++ src/bp-core/bp-core-blocks.php
@@ -36,6 +36,7 @@ function bp_register_block_components() {
'wp-components',
'wp-i18n',
'wp-api-fetch',
+ 'wp-url',
),
bp_get_version()
);
diff --git src/bp-core/js/block-components.js src/bp-core/js/block-components.js
index 2aede5129..61fdbd331 100644
--- src/bp-core/js/block-components.js
+++ src/bp-core/js/block-components.js
@@ -260,6 +260,7 @@ var _wp$element = wp.element,
var Popover = wp.components.Popover;
var _wp = wp,
apiFetch = _wp.apiFetch;
+var addQueryArgs = wp.url.addQueryArgs;
var __ = wp.i18n.__;
var AutoCompleter = /*#__PURE__*/function (_Component) {
@@ -290,7 +291,7 @@ var AutoCompleter = /*#__PURE__*/function (_Component) {
var search = this.state.search;
var _this$props = this.props,
component = _this$props.component,
- objectStatus = _this$props.objectStatus;
+ objectQueryArgs = _this$props.objectQueryArgs;
this.setState({
search: value
});
@@ -302,17 +303,18 @@ var AutoCompleter = /*#__PURE__*/function (_Component) {
}
var path = '/buddypress/v1/' + component;
+ var queryArgs = {};
if (value) {
- path += '?search=' + encodeURIComponent(value);
+ queryArgs.search = encodeURIComponent(value);
}
- if (objectStatus) {
- path += '&status=' + objectStatus;
+ if (objectQueryArgs) {
+ queryArgs = Object.assign(queryArgs, objectQueryArgs);
}
apiFetch({
- path: path
+ path: addQueryArgs(path, queryArgs)
}).then(function (items) {
_this2.setState({
items: items
@@ -348,7 +350,8 @@ var AutoCompleter = /*#__PURE__*/function (_Component) {
var _this$props2 = this.props,
ariaLabel = _this$props2.ariaLabel,
placeholder = _this$props2.placeholder,
- useAvatar = _this$props2.useAvatar;
+ useAvatar = _this$props2.useAvatar,
+ slugValue = _this$props2.slugValue;
var itemsList;
if (!ariaLabel) {
@@ -378,10 +381,10 @@ var AutoCompleter = /*#__PURE__*/function (_Component) {
}), createElement("span", {
key: "name",
className: "editor-autocompleters__user-name"
- }, item.name), item.mention_name && createElement("span", {
+ }, item.name), slugValue && null !== slugValue(item) && createElement("span", {
key: "slug",
className: "editor-autocompleters__user-slug"
- }, item.mention_name));
+ }, slugValue(item)));
});
}
diff --git src/bp-groups/css/blocks/group-rtl.css src/bp-groups/css/blocks/group-rtl.css
index dce932ac8..9a562f910 100644
--- src/bp-groups/css/blocks/group-rtl.css
+++ src/bp-groups/css/blocks/group-rtl.css
@@ -116,3 +116,10 @@
display: block;
float: left;
}
+
+[data-type="bp/group"] input.components-placeholder__input {
+ flex: 1 1 auto;
+ border-radius: 2px;
+ border: 1px solid #757575;
+ padding: 6px 8px;
+}
diff --git src/bp-groups/css/blocks/group.css src/bp-groups/css/blocks/group.css
index 502b70b69..2244557d4 100644
--- src/bp-groups/css/blocks/group.css
+++ src/bp-groups/css/blocks/group.css
@@ -116,3 +116,10 @@
display: block;
float: right;
}
+
+[data-type="bp/group"] input.components-placeholder__input {
+ flex: 1 1 auto;
+ border-radius: 2px;
+ border: 1px solid #757575;
+ padding: 6px 8px;
+}
diff --git src/bp-groups/js/blocks/group.js src/bp-groups/js/blocks/group.js
index b92f36f28..103a5908e 100644
--- src/bp-groups/js/blocks/group.js
+++ src/bp-groups/js/blocks/group.js
@@ -155,6 +155,19 @@ var AVATAR_SIZES = [{
label: __('Full', 'buddypress'),
value: 'full'
}];
+var GROUP_STATI = {
+ public: __('Public', 'buddypress'),
+ private: __('Private', 'buddypress'),
+ hidden: __('Hidden', 'buddypress')
+};
+
+var getSlugValue = function getSlugValue(item) {
+ if (item && item.status && GROUP_STATI[item.status]) {
+ return GROUP_STATI[item.status];
+ }
+
+ return null;
+};
var editGroup = function editGroup(_ref) {
var attributes = _ref.attributes,
@@ -174,7 +187,10 @@ var editGroup = function editGroup(_ref) {
instructions: __('Start typing the name of the group you want to feature into this post.', 'buddypress')
}, createElement(AutoCompleter, {
component: "groups",
- objectStatus: "public",
+ objectQueryArgs: {
+ 'show_hidden': false
+ },
+ slugValue: getSlugValue,
ariaLabel: __('Group\'s name', 'buddypress'),
placeholder: __('Enter Group\'s name here…', 'buddypress'),
onSelectItem: setAttributes,
diff --git src/bp-members/css/blocks/member-rtl.css src/bp-members/css/blocks/member-rtl.css
index ff9de024c..7698bc8a0 100644
--- src/bp-members/css/blocks/member-rtl.css
+++ src/bp-members/css/blocks/member-rtl.css
@@ -108,3 +108,10 @@
display: inline-block;
margin: 18px 0 0;
}
+
+[data-type="bp/member"] input.components-placeholder__input {
+ flex: 1 1 auto;
+ border-radius: 2px;
+ border: 1px solid #757575;
+ padding: 6px 8px;
+}
diff --git src/bp-members/css/blocks/member.css src/bp-members/css/blocks/member.css
index b03ea8687..79f86f393 100644
--- src/bp-members/css/blocks/member.css
+++ src/bp-members/css/blocks/member.css
@@ -108,3 +108,10 @@
display: inline-block;
margin: 18px 0 0;
}
+
+[data-type="bp/member"] input.components-placeholder__input {
+ flex: 1 1 auto;
+ border-radius: 2px;
+ border: 1px solid #757575;
+ padding: 6px 8px;
+}
diff --git src/bp-members/js/blocks/member.js src/bp-members/js/blocks/member.js
index 3f78b0dc5..602568636 100644
--- src/bp-members/js/blocks/member.js
+++ src/bp-members/js/blocks/member.js
@@ -156,6 +156,14 @@ var AVATAR_SIZES = [{
value: 'full'
}];
+var getSlugValue = function getSlugValue(item) {
+ if (item && item.mention_name) {
+ return item.mention_name;
+ }
+
+ return null;
+};
+
var editMember = function editMember(_ref) {
var attributes = _ref.attributes,
setAttributes = _ref.setAttributes,
@@ -175,6 +183,7 @@ var editMember = function editMember(_ref) {
instructions: __('Start typing the name of the member you want to feature into this post.', 'buddypress')
}, createElement(AutoCompleter, {
component: "members",
+ slugValue: getSlugValue,
ariaLabel: __('Member\'s username', 'buddypress'),
placeholder: __('Enter Member\'s username here…', 'buddypress'),
onSelectItem: setAttributes,
diff --git src/js/bp-core/js/block-components/components/autocompleter.js src/js/bp-core/js/block-components/components/autocompleter.js
index 30d0c7c2d..90e04e5d7 100644
--- src/js/bp-core/js/block-components/components/autocompleter.js
+++ src/js/bp-core/js/block-components/components/autocompleter.js
@@ -4,6 +4,7 @@
const { Component, Fragment, createElement } = wp.element;
const { Popover } = wp.components;
const { apiFetch } = wp;
+const { addQueryArgs } = wp.url;
const { __ } = wp.i18n;
class AutoCompleter extends Component {
@@ -22,7 +23,7 @@ class AutoCompleter extends Component {
searchItemName( value ) {
const { search } = this.state;
- const { component, objectStatus } = this.props;
+ const { component, objectQueryArgs } = this.props;
this.setState( { search: value } );
if ( value.length < search.length ) {
@@ -30,16 +31,17 @@ class AutoCompleter extends Component {
}
let path= '/buddypress/v1/' + component;
+ let queryArgs = {};
if ( value ) {
- path += '?search=' + encodeURIComponent( value );
+ queryArgs.search = encodeURIComponent( value );
}
- if ( objectStatus ) {
- path += '&status=' + objectStatus;
+ if ( objectQueryArgs ) {
+ queryArgs = Object.assign( queryArgs, objectQueryArgs );
}
- apiFetch( { path: path } ).then( items => {
+ apiFetch( { path: addQueryArgs( path, queryArgs ) } ).then( items => {
this.setState( { items: items } );
}, error => {
this.setState( { error: error.message } );
@@ -61,7 +63,7 @@ class AutoCompleter extends Component {
render() {
const { search, items } = this.state;
- let { ariaLabel, placeholder, useAvatar } = this.props;
+ let { ariaLabel, placeholder, useAvatar, slugValue } = this.props;
let itemsList;
if ( ! ariaLabel ) {
@@ -85,10 +87,11 @@ class AutoCompleter extends Component {
{ useAvatar && (
) }
+
{ item.name }
- { item.mention_name && (
- { item.mention_name }
+ { slugValue && null !== slugValue( item ) && (
+ { slugValue( item ) }
) }
);
diff --git src/js/bp-groups/js/blocks/group.js src/js/bp-groups/js/blocks/group.js
index 2d95f05a6..dfb37f9a6 100644
--- src/js/bp-groups/js/blocks/group.js
+++ src/js/bp-groups/js/blocks/group.js
@@ -30,6 +30,20 @@ const AVATAR_SIZES = [
},
];
+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;
+}
+
const editGroup = ( { attributes, setAttributes, bpSettings } ) => {
const { isAvatarEnabled, isCoverImageEnabled } = bpSettings;
const { avatarSize, displayDescription, displayActionButton, displayCoverImage } = attributes;
@@ -43,7 +57,8 @@ const editGroup = ( { attributes, setAttributes, bpSettings } ) => {
>
{
+ if ( item && item.mention_name ) {
+ return item.mention_name;
+ }
+
+ return null;
+}
+
const editMember = ( { attributes, setAttributes, bpSettings } ) => {
const { isAvatarEnabled, isMentionEnabled, isCoverImageEnabled } = bpSettings;
const { avatarSize, displayMentionSlug, displayActionButton, displayCoverImage } = attributes;
@@ -43,6 +51,7 @@ const editMember = ( { attributes, setAttributes, bpSettings } ) => {
>