Twenty Eleven: asterisk symbol alignment with WooCommerce reviews rating label

[umesh84]

When we open a single product page Theme Twenty Eleven in the review tab asterisk symbol alignment not proper.

1: Go to Theme Twenty Eleven
2: Download woocommerce plugin
3: Active woocommerce plugin
4: Add Product
5: Go single product page

[umesh84]

For better understanding I have attached a screenshot

[umesh84]

added patch

[sabernhardt]

r52152 added the float, intending it for labels positioned in front of their fields.

The selectors may need to be stricter, listing each field that has the special styling:

#respond .comment-form-author label .required,
#respond .comment-form-email label .required,
#respond .comment-form-url label .required,
#respond .comment-form-comment label .required {
  float: right;
  margin-left: 4px;
}

[sabernhardt]

targeting the .required span for 4 specific fields, removing remnant of absolute positioning

[sabernhardt]

56297.1.diff​ includes the URL field label, in case someone makes that required.

Also, I had missed removing the left and right value adjustments at the 650px breakpoint on ticket:54408.

[costdev]

Test Report

Patch tested: 56297.1.diff

Steps to Reproduce or Test

1. Navigate to Appearance > Themes
2. Activate the Twenty Eleven theme.
3. Navigate to Plugins > Add New.
4. Install and activate WooCommerce.
5. Navigate to Products > Add New.
6. Enter a name and publish the product.
7. View the product on the frontend.
8. 🐞 The asterisk that should be beside Your rating is at the opposite side of the container.
9. Apply 56297.1.diff.
10. Rebuild the CSS files.
11. Refresh the product page on the frontend. (might need a hard refresh using Ctrl+F5 or Cmd+R).

Expected Results

• 🐞❌ Before the patch: The asterisk is not beside Your rating.
• ✅ After the patch: The asterisk is beside Your rating.

Environment

• Server: Apache (Linux)
• WordPress: 6.1-alpha-53344-src
• Browser: Chrome 103.0.0.0
• OS: Windows 10
• Theme: Twenty Eleven
• Plugins:
  • WooCommerce 6.7.0

Actual Results

• 🐞❌ Issue reproduced: The asterisk is not beside Your rating.
• ✅ Patch 56297.1.diff fixes the issue: The asterisk is beside Your rating.
• ✅ Tested on LTR and RTL.
• ✅ Tested across mobile, tablet, medium and large desktop breakpoints.

Notes

• I think 56297.1.diff is ready for commit consideration. Adding the keyword.

[audrasjb]

Self assigning for final testing/review and commit.

[audrasjb]

In 53819:

Twenty Eleven: Use more specific CSS selectors for .required styles.

This changeset adds more specific CSS selectors so third-parties fields are not targeted by the related CSS rules.

Props umesh84, sabernhardt, costdev.
Fixes #56297.

[audrasjb]

Oh. It looks like the /* Use the available space in the smaller comment form */ is not relevant anymore in rtl.css. Follow-up commit incoming.

[audrasjb]

In 53820:

Twenty Eleven: Remove a useless CSS comment after [53819].

This comment does not apply anymore. Follow-up to [53819].

See #56297.