TT3 compatibility #35306

peterfabian · 2022-10-25T15:57:49Z

All Submissions:

Have you followed the WooCommerce Contributing guideline?
Does your code follow the WordPress' coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This work builds on the great cleanup done by Rubik/Kirigami earlier this year. I did a tiny cleanup of colors from blocktheme.scss, where I moved the unnecessary definitions to TT2 theme's CSS to retain the same styling for TT2.

Besides, did a quick analysis and comparison for all CSS rules and added the relevant ones from TT2 styling to TT3. Added also the WP class to buttons to enable all the style definitions that come with WP 6.1 and TT3.

Layout-wise, it's very similar to TT2. The colors got tricky here and there as some styles have effectively only 2 colors while some define 5 distinct colors, but I tried to make it work for all styles.

Style colors overview:

This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).

How to test the changes in this Pull Request:

Install WP 6.1 RC and TT3
Install WC and activate this branch
Explore all the important screens:

Shop,
Single product for simple product
Single product for variable products
Examine gallery when having multiple images, photoswipe fullscreen image
Check the Sale! badge looks reasonable in Shop and in single product page
Check the tabs: Additional info/Details/Reviews
Make sure the reviews are visible, rating looks reasonable
Cart (try with or without shipping options set up), adding coupon
Checkout
Thank you page after submitting the order
Log in to My account, with or without registration
My account page
Check out My Account submenus
Test store notices (Added to cart on single product page, Error on the checkout page, Add coupon on the checkout page, Log in on the checkout page)
Test store-wide "demo store" notice
Check this in different viewport sizes
Check all of this with different browsers
Check all of this with each style in TT3 (Appearance > Editor > Click on Styles (half moon icon to the top right) and switch to another one)

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you created a changelog file for each project being changed, ie pnpm changelog add --filter=<project>?

FOR PR REVIEWER ONLY:

I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

In themes like 2023 where foreground and background is undefined, this assignes incorrect colors.

peterfabian · 2022-10-25T15:59:26Z

cc @Aljullu please let me know if you think these styles for blocks are needed for TT3 (code from the bottom of styling for TT2):

.wp-block-search {
	.wp-block-search__label {
		font-weight: normal;
	}
	.wp-block-search__input {
		padding: 0.9rem 1.1rem;
		border: 1px solid var(--wp--preset--color--black);
	}
	.wp-block-search__button {
		padding: 1rem 1.2rem;
	}
}

.wc-block-product-search {
	form {
		.wc-block-product-search__fields {
			display: flex;
			flex: auto;
			flex-wrap: nowrap;
			max-width: 100%;

			.wc-block-product-search__field {
				padding: 0.9rem 1.1rem;
				flex-grow: 1;
				border: 1px solid var(--wp--preset--color--black);
				font-size: inherit;
				font-family: inherit;
			}

			.wc-block-product-search__button {
				display: flex;
				background-color: var(--wp--preset--color--primary);
				color: #fff;
				border: 1px solid var(--wp--preset--color--black);
				padding: 1rem 1.2rem;
				margin: 0 0 0 0.7rem;
			}
		}
	}
}

github-actions · 2022-10-25T16:02:23Z

New hook, template, or database changes in this PR

Template changes:

File: /plugins/woocommerce/templates/auth/form-login.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/cart/cart-empty.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/cart/cart.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/cart/proceed-to-checkout-button.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/cart/shipping-calculator.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/checkout/form-coupon.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/checkout/form-pay.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/checkout/payment.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/content-widget-price-filter.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/global/form-login.php
- NOTICE: Version bump found
File: /plugins/woocommerce/templates/myaccount/form-add-payment-method.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/myaccount/form-edit-account.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/myaccount/form-edit-address.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/myaccount/form-login.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/myaccount/form-lost-password.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/myaccount/form-reset-password.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/myaccount/orders.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/order/form-tracking.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/product-searchform.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/single-product/add-to-cart/external.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/single-product/add-to-cart/grouped.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/single-product/add-to-cart/simple.php
- WARNING: This template may require a version bump!
File: /plugins/woocommerce/templates/single-product/add-to-cart/variation-add-to-cart-button.php
- WARNING: This template may require a version bump!

github-actions · 2022-10-25T16:20:33Z

Test Results Summary

Commit SHA: 606071c

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	232	0	0	3	0	235	1m 5s
E2E Tests	186	0	0	6	0	192	16m 32s

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.

peterfabian · 2022-10-25T17:53:25Z

I checked the E2E tests and they seem to work fine in manual testing. I tested with TT3 and 2019 theme (as it looks like that's what is used in the e2e tests).

The code sniff is highlighting problems with many files that have undocumented hooks and I don't really think it makes sense to document the 350 highlighted hooks in this PR.

Aljullu

Thanks for working on this, @peterfabian!

I did an initial review. I didn't finish it yet, but leaving some early feedback for now.

cc @Aljullu please let me know if you think these styles for blocks are needed for TT3 (code from the bottom of styling for TT2):

It should be possible to remove everything under .wc-block-product-search because in WP 6.1 the Product Search block will be replaced with a GB Search block variation (woocommerce/woocommerce-blocks#6191), so we already inherit all styling from the GB block.

Regarding the .wp-block-search rules, they impact the GB Search block (and the new Product Search variation). I would personally remove them, because I don't think it's WC's job to style that block.

Aljullu · 2022-10-26T10:31:48Z

plugins/woocommerce/includes/wc-template-functions.php

+		$wp_button_class = wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '';
+		echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="button checkout wc-forward' . esc_attr( $wp_button_class ) . '">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';


I see this pattern repeated in several places, wondering if we could use trim() to simplify the code. Something along these lines:

Suggested change

$wp_button_class = wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '';

echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="button checkout wc-forward' . esc_attr( $wp_button_class ) . '">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';

echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="button checkout wc-forward' . esc_attr( trim( ' ' . wc_wp_theme_get_element_class_name( 'button' ) ) ) . '">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';

Not sure if the code is much clearer, thought. 😅 So just leaving the suggestion here, but I don't have a strong preference anyway.

Thanks! I was also slightly bothered by it, so was thinking about whether I should make a function out of it. The usage of trim is a nice trick.

Aljullu · 2022-10-26T10:36:47Z

plugins/woocommerce/templates/myaccount/orders.php

 								if ( ! empty( $actions ) ) {
 									foreach ( $actions as $key => $action ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
-										echo '<a href="' . esc_url( $action['url'] ) . '" class="woocommerce-button button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';
+										echo '<a href="' . esc_url( $action['url'] ) . '" class="woocommerce-button' . esc_attr( $wp_button_class ) . ' button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';


Just to confirm, since I'm not used to this codebase. We are inheriting $wp_button_class from a parent template? Because $wp_button_class is not declared in this file.

Yup, it's defined over here: https://github.com/woocommerce/woocommerce/pull/35306/files#diff-d49488c34017d273db858b7b6eff58f22d95310991d26638e75793c6a1e98678R3213

The echo here is inside 2 foreach loops in the template, so didn't want to evaluate it each time, and we also want to make templates as dumb as possible, so having conditions and other code outside of them unless necessary. Which makes me think I should also remove the other conditionals from templates 🤔

Aljullu · 2022-10-26T10:38:29Z

plugins/woocommerce/includes/theme-support/class-wc-twenty-twenty-three.php

+/**
+ * Twenty Twenty-Three support.
+ *
+ * @since   7.0.2


In many places we specify @version 7.1.0, I guess this will need to be unified once we know whether that's included in a patch release?

Yup, I'll search and replace it once we figure it out. Good point.

Fixed in f543cc0

plugins/woocommerce/client/legacy/css/twenty-twenty-two.scss

peterfabian · 2022-10-28T12:25:19Z

Pitch style: links look a bit too dark in general, links in notices are hardly readable.

Updated in 62308a1 (#35306) but it's tricky with the colors, I hope it will look reasonable in all styles.

But this only goes so far. If e.g. the translation is longer, it will look weird anyway.

peterfabian · 2022-10-28T12:39:19Z

Sherbet style: in My Account - Orders buttons are hardly recognizable as such (they are missing the black border they have in other pages?), and same problem with "Cancel" button as in the Canary style.

4cefefb (#35306)
Fixed the border and reduced padding:

peterfabian · 2022-10-28T13:15:33Z

Whisper style: in My Account the current section has a weird extra underline, and in Orders the "Cancel" button has also a text wrapping issue.

This should be fixed now as well.

Konamiman · 2022-10-28T14:46:09Z

Similarly to the "Additional information" tab, the attribute names in the variation selectors should probably be left aligned too:

peterfabian · 2022-10-28T15:13:50Z

Similarly to the "Additional information" tab, the attribute names in the variation selectors should probably be left aligned too

Fixed in 2742331

github-actions · 2022-10-28T16:02:03Z

Hi @peterfabian, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

Add the release: add testing instructions label

* TT3 compatibility (#35306) * Prep for cherry pick 35306 Co-authored-by: Peter Fabian <[email protected]> Co-authored-by: WooCommerce Bot <[email protected]>

helgatheviking · 2023-01-25T20:17:41Z

plugins/woocommerce/templates/single-product/add-to-cart/simple.php

 		?>

-		<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
+		<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ); ?>"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>


@peterfabian is there a need to call wc_wp_theme_get_element_class_name( 'button' ) twice? Could this be

<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ); ?>

@helgatheviking It would need a leading space but that could be added after alt.

Gotcha. Seems like worse case is there's a trailing space if you remove the duplication... class="single_add_to_cart_button button alt ">

peterfabian added 12 commits October 20, 2022 17:27

Initial scaffolding

f68a546

Add wp element styling to buttons

06ee28e

More buttons classes

7912b03

Removed colors with Woo-colored fallback

bc8d8af

In themes like 2023 where foreground and background is undefined, this assignes incorrect colors.

Buttons buttons my buttons!

9fb53d0

Blocktheme float layout fix

1b1e47b

TT3 initial CSS

551f746

More styling.

833817f

Moved definitions from blocktheme.scss

4dd8d42

Use WP function for button element instead of hardcoding.

10a82e2

Not needed.

0a8c5e7

Changelog.

8097dd3

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Oct 25, 2022

github-actions bot added the release: highlight Issues that have a high user impact and need to be discussed/paid attention to. label Oct 25, 2022

peterfabian added 5 commits October 25, 2022 19:19

Escape the new class attribute.

e12453f

Fix the unit test.

5b9ac19

Incorrect indent wasn't intended.

12c255c

Fixed incorrect comment.

11c2bb1

PHPCS fixes.

46fade0

peterfabian closed this Oct 25, 2022

peterfabian reopened this Oct 25, 2022

peterfabian requested review from a team and Konamiman and removed request for a team October 26, 2022 09:21

Aljullu reviewed Oct 26, 2022

View reviewed changes

Avoid duplication of CSS rules.

4b23164

Reduce padding for My Account > order table

4cefefb

But this only goes so far. If e.g. the translation is longer, it will look weird anyway.

More fixes!

6ab15dd

Some styles are not working with this color combo.

ffeac5d

Align attribute names to the left

2742331

base color doesn't always work

606071c

Konamiman approved these changes Oct 28, 2022

View reviewed changes

roykho added this to the 7.0.0 milestone Oct 28, 2022

peterfabian merged commit 0f204db into trunk Oct 28, 2022

peterfabian deleted the add/tt3-support branch October 28, 2022 16:01

github-actions bot mentioned this pull request Oct 28, 2022

Cherry pick 35306 into release/7.0 #35390

Merged

github-actions bot pushed a commit that referenced this pull request Oct 28, 2022

TT3 compatibility (#35306)

9d28ab2

github-actions bot mentioned this pull request Oct 28, 2022

Delete changelog files based on PR 35306 #35391

Merged

roykho pushed a commit that referenced this pull request Oct 28, 2022

Cherry pick 35306 into release/7.0 (#35390)

a19d1d3

* TT3 compatibility (#35306) * Prep for cherry pick 35306 Co-authored-by: Peter Fabian <[email protected]> Co-authored-by: WooCommerce Bot <[email protected]>

jonathansadowski modified the milestones: 7.0.0, 7.1.0 Oct 28, 2022

github-actions bot mentioned this pull request Oct 28, 2022

Cherry pick 35306 into release/7.1 #35398

Merged

github-actions bot pushed a commit that referenced this pull request Oct 28, 2022

TT3 compatibility (#35306)

ad590cd

jonathansadowski pushed a commit that referenced this pull request Oct 28, 2022

Cherry pick 35306 into release/7.1 (#35398)

111d450

* TT3 compatibility (#35306) * Prep for cherry pick 35306 Co-authored-by: Peter Fabian <[email protected]> Co-authored-by: WooCommerce Bot <[email protected]>

tammullen mentioned this pull request Nov 1, 2022

[GlobalStep] [WP6.1 TT3] "Store notice" text and button is aligned to center for all pages of your Store. #34813

Closed

5 tasks

github-actions bot mentioned this pull request Nov 10, 2022

Test WooCommerce 7.1 UVLabs/location-picker-at-checkout-for-woocommerce#55

Closed

tammullen mentioned this pull request Nov 11, 2022

TT3 - Product Search block text field and button have different heights. #35459

Closed

5 tasks

Aljullu mentioned this pull request Dec 19, 2022

Zaino: Inconsistent button styling. woocommerce/woocommerce-blocks#7972

Closed

helgatheviking reviewed Jan 25, 2023

View reviewed changes

nielslange mentioned this pull request Apr 5, 2024

"Pay for Order" page is left aligned when using TT2 or TT3 #46263

Open

5 tasks

		$wp_button_class = wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '';
		echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="button checkout wc-forward' . esc_attr( $wp_button_class ) . '">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';

TT3 compatibility #35306

TT3 compatibility #35306

Uh oh!

Conversation

peterfabian commented Oct 25, 2022

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

Uh oh!

peterfabian commented Oct 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New hook, template, or database changes in this PR

Template changes:

Uh oh!

github-actions bot commented Oct 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results Summary

Uh oh!

peterfabian commented Oct 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Aljullu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

peterfabian Oct 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

peterfabian commented Oct 28, 2022

Uh oh!

peterfabian commented Oct 28, 2022

Uh oh!

peterfabian commented Oct 28, 2022

Uh oh!

Konamiman commented Oct 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

peterfabian commented Oct 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 28, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

peterfabian commented Oct 25, 2022 •

edited

Loading

github-actions bot commented Oct 25, 2022 •

edited

Loading

github-actions bot commented Oct 25, 2022 •

edited

Loading

peterfabian commented Oct 25, 2022 •

edited

Loading

peterfabian Oct 26, 2022 •

edited

Loading

Konamiman commented Oct 28, 2022 •

edited

Loading

peterfabian commented Oct 28, 2022 •

edited

Loading