Twenty Twenty compatibility: "Align Last Block" toggle behaviour in Editor differs from frontend

[gglobalstep]

Bug Description:

"Align Last Block " toggle is non functional on Preview and publish screen for All Products block and Product grid based blocks.

Environment:

Windows 10

• Browser: Chrome(Version 83.0.4103.61 (64-bit))
• Browser: Firefox(Version 77.0.1)(64-bit)

Steps to Reproduce:

1. Launch any of the 5 test sites.
2. Sign In with valid credentials.
3. Go to Pages->Add New.
4. Add All Product/Any Product grid based block.
5. Note that Align Last Block is toggled OFF.
6. Click on Preview/Publish.
7. Observe that All products are displays aligned by default.

Actual Result:

"Align Last Block " toggle is non functional on Preview and publish screen.

Expected Result:

"Align Last Block " toggle should be functional on Preview and publish screen.

Artifacts:

#2776.zip

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

``` ` ` ### WordPress Environment ###

WordPress address (URL): https://hungry-hippopotamus.jurassic.ninja
Site address (URL): https://hungry-hippopotamus.jurassic.ninja
WC Version: 4.3.0
REST API Version: ✔ 1.0.10
WC Blocks Version: ✔ 2.7.1
Action Scheduler Version: ✔ 3.1.6
WC Admin Version: ✔ 1.3.0-rc.1
Log Directory Writable: ✔
WP Version: 5.4.2
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.43 (Unix) OpenSSL/1.0.2g
PHP Version: 7.4.7
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.30-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: 4.3.0
WC Database Prefix: wp_
Total Database Size: 3.73MB
Database Data Size: 2.32MB
Database Index Size: 1.41MB
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.11MB + 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: 1.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.02MB + 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_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
product: 1
revision: 2

Security

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

Active Plugins (7)

Query Monitor: by John Blackbourn – 3.6.0
Companion Plugin: by Osk – 1.14
Jetpack by WordPress.com: by Automattic – 8.6.1
Google Ads for WooCommerce: by Kliken – 1.0.4 – Installed version not tested with active version of WooCommerce 4.3.0
WooCommerce Beta Tester: by WooCommerce – 2.0.1 – Installed version not tested with active version of WooCommerce 4.3.0
WooCommerce Prepare Notes Testing: by WooCommerce – 0.1 – Installed version not tested with active version of WooCommerce 4.3.0
WooCommerce: by Automattic – 4.3.0-rc.1

Inactive Plugins (2)

Akismet Anti-Spam: by Automattic – 4.1.5
Hello Dolly: by Matt Mullenweg – 1.7.2

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: #6 - /shop/
Cart: #7 - /cart/
Checkout: #8 - /checkout/
My account: #9 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Storefront
Version: 2.5.7
Author URL: https://woocommerce.com/
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: 4
Oldest: 2020-06-24 10:00:13 +0000
Newest: 2020-06-24 10:05:55 +0000

Pending: 1
Oldest: 2020-06-25 10:05:55 +0000
Newest: 2020-06-25 10:05:55 +0000

`

</details>

[nerrad]

Thanks for your report!

I was unable to reproduce this with StoreFront 2.5.8.rc.1 and Woo Blocks master nor on Woo Blocks 2.7.1 (which is what is included with WooCommerce core 4.3.1 rc1) and Storefront 2.5.3 (yes older version of storefront).

Example (this is the top rated block with the "Align Last block" toggled on):

Could you add some additional details about what themes you are testing with? Thanks! (cc @juliaamosova )

[juliaamosova]

@nerrad according to the zip file with the video provided (see Artifacts section of the report) - this was observed on our WP Engine test site where Twenty Twenty theme is installed. The issue seems to happen only in the Preview mode so it's possible it is on the WordPress/Gutenberg side of things?

[nerrad]

Thanks Julie,

So it looks like this is something specific to the Twenty Twenty theme as I can't reproduce this on Storefront. Also it's not related to preview. If I add a grid block and don't apply the align, on the frontend the alignment is still applied.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Remove the stale label or post a comment, otherwise it will be closed in 10 days.

[nerrad]

I'm not longer able to reproduce this in the latest version of Twenty Twenty so it appears it's been fixed somewhere along the way.

[NinjaAtWork]

This issue seen on mobile devices not in the desktop
When you set one row and columns to 6 then in desktop you will have 6 in a row but in phones you will have 2 product in each 3 row with unaligned arrange.
What to do?