Simple block

index.js

import { __, _x } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import { search as icon } from '@wordpress/icons';

registerBlockType('sht/searchpanelopener', {
    title: __('Suchpanel-Button', 'sha'),
    description: __(
        'Bei einem Klick auf diesen Button auf der Website wird das Suchfenster aufgemacht.',
        'sha'
    ),
    icon,
    category: 'sht/blocks',
    supports: {
        group: false,
        mode: false,
        html: false,
    },
    attributes: {
        text: {
            type: 'string',
        },
    },
    keywords: ['search', 'suche', 'button'],
    edit: ({ attributes, setAttributes }) => {
        const { text } = attributes;

        return [
            <div className={`b-searchpanelopener`}>
                <RichText
                    className={`b-searchpanelopener__button o-button o-button--solid`}
                    value={text}
                    allowedFormats={[]}
                    placeholder={_x('Button-Beschriftung', 'Button placeholder text', 'sha')}
                    onChange={text => setAttributes({ text })}
                />
            </div>,
        ];
    },
    save({ attributes }) {
        const { text } = attributes;

        return (
            <div className={`b-searchpanelopener`} data-searchpanel-buttonblock>
                <RichText.Content
                    data-searchpanel-buttonblock-button
                    className={`b-searchpanelopener__button o-button o-button--solid`}
                    tagName={'button'}
                    value={text}
                />
            </div>
        );
    },
});