Changeset 12749

Timestamp:

10/11/2020 01:14:24 PM (4 years ago)

Author:

imath

Message:

BP Blocks: introduce the BP Groups Block 🎈🎈🎈

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

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

Just like the BP Group block you can choose the Profile photo size (or disable it).

You can also choose to show or hide the group's name and some extra information about the group:

• The group's description.
• Last time the group was active.
• The amount of group members.

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

PS: this commit also fixes a failing test by adding the CSS files generated by the Members & Groups blocks sass files to the ones to disable from the stylelint CSS task.

Props espellcaste, imath

Fixes #8369

Location:

trunk

Files:

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

trunk/Gruntfile.js

@@ -35 +35 @@
             '!bp-core/admin/css/hello.css',
             '!bp-members/css/blocks/member.css',
-            '!bp-groups/css/blocks/group.css'
+            '!bp-groups/css/blocks/group.css',
+            '!bp-members/css/blocks/members.css',
+            '!bp-groups/css/blocks/groups.css'
         ],
 

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

@@ -202 +202 @@
     return apply_filters( 'bp_groups_render_group_block_output', $output, $group, $params );
 }
+
+/**
+ * Callback function to render the BP Groups Block.
+ *
+ * @since 7.0.0
+ *
+ * @param array $attributes The block attributes.
+ * @return string           HTML output.
+ */
+function bp_groups_render_groups_block( $attributes = array() ) {
+    $bp = buddypress();
+
+    $block_args = wp_parse_args(
+        $attributes,
+        array(
+            'itemIDs'          => array(),
+            'avatarSize'       => 'full',
+            'displayGroupName' => true,
+            'extraInfo'        => 'none',
+            'layoutPreference' => 'list',
+            'columns'          => '2',
+        )
+    );
+
+    $group_ids = wp_parse_id_list( $block_args['itemIDs'] );
+    if ( ! array_filter( $group_ids ) ) {
+        return '';
+    }
+
+    $container_classes = sprintf( 'bp-block-groups avatar-%s', $block_args['avatarSize'] );
+    if ( 'grid' === $block_args['layoutPreference'] ) {
+        $container_classes .= sprintf( ' is-grid columns-%d', (int) $block_args['columns'] );
+    }
+
+    $query = groups_get_groups(
+        array(
+            'include' => $group_ids,
+        )
+    );
+
+    // Initialize the output and the groups.
+    $output = '';
+    $groups = $query['groups'];
+
+    foreach ( $groups as $group ) {
+        $has_description    = false;
+        $group_item_classes = 'group-content';
+
+        if ( 'list' === $block_args['layoutPreference'] && 'description' === $block_args['extraInfo'] && isset( $group->description ) && $group->description ) {
+            $has_description    = true;
+            $group_item_classes = 'group-content has-description';
+        }
+
+        $output .= sprintf( '<div class="%s">', $group_item_classes );
+
+        // Get Member link.
+        $group_link = bp_get_group_permalink( $group );
+
+        // Set the Avatar output.
+        if ( $bp->avatar && $bp->avatar->show_avatars && ! bp_disable_group_avatar_uploads() && '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( $group_link ),
+                /* translators: %s: the group's name */
+                sprintf( esc_attr__( 'Profile photo of %s', 'buddypress' ), $group->display_name ),
+                esc_url(
+                    bp_core_fetch_avatar(
+                        array(
+                            'item_id' => $group->id,
+                            'object'  => 'group',
+                            'type'    => $block_args['avatarSize'],
+                            'html'    => false,
+                        )
+                    )
+                )
+            );
+        }
+
+        $output .= '<div class="group-description">';
+
+        if ( $block_args['displayGroupName'] ) {
+            $output .= sprintf(
+                '<strong><a href="%1$s">%2$s</a></strong>',
+                esc_url( $group_link ),
+                esc_html( $group->name )
+            );
+        }
+
+        // Add the latest activity the group posted.
+        if ( $has_description && $group->description ) {
+            $output .= sprintf(
+                '<div class="group-description-content">%s</div>',
+                bp_get_group_description( $group )
+            );
+        } elseif ( 'active' === $block_args['extraInfo'] ) {
+            $output .= sprintf(
+                '<time datetime="%1$s">%2$s</time>',
+                esc_attr( bp_core_get_iso8601_date( $group->last_activity ) ),
+                /* translators: %s: a human time diff. */
+                sprintf( esc_html__( 'Active %s', 'buddypress' ), bp_get_group_last_active( $group ) )
+            );
+        } elseif ( 'popular' === $block_args['extraInfo'] ) {
+            $total_member_count = $group->total_member_count;
+
+            $output .= sprintf(
+                '<div class="group-meta">%s</div>',
+                /* translators: %d: the number of group members. */
+                esc_html( sprintf( _n( '%d member', '%d members', $total_member_count, 'buddypress' ), $total_member_count ) )
+            );
+        }
+
+        $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 groups block.
+     *
+     * @since 7.0.0
+     *
+     * @param string $output     The HTML output of the block.
+     * @param array  $block_args The block arguments.
+     * @param array  $groups     The list of BP_Groups_Group objects.
+     */
+    return apply_filters( 'bp_groups_render_groups_block_output', $output, $block_args, $groups );
+}

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

@@ -1011 +1011 @@
                     ),
                 ),
+                'bp/groups' => array(
+                    'name'               => 'bp/groups',
+                    'editor_script'      => 'bp-groups-block',
+                    'editor_script_url'  => plugins_url( 'js/blocks/groups.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-groups-block',
+                    'style_url'          => plugins_url( 'css/blocks/groups.css', dirname( __FILE__ ) ),
+                    'attributes'         => array(
+                        'itemIDs'          => array(
+                            'type'  => 'array',
+                            'items' => array(
+                                'type' => 'integer',
+                            ),
+                        ),
+                        'avatarSize'       => array(
+                            'type'    => 'string',
+                            'default' => 'full',
+                        ),
+                        'displayGroupName' => array(
+                            'type'    => 'boolean',
+                            'default' => true,
+                        ),
+                        'extraInfo'        => array(
+                            'type'    => 'string',
+                            'default' => 'none',
+                            'enum'    => array( 'description', 'popular', 'active', 'none' ),
+                        ),
+                        'layoutPreference' => array(
+                            'type'    => 'string',
+                            'default' => 'list',
+                            'enum'    => array( 'list', 'grid' ),
+                        ),
+                        'columns'          => array(
+                            'type'    => 'number',
+                            'default' => 2,
+                        ),
+                    ),
+                    'render_callback'    => 'bp_groups_render_groups_block',
+                ),
             )
         );