Skip to content

Instantly share code, notes, and snippets.

@avillegasn
Last active March 5, 2018 10:41
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save avillegasn/6f5d30899f9d62455e723ba62a197571 to your computer and use it in GitHub Desktop.
edit: function( props ) {
var focus = props.focus;
var focusedEditable = props.focus ? props.focus.editable || 'name' : null;
var alignment = props.attributes.alignment;
var attributes = props.attributes;
var contactURL = props.attributes.contactURL;
var onSelectImage = function( media ) {
return props.setAttributes( {
mediaURL: media.url,
mediaID: media.id,
} );
};
function onChangeAlignment( newAlignment ) {
props.setAttributes( { alignment: newAlignment } );
}
return [
!! focus && el( // Display controls when the block is clicked on.
blocks.BlockControls,
{ key: 'controls' },
el(
blocks.AlignmentToolbar,
{
value: alignment,
onChange: onChangeAlignment,
}
),
),
el( 'div', { className: props.className },
el( 'div', {
className: attributes.mediaID ? 'nelio-testimonial-image image-active' : 'nelio-testimonial-image image-inactive',
style: attributes.mediaID ? { backgroundImage: 'url(' + attributes.mediaURL + ')' } : {}
},
el( blocks.MediaUpload, {
onSelect: onSelectImage,
type: 'image',
value: attributes.mediaID,
render: function( obj ) {
return el( components.Button, {
className: attributes.mediaID ? 'image-button' : 'button button-large',
onClick: obj.open
},
! attributes.mediaID ? i18n.__( 'Upload Image' ) : el( 'img', { src: attributes.mediaURL } )
); }
} )
),
el( 'div', {
className: 'nelio-testimonial-content', style: { textAlign: alignment } },
el( blocks.RichText, {
tagName: 'p',
inline: true,
placeholder: i18n.__( 'Write the testimonial here...' ),
value: attributes.testimonial,
onChange: function( newTestimonial ) {
props.setAttributes( { testimonial: newTestimonial } );
},
focus: focusedEditable === 'testimonial' ? focus : null,
onFocus: function( focus ) {
props.setFocus( _.extend( {}, focus, { editable: 'testimonial' } ) );
},
} ),
el( blocks.RichText, {
tagName: 'p',
className: 'nelio-testimonial-name',
inline: false,
placeholder: i18n.__( 'Name' ),
value: attributes.name,
onChange: function( newName ) {
props.setAttributes( { name: newName } );
},
focus: focusedEditable === 'name' ? focus : null,
onFocus: function( focus ) {
props.setFocus( _.extend( {}, focus, { editable: 'name' } ) );
},
} ),
el( blocks.RichText, {
tagName: 'p',
className: 'nelio-testimonial-position',
inline: false,
placeholder: i18n.__( 'Position' ),
value: attributes.position,
onChange: function( newPosition ) {
props.setAttributes( { position: newPosition } );
},
focus: focusedEditable === 'position' ? focus : null,
onFocus: function( focus ) {
props.setFocus( _.extend( {}, focus, { editable: 'position' } ) );
}
} ),
),
)
];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment