Make WordPress Core

Opened 16 months ago

Closed 16 months ago

Last modified 16 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 16 months ago.
For better understanding I have attached a screenshot
#56297.patch (400 bytes) - added by umesh84 16 months ago.
added patch
56297.1.diff (1.7 KB) - added by sabernhardt 16 months ago.
targeting the .required span for 4 specific fields, removing remnant of absolute positioning

Download all attachments as: .zip

Change History (11)

@umesh84
16 months ago

For better understanding I have attached a screenshot

@umesh84
16 months ago

added patch

#1 @umesh84
16 months ago

  • Keywords has-patch added; needs-patch removed

#2 @sabernhardt
16 months 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
16 months ago

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

#3 @sabernhardt
16 months 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 16 months ago by sabernhardt (previous) (diff)

#4 @costdev
16 months 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
16 months ago

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

Self assigning for final testing/review and commit.

#6 @audrasjb
16 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
16 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
16 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.