Changeset 12684

Timestamp:

07/07/2020 09:57:23 AM (3 years ago)

Author:

imath

Message:

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 #8272

Location:

trunk/src

Files:

• bp-core/bp-core-blocks.php (modified) (1 diff)
• bp-core/js/block-components.js (modified) (5 diffs)
• bp-groups/css/blocks/group-rtl.css (modified) (1 diff)
• bp-groups/css/blocks/group.css (modified) (1 diff)
• bp-groups/js/blocks/group.js (modified) (2 diffs)
• bp-members/css/blocks/member-rtl.css (modified) (1 diff)
• bp-members/css/blocks/member.css (modified) (1 diff)
• bp-members/js/blocks/member.js (modified) (2 diffs)
• js/bp-core/js/block-components/components/autocompleter.js (modified) (5 diffs)
• js/bp-groups/js/blocks/group.js (modified) (2 diffs)
• js/bp-members/js/blocks/member.js (modified) (2 diffs)

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

@@ -37 +37 @@
             'wp-i18n',
             'wp-api-fetch',
+            'wp-url',
         ),
         bp_get_version()

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

@@ -261 +261 @@
 var _wp = wp,
     apiFetch = _wp.apiFetch;
+var addQueryArgs = wp.url.addQueryArgs;
 var __ = wp.i18n.__;
 
@@ -291 +292 @@
       var _this$props = this.props,
           component = _this$props.component,
-          objectStatus = _this$props.objectStatus;
+          objectQueryArgs = _this$props.objectQueryArgs;
       this.setState({
         search: value
@@ -303 +304 @@
 
       var path = '/buddypress/v1/' + component;
+      var queryArgs = {};
 
       if (value) {
-        path += '?search=' + encodeURIComponent(value);
-      }
-
-      if (objectStatus) {
-        path += '&status=' + objectStatus;
+        queryArgs.search = encodeURIComponent(value);
+      }
+
+      if (objectQueryArgs) {
+        queryArgs = Object.assign(queryArgs, objectQueryArgs);
       }
 
       apiFetch({
-        path: path
+        path: addQueryArgs(path, queryArgs)
       }).then(function (items) {
         _this2.setState({
@@ -349 +351 @@
           ariaLabel = _this$props2.ariaLabel,
           placeholder = _this$props2.placeholder,
-          useAvatar = _this$props2.useAvatar;
+          useAvatar = _this$props2.useAvatar,
+          slugValue = _this$props2.slugValue;
       var itemsList;
 
@@ -379 +382 @@
             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)));
         });
       }

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

@@ -117 +117 @@
     float: left;
 }
+
+[data-type="bp/group"] input.components-placeholder__input {
+    flex: 1 1 auto;
+    border-radius: 2px;
+    border: 1px solid #757575;
+    padding: 6px 8px;
+}

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

@@ -117 +117 @@
     float: right;
 }
+
+[data-type="bp/group"] input.components-placeholder__input {
+    flex: 1 1 auto;
+    border-radius: 2px;
+    border: 1px solid #757575;
+    padding: 6px 8px;
+}

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

@@ -156 +156 @@
   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) {
@@ -175 +188 @@
     }, createElement(AutoCompleter, {
       component: "groups",
-      objectStatus: "public",
+      objectQueryArgs: {
+        'show_hidden': false
+      },
+      slugValue: getSlugValue,
       ariaLabel: __('Group\'s name', 'buddypress'),
       placeholder: __('Enter Group\'s name here…', 'buddypress'),

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

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

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

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

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

@@ -157 +157 @@
 }];
 
+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,
@@ -176 +184 @@
     }, createElement(AutoCompleter, {
       component: "members",
+      slugValue: getSlugValue,
       ariaLabel: __('Member\'s username', 'buddypress'),
       placeholder: __('Enter Member\'s username here…', 'buddypress'),

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

@@ -5 +5 @@
 const { Popover } = wp.components;
 const { apiFetch } = wp;
+const { addQueryArgs } = wp.url;
 const { __ } = wp.i18n;
 
@@ -23 +24 @@
     searchItemName( value ) {
         const { search } = this.state;
-        const { component, objectStatus } = this.props;
+        const { component, objectQueryArgs } = this.props;
         this.setState( { search: value } );
 
@@ -31 +32 @@
 
         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 => {
@@ -62 +64 @@
     render() {
         const { search, items } = this.state;
-        let { ariaLabel, placeholder, useAvatar } = this.props;
+        let { ariaLabel, placeholder, useAvatar, slugValue } = this.props;
         let itemsList;
 
@@ -86 +88 @@
                             <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>

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

@@ -31 +31 @@
 ];
 
+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;
@@ -44 +58 @@
                 <AutoCompleter
                     component="groups"
-                    objectStatus="public"
+                    objectQueryArgs={ { 'show_hidden': false } }
+                    slugValue={ getSlugValue }
                     ariaLabel={ __( 'Group\'s name', 'buddypress' ) }
                     placeholder={ __( 'Enter Group\'s name here…', 'buddypress' ) }

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

@@ -31 +31 @@
 ];
 
+const getSlugValue = ( item ) => {
+    if ( item && item.mention_name ) {
+        return item.mention_name;
+    }
+
+    return null;
+}
+
 const editMember = ( { attributes, setAttributes, bpSettings } ) => {
     const { isAvatarEnabled, isMentionEnabled, isCoverImageEnabled } = bpSettings;
@@ -44 +52 @@
                 <AutoCompleter
                     component="members"
+                    slugValue={ getSlugValue }
                     ariaLabel={ __( 'Member\'s username', 'buddypress' ) }
                     placeholder={ __( 'Enter Member\'s username here…', 'buddypress' ) }