[GlobalStep - 3.1.0-beta.2]: Two "Back Arrows" are displayed for all options under "Task List" on "Woocommerce > Home" page.

[gglobalstep]

Bug Description:

Two "Back Arrows" are displayed for all options under "Task List" on "Woocommerce > Home" page.

Environment:

Woocommerce Version :
WooCommerce: v6.0.0
WooCommerce Admin: 3.1.0 beta 2
WordPress version: 5.8.3

PC:
Windows 10, Mac 10.14.6
Chrome(Version 97.0.4692.71)
Firefox(Version 95.0.2)
Safari: v15.0

Steps To Reproduce:

1. Create any test site using JN site.
2. Install and activate all the required plugins.
3. Complete the setup wizard.
4. Go to WooCommerce >>Home Page .
5. Click on "Set up payments"options.
6. Observe that Two "Back Arrows" are displayed on "Set up payments" option.

Note:
Also observed for all options under "Task List" on "Woocommerce > Home" page.

Actual Result:

Two "Back Arrows" are displayed for all options under "Task List" on "Woocommerce > Home" page.

Expected Result:

Two "Back Arrows" should not displayed for all options under "Task List" on "Woocommerce > Home" page.

Screenshot:

Isolating the problem (mark completed items with an [x]):

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

`

WordPress Environment

WC Version: 6.0.0
REST API Version: ✔ 6.0.0
WC Blocks Version: ✔ 6.3.3
Action Scheduler Version: ✔ 3.3.0
WC Admin Version: ✔ 3.1.0-beta.2
Log Directory Writable: ✔
WP Version: 5.8.3
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
External object cache: –

Server Environment

Server Info: Apache/2.4.52 (Unix) OpenSSL/1.0.2g
PHP Version: 7.4.27
PHP Post Max Size: 1 GB
PHP Time Limit: 30
PHP Max Input Vars: 5000
cURL Version: 7.47.0
OpenSSL/1.0.2g

SUHOSIN Installed: –
MySQL Version: 5.7.33-0ubuntu0.16.04.1-log
Max Upload Size: 512 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 6.0.0
WC Database Prefix: wp_
Total Database Size: 4.82MB
Database Data Size: 3.37MB
Database Index Size: 1.45MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.02MB + Index: 0.13MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 2.48MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_posts: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

Post Type Counts

attachment: 1
page: 7
post: 2

Security

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

Active Plugins (5)

Query Monitor: by John Blackbourn – 3.8.1
Companion Plugin: by Osk – 1.21
Jetpack: by Automattic – 10.4
WooCommerce Admin: by WooCommerce – 3.1.0-beta.2
WooCommerce: by Automattic – 6.0.0

Inactive Plugins (3)

Akismet Anti-Spam: by Automattic – 4.2.1
Hello Dolly: by Matt Mullenweg – 1.7.2
WP Crontrol: by John Blackbourn & crontributors – 1.12.0

Dropin Plugins (1)

db.php: Query Monitor Database Class

Settings

API Enabled: –
Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –

WC Pages

Shop base: #7 - /shop/
Cart: #8 - /cart/
Checkout: #9 - /checkout/
My account: #10 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Twenty Twenty-One
Version: 1.4
Author URL: https://wordpress.org/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

Templates

Overrides: –

Action Scheduler

Complete: 7
Oldest: 2022-01-07 12:36:54 +0000
Newest: 2022-01-07 13:57:53 +0000

Status report information

Generated at: 2022-01-07 14:28:41 +00:00
`

[louwie17]

@joshuatf this one kinda stumped me, and I couldn't immediately reproduce it ( I haven't done thorough testing ). The back button seems to only be triggered by the Task component, so I am not overly sure how two arrows can show up (unless two tasks where rendered, or could two headers be rendered?).

The only other thought I had, is that some of this might be from async js chunks that didn't get updated by the cache, and thus showing some strange behaviour.

[moon0326]

@louwie17 This one is tricky. I was able to reproduce it 4 times in a row on a JN site at first, but I can't reproduce it anymore 🤷

The back button component is rendered twice actually.

Update: It looks like this is caused by two column task experiment code. I'll work on a fix.

We render both TwoColumnTasks and TwoColumnTasksExtended in the homescreen layout when a user is in the treatment group of the two column task list experiment. The problem is that both components try to render a Task when &task= is detected.

I'll update code to disable rendering a task in TwoColumnTasksExtended when it is rendered with TwoColumnTasks component.

[louwie17]

Update: It looks like this is caused by two column task experiment code. I'll work on a fix.

We render both TwoColumnTasks and TwoColumnTasksExtended in the homescreen layout when a user is in the treatment group of the two column task list experiment. The problem is that both components try to render a Task when &task= is detected.

I'll update code to disable rendering a task in TwoColumnTasksExtended when it is rendered with TwoColumnTasks component.

Nice debugging on this @moon0326, I was kinda leaning towards something like that. This would actually be a underlying issue then, that only showed up with the use of these new slot fills?
In either case, thanks for working on a fix for this 💯 💯