Feature parity between FSE Blocks and regular blocks

[mtias]

We have several new full site editing blocks that we need to match feature-wise with what regular blocks offer:

• Site Title → Heading (@apeatling) Site Title Block: Add alignment and tag level support #22843, Site Title: Add support settings for colors, fonts, and line height #23007
• Site Tagline → Paragraph (@Copons) Site Tagline Block #23788
• Post Title → Heading (@apeatling @Copons) Post Title Block: Add alignment and heading level support #22872 Post Title Block: Add style attributes #24246
• Post Date → Paragraph (@Copons) Post Date Block: Add style attributes and restructure the edit function #23931
• Post Author → Paragraph (@Addison-Stavlo) Update post author block functionality and visual parity #22877, Update Post Author block to use __experimentalColor and __experimentalLineHeight #23044
• Post Content → Paragraph / Group (@noahtallen, Add alignment support to post content block #24014)
• Post Excerpt → Paragraph (@Addison-Stavlo) Post excerpt block - add color, fontSize, lineHeight, and text alignment. #23945
• Post Tags → Paragraph (@jeyip) Post Tags: Feature Parity for Customization #24069 Post Tags: Fix bug where no tags are rendered #24082
• Post Categories → Paragraph (@Copons) Post Hierarchical Terms Block #24091

---

• Comments → Paragraph / Group (@Addison-Stavlo) Post Comments block - add style supports for text and background settings. #24080 (follow up: Post Comments Block: Implementation Notes #24101)
• Comment Count → Paragraph (@Copons) Post Comments Counts: Add style attributes #24167
• Comment Form / Reply → Paragraph (@Copons) Post Comments Form: Add style attributes #24162 (follow up: Post Comments Form: Implementation Notes #24221)

[aduth]

For technical implementation, I'd wondered if it might be something to implement as deferring to the implementation of another block. We have some of the pieces of this, e.g. <BlockEdit />.

But in most of these cases, is it really much more than <RichText />, with a particular configuration? It would be nice if we could leverage components for the shared baseline. The main unknown at this point would be in implementing common attributes, which I think could be addressed as part of proposals of #15450.

Ideally then, the implementation for either the "Site Title" or "Heading" blocks could look something like:

function edit() {
    useTextAlignment();
    useTextColor();
    // useHeadingLevel(); // ???

    return <RichText { /* ... */ } />;
}

(For demonstration only, not a finished API)

[youknowriad]

@aduth Personally, I'm leaning more towards expanding the approach used in #21021 to all these customizations which is close to the proposal above with a bit less flexibility (support keys) but more capabilities, touching any part of the block registration/filters.

the missing piece is whether we can have something like the "save props" filter on the server to automatically augment the frontend output.

[aduth]

@youknowriad Yeah, in the context of this issue, I'm not so much concerned about the specific API for reusing common behaviors, but more to the point that we don't need "Site Title" block to be aware of a "Heading" block if each can be mostly recreated with relative ease by opting in to a combination of common components and block functionality.

In fact, I'm not much of a fan of using React hooks for this, since one of the requirements of this extensibility is in assigning new attributes to a block type, which is something which should be possible to be made known to the server-side.

[MichaelArestad]

Does this need design feedback here or can we provide feedback on individual PRs?

[mtias]

We need to map out what tools make sense for each.

[karmatosed]

I took a quick look at this to try and surface out what we could have on each block.

Default parity

Both the heading and paragraph block have the following:

Align: left/centre/right, Text styling: bold, italic, Link, Inline code, Inline image, Strikethrough, Text color.

There are also extra options for:

Hide Block Settings, Duplicate, Insert Before, Insert After, Edit as HTML, Add to Reusable blocks, Group, Remove Block.

FSE blocks

I would say the following should exist across all:

Align: left/centre/right, Text styling: bold, italic, Text color

The ones I am not as sure about would be:

Link, Inline code, Inline image, Strikethrough

The options probably should exist across all, but I could see an argument for trimming some of those.