Skip to content

Editor: Add search functionality to template swapping modal #69667

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.

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

Merged
merged 8 commits into from
Apr 16, 2025

Conversation

yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Mar 24, 2025

What?

Closes #69659

This PR introduces search functionality to the template selection modal, making it easier to find templates efficiently.

Why?

When dealing with a large number of templates, filtering by title makes selection much more convenient.

How?

These changes are aligned with the search functionality in the pattern selection dialog to maintain consistency.

Testing Instructions

  1. Make sure you have at least 15 templates that can be applied to a page.
  2. Create a new page.
  3. From the page sidebar, click on Template, then Change template.
  4. Test the search functionality.

Screencast

pr.mov

@yogeshbhutkar yogeshbhutkar force-pushed the enhance-69659/search-template branch from 23601d1 to 18ee52f Compare March 24, 2025 09:41
@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review March 24, 2025 10:12
Copy link

github-actions bot commented Mar 24, 2025

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: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@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.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Feature] Document Settings Document settings experience labels Mar 24, 2025
@yogeshbhutkar yogeshbhutkar force-pushed the enhance-69659/search-template branch from 6cb7c2f to 20f124c Compare March 25, 2025 04:46
@yogeshbhutkar yogeshbhutkar requested a review from Mamaduka March 25, 2025 05:27
@yogeshbhutkar
Copy link
Contributor Author

yogeshbhutkar commented Mar 25, 2025

Screenshot 2025-03-25 at 11 04 25 AM

On a separate note, I think it's best to display a simple "No templates/patterns found" message for both template and pattern selection in these cases. (Probably as a follow-up.)

@yogeshbhutkar
Copy link
Contributor Author

Hi, @Mamaduka. I believe I've addressed all the feedback. Whenever you have a chance, could you give it another review? Thanks!

Comment on lines 54 to 61
<SearchControl
__nextHasNoMarginBottom
onChange={ setSearchValue }
value={ searchValue }
label={ __( 'Search' ) }
placeholder={ __( 'Search' ) }
className="editor-post-template__swap-template-search"
/>
Copy link
Member

Choose a reason for hiding this comment

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

Currently, the searchValue state doesn't reset after you close the modal. I think we need to move the search control inside the + its state inside the TemplatesList or create a new component that wraps around both. This way, the local state will reset when the modal component unmounts.

Screencast

CleanShot.2025-04-15.at.15.34.00.mp4

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sorry, I didn't notice this in my testing. I’ve factored it in and updated the PR in the latest commit. Thanks for pointing it out!

@yogeshbhutkar yogeshbhutkar force-pushed the enhance-69659/search-template branch from 93085ab to 51bb99f Compare April 16, 2025 05:17
@yogeshbhutkar yogeshbhutkar requested a review from Mamaduka April 16, 2025 05:59
Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

Thank you, @yogeshbhutkar!

@Mamaduka Mamaduka merged commit 2f4d0b8 into WordPress:trunk Apr 16, 2025
44 of 62 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.8 milestone Apr 16, 2025
@carolinan
Copy link
Contributor

Thank you!

chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
…s#69667)

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Document Settings Document settings experience [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a search to the template selection modal in the block editor
4 participants