Custom Development: Enhancing the Simple Header with an Extra Editable Title Field

As part of our ongoing custom development work at Sreyas IT Solutions, we’ve extended the capabilities of the Simple Header custom Gutenberg block. This enhancement introduces a new editable title field called extraTitle, designed to offer greater flexibility for content creators. By allowing the addition of an <h4> heading, users can now create more layered, structured headers—ideal for content requiring hierarchical clarity or segmented title presentation.

Objective of Custom Development

The primary objective of this custom development task is to add a new field, extraTitle, to the existing Simple Header block. This field allows content creators to include an additional title layer, improving visual hierarchy and content organization in both the editor and front-end view.

Features Added

1. Attribute Added

• extraTitle
  
  • Type: string
    
  • Source: html
    
  • Selector: h4
    
  • Purpose: Stores the content for an additional title field, which will be rendered as an <h4> element in both the editor and the front-end output.
    

2. UI Component Used

RichText

A new RichText field has been introduced in the block editor, enabling inline editing of the extraTitle content. This follows modern WordPress block development practices in our custom development projects.

Implementation Details

Attribute Update – block.json

The extraTitle attribute is declared in the block’s metadata file:

{
  "apiVersion": 2,
  "name": "sreyas/simple-header",
  "title": "Simple Header with Extra Title",
  "category": "widgets",
  "icon": "heading",
  "description": "Custom header with extra title.",
  "attributes": {
    "title": {
      "type": "string",
      "source": "html",
      "selector": "h1"
    },
    "header": {
      "type": "string",
      "source": "html",
      "selector": "h2"
    },
    "subtitle": {
      "type": "string",
      "source": "html",
      "selector": "h3"
    },
    "extraTitle": {
      "type": "string",
      "source": "html",
      "selector": "h4"
    }
  },
  "editorScript": "file:./build/index.js"
}

 Block Logic – src/index.js

Edit Function

The edit() function now includes a RichText input for extraTitle, along with existing fields for title, header, and subtitle.

import { registerBlockType } from '@wordpress/blocks';
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

registerBlockType('sreyas/simple-header', {
  edit({ attributes, setAttributes }) {
    const { title, header, subtitle, extraTitle } = attributes;
    const blockProps = useBlockProps();

    return (
      <div {...blockProps}>
        <RichText
          tagName="h1"
          value={title}
          onChange={(value) => setAttributes({ title: value })}
          placeholder={__('Enter title', 'simple-header')}
        />
        <RichText
          tagName="h2"
          value={header}
          onChange={(value) => setAttributes({ header: value })}
          placeholder={__('Enter header', 'simple-header')}
        />
        <RichText
          tagName="h3"
          value={subtitle}
          onChange={(value) => setAttributes({ subtitle: value })}
          placeholder={__('Enter subtitle', 'simple-header')}
        />
        <RichText
          tagName="h4"
          value={extraTitle}
          onChange={(value) => setAttributes({ extraTitle: value })}
          placeholder={__('Enter extra title', 'simple-header')}
        />
      </div>
    );
  },

Save Function

The save() function ensures that the extraTitle content is rendered on the front end inside an <h4> tag.

save({ attributes }) {
    const { title, header, subtitle, extraTitle } = attributes;
    const blockProps = useBlockProps.save();
    return (
      <div {...blockProps}>
        <h1>{title}</h1>
        <h2>{header}</h2>
        <h3>{subtitle}</h3>
        <h4>{extraTitle}</h4>
      </div>
    );
  },
});

Through this focused custom development update, we’ve improved the Simple Header Gutenberg block by adding support for a fourth editable field: extraTitle. This enhancement enables better content structure, particularly in pages requiring a strong visual hierarchy.

By updating both the block.json metadata and the JavaScript logic for editing and saving content, we’ve ensured a seamless user experience. This sets a foundation for future modules that may include even more advanced header configurations or dynamic layout features—demonstrating the power and scalability of tailored custom development in WordPress block building.