Ansico-SoMe-plugin/ansico-some-plugin/block.js

( function( blocks, element, blockEditor, data, components ) {
    var el = element.createElement;
    var useBlockProps = blockEditor.useBlockProps;
    var InspectorControls = blockEditor.InspectorControls;
    var PanelBody = components.PanelBody;
    var RangeControl = components.RangeControl;
    var TextControl = components.TextControl;
    var TextareaControl = components.TextareaControl;
    var useSelect = data.useSelect;

    function getSharedBlockSettings( title, icon, description, keywords ) {
        return {
            apiVersion: 2,
            title: title,
            icon: icon,
            category: 'ansico',
            description: description,
            keywords: keywords || [ 'ansico', 'micropost', 'sidebar' ],
            supports: {
                inserter: true,
                multiple: true,
                reusable: false,
                html: false
            }
        };
    }

    blocks.registerBlockType( 'ansico/some-author', Object.assign( getSharedBlockSettings(
        'Ansico Author Profile',
        'admin-users',
        'Shows the current author profile on the front end.',
        [ 'ansico', 'author', 'profile', 'sidebar' ]
    ), {
        edit: function() {
            var blockProps = useBlockProps();
            return el('div', Object.assign({}, blockProps, {style: {padding: '20px', background: '#f7f9f9', border: '1px dashed #ccc', borderRadius: '8px', textAlign: 'center'}}),
                el('strong', {}, 'Ansico Author Profile'),
                el('p', {style: {margin: '5px 0 0 0', color: '#536471'}}, 'Automatically displays the author\'s information on the front end.')
            );
        },
        save: function() { return null; }
    } ) );

    blocks.registerBlockType( 'ansico/some-comment', Object.assign( getSharedBlockSettings(
        'Ansico SoMe Comment',
        'format-status',
        'Displays a social-style comment card.',
        [ 'ansico', 'comment', 'social', 'micropost' ]
    ), {
        attributes: {
            text: { type: 'string', default: '' },
            url: { type: 'string', default: '' },
            time: { type: 'string', default: '' }
        },
        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;
            }, [] );
            var avatarUrl = authorDetails && authorDetails.avatar_urls ? authorDetails.avatar_urls['48'] : '';
            var name = authorDetails ? authorDetails.name : 'Your Name';
            function parseMD(str) {
                if(!str) return 'Write your message...';
                var html = str;
                html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
                html = html.replace(/\*([^\*]+)\*/g, '<em>$1</em>');
                html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
                html = html.replace(/^>\s+(.*)/gm, '<blockquote>$1</blockquote>');
                html = html.replace(/\n/g, '<br/>');
                return html;
            }
            return el('div', blockProps,
                el('div', { className: 'ansico-some-tweet' },
                    el('img', { src: avatarUrl, className: 'ansico-tweet-avatar', alt: '' }),
                    el('div', { className: 'ansico-tweet-content' },
                        el('div', { className: 'ansico-tweet-header' },
                            el('span', { className: 'ansico-tweet-name' }, name),
                            el('span', { className: 'ansico-tweet-time' }, props.attributes.time || 'Just now')
                        ),
                        el('div', { className: 'ansico-tweet-text', dangerouslySetInnerHTML: { __html: parseMD(props.attributes.text) } }),
                        props.attributes.url && el('div', { className: 'ansico-tweet-footer' }, 'Permalink: ', el('a', {href: '#'}, props.attributes.url))
                    )
                ),
                el('div', { style: { marginTop: '15px', padding: '15px', border: '1px dashed #ccc', borderRadius: '8px', background: '#f9f9f9' } },
                    el(TextareaControl, { label: 'Message', value: props.attributes.text, onChange: function(v){ props.setAttributes({text:v}); } }),
                    el(TextControl, { label: 'Permalink URL', value: props.attributes.url, onChange: function(v){ props.setAttributes({url:v}); } }),
                    el(TextControl, { label: 'Time', value: props.attributes.time, onChange: function(v){ props.setAttributes({time:v}); } })
                )
            );
        },
        save: function() { return null; }
    } ) );

    blocks.registerBlockType( 'ansico/micropost-form', Object.assign( getSharedBlockSettings(
        'Ansico Micropost Form',
        'edit',
        'Shows the micropost form on the front end.',
        [ 'ansico', 'micropost', 'form', 'sidebar' ]
    ), {
        edit: function() { return el('div', useBlockProps(), 'Micropost Form (shown on the front end)'); },
        save: function() { return null; }
    } ) );

    blocks.registerBlockType( 'ansico/micropost-list', Object.assign( getSharedBlockSettings(
        'Ansico Micropost List',
        'list-view',
        'Lists recent microposts.',
        [ 'ansico', 'micropost', 'list', 'feed' ]
    ), {
        attributes: {
            postsPerPage: { type: 'number', default: 20 },
            tagFilter: { type: 'string', default: '' }
        },
        edit: function(props) {
            var blockProps = useBlockProps();
            return el(element.Fragment, {},
                el(InspectorControls, {},
                    el(PanelBody, { title: 'Settings' },
                        el(RangeControl, {
                            label: 'Posts per page',
                            value: props.attributes.postsPerPage,
                            onChange: function(v) { props.setAttributes({ postsPerPage: v }); },
                            min: 1,
                            max: 100
                        }),
                        el(TextControl, {
                            label: 'Filter by tag (optional)',
                            help: 'For example, write "news" to show only posts with that tag.',
                            value: props.attributes.tagFilter,
                            onChange: function(v) { props.setAttributes({ tagFilter: v }); }
                        })
                    )
                ),
                el('div', blockProps, 'Micropost List (' + props.attributes.postsPerPage + ' per page)')
            );
        },
        save: function() { return null; }
    } ) );

    blocks.registerBlockType( 'ansico/micropost-comments', Object.assign( getSharedBlockSettings(
        'Ansico Micropost Comments',
        'admin-comments',
        'Shows recent comments on microposts.',
        [ 'ansico', 'micropost', 'comments', 'sidebar' ]
    ), {
        attributes: {
            commentsToShow: { type: 'number', default: 5 }
        },
        edit: function(props) {
            var blockProps = useBlockProps();
            return el(element.Fragment, {},
                el(InspectorControls, {},
                    el(PanelBody, { title: 'Settings' },
                        el(RangeControl, {
                            label: 'Number of comments',
                            value: props.attributes.commentsToShow,
                            onChange: function(v) { props.setAttributes({ commentsToShow: v }); },
                            min: 1,
                            max: 20
                        })
                    )
                ),
                el('div', Object.assign({}, blockProps, {style: {padding: '16px', background: '#f7f9f9', border: '1px dashed #ccc', borderRadius: '8px'}}),
                    el('strong', {}, 'Ansico Micropost Comments'),
                    el('p', {style: {margin: '6px 0 0 0', color: '#536471'}}, 'Shows the latest ' + props.attributes.commentsToShow + ' comments for microposts on the front end.')
                )
            );
        },
        save: function() { return null; }
    } ) );

    blocks.registerBlockType( 'ansico/micropost-top-tags', Object.assign( getSharedBlockSettings(
        'Ansico Micropost Top Tags',
        'tag',
        'Shows the most used micropost tags.',
        [ 'ansico', 'micropost', 'tags', 'sidebar' ]
    ), {
        attributes: {
            tagsToShow: { type: 'number', default: 10 }
        },
        edit: function(props) {
            var blockProps = useBlockProps();
            return el(element.Fragment, {},
                el(InspectorControls, {},
                    el(PanelBody, { title: 'Settings' },
                        el(RangeControl, {
                            label: 'Number of tags',
                            value: props.attributes.tagsToShow,
                            onChange: function(v) { props.setAttributes({ tagsToShow: v }); },
                            min: 1,
                            max: 30
                        })
                    )
                ),
                el('div', Object.assign({}, blockProps, {style: {padding: '16px', background: '#f7f9f9', border: '1px dashed #ccc', borderRadius: '8px'}}),
                    el('strong', {}, 'Ansico Micropost Top Tags'),
                    el('p', {style: {margin: '6px 0 0 0', color: '#536471'}}, 'Shows the most used micropost tags. Count: ' + props.attributes.tagsToShow + '.')
                )
            );
        },
        save: function() { return null; }
    } ) );

    blocks.registerBlockType( 'ansico/micropost-activity', Object.assign( getSharedBlockSettings(
        'Ansico Micropost Activity',
        'update',
        'Shows combined micropost and comment activity.',
        [ 'ansico', 'micropost', 'activity', 'feed' ]
    ), {
        attributes: {
            itemsPerPage: { type: 'number', default: 10 }
        },
        edit: function(props) {
            var blockProps = useBlockProps();
            return el(element.Fragment, {},
                el(InspectorControls, {},
                    el(PanelBody, { title: 'Settings' },
                        el(RangeControl, {
                            label: 'Items per page',
                            value: props.attributes.itemsPerPage,
                            onChange: function(v) { props.setAttributes({ itemsPerPage: v }); },
                            min: 1,
                            max: 30
                        })
                    )
                ),
                el('div', Object.assign({}, blockProps, {style: {padding: '16px', background: '#f7f9f9', border: '1px dashed #ccc', borderRadius: '8px'}}),
                    el('strong', {}, 'Ansico Micropost Activity'),
                    el('p', {style: {margin: '6px 0 0 0', color: '#536471'}}, 'Shows microposts and comments together, newest first. Unlimited list with pagination. Items per page: ' + props.attributes.itemsPerPage + '.')
                )
            );
        },
        save: function() { return null; }
    } ) );

    blocks.registerBlockType( 'ansico/embed-url', Object.assign( getSharedBlockSettings(
        'Ansico Embed URL',
        'admin-links',
        'Embeds a URL preview card.',
        [ 'ansico', 'embed', 'url', 'link' ]
    ), {
        attributes: { url: { type: 'string' }, isEditing: { type: 'boolean', default: true } },
        edit: function(props) {
            return el('div', useBlockProps(), el(TextControl, { label: 'URL', value: props.attributes.url, onChange: function(v){ props.setAttributes({url:v}); } }));
        },
        save: function() { return null; }
    } ) );

    blocks.registerBlockType( 'ansico/micropost-search', Object.assign( getSharedBlockSettings(
        'Ansico Micropost Search',
        'search',
        'Shows a micropost search field.',
        [ 'ansico', 'micropost', 'search', 'sidebar' ]
    ), {
        edit: function() { return el('div', useBlockProps(), 'Micropost Search Field'); },
        save: function() { return null; }
    } ) );

} )( window.wp.blocks, window.wp.element, window.wp.blockEditor, window.wp.data, window.wp.components );