Transform page list to list

[benazeer-ben]

What?

Fixes #44458

Why?

Currently Page list block has no transform option for list block.

How?

Added list block transformation to Page list block.

Testing Instructions

• Go to WP admin dashboard.
• Edit/create any post/page.
• Create a Page List Block
• Try to transform it to a list block.

Screenshots or screencast

Screenshare.-.2025-02-10.5_03_26.PM.mp4

[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: benazeer-ben <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: carolinan <[email protected]>

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

[benazeer-ben]

Hi @carolinan , @t-hamano

As discussed in this PR, I have split it into separate PRs—one for navigation and another for the list.

This is the PR for transform to list block.

Please take a look and share your feedback or suggestions.

Thanks in advance!

[t-hamano]

Thanks for the update!

[benazeer-ben]

Thanks a lot for the detailed review @t-hamano

Applied all the above mentioned points in the recent commit.

[t-hamano]

Thanks for the update!

After further testing, I found that this transformation is more complicated than we thought.

For example, the page list is structured as follows. Note that the order has changed for some pages.

• Page A (Order: 1)
  • Page A -A (Order: 1)
• Page B (Order: 1)

In the Page List block, it is rendered as follows:

However, when this is transformed into a List block, the order changes as follows:

The reason is that the block transformation is missing logic for processing the page tree. The Page List block has logic for that: pagesByParentId, pagesTree, and blockList.

Therefore, we need to implement the same logic to the block transformation. Here's the approach I'm thinking of:

• Create a utils.js file in the page-list directory.
• Place these three functions in it and export them.
• Import the three exported functions from both the Edit component and the block transformation.

If you have any questions, please ask.

[benazeer-ben]

Thanks for pointing this out, @t-hamano!

I also noticed the order change after the transformation. As you mentioned, we need to account for the tree scenario as well.
I'll try the suggested logic andlet you know the update.