Skip to:
Content

bbPress.org

Opened 5 years ago

Last modified 4 years ago

#2692 new defect

Add CSS class for user roles in topics and replies

Reported by: netweb Owned by:
Milestone: 2.7 Priority: normal
Severity: normal Version:
Component: General Keywords: good-first-bug needs-patch
Cc: doug@…

Description

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

     
    14301430         */
    14311431        function bbp_get_reply_author_role( $args = array() ) {
    14321432
     1433                $css_role = strtolower( bbp_get_user_display_role( bbp_get_reply_author_id( $reply_id ) ) );
     1434
    14331435                // Parse arguments against default values
    14341436                $r = bbp_parse_args( $args, array(
    14351437                        'reply_id' => 0,
    14361438                        'class'    => false,
    1437                         'before'   => '<div class="bbp-author-role">',
     1439                        'before'   => '<div class="bbp-author-role bbp-role-' . $css_role . '">',
    14381440                        'after'    => '</div>'
    14391441                ), 'get_reply_author_role' );
    14401442

Attachments (1)

2692.diff (729 bytes) - added by netweb 5 years ago.

Download all attachments as: .zip

Change History (10)

#1 @netweb
5 years ago

  • Milestone changed from Awaiting Review to 2.6

@netweb
5 years ago

#2 @netweb
5 years ago

  • Keywords has-patch commit added; needs-patch removed

#3 @netweb
5 years ago

#2737 was marked as a duplicate.

#4 follow-up: @douglsmith
5 years ago

  • Cc doug@… added

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.

#5 in reply to: ↑ 4 @netweb
5 years ago

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">

#6 @douglsmith
5 years ago

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.)

#7 @netweb
5 years ago

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.

#8 @douglsmith
5 years ago

Thanks for the pointers. That's great.

#9 @netweb
4 years ago

  • Keywords needs-patch added; has-patch commit removed
  • Milestone changed from 2.6 to 2.7

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

Note: See TracTickets for help on using tickets.