WordPress.org

Making WordPress.org

Changeset 8570


Ignore:
Timestamp:
04/02/2019 10:49:23 PM (3 years ago)
Author:
coreymckrill
Message:

WordCamp Blocks: Add link property to AvatarImage component

This adds an optional property that takes a URL. Setting it will
cause the image to be wrapped in an anchor tag. It also adds an
outer div container, regardless of whether a link is set or not.

Location:
sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/organizers/block-content.js

    r8566 r8570  
    4343
    4444                        { show_avatars &&
    45                             <div className={ classnames( 'wordcamp-organizer-avatar-container', 'align-' + decodeEntities( avatar_align ) ) }>
    46                                 <Disabled>
    47                                     <a href={ post.link } className="wordcamp-organizer-avatar-link">
    48                                         <AvatarImage
    49                                             className="wordcamp-organizer-avatar"
    50                                             name={ decodeEntities( post.title.rendered.trim() ) || '' }
    51                                             size={ avatar_size }
    52                                             url={ post.avatar_urls[ '24' ] }
    53                                         />
    54                                     </a>
    55                                 </Disabled>
    56                             </div>
     45                            <AvatarImage
     46                                className={ classnames( 'wordcamp-organizer-avatar-container', 'align-' + decodeEntities( avatar_align ) ) }
     47                                name={ decodeEntities( post.title.rendered.trim() ) || '' }
     48                                size={ avatar_size }
     49                                url={ post.avatar_urls[ '24' ] }
     50                                imageLink={ post.link }
     51                            />
    5752                        }
    5853
  • sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/shared/avatar/index.js

    r8005 r8570  
    77 * WordPress dependencies
    88 */
     9const { Disabled } = wp.components;
    910const { __, sprintf } = wp.i18n;
    10 const { addQueryArgs } = wp.url;
     11const { addQueryArgs, isURL } = wp.url;
    1112
    1213function AvatarImage( {
     
    1516    size,
    1617    url,
     18    imageLink,
    1719} ) {
    1820    const getSizedURL = ( avatar_url, avatar_size ) => {
     
    2022    };
    2123
    22     const alt = name ? sprintf( __( 'Avatar of %s', 'wordcamporg' ), name ) : '';
    23 
    24     return (
     24    let image = (
    2525        <img
    26             className={ classnames( 'avatar', 'avatar-' + size, 'photo', className ) }
     26            className={ classnames( 'avatar', 'avatar-' + size, 'photo' ) }
    2727            src={ getSizedURL( url, size ) }
    2828            srcSet={ getSizedURL( url, size * 2 ) + ' 2x' }
    29             alt={ alt }
     29            alt={ name ? sprintf( __( 'Avatar of %s', 'wordcamporg' ), name ) : '' }
    3030            width={ size }
    3131            height={ size }
    3232        />
    3333    );
     34
     35    if ( isURL( imageLink ) ) {
     36        image = (
     37            <Disabled>
     38                <a href={ imageLink } className={ classnames( 'wordcamp-image-link', 'wordcamp-avatar-link' ) }>
     39                    { image }
     40                </a>
     41            </Disabled>
     42        );
     43    }
     44
     45    image = (
     46        <div className={ classnames( 'wordcamp-image-container', 'wordcamp-avatar-container', className ) }>
     47            { image }
     48        </div>
     49    );
     50
     51    return image;
    3452}
    3553
  • sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/speakers/block-content.js

    r8564 r8570  
    109109
    110110                        { show_avatars &&
    111                             <div className={ classnames( 'wordcamp-speaker-avatar-container', 'align-' + decodeEntities( avatar_align ) ) }>
    112                                 <Disabled>
    113                                     <a href={ post.link } className="wordcamp-speaker-avatar-link">
    114                                         <AvatarImage
    115                                             className="wordcamp-speaker-avatar"
    116                                             name={ decodeEntities( post.title.rendered.trim() ) || '' }
    117                                             size={ avatar_size }
    118                                             url={ post.avatar_urls[ '24' ] }
    119                                         />
    120                                     </a>
    121                                 </Disabled>
    122                             </div>
     111                            <AvatarImage
     112                                className={ classnames( 'wordcamp-speaker-avatar-container', 'align-' + decodeEntities( avatar_align ) ) }
     113                                name={ decodeEntities( post.title.rendered.trim() ) || '' }
     114                                size={ avatar_size }
     115                                url={ post.avatar_urls[ '24' ] }
     116                                imageLink={ post.link }
     117                            />
    123118                        }
    124119
Note: See TracChangeset for help on using the changeset viewer.