Skip to content

Conversation

@Shekhar0109
Copy link

@Shekhar0109 Shekhar0109 commented Aug 31, 2025

What?

Closes #65238

This PR implements structural and maintainability improvements in the document-bar component:

  • Normalized line endings (LF) across JS and SCSS files.
  • Fixed linting and style issues in index.js and style.scss.
  • Refactored the Document Bar layout:
    • Moved the post title (<h1>) out of the command button to ensure valid HTML semantics.
    • Separated the command button and title as siblings inside .editor-document-bar.
    • Adjusted flexbox alignment so the title stays centered and the command button is aligned to the right.
  • Ensured Husky pre-commit checks pass after normalization and style fixes.

These changes improve code structure, semantics, and maintainability without changing functionality or the user experience.

Why?

The Document Bar previously had several technical and semantic issues:

  • Invalid HTML (heading inside a button).
  • Flex layout that could misalign the title and command button.
  • Repeated or redundant headings that affect accessibility and readability.

By addressing these issues first, this PR prepares the component for further accessibility and UI improvements while keeping the codebase consistent and easier to maintain.

How?

  • Updated .gitattributes to enforce LF line endings for JS and SCSS files.
  • Ran eslint --fix and stylelint --fix on the document-bar package.
  • Refactored JSX in index.js:
    • <h1> is now outside the command <Button>.
    • The title and command button are siblings, enabling proper flexbox alignment.
  • Committed changes bypassing Husky temporarily to push normalization fixes.

Testing Instructions

  1. Pull the branch locally: git fetch origin fix/panel-headings-63251 && git checkout fix/panel-headings-63251.
  2. Run npm run lint:js and npm run lint:css to verify no errors appear.
  3. Open the editor and confirm the document-bar component renders correctly:
    • The post title is centered.
    • The command button is aligned to the right.
    • Interactions with the component work as before (no regressions expected).
  4. Verify that all document-bar files have LF line endings using git diff --check.

Accessibility

  • The <h1> is now correctly placed outside the command button, improving semantics.
  • Screen readers will announce the title and command button separately.
  • Existing keyboard and additional accessibility improvements (e.g., heading hierarchy, ARIA labeling, focus management) remain to be addressed in follow-up work on Rethink the Document Bar and the Post Summary title #65238.

CI / End-to-End Tests

Some Playwright E2E tests (command palette visibility, page creation) have failed in CI. These failures are likely unrelated to this PR because:

  • This PR only modifies structure, styling, and line endings in document-bar.
  • No changes were made to command palette logic, page creation, or editor initialization.
  • Other unit, PHP, and build checks are passing successfully.

Maintainers may choose to re-run the failing E2E tests if needed.

@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: Shekhar0109 <[email protected]>
Co-authored-by: afercia <[email protected]>

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 Aug 31, 2025
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Shekhar0109! 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.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Rethink the Document Bar and the Post Summary title

1 participant