Add CSS class for user roles in topics and replies

[netweb]

We should add a CSS class for user roles styling in topic and reply templates in bbp_get_reply_author_role() and bbp_get_topic_author_role()

e.g. <div class="bbp-author-role bbp-role-keymaster">Keymaster</div>

src/includes/replies/template.php

@@ -1430 +1430 @@
          */
         function bbp_get_reply_author_role( $args = array() ) {
 
+                $css_role = strtolower( bbp_get_user_display_role( bbp_get_reply_author_id( $reply_id ) ) );
+
                 // Parse arguments against default values
                 $r = bbp_parse_args( $args, array(
                         'reply_id' => 0,
                         'class'    => false,
-                        'before'   => '<div class="bbp-author-role">',
+                        'before'   => '<div class="bbp-author-role bbp-role-' . $css_role . '">',
                         'after'    => '</div>'
                 ), 'get_reply_author_role' );
 

[netweb]

#2737 was marked as a duplicate.

[douglsmith]

Wouldn't we want this role class applied up in the div for the whole post rather than on the role label? That way it could be used to target any aspect of the post that we might want to style differently based on role.

A use case for me would be to add a badge to the avatars based on role or to color the posts of admins differently.

[netweb]

Replying to douglsmith:

Wouldn't we want this role class applied up in the div for the whole post rather than on the role label? That way it could be used to target any aspect of the post that we might want to style differently based on role.

A use case for me would be to add a badge to the avatars based on role or to color the posts of admins differently.

I'd say yes and no, I think there is probably a use case for both and even more scenarios:

This is the full source of an entire reply:

<li>
    <div id="post-178" class="bbp-reply-header">
        <div class="bbp-meta">
            <span class="bbp-reply-post-date">March 20, 2015 at 11:58 am</span>
            <a href="http://src.wordpress-develop.dev/forums/topic/threaded-replies/#post-178" class="bbp-reply-permalink">#178</a>
            <span class="bbp-admin-links"><a href="http://src.wordpress-develop.dev/forums/reply/178/edit/" class="bbp-reply-edit-link">Edit</a> | <a href="http://src.wordpress-develop.dev/forums/reply/178/edit/?action=move&amp;reply_id=178" title="Move this reply" class="bbp-reply-move-link">Move</a> | <a href="http://src.wordpress-develop.dev/forums/topic/threaded-replies/edit/?action=split&amp;reply_id=178" title="Split the topic from this reply" class="bbp-topic-split-link">Split</a> | <a title="Move this item to the Trash" href="/forums/topic/threaded-replies/?action=bbp_toggle_reply_trash&amp;sub_action=trash&amp;reply_id=178&amp;_wpnonce=cf6f4aa4a8" class="bbp-reply-trash-link">Trash</a> | <a href="/forums/topic/threaded-replies/?action=bbp_toggle_reply_spam&amp;reply_id=178&amp;_wpnonce=e05d5baed8" class="bbp-reply-spam-link">Spam</a> | <a href="/forums/topic/threaded-replies/?action=bbp_toggle_reply_approve&amp;reply_id=178&amp;_wpnonce=ca48da155b" class="bbp-reply-approve-link">Unapprove</a> | <a href="/forums/topic/threaded-replies/?bbp_reply_to=178&amp;_wpnonce=4fada0db94#new-post" class="bbp-reply-to-link" onclick="return addReply.moveForm('post-178','178','new-reply-177','177');">Reply</a></span>
        </div>
        <!-- .bbp-meta -->
    </div>
    <!-- #post-178 -->
    <div class="even bbp-parent-forum-4 bbp-parent-topic-177 bbp-reply-position-2 user-id-1 topic-author post-178 reply type-reply status-publish hentry">
        <div class="bbp-reply-author">
            <a href="http://src.wordpress-develop.dev/forums/users/admin/" title="View admin's profile" class="bbp-author-avatar" rel="nofollow"><img alt="" src="http://0.gravatar.com/avatar/06e92fdf4a9a63441dff65945114b47f?s=80&amp;d=mm&amp;r=g" srcset="http://0.gravatar.com/avatar/06e92fdf4a9a63441dff65945114b47f?s=160&amp;d=mm&amp;r=g 2x" class="avatar avatar-80 photo" height="80" width="80"></a>
            <br><a href="http://src.wordpress-develop.dev/forums/users/admin/" title="View admin's profile" class="bbp-author-name" rel="nofollow">admin</a>
            <br>
            <div class="bbp-author-role">Keymaster</div>
            <div class="bbp-reply-ip"><span class="bbp-author-ip">(192.168.50.1)</span></div>
        </div>
        <!-- .bbp-reply-author -->
        <div class="bbp-reply-content">
            <p>:relieved: :relieved: </p>
        </div>
        <!-- .bbp-reply-content -->
    </div>
    <!-- .reply -->
</li>

The current proposed patch in this ticket add's a role class to the following:

<div class="bbp-author-role">Keymaster</div>

To become for example:

<div class="bbp-author-role bbp-role-keymaster">Keymaster</div>

We can already style on the immediate <div> above with per the example above using user-id-1 or topic-author, but not based on user roles, I also see a use case where being able to style the reply header based on author or role would also be convenient:

<div id="post-178" class="bbp-reply-header">

[douglsmith]

I'm currently using the user-id-* styles to put a badge on keymaster's avatars.That works but it requires a css rule for each each person and it requires updating the css if any of those people change. Having a role class at a higher level would make that much cleaner.

I also see a use case where being able to style the reply header based on author or role would also be convenient

That makes me wonder if the user-id-* and bbl-role-* styles should be up in the <li> tag since they describe everything below. (I suppose that's true of the id="post-*" too.)

[netweb]

The CSS can be filtered using bbp_get_forum_class(), bbp_get_topic_class() and bbp_get_reply_class() and are intended to replicate WP Core ​https://codex.wordpress.org/Function_Reference/post_class

In this case of replies, this is the applicable line:

<div class="even bbp-parent-forum-4 bbp-parent-topic-177 bbp-reply-position-2 user-id-1 topic-author post-178 reply type-reply status-publish hentry">

So....

function my_reply_class($classes) {
	$classes[] = 'test-class';
	return $classes;
}
add_filter( 'bbp_get_reply_class','my_reply_class' );

Using bbp_get_user_role() and bbp_get_reply_author_id() you should be able to achieve what your currently doing with user-id-* styles without having to have as much manual maintenance of people come and go.

[douglsmith]

Thanks for the pointers. That's great.

[netweb]

Patch 2692.diff​ isn't quite right, also needs the equivalent for topics, punting to 2.7

Fixes ​2692

[robinwpdeveloper]

@netweb I have made changes as per your suggestion. Let me know if I am missing anything.

@JJJ can you please review this pull request.
This is my first contribution to bbPress. :)

Let me know if I am missing anything.

Thanks @JJJ
I have made changes accordingly as you suggested.
Let me know if any more changes is needed.

[rudlinkon]

Replying to robinwpdeveloper:

@netweb I have made changes as per your suggestion. Let me know if I am missing anything.

Thanks for your changes. I have added a new suggestion please check it on the PR

[robinwpdeveloper]

Thanks @rudlinkon
Suggested changes are made and pushed.

[rudlinkon]

Replying to robinwpdeveloper:

Thanks @rudlinkon
Suggested changes are made and pushed.

Thank you. LGTM.

Thanks @mikachan for the review :)
Requested changes are made and pushed.

I think this PR is ready to commit.