266 lines
12 KiB
JavaScript
266 lines
12 KiB
JavaScript
( 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 );
|