Related Products Block not Respecting 'Items per Page' Option

[Babylon1999]

Describe the bug

When adding a Related Products block to a single product template using an FSE-enabled theme, the items per page option is not respected. Although it limits the products in the back end, no changes occur on the front end.

Themes tested: Twenty twenty-three, Blockbase

Expected behavior

The number of products displayed is determined by the set limit.

Screenshots

Link to image: https://d.pr/i/EkjdEq

Link to image: https://d.pr/i/q3aNDG

Environment

WordPress (please complete the following information):

`
### WordPress Environment ###

WordPress address (URL): https://xxx.wpcomstaging.com
Site address (URL): https://xxxx.wpcomstaging.com
WC Version: 7.6.0
REST API Version: ✔ 7.6.0
WC Blocks Version: ✔ 9.8.4
Action Scheduler Version: ✔ 3.5.4
Log Directory Writable: ✔
WP Version: 6.2
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
External object cache: ✔

### Server Environment ###

Server Info: nginx
PHP Version: 8.0.28
PHP Post Max Size: 2 GB
PHP Time Limit: 1200
PHP Max Input Vars: 6144
cURL Version: 7.86.0
OpenSSL/1.1.1n

SUHOSIN Installed: –
MySQL Version: 10.4.28-MariaDB-log
Max Upload Size: 2 GB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

`

Desktop (please complete the following information):

• OS: macOS
• Browser: FireFox

Additional context

Reported in zd-6213117

[Aljullu]

Thanks for reporting this, @Babylon1999! I was able to reproduce too.

If I set the Related Products Controls Items per page value to one, this is how it renders in the editor/frontend:

Editor	Frontend

The block markup looks like this:

<!-- wp:query {"queryId":1,"query":{"perPage":"1","pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":5},"namespace":"woocommerce/related-products","lock":{"remove":true,"move":true}} -->
<div class="wp-block-query"><!-- wp:heading -->
<h2 class="wp-block-heading">Related products</h2>
<!-- /wp:heading -->

<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"imageSizing":"cropped","isDescendentOfQueryLoop":true} /-->

<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->

<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->

<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

It has "perPage:"1", so I guess the attribute is saved correctly. Also, the attribute is persisted across page reloads.

@imanish003 @gigitux I'm not sure if that's part of the Products block or the Single Product template, but it might be good to add it to one of the two epics?

[gigitux]

Thanks for opening the issue!
I added this issue to the project's scope Blockified Single Product Block #8054.

We will fix this issue in the following week!

[Babylon1999]

Thank you! 🙏🏻