Ticket #8272: 8272.patch

src/bp-core/bp-core-blocks.php

@@ -36 +36 @@
                         'wp-components',
                         'wp-i18n',
                         'wp-api-fetch',
+                        'wp-url',
                 ),
                 bp_get_version()
         );

src/bp-core/js/block-components.js

@@ -260 +260 @@
 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 +291 @@
       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 +303 @@
       }
 
       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 +350 @@
       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 +381 @@
           }), 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)));
         });
       }
 

src/bp-groups/css/blocks/group-rtl.css

@@ -116 +116 @@
         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;
+}

src/bp-groups/css/blocks/group.css

@@ -116 +116 @@
         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;
+}

src/bp-groups/js/blocks/group.js

@@ -155 +155 @@
   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 +187 @@
       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,

src/bp-members/css/blocks/member-rtl.css

@@ -108 +108 @@
         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;
+}

src/bp-members/css/blocks/member.css

@@ -108 +108 @@
         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;
+}

src/bp-members/js/blocks/member.js

@@ -156 +156 @@
   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 +183 @@
       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,

src/js/bp-core/js/block-components/components/autocompleter.js

@@ -4 +4 @@
 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 +23 @@
 
         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 +31 @@
                 }
 
                 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 +63 @@
 
         render() {
                 const { search, items } = this.state;
-                let { ariaLabel, placeholder, useAvatar } = this.props;
+                let { ariaLabel, placeholder, useAvatar, slugValue } = this.props;
                 let itemsList;
 
                 if ( ! ariaLabel ) {
@@ -85 +87 @@
                                                 { useAvatar && (
                                                         <img key="avatar" className="editor-autocompleters__user-avatar" alt="" src={ item.avatar_urls.thumb } />
                                                 ) }
+
                                                 <span key="name" className="editor-autocompleters__user-name">{ item.name }</span>
 
-                                                { item.mention_name && (
-                                                        <span key="slug" className="editor-autocompleters__user-slug">{ item.mention_name }</span>
+                                                { slugValue && null !== slugValue( item ) && (
+                                                        <span key="slug" className="editor-autocompleters__user-slug">{ slugValue( item ) }</span>
                                                 ) }
                                         </button>
                                 );

src/js/bp-groups/js/blocks/group.js

@@ -30 +30 @@
         },
 ];
 
+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 +57 @@
                         >
                                 <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 }

src/js/bp-members/js/blocks/member.js

@@ -30 +30 @@
         },
 ];
 
+const getSlugValue = ( item ) => {
+        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 +51 @@
                         >
                                 <AutoCompleter
                                         component="members"
+                                        slugValue={ getSlugValue }
                                         ariaLabel={ __( 'Member\'s username', 'buddypress' ) }
                                         placeholder={ __( 'Enter Member\'s username here…', 'buddypress' ) }
                                         onSelectItem={ setAttributes }