Fix "Marketing & Merchandising" padding on store management panel

[chihsuan]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes #35583.

This PR adds a 24px spacing between the Manage my store header and the Marketing & Merchandising heading

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Go to WooCommerce > Home
2. Hide setup task list
3. Confirm the heading "Marketing & Merchandising" has padding between the Manage my store header

[github-actions]

Hi @ilyasfoo, @moon0326,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: e4af20d

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	267	0	0	2	0	269	0m 48s
E2E Tests	188	0	0	10	0	198	16m 58s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[ilyasfoo]

Minor comment on spacing standard

[ilyasfoo]

Thanks for the fix, @chihsuan! However, I'm seeing the 24px padding at the top is not symmetrical with the 16px (or $gap) that's used for the typical vertical spacing around widget children.

Suggested change

	padding-top: 24px;
	padding-top: $gap;

[chihsuan]

Good eye! @ilyasfoo What do you think if we use padding: $gap-large 0 $gap-smaller 0; (padding: 24px 0 8px 0;)?

It looks like it was supposed to be like that.

woocommerce/plugins/woocommerce-admin/client/store-management-links/style.scss

Lines 2 to 5 in 92a1858

	// We need to do this to allow item hover backgrounds to stretch the whole card body.
	.woocommerce-store-management-links__card-body.is-size-custom {
	padding: 24px 0 8px 0;
	}

[chihsuan]

Just made the changes first in 30aab39!

[ilyasfoo]

Good catch, however, I'm seeing the padding that's added gives a "border-like" artefact at the bottom when hovering the last item:

Whereas, in inbox notes items, tasklist items do not have this.

But perhaps I may be overly complicating it. I don't know if we need to call our expert @verofasulo for opinion 🙏 😄

[verofasulo]

I'm seeing the padding that's added gives a "border-like" artefact at the bottom when hovering the last item

Good catch, @ilyasfoo! I agree that it would be better to remove the padding there to avoid that effect.

[chihsuan]

Thanks @verofasulo @ilyasfoo! Updated as suggested in e4af20d. 🙌

[ilyasfoo]

Awesome, thanks @chihsuan! LGTM! 🚢