Make WordPress Core

Opened 16 months ago

Last modified 6 months ago

#61904 new defect (bug)

Twenty Nineteen: Social Icons block's text is underlined in the post content

Reported by: pitamdey's profile pitamdey Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch has-test-info
Focuses: css Cc:

Description

In Theme Twenty Nineteen, Social Icons Block's text does not have text-decoration at the editor but have text decoration underline in frontend. So In both side it looks different

Attachments (3)

Screenshot 2024-08-21 at 6.28.21 PM.png (227.2 KB) - added by pitamdey 16 months ago.
Editor View
Screenshot 2024-08-21 at 6.29.07 PM.png (198.5 KB) - added by pitamdey 16 months ago.
Frontend View
61904.patch (11.7 KB) - added by pitamdey 16 months ago.
After applying this solution the issue is resolved

Download all attachments as: .zip

Change History (23)

@pitamdey
16 months ago

After applying this solution the issue is resolved

#1 @pitamdey
16 months ago

I have also formatted the code of the particular file.

#2 @karmatosed
16 months ago

  • Keywords has-patch needs-testing added

I can confirm this issue so moving to testing.

#3 @sainathpoojary
13 months ago

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/61904/61904.patch

Environment

  • WordPress: 6.8-alpha-59274-src
  • PHP: 8.2.25
  • Server: nginx/1.27.2
  • Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
  • Browser: Chrome 131.0.0.0
  • OS: macOS
  • Theme: Twenty Nineteen 3.0
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

  1. ❌ Issue not fully resolved by patch (patch failed to apply)
  • The patch failed to apply due to formatting differences, including mismatched line numbers and whitespace changes. As a result, 8 out of 46 hunks failed, and the patch could not be fully applied automatically, generating a .rej file.
  1. ✅ Issue resolved with manual intervention
  • After manually adding the following line, the issue was resolved as intended:
//! wp-block-social-links
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor {
    text-decoration: none;
}

Supplemental Artifacts

Patch: https://utfs.io/f/PL8E4NiPUWyOGCntO8NEeschquBM6yNU3LCFxWSw4rTfmliR

This ticket was mentioned in PR #7841 on WordPress/wordpress-develop by @sainathpoojary.


13 months ago
#4

This pull request fixes an issue in the Twenty Nineteen theme where social icons in the wp-block-social-links block appear without underlines in the editor but are incorrectly displayed with underlines on the frontend. This PR resolves the issue by adding a text-decoration: none; rule for anchor tags in the frontend, ensuring consistent styling with the editor.

Trac ticket: #61904

### Before:
https://github.com/user-attachments/assets/375a317a-36c1-40e7-a977-ba6423cc76c2

### After:
https://github.com/user-attachments/assets/dddd9514-9605-4263-a88d-68b47c511ab8

@rinkalpagdar commented on PR #7841:


12 months ago
#5

Hello @SainathPoojary
I have tested this PR change, it's working fine.
Thanks

#6 @rinkalpagdar
12 months ago

Test Report


After applying the change mentioned in the PR its solved the issue.

Version 0, edited 12 months ago by rinkalpagdar (next)

This ticket was mentioned in Slack in #core-test by vishitshah. View the logs.


11 months ago

#8 @vishitshah
11 months ago

  • Keywords has-testing-info added

## Test Report
### Description
This report validates whether the indicated patch works as expected.

Patch tested: https://github.com/WordPress/wordpress-develop/pull/7841

### Environment

  • WordPress: 6.8-alpha-20241119.172832
  • PHP: 7.4.31-dev
  • Server: PHP.wasm
  • Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
  • Browser: Chrome 131.0.0.0
  • OS: Linux
  • Theme: Twenty Nineteen 3.0
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

### Actual Results

  1. ❌ Issue is not fixed with the given patch

### Supplemental Artifacts
https://tinyurl.com/2d4kf6vj

#9 @akshitvijay
11 months ago

Bug Report

Description

The issue is resolved after applying the patch.

Environment

  • WordPress: 6.7.1
  • PHP: 8.1.23
  • Server: nginx/1.16.0
  • Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.23)
  • Browser: Chrome 131.0.0.0
  • OS: macOS
  • Theme: Twenty Nineteen 3.0
  • MU Plugins: None activated

Before Applying Patch

https://paste.pics/ad7de81187bac10361f1877b19b12d1f
https://paste.pics/c63dcd52a717b4a55e2d3e1a74f46f75

After Applying Patch

https://paste.pics/81654c443a9a71d6d3961f78dc6c6906
https://paste.pics/1b358d37933e749b24acba87796aa32f

#10 @shraddhagore
10 months ago

Patch tested (PR): https://github.com/WordPress/wordpress-develop/pull/7841

Environment:
WordPress: 6.8-alpha-20241119.172832
Theme: Twenty Nineteen, 3.0
Browser: Google Chrome
OS: Windows 11

Media:
Editor: https://prnt.sc/l98rdLBqWskb
Site: https://prnt.sc/42rVg1ZYr45k

Comments:
The patch (PR) isn't working. The social icons continue to have an underlined style on the site.

#11 @sabernhardt
10 months ago

  • Summary changed from Twenty Nineteen : Social Icons Block's text decoration not matching in both side to Twenty Nineteen: Social Icons block's text is underlined in the post content

Steps to reproduce:

  1. Activate Twenty Nineteen.
  2. Create (or edit) a post.
  3. Add a Social Icons block, and activate its "Show text" setting.
  4. Add an icon, such as WordPress, inside the Social Icons block. Add a URL in the link field and press Enter.
  5. Save and view the post on the front end.

@sainathpoojary commented on PR #7841:


10 months ago
#12

Hey @sabernhardt,

I have implemented the requested changes and rebased the branch. After rebasing, I noticed that there’s some extra margin on the social icon button. Should I open a issue for it?

https://github.com/user-attachments/assets/678816ca-c58f-4970-929d-3c4ef47a361b

Additionally, while running npm install, I encountered a deprecation issue related to node-sass. If this needs to be addressed, I’d be happy to work on it.

https://github.com/user-attachments/assets/712dd100-f774-45cc-9482-514ab0805688

@sabernhardt commented on PR #7841:


10 months ago
#13

The separate Social Icons block margin issue should be fixed in Gutenberg 20.4.

I have had node-sass deprecation warnings too. In a previous installation I fixed it with the rebuild command, but I have not solved it in my new environment yet. I tried replacing with `sass` last year, but I did not like how much it changed in the compiled stylesheets just with the package changes. (Adding special rules might help if the switch is necessary.)

#14 @wordpressdotorg
7 months ago

  • Keywords has-test-info added; has-testing-info removed

#15 @sainathpoojary
6 months ago

Hi @sabernhardt, just a quick follow-up on this ticket. It looks like it’s been inactive for a while after approval. Let me know if anything else is needed to move the patch forward. Thanks!

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


6 months ago

#17 @hmbashar
6 months ago

Test Report

Description

Hi, I see that there is no underline without installing any patch; by default, it works fine for me.

Environment

  • WordPress: 6.9-alpha-60093-src
  • PHP: 8.2.28
  • Server: nginx/1.25.4
  • Database: mysqli (Server: 8.0.41 / Client: mysqlnd 8.2.28)
  • Browser: Chrome 137.0.0.0
  • OS: macOS
  • Theme: Twenty Nineteen 3.1
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

https://i.ibb.co/rRBH3n6b/Screenshot-at-Jun-06-12-28-44-AM.png

Last edited 6 months ago by hmbashar (previous) (diff)

#18 @huzaifaalmesbah
6 months ago

Test Report

Patch tested: https://github.com/WordPress/wordpress-develop/pull/7841

Environment

  • WordPress: 6.9-alpha-60093-src
  • PHP: 8.2.28
  • Server: nginx/1.27.5
  • Database: mysqli (Server: 9.3.0 / Client: mysqlnd 8.2.28)
  • Browser: Chrome 137.0.0.0
  • OS: macOS
  • Theme: Twenty Nineteen 3.1
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

  1. ✅ Issue resolved with patch.

Screenshots

Before Apply Patch After Apply Patch ✅
https://i.ibb.co/1GG7hts1/Huzaifa-20250606002630.png https://i.ibb.co/qYqfT1M8/Huzaifa-20250606002813.png
https://i.ibb.co/SD3rxw6K/Huzaifa-20250606002643.png https://i.ibb.co/ZR5mfGW1/Huzaifa-20250606002822.png

#19 @iamshashank
6 months ago

Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: https://github.com/WordPress/wordpress-develop/pull/7841.diff

Environment

  • WordPress: 6.8.1
  • PHP: 8.2.27
  • Server: nginx/1.26.1
  • Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.27)
  • Browser: Chrome 137.0.0.0
  • OS: macOS
  • Theme: Twenty Nineteen 3.1
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

  1. ✅ Issue resolved with patch.

Screenshots

Before the Patch https://ibb.co/N6WQHmYr
After applying Patch https://ibb.co/vxqJBG22

#20 @SirLouen
6 months ago

  • Keywords needs-testing removed
Note: See TracTickets for help on using tickets.