73 lines
4.6 KiB
JavaScript
73 lines
4.6 KiB
JavaScript
|
( function( blocks, element, blockEditor, data, components ) {
|
||
|
|
var el = element.createElement;
|
||
|
|
var useBlockProps = blockEditor.useBlockProps;
|
||
|
|
var InnerBlocks = blockEditor.InnerBlocks;
|
||
|
|
var TextControl = components.TextControl;
|
||
|
|
var TextareaControl = components.TextareaControl;
|
||
|
|
var useSelect = data.useSelect;
|
||
|
|
var Spinner = components.Spinner;
|
||
|
|
|
||
|
|
blocks.registerBlockType( 'ansico/some-author', {
|
||
|
|
title: 'Ansico Author Profile', icon: 'admin-users', category: 'widgets', supports: { html: false },
|
||
|
|
edit: function( props ) {
|
||
|
|
var blockProps = useBlockProps();
|
||
|
|
var authorDetails = useSelect( function( select ) {
|
||
|
|
var core = select( 'core' ); var editor = select( 'core/editor' );
|
||
|
|
var authorId = editor ? editor.getCurrentPostAttribute( 'author' ) : null;
|
||
|
|
if ( ! authorId ) { var currentUser = core.getCurrentUser(); authorId = currentUser ? currentUser.id : null; }
|
||
|
|
return authorId ? core.getUser( authorId ) : null;
|
||
|
|
}, [] );
|
||
|
|
if ( ! authorDetails ) { return el( 'div', blockProps, el( Spinner ) ); }
|
||
|
|
var avatarUrl = authorDetails.avatar_urls ? authorDetails.avatar_urls['96'] : '';
|
||
|
|
|
||
|
|
return el( 'div', blockProps,
|
||
|
|
el( 'div', { className: 'ansico-some-author-box' },
|
||
|
|
el( 'img', { src: avatarUrl, className: 'ansico-some-avatar', alt: 'Avatar' } ),
|
||
|
|
el( 'div', { className: 'ansico-some-info' },
|
||
|
|
el( 'h3', { className: 'ansico-some-name' }, authorDetails.name || 'Author Name' ),
|
||
|
|
el( 'p', { className: 'ansico-some-bio' }, authorDetails.description || '...' ),
|
||
|
|
el( 'div', { className: 'ansico-some-social-links' },
|
||
|
|
el( InnerBlocks, { allowedBlocks: [ 'core/social-links' ], template: [ [ 'core/social-links', {}, [] ] ] } )
|
||
|
|
)
|
||
|
|
)
|
||
|
|
)
|
||
|
|
);
|
||
|
|
},
|
||
|
|
save: function() { return el( 'div', useBlockProps.save(), el( InnerBlocks.Content ) ); }
|
||
|
|
} );
|
||
|
|
|
||
|
|
blocks.registerBlockType( 'ansico/some-comment', {
|
||
|
|
title: 'Ansico SoMe Comment', icon: 'format-status', category: 'widgets', supports: { html: false },
|
||
|
|
attributes: { text: { type: 'string', default: '' }, url: { type: 'string', default: '' }, time: { type: 'string', default: '' } },
|
||
|
|
edit: function( props ) {
|
||
|
|
var attributes = props.attributes; var setAttributes = props.setAttributes; var blockProps = useBlockProps();
|
||
|
|
var authorDetails = useSelect( function( select ) {
|
||
|
|
var core = select( 'core' ); var editor = select( 'core/editor' );
|
||
|
|
var authorId = editor ? editor.getCurrentPostAttribute( 'author' ) : null;
|
||
|
|
if ( ! authorId ) { var currentUser = core.getCurrentUser(); authorId = currentUser ? currentUser.id : null; }
|
||
|
|
return authorId ? core.getUser( authorId ) : null;
|
||
|
|
}, [] );
|
||
|
|
if ( ! authorDetails ) { return el( 'div', blockProps, el( Spinner ) ); }
|
||
|
|
var avatarUrl = authorDetails.avatar_urls ? authorDetails.avatar_urls['48'] : '';
|
||
|
|
|
||
|
|
return el( 'div', blockProps,
|
||
|
|
el( 'div', { className: 'ansico-some-tweet' },
|
||
|
|
el( 'img', { src: avatarUrl, className: 'ansico-tweet-avatar', alt: 'Avatar' } ),
|
||
|
|
el( 'div', { className: 'ansico-tweet-content' },
|
||
|
|
el( 'div', { className: 'ansico-tweet-header' },
|
||
|
|
el( 'span', { className: 'ansico-tweet-name' }, authorDetails.name || 'Author' ),
|
||
|
|
el( 'span', { className: 'ansico-tweet-time' }, attributes.time || 'Time' )
|
||
|
|
),
|
||
|
|
el( 'div', { className: 'ansico-tweet-text' }, attributes.text || 'Message text...' )
|
||
|
|
)
|
||
|
|
),
|
||
|
|
el( 'div', { style: { marginTop: '10px', borderTop: '1px solid #ddd', paddingTop: '10px' } },
|
||
|
|
el( TextareaControl, { label: 'Comment Text', value: attributes.text, onChange: function( v ) { setAttributes( { text: v } ); } } ),
|
||
|
|
el( TextControl, { label: 'Source URL', value: attributes.url, onChange: function( v ) { setAttributes( { url: v } ); } } ),
|
||
|
|
el( TextControl, { label: 'Time (e.g. 2026-04-12 19:43)', value: attributes.time, onChange: function( v ) { setAttributes( { time: v } ); } } )
|
||
|
|
)
|
||
|
|
);
|
||
|
|
},
|
||
|
|
save: function() { return null; }
|
||
|
|
} );
|
||
|
|
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor, window.wp.data, window.wp.components );
|