Skip to content

Filename / caption tab header above code block #2

Description

@ajaydsouza

Summary

Add a fileName block attribute rendered as an editor-style tab/label (e.g. functions.php) above the code block.

Details

  • New attribute in index.js with an InspectorControls text field; render in the block save output and in render_code_block() in class-blocks.php.
  • Style the tab to match the active Prism theme (background/foreground pulled from theme CSS, similar to enqueue_editor_canvas_styles() extraction).
  • Distinct from the existing title attribute (toolbar language label); could optionally migrate/reuse it.
  • Works in both client and server modes; also feeds the proposed download-snippet feature (Download snippet button #4) with a default filename.

Why

Tutorial-style posts almost always reference a target file. Competing plugins (Highlighting Code Block, Enlighter, SyntaxHighlighter Evolved) offer captions/titles, and readers expect the GitHub-style filename tab.

Speed to implement: Fast · Usefulness: Very High · Rank: 2

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature or request

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions