Remove .components-item-group selector in edit-site components

[im3dabasia]

Fixes: #67369

What?

The .components-item-group selector has been replaced with a custom class (.edit-site-sidebar-navigation-screen__item-group) that is scoped specifically to the sidebar navigation screen.

This change does not affect other components outside of the sidebar navigation screen and will prevent unintended side effects if the ItemGroup component is used elsewhere in the future.

Screenshot

[github-actions]

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

[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: im3dabasia <[email protected]>
Co-authored-by: t-hamano <[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.

[t-hamano]

Thanks for the PR!

There are no strict rules, but in the Gutenberg project, many components define CSS class names based on the following rules:

{package-name}-{component-name|file-name}

This component is in the edit-site package and the file name is sidebar-navigation-screen-main, so an example of one CSS class name would be edit-site-sidebar-navigation-screen-main.

I don't think we should include the components used inside the component (in this case the ItemGroup component) in the CSS class name.

What do you think about these points?

[im3dabasia]

What do you think about these points?

Yes, I saw how the class names are given in the project. I appreciate your example, and I think the name you suggested is appropriate for our context.

I will make the changes right away.

[im3dabasia]

I have made the changes as suggested. Please check now, @t-hamano. Let me know if there are any further changes.

[t-hamano]

Thanks for the update!

Sorry, I missed an important point. The .edit-site-sidebar-navigation-screen__content .components-item selector is applied to more than just the Design screen. We need to apply horizontal negative margins to these screens as well:

Navigation

gutenberg/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js

Line 119 in 52b5429

<ItemGroup>

Pages

gutenberg/packages/edit-site/src/components/sidebar-dataviews/index.js

Line 29 in 52b5429

<ItemGroup>

Templates

gutenberg/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js

Line 60 in 52b5429

<ItemGroup>

Patterns

For this screen, the edit-site-sidebar-navigation-screen-patterns__group class name is already applied, so we can use it.

Can I use a similar approach to add class names to these components? 🙏

[im3dabasia]

Can I use a similar approach to add class names to these components?

Yes @t-hamano , I have done as you have suggested please check now.

Navigation Screen

Pages Screen

Templates Screen

Patterns Screen

Thank you for reviewing my work @t-hamano . Please let me know if any changes are needed in the PR.