Skip to content
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

Latest Post Block: Refactor settings panel to use ToolsPanel #67956

Merged
merged 19 commits into from
Jan 21, 2025
Merged

Latest Post Block: Refactor settings panel to use ToolsPanel #67956

merged 19 commits into from
Jan 21, 2025

Conversation

karthick-murugan
Copy link
Contributor

@karthick-murugan karthick-murugan commented Dec 13, 2024 •
edited
Loading

What?

Part of: #67813

Fixes #67931

Why?

Latest Post Block code to include ToolsPanel instead of PanelBody.

How?

Refactored Latest Post Block code to include ToolsPanel instead of PanelBody.

Testing Instructions

  • Login to Dashboard
  • Edit any post/ page
  • Add Archive Title block.
  • Check settings panel of the Latest Post block and verify the change.

Screenshots or screencast

Before

before_posts

After

after_posts

@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 13, 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: karthick-murugan <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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

@karthick-murugan karthick-murugan changed the title Latest Post Block: Refactor settings panel to use ToolsPanel #67915 Latest Post Block: Refactor settings panel to use ToolsPanel Dec 13, 2024
@karthick-murugan karthick-murugan mentioned this pull request Dec 13, 2024
Open
fabiankaegy
fabiankaegy previously requested changes Dec 13, 2024
View reviewed changes
Copy link
Member

@fabiankaegy fabiankaegy left a comment

Choose a reason for hiding this comment

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

This one needs a little more refinement.

  1. We should ensure that every single control inside any of the ToolsPanel component gets their own ToolsPanelItem
  2. The UI of the Featured Image settings currently has some spacing issues:
    CleanShot 2024-12-13 at 15 41 48@2x
  3. We should ensure that all the defaults that render by default today have the isShownByDefault prop added so they cannot get removed.

packages/block-library/src/latest-posts/edit.js Outdated
Comment on lines 449 to 455
<ToolsPanelItem
hasValue={ () => order !== undefined }
label={ __( 'Sorting options' ) }
onDeselect={ () =>
setAttributes( { order: 'desc', orderBy: 'date' } )
}
>
Copy link
Member

Choose a reason for hiding this comment

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

Instead of one ToolsPanelItem called Sorting Options we should have each of the elements in this section as it's own ToolsPanelItem. That requires a bit of a larger refactor but we need to ensure each item can be reset on its own.

@fabiankaegy fabiankaegy added [Type] Enhancement A suggestion for improvement. [Block] Latest Posts Affects the Latest Posts Block labels Dec 13, 2024
@karthick-murugan
Copy link
Contributor Author

@fabiankaegy - Only fixed the spacing issues on the Featured Image settings. Need some advice on how to proceed for converting ImageSizeControl and QueryControls options to have their own reset and toolspanelitems.

@t-hamano t-hamano self-requested a review January 18, 2025 05:12
t-hamano
t-hamano reviewed Jan 18, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano 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!

The Latest Posts block controls consist of the following sections:

  • Post content
  • Post meta
  • Featured image (Includes ImageSizeControl component)
  • Sorting and filtering (includes QueryControls component)

The main challenge is that ImageSizeControl and QueryControls are public components and are not constructed as ToolsPanelItem.

As for the ImageSizeControl component, we should be able to refactor it with ResolutionTools configured with ToolsPanelItem.

As for QueryControls component, we may need to give up on the individual reset functionality, or rebuild the equivalent functionality on a ToolsPanelItem basis and implement it in the Latest Post block.

In any case, it would be too much work to do everything in one PR, so how about just refactoring "Post content" and "Post meta" sections in this PR?

@karthick-murugan
Copy link
Contributor Author

Thank you, @t-hamano, for the detailed feedback and suggestions!

I’ve implemented the changes as per your recommendations:

  1. Refactored the "Post content" and "Post meta" sections to use ToolsPanelItem for individual reset functionality.
  2. Adjusted the logic to ensure seamless functionality and consistency across these sections.

As you suggested, handling ImageSizeControl and QueryControls will require significant effort, so I’ve deferred those changes to keep this PR focused and manageable.

Please let me know if there are any additional adjustments needed or further feedback. I appreciate your guidance throughout this process!

t-hamano
t-hamano approved these changes Jan 21, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM! I think everything is working as expected.

@t-hamano t-hamano dismissed fabiankaegy’s stale review January 21, 2025 08:28

The Featured image, Sorting and filtering panel will be addressed in a follow-up PR.

@t-hamano t-hamano merged commit 5b7f7ec into WordPress:trunk Jan 21, 2025
64 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.2 milestone Jan 21, 2025
@t-hamano t-hamano mentioned this pull request Jan 21, 2025
Open
@karthick-murugan karthick-murugan deleted the add/toolspanel-latest-posts branch January 21, 2025 11:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@t-hamano t-hamano t-hamano approved these changes

@fabiankaegy fabiankaegy fabiankaegy left review comments

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

Assignees
No one assigned
Labels
[Block] Latest Posts Affects the Latest Posts Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 20.2
Development

Successfully merging this pull request may close these issues.

Refactor "Settings" panel of Latest Posts block to use ToolsPanel instead of PanelBody
3 participants
@karthick-murugan @fabiankaegy @t-hamano