block.js

const { registerBlockType } = wp.blocks;
const { InspectorControls, RichText, MediaUpload } = wp.blockEditor;
const { Button, PanelBody } = wp.components;
const { createElement } = wp.element;

registerBlockType('my-theme/custom-block', {
    title: 'Custom Block',
    icon: 'smiley',
    category: 'common',
    attributes: {
        heading: {
            type: 'string',
            source: 'html',
            selector: 'h2',
            default: '网站私人定制'
        },
        listItems: {
            type: 'array',
            default: [
                { title: '创意', description: '独立创意设计团队\n创造极致用户体验' },
                { title: '执着', description: '近乎偏执狂的\n态度精雕细琢' },
                { title: '服务', description: '一对一专属化\n贴心服务' },
                { title: '技术', description: '成熟便捷的智能\n化内容管理系统' },
                { title: '思维', description: '极具前沿思维\n紧跟行业趋势' }
            ],
            source: 'query',
            selector: 'ul li',
            query: {
                title: {
                    type: 'string',
                    source: 'html',
                    selector: 'span'
                },
                description: {
                    type: 'string',
                    source: 'html',
                    selector: 'p'
                }
            }
        },
        imageUrl: {
            type: 'string',
            default: wpinfo.themeUrl + '/skin/images/pic11.png'
        }
    },
    edit: function ({ attributes, setAttributes }) {
        const { heading, listItems, imageUrl } = attributes;

        const onChangeHeading = (value) => {
            setAttributes({ heading: value });
        };

        const onChangeListItem = (index, key, value) => {
            const updatedItems = [...listItems];
            updatedItems[index][key] = value;
            setAttributes({ listItems: updatedItems });
        };

        const onSelectImage = (media) => {
            setAttributes({ imageUrl: media.url });
        };

        return createElement(
            'div',
            {},
            createElement(
                InspectorControls,
                {},
                createElement(
                    PanelBody,
                    { title: 'Image' },
                    createElement(MediaUpload, {
                        onSelect: onSelectImage,
                        type: 'image',
                        value: imageUrl,
                        render: ({ open }) => {
                            return createElement(
                                Button,
                                { onClick: open, isSecondary: true },
                                'Select Image'
                            );
                        }
                    })
                )
            ),
            createElement(
                'div',
                { className: 'fw_srdz' },
                createElement(
                    'div',
                    { className: 'wrap' },
                    createElement(
                        'div',
                        { className: 'srdz_web' },
                        createElement(RichText, {
                            tagName: 'h2',
                            value: heading,
                            onChange: onChangeHeading
                        }),
                        createElement(
                            'div',
                            { className: 'srdz_list' },
                            createElement(
                                'ul',
                                {},
                                listItems.map((item, index) => {
                                    return createElement(
                                        'li',
                                        { key: index, style: { textAlign: 'left' } }, // Ensure left alignment
                                        createElement(RichText, {
                                            tagName: 'span',
                                            value: item.title,
                                            onChange: (value) =>
                                                onChangeListItem(index, 'title', value)
                                        }),
                                        createElement(RichText, {
                                            tagName: 'p',
                                            value: item.description.replace(/\n/g, ''), // Remove newline characters
                                            onChange: (value) =>
                                                onChangeListItem(index, 'description', value)
                                        })
                                    );
                                })
                            ),
                            createElement('div', { className: 'clear' }, '\u00A0')
                        )
                    ),
                    createElement(
                        'div',
                        { className: 'srdz_pic' },
                        createElement('img', { src: imageUrl, alt: '' })
                    ),
                    createElement('div', { className: 'clear' }, '\u00A0')
                )
            )
        );
    },
    save: function ({ attributes }) {
        const { heading, listItems, imageUrl } = attributes;

        return createElement(
            'div',
            { className: 'fw_srdz' },
            createElement(
                'div',
                { className: 'wrap' },
                createElement(
                    'div',
                    { className: 'srdz_web' },
                    createElement(RichText.Content, {
                        tagName: 'h2',
                        value: heading
                    }),
                    createElement(
                        'div',
                        { className: 'srdz_list' },
                        createElement(
                            'ul',
                            {},
                            listItems.map((item, index) => {
                                return createElement(
                                    'li',
                                    { key: index, style: { textAlign: 'left' } }, // Ensure left alignment
                                    createElement(RichText.Content, {
                                        tagName: 'span',
                                        value: item.title
                                    }),
                                    createElement(RichText.Content, {
                                        tagName: 'p',
                                        value: item.description.replace(/\n/g, '') // Remove newline characters for frontend
                                    })
                                );
                            })
                        ),
                        createElement('div', { className: 'clear' }, '\u00A0')
                    )
                ),
                createElement(
                    'div',
                    { className: 'srdz_pic' },
                    createElement('img', { src: imageUrl, alt: '' })
                ),
                createElement('div', { className: 'clear' }, '\u00A0')
            )
        );
    }
});