Make WordPress Core

Opened 5 years ago

Closed 2 months ago

#53611 closed defect (bug) (fixed)

Font size inconsistency in the data erasure inline notice for 'additionalMessages' list items

Reported by: kimannwall Owned by: masteradhoc
Priority: normal Milestone: 7.1
Component: Privacy Version: 5.7.2
Severity: minor Keywords: has-patch commit
Cc: Focuses: ui, css

Description

This in reference to the unordered list items added by plugins or other code as 'additionalMessages' with a personal data erasure admin process.

The inline notice has a <p> tag with text about the completed request. Plugins can add messages using the wp_privacy_personal_data_erasers filter. Additional messages are displayed using the unordered list markup.

Right now, the <p> tag in this notice has a smaller font size and line height, so the added items are not uniform with the default message's appearance.

I'm working on an update that will add CSS to adjust the font-size and line-height of these list items to match the paragraph.

Attachments (1)

data-erasure-messages-ul-li-font-size.png​ (373.5 KB ) - added by kimannwall 5 years ago.

Download all attachments as: .zip

Change History (6)

This ticket was mentioned in ​PR #12021 on ​WordPress/wordpress-develop by ​@masteradhoc.


4 months ago
#1

  • Keywords has-patch added; needs-patch removed

Fix font size inconsistency in the data erasure inline notice for list items added via additionalMessages.

The inline notice rendered inside the personal data erasure list table contains a <p> element followed by a <ul> with plugin-provided messages. The <p> correctly inherits font-size: 13px from .notice p, but the <li> elements were inheriting font-size: 14px from the .widefat th rule, since the notice sits inside a <th colspan="5"> rather than a <td>.

This patch scopes the fix to notice list items only, avoiding unintended side effects on other lists within widefat tables:

.widefat td .notice ul li,
.widefat th .notice ul li {
    font-size: 13px;
    line-height: 1.5em;
}

Trac ticket: https://core.trac.wordpress.org/ticket/53611

## Use of AI Tools

AI assistance: Used for PR description

#2 @masteradhoc
4 months ago

Hey @kimannwall

Thanks for the issue and the good documentation on where this is coming from.
I drafted a PR to fix this rather small issue for WP.

---

Steps to reproduce:

  1. Install WordPress with WooCommerce and the WooCommerce Smooth Generator plugin
  2. Use Smooth Generator to generate products and orders
  3. Go to Tools → Erase Personal Data
  4. Add a data erasure request for one of the generated customer email addresses
  5. Confirm the request and use Force erase personal data to process it
  6. Once erasure completes, observe the inline notice that appears below the row — it contains a <p> with a summary message followed by a <ul> with WooCommerce-specific retention messages (e.g. "Personal data within order X has been retained.")
  7. The <li> text renders at 14px while the <p> text renders at 13px, causing a visible size inconsistency

After applying the fix it should look like this: ​https://snipboard.io/T4IAlj.jpg

#3 @masteradhoc
4 months ago

  • Milestone Awaiting Review → 7.1
  • Owner set to masteradhoc
  • Status new → assigned

#4 @joedolson
2 months ago

  • Keywords commit added

#5 @joedolson
2 months ago

  • Resolution → fixed
  • Status assigned → closed

In 62847:

Privacy: Fix type inconsistencies in data erasure inline notices.

Additional messages can be inserted by plugins using the wp_privacy_personal_data_erasers filter, and are generated as list items (li) inside the notice markup. However, li was not targeted with notice-specific styling, and inherited the list item styles from the containing table.

Add additional styles targeting list items inside notices in list tables to equalize font sizes and styling.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/12021

Props kimannwall, masteradhoc, joedolson.
Fixes #53611.

Note: See TracTickets for help on using tickets.