Skip to content

List: Add Layout Support #68002

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

List: Add Layout Support #68002

wants to merge 5 commits into from

Conversation

shail-mehta
Copy link
Member

@shail-mehta shail-mehta commented Dec 15, 2024 •
edited
Loading

What?

Added Layout support and also added Align Wide and full width support to the List block.

Part of : #43248

Why?

The block was missing Layout Support and Align Support (Wide and Full Width) Support Features.

Testing Instructions

  • Test the List block in both the block editor and site editor.
  • Confirm that the wide width, full width and layout settings (including justifications) work correctly, and display correctly on the front.
  • Depending on where you place the block, you may need to place it inside a group with the "inner blocks use content width" setting enabled.
  • In the Site Editor, open or create the template for single posts. Add a List block compare the position of the content inside these blocks, with different settings enabled. It should be possible to align the block so that the text position is the same in List Block.

Screenshots or Screencast

List-layout-support.mp4

@shail-mehta shail-mehta self-assigned this Dec 15, 2024
@shail-mehta shail-mehta added [Type] Enhancement A suggestion for improvement. [Block] List Affects the List Block labels Dec 15, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 15, 2024 •
edited
Loading

Flaky tests detected in 3ab53a2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12446088230
📝 Reported issues:

@shail-mehta shail-mehta marked this pull request as ready for review December 15, 2024 10:02
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 15, 2024 •
edited
Loading

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: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

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

aaronrobertshaw
aaronrobertshaw reviewed Dec 16, 2024
View reviewed changes
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR @shail-mehta 👍

Could you please add some further details to the PR description and test instructions?

I'm not sure exactly what needs to be tested here or the reasoning behind the layout configuration chosen. Also, tweaking the PR title to match what is happening in the code changes is always good (i.e. adding align and layout support).

packages/block-library/src/list/block.json Outdated
@@ -38,6 +38,8 @@
},
"supports": {
"anchor": true,
"align": [ "wide", "full" ],
"__experimentalLayout": true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe __experimentalLayout was stabilized to layout back in June 2023 via #51434.

@shail-mehta
Copy link
Member Author

Thanks for the Feedback. I will work on this.

@shail-mehta shail-mehta force-pushed the add/list-layout-support branch from 9318cc2 to 1ec53cf Compare December 21, 2024 14:18
@shail-mehta
Copy link
Member Author

@aaronrobertshaw I have Used layout instead of __experimentalLayout and also added testing instructions in description.

@shail-mehta shail-mehta added the [Feature] Layout Layout block support, its UI controls, and style output. label Jan 4, 2025
@t-hamano t-hamano mentioned this pull request Jan 5, 2025
Open
@aaronrobertshaw
Copy link
Contributor

Thanks for the iteration @shail-mehta 👍

Unfortunately, I don't have the bandwidth to review this in the near future.

To help others test and review this PR the test instructions might need improving along with the title, as mentioned previously.

  • Add List Block in Page / Post.
  • Select and align wide or full width
  • Also Check With layout width in Layout Settings
  • Check Settings in Editor and Frontend Side

For example, check what? What should they change? What's the expected outcome?

@shail-mehta
Copy link
Member Author

shail-mehta commented Jan 12, 2025 •
edited
Loading

Updated Testing Instructions for List Block.

@carolinan
Copy link
Contributor

When the block width is not adjusted, the justification option does not change the position of the list items.
Is there a work around for that or how can we make it easier for users? It will look like the setting is not working.

@shail-mehta
Copy link
Member Author

Thank you for the review, I will work on this

@shail-mehta shail-mehta mentioned this pull request Feb 18, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@aaronrobertshaw aaronrobertshaw aaronrobertshaw left review comments

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

@juanmaguitar juanmaguitar Awaiting requested review from juanmaguitar juanmaguitar is a code owner

@ndiego ndiego Awaiting requested review from ndiego ndiego is a code owner

@t-hamano t-hamano Awaiting requested review from t-hamano

At least 1 approving review is required to merge this pull request.

Assignees

@shail-mehta shail-mehta

Labels
[Block] List Affects the List Block [Feature] Layout Layout block support, its UI controls, and style output. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@shail-mehta @aaronrobertshaw @carolinan