Feature: Add classname to the div inside components-modal__content after the components-modal__header div

[Debarghya-Banerjee]

What?

This PR adds a new classname, components-modal__body, to the div immediately following components-modal__header inside the components-modal__content of the Modal component.

Why?

Currently, the Modal component lacks a specific classname for the div directly after the components-modal__header. This absence forces developers to make extra efforts to target the div, often requiring unnecessarily high CSS specificity. This not only complicates styling but also increases the likelihood of conflicts. By adding the components-modal__body classname, this change:

• Maintains consistency with other modal elements by following a structured naming convention.

• Separates the header from the body, improving the modularity of the modal structure.

• Reduces unnecessary specificity, making it easier for developers to target and style the modal body cleanly and efficiently.

How?

The implementation introduces a components-modal__body classname to the div after the components-modal__header within the Modal component. This classname adheres to Gutenberg’s naming standards, ensuring backward compatibility and providing a clean separation between the header and body sections of the modal.

Testing Instructions

• Open the Block Editor in WordPress.

• Click on the Block Inserter (the "+" button in the editor toolbar).

• Navigate to the Patterns tab.

• Click on Explore all patterns to open the modal.

• Inspect the modal structure using browser developer tools.

• Verify that the div following components-modal__header now includes the components-modal__body classname.

Screenshots or screencast

Before

After

Issue

Closes #68918

[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: Debarghya-Banerjee <[email protected]>

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

[github-actions]

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

@Debarghya-Banerjee Thanks for the PR!

We discussed whether this div needed a CSS class name. As a result, we decided not to add a CSS class name to this modal v1. See #68918 for details of that discussion.

I would like to close this PR, but thank you for your contribution.