102 lines
2.7 KiB
JavaScript
102 lines
2.7 KiB
JavaScript
/**
|
|
* Avatar block for the WordPress block editor.
|
|
*
|
|
* This file is part of Avatar Privacy.
|
|
*
|
|
* @file This file provides the edit method for the Avatar block.
|
|
* @author Peter Putzer <github@mundschenk.at>
|
|
* @license GPL-2.0-or-later
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import {
|
|
PanelBody,
|
|
PanelRow,
|
|
RangeControl,
|
|
SelectControl,
|
|
} from '@wordpress/components';
|
|
import { withSelect } from '@wordpress/data';
|
|
import { InspectorControls } from '@wordpress/editor';
|
|
import { Fragment } from '@wordpress/element';
|
|
import { __, sprintf } from '@wordpress/i18n';
|
|
|
|
/**
|
|
* Renders the markup for editing the block attributes of the Avatar block.
|
|
*
|
|
* @param {Object} props The block properties.
|
|
* @param {Object} props.attributes The block attributes.
|
|
* @param {Object} props.setAttributes The attribute setter function.
|
|
* @return {Object} ECMAScript JSX Markup for the editor
|
|
*/
|
|
export default withSelect(
|
|
// Retrieve WordPress authors.
|
|
( select ) => ( { users: select( 'core' ).getAuthors() } )
|
|
)( ( { attributes, setAttributes, users } ) => {
|
|
// The authors list has not finished loading yet.
|
|
if ( ! users || users.length < 1 ) {
|
|
return __( 'Loading…', 'avatar-privacy' );
|
|
}
|
|
|
|
// Set default for user_id.
|
|
attributes.user_id = attributes.user_id || users[ 0 ].id;
|
|
|
|
// Find the current user object.
|
|
const findUser = ( userID ) =>
|
|
users.find( ( user ) => parseInt( userID ) === user.id );
|
|
const currentUser = findUser( attributes.user_id );
|
|
|
|
// Set the user attribute if missing.
|
|
attributes.user = attributes.user || currentUser;
|
|
|
|
return (
|
|
<Fragment>
|
|
<InspectorControls>
|
|
<PanelBody title={ __( 'Avatar', 'avatar-privacy' ) }>
|
|
<PanelRow>
|
|
<SelectControl
|
|
label={ __( 'User', 'avatar-privacy' ) }
|
|
value={ attributes.user_id }
|
|
options={ users.map( ( user ) => ( {
|
|
label: user.name,
|
|
value: user.id,
|
|
} ) ) }
|
|
onChange={ ( newUser ) =>
|
|
setAttributes( {
|
|
user_id: parseInt( newUser ),
|
|
user: findUser( newUser ),
|
|
} )
|
|
}
|
|
/>
|
|
</PanelRow>
|
|
<PanelRow>
|
|
<RangeControl
|
|
label={ __( 'Avatar Size', 'avatar-privacy' ) }
|
|
value={ attributes.avatar_size }
|
|
initialPosition={ attributes.avatar_size }
|
|
onChange={ ( newSize ) =>
|
|
setAttributes( { avatar_size: newSize } )
|
|
}
|
|
min={ 48 }
|
|
max={ 240 }
|
|
/>
|
|
</PanelRow>
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
<img
|
|
width={ attributes.avatar_size }
|
|
src={ attributes.user.avatar_urls[ 96 ] }
|
|
alt={ sprintf(
|
|
/* translators: user display name */
|
|
__( 'Avatar of %s', 'avatar-privacy' ),
|
|
attributes.user.name
|
|
) }
|
|
/>
|
|
</Fragment>
|
|
);
|
|
} );
|