[Experimental] Price Filter: Fix styling issue when Inline input fields is enabled

[thealexandrelara]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes #44755.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Navigate to Single Product template (Appearance > Editor > Templates > Product Catalog template - or any archive template).
2. Click on "Edit" to open the WordPress editor.
3. In the editor, you should see a block inserter icon or an option to "Add Block". Click on it.
4. In the block inserter, search for "Product Filter" or browse the available blocks until you find them.
5. Click on the "Product Filter: Price (Beta)" block to add it to your content.
6. Select the Product Filter: Price (Beta) block in the blocks list.
7. In the sidebar to the right side, enable the "Inline input fields" setting within the Inspector Controls.
8. Make sure the block is displayed with the input fields at the sides of the price range slider.
9. Click on Save to save the changes.
10. Visit the Shop page (https://linktoyourstore.com/shop/).
11. Make sure the block is displayed with the input fields at the sides of the price range slider.

Before	After

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Fix styling issue for the Price Filter block preventing fields from appearing inline when the Inline input fields option is enabled

Comment

[github-actions]

Test Results Summary

Commit SHA: 08453ad

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 38s
E2E Tests	338	0	0	13	0	351	8m 23s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[github-actions]

Hi @kmanijak,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[kmanijak]

Hi @thealexandrelara,

I found the testing instructions a bit confusing 😅

3. In the editor, you should see a block inserter icon or an option to "Add Block". Click on it.
4. In the block inserter, search for "Filter by Price" or browse the available blocks until you find them.
5. Click on the "Filter by Price" block to add it to your content.
6. Select the Product Filter: Price (Beta) block in the blocks list.

This is a pretty confusing part to me. I think it could merged into a single point telling which block exactly to insert. I checked both "Filter by Price" and "Product Filter: Price (Beta)" as I wasn't sure.

In the sidebar to the left side, enable the "Inline input fields" setting.

I assume you mean Inspector Controls, then they're on the right.

---

Testing:

1. I tested the changes and the inline layout works just fine. I'm just curious if the currency sign is expected to be there as on AFTER image? In my case, it's not there either in the Editor or frontend.

2. Also, I know it's not part of this PR but is it a known issue that when you input some value manually in the Product Filter: Price (Beta) the filter doesn't react to that change? Blurring the input and clicking ENTER doesn't help.

pricefilter.mov

Let me know if these two issues are expected and if so - I'll go ahead and approve the PR.

[thealexandrelara]

Hi @thealexandrelara,

I found the testing instructions a bit confusing 😅

Thank you for pointing this out, I believe my mind went for a walk when I started writing the testing instructions 😅. I just updated it to make it more clear. The correct block is the Product Filter: Price (Beta), and yes, you're correct I'm referring to the Inspector Controls to the right.

1. I tested the changes and the inline layout works just fine. I'm just curious if the currency sign is expected to be there as on AFTER image? In my case, it's not there either in the Editor or frontend.

That is really well noted! I just opened an issue for this #45315

2. Also, I know it's not part of this PR but is it a known issue that when you input some value manually in the Product Filter: Price (Beta) the filter doesn't react to that change? Blurring the input and clicking ENTER doesn't help.

pricefilter.mov
Let me know if these two issues are expected and if so - I'll go ahead and approve the PR.

This is a known issue, there is an issue created for this #45228. Hopefully, I'll be able to work on this today 🙏

[kmanijak]

Thanks for addressing my concerns! As there are issues covering the remaining parts I'm approving this one! 🚀