Changeset 12748

Timestamp:

10/11/2020 11:51:42 AM (6 years ago)

Author:

imath

Message:

BP Blocks: introduce the BP Members Block 👫

Unlike what we are doing in BP Members widgets (filtering a max amount of members according to their popularity, last activity, alphabetically, ...), the BP Members block lets you select as many members as you wish to feature them into your post or page.

Members are selected one by one using the BP Auto-completer React component.

Just like the BP Member block you can choose the Profile photo size (or disable it), whether to show or hide the mention name.

You can also choose to show or hide the user display name and some extra information generated by BuddyPress about the user:

• Last time the user was active,
• Latest activity the user posted (if the Activity component is active).

Finally you can choose to display members in a grid of 2 to 4 columns or in a list.

Props espellcaste, imath

See #8369

Location:

trunk/src

Files:

• bp-members/bp-members-blocks.php (modified) (1 diff)
• bp-members/classes/class-bp-members-component.php (modified) (1 diff)
• bp-members/css/blocks/members-rtl.css (added)
• bp-members/css/blocks/members.css (added)
• bp-members/js/blocks/members.js (added)
• bp-members/sass/blocks/members.scss (added)
• js/bp-members/js/blocks/members (added)
• js/bp-members/js/blocks/members.js (added)
• js/bp-members/js/blocks/members/constants.js (added)
• js/bp-members/js/blocks/members/edit.js (added)

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

@@ -193 +193 @@
         return apply_filters( 'bp_members_render_member_block_output', $output, $params );
 }
+
+/**
+ * Callback function to render the BP Members Block.
+ *
+ * @since 7.0.0
+ *
+ * @param array $attributes The block attributes.
+ * @return string           HTML output.
+ */
+function bp_members_render_members_block( $attributes = array() ) {
+        $bp = buddypress();
+
+        $block_args = wp_parse_args(
+                $attributes,
+                array(
+                        'itemIDs'            => array(),
+                        'avatarSize'         => 'full',
+                        'displayMentionSlug' => true,
+                        'displayUserName'    => true,
+                        'extraData'          => 'none',
+                        'layoutPreference'   => 'list',
+                        'columns'            => '2',
+                )
+        );
+
+        $member_ids = wp_parse_id_list( $block_args['itemIDs'] );
+        if ( ! array_filter( $member_ids ) ) {
+                return '';
+        }
+
+        $container_classes = sprintf( 'bp-block-members avatar-%s', $block_args['avatarSize'] );
+        if ( 'grid' === $block_args['layoutPreference'] ) {
+                $container_classes .= sprintf( ' is-grid columns-%d', (int) $block_args['columns'] );
+        }
+
+        $query_args = array(
+                'user_ids' => $member_ids,
+        );
+
+        if ( 'none' !== $block_args['extraData'] ) {
+                $query_args['populate_extras'] = true;
+        }
+
+        $query = bp_core_get_users( $query_args );
+
+        // Initialize the output and the members.
+        $output  = '';
+        $members = $query['users'];
+
+        foreach ( $members as $member ) {
+                $has_activity        = false;
+                $member_item_classes = 'member-content';
+
+                if ( 'list' === $block_args['layoutPreference'] && 'latest_update' === $block_args['extraData'] && isset( $member->latest_update ) && $member->latest_update ) {
+                        $has_activity        = true;
+                        $member_item_classes = 'member-content has-activity';
+                }
+
+                $output .= sprintf( '<div class="%s">', $member_item_classes );
+
+                // Get Member link.
+                $member_link = bp_core_get_user_domain( $member->ID );
+
+                // Set the Avatar output.
+                if ( $bp->avatar && $bp->avatar->show_avatars && 'none' !== $block_args['avatarSize'] ) {
+                        $output .= sprintf(
+                                '<div class="item-header-avatar">
+                                        <a href="%1$s">
+                                                <img class="avatar" alt="%2$s" src="%3$s" />
+                                        </a>
+                                </div>',
+                                esc_url( $member_link ),
+                                /* translators: %s: the member display name */
+                                sprintf( esc_attr__( 'Profile photo of %s', 'buddypress' ), $member->display_name ),
+                                esc_url(
+                                        bp_core_fetch_avatar(
+                                                array(
+                                                        'item_id' => $member->ID,
+                                                        'object'  => 'user',
+                                                        'type'    => $block_args['avatarSize'],
+                                                        'html'    => false,
+                                                )
+                                        )
+                                )
+                        );
+                }
+
+                $output .= '<div class="member-description">';
+
+                // Add the latest activity the member posted.
+                if ( $has_activity ) {
+                        $activity_content = '';
+                        $activity_data    = maybe_unserialize( $member->latest_update );
+
+                        if ( isset( $activity_data['content'] ) ) {
+                                $activity_content = apply_filters( 'bp_get_activity_content', $activity_data['content'] );
+                        }
+
+                        $display_name = '';
+                        if ( $block_args['displayUserName'] ) {
+                                $display_name = $member->display_name;
+                        }
+
+                        $mention_name = '';
+                        if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() && $block_args['displayMentionSlug'] ) {
+                                $mention_name = '(@' . $member->user_nicename . ')';
+                        }
+
+                        $output .= sprintf(
+                                '<blockquote class="wp-block-quote">
+                                        %1$s
+                                        <cite>
+                                                <span>%2$s</span>
+                                                %3$s
+                                        </cite>
+                                </blockquote>',
+                                $activity_content,
+                                esc_html( $display_name ),
+                                esc_html( $mention_name )
+                        );
+                } else {
+                        if ( $block_args['displayUserName'] ) {
+                                $output .= sprintf(
+                                        '<strong><a href="%1$s">%2$s</a></strong>',
+                                        esc_url( $member_link ),
+                                        esc_html( $member->display_name )
+                                );
+                        }
+
+                        if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() && $block_args['displayMentionSlug'] ) {
+                                $output .= sprintf(
+                                        '<span class="user-nicename">@%s</span>',
+                                        esc_html( $member->user_nicename )
+                                );
+                        }
+
+                        if ( 'last_activity' === $block_args['extraData'] ) {
+                                $output .= sprintf(
+                                        '<time datetime="%1$s">%2$s</time>',
+                                        esc_attr( bp_core_get_iso8601_date( $member->last_activity ) ),
+                                        /* translators: %s: a human time diff */
+                                        sprintf( esc_html__( 'Active %s', 'buddypress' ), bp_core_time_since( $member->last_activity ) )
+                                );
+                        }
+                }
+
+                $output .= '</div></div>';
+        }
+
+        // Set the final output.
+        $output = sprintf( '<div class="%1$s">%2$s</div>', $container_classes, $output );
+
+        /**
+         * Filter here to edit the output of the members block.
+         *
+         * @since 7.0.0
+         *
+         * @param string $output     The HTML output of the block.
+         * @param array  $block_args The block arguments.
+         * @param array  $members    The list of WP_User objects.
+         */
+        return apply_filters( 'bp_members_render_members_block_output', $output, $block_args, $members );
+}

trunk/src/bp-members/classes/class-bp-members-component.php

@@ -734 +734 @@
                                         ),
                                 ),
+                                'bp/members' => array(
+                                        'name'               => 'bp/members',
+                                        'editor_script'      => 'bp-members-block',
+                                        'editor_script_url'  => plugins_url( 'js/blocks/members.js', dirname( __FILE__ ) ),
+                                        'editor_script_deps' => array(
+                                                'wp-blocks',
+                                                'wp-element',
+                                                'wp-components',
+                                                'wp-i18n',
+                                                'wp-compose',
+                                                'wp-data',
+                                                'wp-api-fetch',
+                                                'wp-url',
+                                                'wp-block-editor',
+                                                'bp-block-components',
+                                                'lodash',
+                                        ),
+                                        'style'              => 'bp-members-block',
+                                        'style_url'          => plugins_url( 'css/blocks/members.css', dirname( __FILE__ ) ),
+                                        'attributes'         => array(
+                                                'itemIDs'            => array(
+                                                        'type'  => 'array',
+                                                        'items' => array(
+                                                                'type' => 'integer',
+                                                        ),
+                                                ),
+                                                'avatarSize'         => array(
+                                                        'type'    => 'string',
+                                                        'default' => 'full',
+                                                ),
+                                                'displayMentionSlug' => array(
+                                                        'type'    => 'boolean',
+                                                        'default' => true,
+                                                ),
+                                                'displayUserName'    => array(
+                                                        'type'    => 'boolean',
+                                                        'default' => true,
+                                                ),
+                                                'extraData'          => array(
+                                                        'type'    => 'string',
+                                                        'default' => 'none',
+                                                        'enum'    => array( 'last_activity', 'latest_update', 'none' ),
+                                                ),
+                                                'layoutPreference'   => array(
+                                                        'type'    => 'string',
+                                                        'default' => 'list',
+                                                        'enum'    => array( 'list', 'grid' ),
+                                                ),
+                                                'columns'            => array(
+                                                        'type'    => 'number',
+                                                        'default' => 2,
+                                                ),
+                                        ),
+                                        'render_callback'    => 'bp_members_render_members_block',
+                                ),
                         )
                 );