Button

Button Primary

Button Secondary

---

The Button Component provides:

• Customizable button text and link
• Variant selection for button styling
• Integration with WordPress block editor

---

JavaScript Implementation

Block Registration

import { registerBlockType } from '@wordpress/blocks';
import { button } from '@wordpress/icons';
import { Button, defaultButtonAttributes } from '@utilities/button/button';

registerBlockType('basetheme/button', {
    title: 'Button',
    icon: button,
    category: 'layout',
    parent: ['basetheme/container', 'basetheme/grid-item'],
    description: 'A Description',
    keywords: [],
    supports: {},
    attributes: {
        ...defaultButtonAttributes,
    },
    edit: EditComponent,
    save: () => null,
});

---

Edit Component

function EditComponent(props) {
    const { attributes, setAttributes } = props;
    return (
        <>
            <Button attributes={attributes} setAttributes={setAttributes} />
        </>
    );
}

---

PHP Implementation

Initialization and Rendering

<?php

use basetheme\Utilities\Button_Utils;

Button_Utils::init_button($attributes);
?>

<div class="bs-button button-wrapper">
    <?php Button_Utils::render_button($attributes); ?>
</div>

---

Attributes

The defaultButtonAttributes object defines the expected button attributes.

Attribute	Type	Default	Description
linkText	string	'Mehr erfahren'	The button text
linkObject	object	{ url: '' }	Button link object
buttonColorName	string	'primary'	Button color variant (e.g., primary, secondary)

---

Example Usage

Block Editor

1. Input the button text (e.g., “Learn More”).
2. Set the link target using the link object control.
3. Choose a color variant (e.g., primary, secondary).

Frontend Output

<div class="bs-button button-wrapper">
    <a href="#" class="btn btn-primary">Mehr erfahren</a>
</div>

---

Conclusion

The Button Component is a reusable utility for call-to-action links. It enables customization of text, link, and style, ensuring consistent design across your WordPress theme.