Storybook: Add stories for BlockTitle Component

[SainathPoojary]

Part of #67165

What?

This PR adds Storybook stories for the BlockTitle component to improve component documentation and testability.

Why?

• Provide visual documentation for the BlockTitle component
• Enable interactive testing of different block title scenarios
• Improve development experience for Block Editor components

Testing Instructions

1. Run npm run storybook:dev
2. Open Storybook at http://localhost:50240/
3. Verify the following stories are present and functioning:
   • Default block title rendering
   • Block title with maximum length truncation
   • Different block type titles (paragraph, heading, nested blocks)

Screencast

Screen.Recording.2024-11-22.at.6.53.22.PM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: SainathPoojary <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[SainathPoojary]

Hi @t-hamano,

I have made the necessary changes to the PR based on the general feedback provided. Additionally, I reviewed other similar PRs with requested changes and implemented those adjustments as well. Could you kindly take a look at the PR when you have a moment?

Thank you!

2024-12-11.00-52-17.mp4

[t-hamano]

Thanks for the PR! If you have any questions about the feedback I left, feel free to ask 👍

[t-hamano]

Suggested change

	clientId: {
	control: {
	type: 'select',
	labels: {
	[ blocks[ 0 ].clientId ]: "Paragraph's Client ID",
	[ blocks[ 1 ].clientId ]: "Heading's Client ID",
	[ blocks[ 2 ].clientId ]: "Group's Client ID",
	},
	},
	options: [
	blocks[ 0 ].clientId,
	blocks[ 1 ].clientId,
	blocks[ 2 ].clientId,
	],
	description: 'Client ID of block.',
	table: {
	type: {
	summary: 'string',
	},
	},
	},
	clientId: {
	description: 'Client ID of block.',
	table: {
	type: {
	summary: 'string',
	},
	},
	},

Personally, I don't think this control needs to be selectable since this component is only concerned with the title string and it doesn't really matter what the block is.

[SainathPoojary]

Hey @t-hamano,

I’ve implemented the suggested changes as recommended. Let me know if there’s anything else you’d like me to adjust.

Thank you!