Page List : Add border and spacing support

[benazeer-ben]

What?

Adding block & spacing support for Page list block.

Part of #43247 and #43243

Why?

Page list block is missing border & spacing support

How?

Adds the border & spacing support via block.json

Testing Instructions

• Go to Global Styles setting ( under appearance > editor > styles > edit styles > blocks )
• Make sure that Page List block's border is configurable via Global Styles
• Verify that Global Styles are applied correctly in the editor and frontend
• Edit template/page, Add Page List block and apply the border styles & spacing (padding, margin)styles
• Verify that block styles take precedence over global styles
• Verify that block borders & spacing display correctly in both the editor and frontend

Screenshots or screencast

In Backend:

In Frontend:

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

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @benazeerhassan1909.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: benazeerhassan1909.

Co-authored-by: benazeer-ben <[email protected]>
Co-authored-by: akasunil <[email protected]>
Co-authored-by: aaronrobertshaw <[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, @benazeer-ben! 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.

[aaronrobertshaw]

Thank you for putting together this PR @benazeer-ben 👍

For the most part it's working pretty well for me. There are a few things we might need to tweak before landing it though.

✅ Global styles apply correctly to the block
✅ Block instance styles override global styles
✅ Box sizing allows parent to control width effectively while borders are present

❓ Default controls - There's a general direction at present that border controls are only displayed by default if the block already had spacing controls e.g. padding/margin, and the spacing controls were displayed by default.

❓ Lack of padding support - Adopting border radius can mean clipping content. Normally this is mitigated somewhat by the user also having control over padding on the block. We might need to expand the scope of this PR to also adopt spacing supports.

Here's what I see when testing this branch:

Screen.Recording.2024-10-24.at.3.58.31.pm.mp4

Thanks again for tackling this, @benazeer-ben, appreciate it!

[benazeer-ben]

Hi @aaronrobertshaw, Thanks for your detailed feedback.

I have added padding and margin support for the page list block. Please have a look at it and share your thoughts.

[aaronrobertshaw]

Thanks for iterating on this one @benazeer-ben 👍

It's very close. All that is missing is to tweak which block support controls are displayed by default.

✅ Global styles apply correctly to the block
✅ Block instance styles override global styles
✅ Box sizing allows parent to control width effectively while borders are present
❓ Controls still need to be hidden by default

Given the Page List block didn't previously have spacing support and is only getting it due to the border radius support, all the controls should be optional i.e. hidden by default.

I've left a couple of tweaks via inline comments. With those applied this is working as expected for me.

[aaronrobertshaw]

Loving the quick turnaround on iterations here @benazeer-ben ⚡

I was giving this a final test and noticed that the box-sizing: border-box CSS is only applied in the editor. We'll need to add it to the blocks styles so parent blocks can still enforce a max width on Page List blocks.

Here's a quick diff you can apply to get the job done:

diff --git a/packages/block-library/src/page-list/style.scss b/packages/block-library/src/page-list/style.scss
index d06a614257..a77fb85903 100644
--- a/packages/block-library/src/page-list/style.scss
+++ b/packages/block-library/src/page-list/style.scss
@@ -15,3 +15,9 @@
 		background-color: inherit;
 	}
 }
+
+.wp-block-page-list {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
+

To test this:

1. Add a Page List block and apply both padding and a border
2. Wrap it in a Group block
3. Set a content width like 300px on the Group block
4. Save and switch to the frontend
5. Note that the Page List should now respect the 300px width applied by the parent Group block.

[benazeer-ben]

Thanks again for your detailed feedback @aaronrobertshaw . border-box styling added in the last commit.

[benazeer-ben]

Hi @aaronrobertshaw Kindly let me know if there is any more feedback.
Thanks.

[ramonjd]

This is now working for me now after @aaronrobertshaw's suggestion, and that box-sizing: border-box; is applied in styles.scss.

I checked:

• theme.json block styles
• global styles in the site editor for page list block
• block styles

All are working for me.

[aaronrobertshaw]

LGTM as well ✨

✅ Global styles are applied correctly in editor and on frontend
✅ Block support styles override global styles appropriately
✅ Box sizing allows parent block to enforce width

I can confirm the issue from my last review has been resolved. After wrapping a page list in a group block and setting its content width to 250px, this is what I get: