Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

The Heading Component provides:

• Selection of heading levels (h1 through h6)
• Editable text content
• Alignment controls for left, center, or right alignment
• Integration with WordPress block editor tools

---

JavaScript Implementation

Block Registration

The block is registered under the namespace basetheme/heading.

import { registerBlockType } from '@wordpress/blocks';
import { Heading, defaultHeadingAttributes } from '@utilities/heading/heading';
import { paragraph } from '@wordpress/icons';

registerBlockType('basetheme/heading', {
    title: 'Text',
    icon: paragraph,
    category: 'layout',
    parent: ['basetheme/grid-item', 'basetheme/container'],
    description: 'A Description',
    keywords: [],
    supports: {},
    attributes: {
        ...defaultHeadingAttributes,
    },
    edit: EditComponent,
    save: () => null, // No save function, handled by PHP
});

---

Attributes

Attribute	Type	Default	Description
tag	string	'h1'	The heading tag (e.g., h1, h2)
heading	string	''	The heading text content
alignment	string	'left'	Alignment of the heading text

---

Edit Component

The EditComponent utilizes the shared Heading utility:

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

---

PHP Implementation

The PHP logic ensures the proper rendering of the heading with the selected attributes.

<?php

namespace basetheme\Utilities;

Heading_Utils::init_heading($attributes);

?>

<div>
    <?php echo Heading_Utils::render_heading($attributes["heading"], $attributes, "bs-heading heading"); ?>
</div>

---

Example Usage

Editor View

1. Select the heading level (e.g., H1, H2).
2. Enter the heading text.
3. Adjust the alignment (left, center, or right).

Frontend View

<h1 class="bs-heading heading text-start">Heading Text</h1>

---

Conclusion

The Heading Component provides a robust and flexible solution for managing headings in WordPress blocks. It leverages reusable utilities to ensure consistent behavior and presentation across both editor and frontend environments.