Remove .components-item-group selector in edit-site components[2]

[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.

As requested in the earlier PR now closed (#67384), to apply horizontal negative margins in 4 more places (Reference)

1. Navigation
2. Pages
3. Templates
4. Patterns

Screenshots

Screenshots of the negatively applied margins.

Navigation Screen

Pages Screen

Templates Screen

Patterns Screen

[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.

[im3dabasia]

Hi @t-hamano ,

If you have a moment, could you please review my PR? I would really appreciate your feedback.

Thank you so much!

[t-hamano]

Thanks for the PR!

Sorry, maybe my explanation in #67384 was insufficient. Can you just do the following two things?

• Create a new packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/style.scss file and move the following styles into it:

  .edit-site-sidebar-navigation-screen-templates-browse {
  	margin-left: -$grid-unit-20;
  	margin-right: -$grid-unit-20;
  }

• Rearrange the import statements in the packages/edit-site/src/style.scss file. It's a good idea to group import statements with the sidebar-navigation-screen prefix:

  @import "./components/sidebar-navigation-screen/style.scss";
  @import "./components/sidebar-navigation-screen-details-footer/style.scss";
  @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
  @import "./components/sidebar-navigation-screen-patterns/style.scss";
  @import "./components/sidebar-navigation-screen-main/style.scss";
  @import "./components/sidebar-navigation-screen-templates-browse/style.scss";

[im3dabasia]

Thank you @t-hamano ,

I’ve addressed both of the changes you requested. Please review the updated work when you have a moment.

• Rearrange the import statements in the packages/edit-site/src/style.scss file. It's a good idea to group import statements with the sidebar-navigation-screen prefix:

There was one more file

@import "./components/sidebar-navigation-screen-navigation-menus/style.scss";

Since it shares the same sidebar-navigation-screen prefix, I’ve moved it accordingly as well.

Looking forward to your feedback!

[t-hamano]

LGTM! Thanks for working with it through to the end 👍

Note: Native E2E test failures are not related to this PR. See #67595

[afercia]

@im3dabasia @t-hamano looks like the ItemGroup in the first level of the navigation panel isn't aligned correctly and misses the negative margins. Can you please have a look at it? Screenshot from latest trunk:

[im3dabasia]

Hi @afercia,

I checked the latest trunk, and the negative margins are applied correctly on my end. I’ve attached a screenshot for reference.

[afercia]

@im3dabasia based on your screenshot, the negative margins are applied to the .components-item-group selector. That is not used any longer on latest trunk. Avoiding the usage of components-item-group was the whole point of this PR so I'm not sure you're looking at the actual latest trunk.

[im3dabasia]

Yeah @afercia , I had the latest trunk version, I restarted the repo and then checked and yes what you claim holds true. The negative margins are not applied in the 'Design' menu.

I'll work on this right away.

[t-hamano]

Thanks for noticing. This issue is a regression introduced by #66851. Just adding the edit-site-sidebar-navigation-screen-main CSS class here should solve it.

@im3dabasia I'll be happy to review your PR.

[im3dabasia]

@afercia,

It looks like the issue occurred due to this commit which was merged recently, where the className="edit-site-sidebar-navigation-screen-main" I introduced in was removed. This seems to have caused the negative margins not to apply.

Here's the relevant diff.

Would it be helpful if I opened a new PR to reintroduce the className, or is there a different approach you would prefer to resolve this?

[im3dabasia]

@im3dabasia I'll be happy to review your PR.

Sure @t-hamano , I'll raise a new PR and cc you ASAP.

[afercia]

It looks like the issue occurred due to this commit which was merged recently,

Yes thanks, I do see that commit removed the newsly added class. Please do feel free to raise a quick PR to re-add it and kindly reference this PR and #66851 in your new PR, thanks!

[im3dabasia]

@afercia , Here is the link to the new PR #67825