Make WordPress Core

Opened 2 years ago

Closed 23 months ago

Last modified 23 months ago

#56297 closed defect (bug) (fixed)

Twenty Eleven: asterisk symbol alignment with WooCommerce reviews rating label

Reported by: umesh84's profile umesh84 Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version: 5.9
Component: Bundled Theme Keywords: has-screenshots has-patch has-testing-info commit
Focuses: css Cc:

Description

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

Attachments (3)

181428016-455819c1-3ec7-44bd-a3b3-15385acd8808.png (888.4 KB) - added by umesh84 2 years ago.
For better understanding I have attached a screenshot
#56297.patch (400 bytes) - added by umesh84 2 years ago.
added patch
56297.1.diff (1.7 KB) - added by sabernhardt 2 years ago.
targeting the .required span for 4 specific fields, removing remnant of absolute positioning

Download all attachments as: .zip

Change History (11)

@umesh84
2 years ago

For better understanding I have attached a screenshot

@umesh84
2 years ago

added patch

#1 @umesh84
2 years ago

  • Keywords has-patch added; needs-patch removed

#2 @sabernhardt
2 years ago

  • Focuses ui removed
  • Summary changed from Theme Twenty Eleven in the review tab asterisk symbol alignment not proper to Twenty Eleven: asterisk symbol alignment with WooCommerce reviews rating label
  • Version changed from 6.0 to 5.9

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
2 years ago

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

#3 @sabernhardt
2 years ago

  • Milestone changed from Awaiting Review to 6.1

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.

Last edited 2 years ago by sabernhardt (previous) (diff)

#4 @costdev
2 years ago

  • Keywords has-testing-info commit added

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.

#5 @audrasjb
23 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Self assigning for final testing/review and commit.

#6 @audrasjb
23 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#7 @audrasjb
23 months ago

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.

#8 @audrasjb
23 months ago

In 53820:

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

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

See #56297.

Note: See TracTickets for help on using tickets.