[Summary view] [Print] [Text view]

   1  /**
   2   * WordPress dependencies.
   3   */
   4  const {
   5      blockEditor: {
   6          InspectorControls,
   7          BlockControls,
   8      },
   9      components: {
  10          Placeholder,
  11          Disabled,
  12          PanelBody,
  13          SelectControl,
  14          ToggleControl,
  15          Toolbar,
  16          ToolbarButton,
  17      },
  18      element: {
  19          Fragment,
  20          createElement,
  21      },
  22      i18n: {
  23          __,
  24      },
  25      serverSideRender: ServerSideRender,
  26  } = wp;
  27  
  28  /**
  29   * BuddyPress dependencies.
  30   */
  31  const {
  32      blockComponents: {
  33          AutoCompleter,
  34      },
  35      blockData: {
  36          isActive,
  37      }
  38  } = bp;
  39  
  40  /**
  41   * Internal dependencies.
  42   */
  43  import { AVATAR_SIZES } from './constants';
  44  
  45  const getSlugValue = ( item ) => {
  46      if ( item && item.mention_name ) {
  47          return item.mention_name;
  48      }
  49  
  50      return null;
  51  }
  52  
  53  const editMemberBlock = ( { attributes, setAttributes } ) => {
  54      const isAvatarEnabled = isActive( 'members', 'avatar' );
  55      const isMentionEnabled = isActive( 'activity', 'mentions' );
  56      const isCoverImageEnabled = isActive( 'members', 'cover' );
  57      const { avatarSize, displayMentionSlug, displayActionButton, displayCoverImage } = attributes;
  58  
  59      if ( ! attributes.itemID ) {
  60          return (
  61              <Placeholder
  62                  icon="admin-users"
  63                  label={ __( 'BuddyPress Member', 'buddypress' ) }
  64                  instructions={ __( 'Start typing the name of the member you want to feature into this post.', 'buddypress' ) }
  65              >
  66                  <AutoCompleter
  67                      component="members"
  68                      slugValue={ getSlugValue }
  69                      ariaLabel={ __( 'Member\'s username', 'buddypress' ) }
  70                      placeholder={ __( 'Enter Member\'s username here…', 'buddypress' ) }
  71                      onSelectItem={ setAttributes }
  72                      useAvatar={ isAvatarEnabled }
  73                  />
  74              </Placeholder>
  75          );
  76      }
  77  
  78      return (
  79          <Fragment>
  80              <BlockControls>
  81                  <Toolbar label={ __( 'Block toolbar', 'buddypress' ) }>
  82                      <ToolbarButton
  83                          icon="edit"
  84                          title={ __( 'Select another member', 'buddypress' ) }
  85                          onClick={ () => {
  86                              setAttributes( { itemID: 0 } );
  87                          } }
  88                      />
  89                  </Toolbar>
  90              </BlockControls>
  91              <InspectorControls>
  92                  <PanelBody title={ __( 'Settings', 'buddypress' ) } initialOpen={ true }>
  93                      <ToggleControl
  94                          label={ __( 'Display Profile button', 'buddypress' ) }
  95                          checked={ !! displayActionButton }
  96                          onChange={ () => {
  97                              setAttributes( { displayActionButton: ! displayActionButton } );
  98                          } }
  99                          help={
 100                              displayActionButton
 101                                  ? __( 'Include a link to the user\'s profile page under their display name.', 'buddypress' )
 102                                  : __( 'Toggle to display a link to the user\'s profile page under their display name.', 'buddypress' )
 103                          }
 104                      />
 105  
 106                      { isAvatarEnabled && (
 107                          <SelectControl
 108                              label={ __( 'Avatar size', 'buddypress' ) }
 109                              value={ avatarSize }
 110                              options={ AVATAR_SIZES }
 111                              help={ __( 'Select "None" to disable the avatar.', 'buddypress' ) }
 112                              onChange={ ( option ) => {
 113                                  setAttributes( { avatarSize: option } );
 114                              } }
 115                          />
 116                      ) }
 117  
 118                      { isCoverImageEnabled && (
 119                          <ToggleControl
 120                              label={ __( 'Display Cover Image', 'buddypress' ) }
 121                              checked={ !! displayCoverImage }
 122                              onChange={ () => {
 123                                  setAttributes( { displayCoverImage: ! displayCoverImage } );
 124                              } }
 125                              help={
 126                                  displayCoverImage
 127                                      ? __( 'Include the user\'s cover image over their display name.', 'buddypress' )
 128                                      : __( 'Toggle to display the user\'s cover image over their display name.', 'buddypress' )
 129                              }
 130                          />
 131                      ) }
 132  
 133                      { isMentionEnabled && (
 134                          <ToggleControl
 135                              label={ __( 'Display Mention slug', 'buddypress' ) }
 136                              checked={ !! displayMentionSlug }
 137                              onChange={ () => {
 138                                  setAttributes( { displayMentionSlug: ! displayMentionSlug } );
 139                              } }
 140                              help={
 141                                  displayMentionSlug
 142                                      ? __( 'Include the user\'s mention name under their display name.', 'buddypress' )
 143                                      : __( 'Toggle to display the user\'s mention name under their display name.', 'buddypress' )
 144                              }
 145                          />
 146                      ) }
 147                  </PanelBody>
 148              </InspectorControls>
 149              <Disabled>
 150                  <ServerSideRender block="bp/member" attributes={ attributes } />
 151              </Disabled>
 152          </Fragment>
 153      );
 154  };
 155  
 156  export default editMemberBlock;