https://www.toptradersunplugged.com/wp-content/themes/ttu-2021/wordpress/blocks/quote/quote.js?ver=1638168306

1const { quoteIcon, twitterIcon } = ttuBlockQuote;
2
3( function ( blocks, element, blockEditor ) {
4    var el = element.createElement;
5    var useBlockProps = blockEditor.useBlockProps;
6
7	blocks.registerBlockType( 'ttu/quote', {
8		title: 'TTU: Quote',
9		icon: 'format-quote',
10		category: 'ttu',
11		attributes: {
12            content: {
13                type: 'string',
14                default: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
15            },
16            guestName: {
17                type: 'string',
18                default: 'Fname Lname'
19            },
20            tweet: {
21                type: 'string',
22                default: 'Tweet this quote'
23            },
24            imageQuote: {
25                type: 'string',
26                default: quoteIcon
27            },
28            imageTwitter: {
29                type: 'string',
30                default: twitterIcon
31            }
32        },
33        edit: function( props ) {
34            return (
35                el( 'div', { className: 'ttu-block-edit__quote' },
36                    el(
37                        blockEditor.RichText,
38                        {
39                            tagName: 'div',
40                            className: 'ttu-block-edit__quote__content',
41                            value: props.attributes.content,
42                            onChange: function( content ) {
43                                props.setAttributes( { content: content } );
44                            }
45                        }
46                    ),
47                    el('span').innerHtml = '—',
48                    el(
49                        blockEditor.RichText,
50                        {
51                            tagName: 'div',
52                            className: 'ttu-block-edit__quote__guest-name',
53                            value: props.attributes.guestName,
54                            onChange: function( guestName ) {
55                                props.setAttributes( { guestName: guestName } );
56                            }
57                        }
58                    )
59                )
60            );
61        },
62        save: function( props ) {
63            return (
64                el( 'div', { className: 'ttu-block__quote' },
65                    el( 'img', { className: 'ttu-block__quote__quote-icon', src: props.attributes.imageQuote } ),
66                    el( 'div', { className: 'ttu-block__quote__main' },
67                        el( blockEditor.RichText.Content, {
68                            tagName: 'p',
69                            className: 'ttu-block__quote__main__content',
70                            value: props.attributes.content,
71                        } ),
72                        el( blockEditor.RichText.Content, { 
73                            tagName: 'span',
74                            className: 'ttu-block__quote__main__guest-name',
75                            value: '—' + props.attributes.guestName,
76                        } ),
77                        el( 'div', { className: 'ttu-block__quote__main__twitter' },
78                            el( 'img', { className: 'ttu-block__quote__main__twitter__icon', src: props.attributes.imageTwitter } ),
79                            el( 'a', { className: 'ttu-block__quote__main__twitter__link', href: `https://twitter.com/intent/tweet?text=${props.attributes.content} —${props.attributes.guestName}`}, props.attributes.tweet )
80                        )
81                    ),
82                )
83            );
84        },
85	} );
86} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );