Skip to:
Content

BuddyPress.org

Changeset 12684


Ignore:
Timestamp:
07/07/2020 09:57:23 AM (3 months 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:
11 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-core/bp-core-blocks.php

    r12581 r12684  
    3737            'wp-i18n',
    3838            'wp-api-fetch',
     39            'wp-url',
    3940        ),
    4041        bp_get_version()
  • trunk/src/bp-core/js/block-components.js

    r12577 r12684  
    261261var _wp = wp,
    262262    apiFetch = _wp.apiFetch;
     263var addQueryArgs = wp.url.addQueryArgs;
    263264var __ = wp.i18n.__;
    264265
     
    291292      var _this$props = this.props,
    292293          component = _this$props.component,
    293           objectStatus = _this$props.objectStatus;
     294          objectQueryArgs = _this$props.objectQueryArgs;
    294295      this.setState({
    295296        search: value
     
    303304
    304305      var path = '/buddypress/v1/' + component;
     306      var queryArgs = {};
    305307
    306308      if (value) {
    307         path += '?search=' + encodeURIComponent(value);
    308       }
    309 
    310       if (objectStatus) {
    311         path += '&status=' + objectStatus;
     309        queryArgs.search = encodeURIComponent(value);
     310      }
     311
     312      if (objectQueryArgs) {
     313        queryArgs = Object.assign(queryArgs, objectQueryArgs);
    312314      }
    313315
    314316      apiFetch({
    315         path: path
     317        path: addQueryArgs(path, queryArgs)
    316318      }).then(function (items) {
    317319        _this2.setState({
     
    349351          ariaLabel = _this$props2.ariaLabel,
    350352          placeholder = _this$props2.placeholder,
    351           useAvatar = _this$props2.useAvatar;
     353          useAvatar = _this$props2.useAvatar,
     354          slugValue = _this$props2.slugValue;
    352355      var itemsList;
    353356
     
    379382            key: "name",
    380383            className: "editor-autocompleters__user-name"
    381           }, item.name), item.mention_name && createElement("span", {
     384          }, item.name), slugValue && null !== slugValue(item) && createElement("span", {
    382385            key: "slug",
    383386            className: "editor-autocompleters__user-slug"
    384           }, item.mention_name));
     387          }, slugValue(item)));
    385388        });
    386389      }
  • trunk/src/bp-groups/css/blocks/group-rtl.css

    r12580 r12684  
    117117    float: left;
    118118}
     119
     120[data-type="bp/group"] input.components-placeholder__input {
     121    flex: 1 1 auto;
     122    border-radius: 2px;
     123    border: 1px solid #757575;
     124    padding: 6px 8px;
     125}
  • trunk/src/bp-groups/css/blocks/group.css

    r12580 r12684  
    117117    float: right;
    118118}
     119
     120[data-type="bp/group"] input.components-placeholder__input {
     121    flex: 1 1 auto;
     122    border-radius: 2px;
     123    border: 1px solid #757575;
     124    padding: 6px 8px;
     125}
  • trunk/src/bp-groups/js/blocks/group.js

    r12618 r12684  
    156156  value: 'full'
    157157}];
     158var GROUP_STATI = {
     159  public: __('Public', 'buddypress'),
     160  private: __('Private', 'buddypress'),
     161  hidden: __('Hidden', 'buddypress')
     162};
     163
     164var getSlugValue = function getSlugValue(item) {
     165  if (item && item.status && GROUP_STATI[item.status]) {
     166    return GROUP_STATI[item.status];
     167  }
     168
     169  return null;
     170};
    158171
    159172var editGroup = function editGroup(_ref) {
     
    175188    }, createElement(AutoCompleter, {
    176189      component: "groups",
    177       objectStatus: "public",
     190      objectQueryArgs: {
     191        'show_hidden': false
     192      },
     193      slugValue: getSlugValue,
    178194      ariaLabel: __('Group\'s name', 'buddypress'),
    179195      placeholder: __('Enter Group\'s name here
', 'buddypress'),
  • trunk/src/bp-members/css/blocks/member-rtl.css

    r12579 r12684  
    109109    margin: 18px 0 0;
    110110}
     111
     112[data-type="bp/member"] input.components-placeholder__input {
     113    flex: 1 1 auto;
     114    border-radius: 2px;
     115    border: 1px solid #757575;
     116    padding: 6px 8px;
     117}
  • trunk/src/bp-members/css/blocks/member.css

    r12579 r12684  
    109109    margin: 18px 0 0;
    110110}
     111
     112[data-type="bp/member"] input.components-placeholder__input {
     113    flex: 1 1 auto;
     114    border-radius: 2px;
     115    border: 1px solid #757575;
     116    padding: 6px 8px;
     117}
  • trunk/src/bp-members/js/blocks/member.js

    r12618 r12684  
    157157}];
    158158
     159var getSlugValue = function getSlugValue(item) {
     160  if (item && item.mention_name) {
     161    return item.mention_name;
     162  }
     163
     164  return null;
     165};
     166
    159167var editMember = function editMember(_ref) {
    160168  var attributes = _ref.attributes,
     
    176184    }, createElement(AutoCompleter, {
    177185      component: "members",
     186      slugValue: getSlugValue,
    178187      ariaLabel: __('Member\'s username', 'buddypress'),
    179188      placeholder: __('Enter Member\'s username here
', 'buddypress'),
  • trunk/src/js/bp-core/js/block-components/components/autocompleter.js

    r12576 r12684  
    55const { Popover } = wp.components;
    66const { apiFetch } = wp;
     7const { addQueryArgs } = wp.url;
    78const { __ } = wp.i18n;
    89
     
    2324    searchItemName( value ) {
    2425        const { search } = this.state;
    25         const { component, objectStatus } = this.props;
     26        const { component, objectQueryArgs } = this.props;
    2627        this.setState( { search: value } );
    2728
     
    3132
    3233        let path= '/buddypress/v1/' + component;
     34        let queryArgs = {};
    3335
    3436        if ( value ) {
    35             path += '?search=' + encodeURIComponent( value );
     37            queryArgs.search = encodeURIComponent( value );
    3638        }
    3739
    38         if ( objectStatus ) {
    39             path += '&status=' + objectStatus;
     40        if ( objectQueryArgs ) {
     41            queryArgs = Object.assign( queryArgs, objectQueryArgs );
    4042        }
    4143
    42         apiFetch( { path:  path } ).then( items => {
     44        apiFetch( { path:  addQueryArgs( path, queryArgs ) } ).then( items => {
    4345            this.setState( { items: items } );
    4446        }, error => {
     
    6264    render() {
    6365        const { search, items } = this.state;
    64         let { ariaLabel, placeholder, useAvatar } = this.props;
     66        let { ariaLabel, placeholder, useAvatar, slugValue } = this.props;
    6567        let itemsList;
    6668
     
    8688                            <img key="avatar" className="editor-autocompleters__user-avatar" alt="" src={ item.avatar_urls.thumb } />
    8789                        ) }
     90
    8891                        <span key="name" className="editor-autocompleters__user-name">{ item.name }</span>
    8992
    90                         { item.mention_name && (
    91                             <span key="slug" className="editor-autocompleters__user-slug">{ item.mention_name }</span>
     93                        { slugValue && null !== slugValue( item ) && (
     94                            <span key="slug" className="editor-autocompleters__user-slug">{ slugValue( item ) }</span>
    9295                        ) }
    9396                    </button>
  • trunk/src/js/bp-groups/js/blocks/group.js

    r12618 r12684  
    3131];
    3232
     33const GROUP_STATI = {
     34    public: __( 'Public', 'buddypress' ),
     35    private: __( 'Private', 'buddypress' ),
     36    hidden: __( 'Hidden', 'buddypress' ),
     37};
     38
     39const getSlugValue = ( item ) => {
     40    if ( item && item.status && GROUP_STATI[ item.status ] ) {
     41        return GROUP_STATI[ item.status ];
     42    }
     43
     44    return null;
     45}
     46
    3347const editGroup = ( { attributes, setAttributes, bpSettings } ) => {
    3448    const { isAvatarEnabled, isCoverImageEnabled } = bpSettings;
     
    4458                <AutoCompleter
    4559                    component="groups"
    46                     objectStatus="public"
     60                    objectQueryArgs={ { 'show_hidden': false } }
     61                    slugValue={ getSlugValue }
    4762                    ariaLabel={ __( 'Group\'s name', 'buddypress' ) }
    4863                    placeholder={ __( 'Enter Group\'s name here
', 'buddypress' ) }
  • trunk/src/js/bp-members/js/blocks/member.js

    r12618 r12684  
    3131];
    3232
     33const getSlugValue = ( item ) => {
     34    if ( item && item.mention_name ) {
     35        return item.mention_name;
     36    }
     37
     38    return null;
     39}
     40
    3341const editMember = ( { attributes, setAttributes, bpSettings } ) => {
    3442    const { isAvatarEnabled, isMentionEnabled, isCoverImageEnabled } = bpSettings;
     
    4452                <AutoCompleter
    4553                    component="members"
     54                    slugValue={ getSlugValue }
    4655                    ariaLabel={ __( 'Member\'s username', 'buddypress' ) }
    4756                    placeholder={ __( 'Enter Member\'s username here
', 'buddypress' ) }
Note: See TracChangeset for help on using the changeset viewer.