Skip to content

feat: add story for WritingFlow component#70841

Open
vedanti92 wants to merge 2 commits intoWordPress:trunkfrom
vedanti92:add/storybook-writing-flow
Open

feat: add story for WritingFlow component#70841
vedanti92 wants to merge 2 commits intoWordPress:trunkfrom
vedanti92:add/storybook-writing-flow

Conversation

@vedanti92
Copy link

Part of: #67165

What?

This PR adds a Storybook story for the WritingFlow component in @wordpress/block-editor.

Why?

It helps improve visual documentation for WritingFlow and demonstrates how it manages focus and keyboard navigation across editable blocks. It also supports Gutenberg's ongoing effort to expand Storybook coverage for Block Editor components.

How?

  • Imported and rendered WritingFlow with vertically stacked editable blocks.
  • Used useRef and useState to manage focus and visually highlight the active block.
  • Handled keyboard navigation (Tab and arrow keys) between multiple blocks.
  • Styled the blocks for better visibility and usability during testing.

Testing Instructions

  1. Run Storybook: npm run storybook:dev
  2. Open: http://localhost:50240/
  3. Navigate to: BlockEditor / WritingFlow
  4. Verify the following:
    • The editable blocks render correctly.
    • Keyboard navigation (Tab, ↑, ↓) moves focus between blocks.
    • Each block is independently editable.

Screenshots or screencast

WritingFlow.mp4

@vedanti92 vedanti92 requested a review from ellatrix as a code owner July 22, 2025 12:03
@github-actions
Copy link

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: vedanti92 <vedanti92@git.wordpress.org>

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

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jul 22, 2025
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @vedanti92! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@t-hamano t-hamano added [Type] Developer Documentation Documentation for developers Storybook Storybook and its stories for components labels Jul 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants