116 lines
No EOL
4.7 KiB
JavaScript
116 lines
No EOL
4.7 KiB
JavaScript
( function( blocks, element, editor, components, apiFetch ) {
|
|
var el = element.createElement;
|
|
var registerBlockType = blocks.registerBlockType;
|
|
var useBlockProps = editor.useBlockProps;
|
|
var BlockControls = editor.BlockControls;
|
|
var TextControl = components.TextControl;
|
|
var Button = components.Button;
|
|
var Spinner = components.Spinner;
|
|
var ToolbarGroup = components.ToolbarGroup;
|
|
var ToolbarButton = components.ToolbarButton;
|
|
var useState = element.useState;
|
|
|
|
registerBlockType( 'ansico/embed-url', {
|
|
title: 'Ansico Embed URL',
|
|
icon: 'admin-links',
|
|
category: 'embed',
|
|
attributes: {
|
|
url: { type: 'string' },
|
|
title: { type: 'string' },
|
|
imageUrl: { type: 'string' },
|
|
domain: { type: 'string' },
|
|
isEditing: { type: 'boolean', default: true }
|
|
},
|
|
|
|
edit: function( props ) {
|
|
var attributes = props.attributes;
|
|
var setAttributes = props.setAttributes;
|
|
var isFetching = useState( false );
|
|
var setIsFetching = isFetching[1];
|
|
var blockProps = useBlockProps();
|
|
|
|
function fetchUrlData() {
|
|
if ( ! attributes.url ) return;
|
|
setIsFetching( true );
|
|
apiFetch( {
|
|
path: '/ansico/v1/fetch-url',
|
|
method: 'POST',
|
|
data: { url: attributes.url }
|
|
} ).then( function( response ) {
|
|
setAttributes( {
|
|
title: response.title,
|
|
imageUrl: response.image,
|
|
domain: response.domain,
|
|
isEditing: false
|
|
} );
|
|
setIsFetching( false );
|
|
} ).catch( function( error ) {
|
|
alert( 'Error fetching data.' );
|
|
setIsFetching( false );
|
|
} );
|
|
}
|
|
|
|
if ( attributes.isEditing ) {
|
|
return el( 'div', blockProps,
|
|
el( 'div', { className: 'ansico-embed-input-container' },
|
|
el( TextControl, {
|
|
label: 'Enter article URL',
|
|
value: attributes.url,
|
|
onChange: function( val ) { setAttributes( { url: val } ); },
|
|
placeholder: 'https://...'
|
|
} ),
|
|
el( Button, {
|
|
isPrimary: true,
|
|
onClick: fetchUrlData,
|
|
disabled: isFetching[0] || ! attributes.url
|
|
}, isFetching[0] ? el( Spinner ) : 'Generate Embed' )
|
|
)
|
|
);
|
|
}
|
|
|
|
return el( 'div', blockProps,
|
|
el( BlockControls, {},
|
|
el( ToolbarGroup, {},
|
|
el( ToolbarButton, {
|
|
icon: 'edit',
|
|
label: 'Edit URL',
|
|
onClick: function() { setAttributes( { isEditing: true } ); }
|
|
} )
|
|
)
|
|
),
|
|
el( 'div', { className: 'ansico-embed-preview' },
|
|
attributes.imageUrl && el( 'img', { src: attributes.imageUrl, className: 'ansico-embed-image' } ),
|
|
el( 'div', { className: 'ansico-embed-content' },
|
|
el( 'p', { className: 'ansico-embed-domain' }, attributes.domain ),
|
|
el( 'h3', { className: 'ansico-embed-title' }, attributes.title )
|
|
)
|
|
)
|
|
);
|
|
},
|
|
|
|
save: function( props ) {
|
|
var attributes = props.attributes;
|
|
var blockProps = useBlockProps.save();
|
|
|
|
if ( ! attributes.url || attributes.isEditing ) return null;
|
|
|
|
return el( 'div', blockProps,
|
|
el( 'a', { href: attributes.url, className: 'ansico-embed-link', target: '_blank', rel: 'noopener noreferrer' },
|
|
el( 'div', { className: 'ansico-embed-preview' },
|
|
attributes.imageUrl && el( 'img', { src: attributes.imageUrl, className: 'ansico-embed-image' } ),
|
|
el( 'div', { className: 'ansico-embed-content' },
|
|
el( 'p', { className: 'ansico-embed-domain' }, attributes.domain ),
|
|
el( 'h3', { className: 'ansico-embed-title' }, attributes.title )
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
} );
|
|
} )(
|
|
window.wp.blocks,
|
|
window.wp.element,
|
|
window.wp.blockEditor,
|
|
window.wp.components,
|
|
window.wp.apiFetch
|
|
); |