Make WordPress Core

Opened 18 months ago

Last modified 11 days ago

#44621 assigned enhancement

Privacy Policy Guide: Improve the readability of the suggested text

Reported by: birgire Owned by: garrett-eclipse
Milestone: 5.4 Priority: normal
Severity: normal Version: 4.9.6
Component: Privacy Keywords: has-screenshots has-patch needs-testing
Focuses: ui, accessibility, css, administration Cc:
PR Number:

Description (last modified by birgire)

The suggested text in the Privacy Policy Guide is in italic.

There's some discussion about italics on the web here:


where we e.g. have a link to the WCAG20 guideline regarding readability:

Avoiding chunks of italic text

I wonder if we can find another format/style to improve readability?

The Privacy Policy Guide is located here:


Attachments (14)

current-suggested-text-format.jpg (86.3 KB) - added by birgire 18 months ago.
Current "Suggested text" format
suggested-text-format-v1.jpg (91.5 KB) - added by birgire 18 months ago.
suggested-text-format-v2.jpg (88.1 KB) - added by birgire 18 months ago.
suggested-text-format-v3.jpg (87.7 KB) - added by birgire 18 months ago.
Screen Shot 2019-03-21 at 9.43.12 PM.png (243.0 KB) - added by garrett-eclipse 10 months ago.
Suggesting increased font size on the intro copy to give it better distinction from the suggested text
44621.diff (539 bytes) - added by sabernhardt 6 months ago.
44621-larger-text.png (74.6 KB) - added by sabernhardt 2 months ago.
larger text for informational paragraphs (1.1 em)
44621-larger-font.diff (620 bytes) - added by sabernhardt 2 months ago.
44621-white-background.png (74.2 KB) - added by sabernhardt 2 months ago.
suggested text with white background
44621-white-background.diff (717 bytes) - added by sabernhardt 2 months ago.
44621-white-background-aligned.diff (715 bytes) - added by sabernhardt 2 months ago.
white background option, aligned to the text container edge
tools page.png (62.7 KB) - added by afercia 8 weeks ago.
Tools page.
suggested-text-v4.png (379.0 KB) - added by melchoyce 6 weeks ago.
44621.2.diff (10.6 KB) - added by xkon 11 days ago.

Download all attachments as: .zip

Change History (45)

18 months ago

Current "Suggested text" format

#1 @birgire
18 months ago

I posted some ideas here above (v1, v2, v3) as a starting point, just to see how it compares to the current one.

Last edited 18 months ago by birgire (previous) (diff)

#2 @birgire
18 months ago

  • Description modified (diff)

#3 @SergeyBiryukov
18 months ago

  • Version changed from 4.6 to 4.9.6

#4 @jepperask
18 months ago

Personally I prefer v1 and v2. Combining all of them also works, but it is approaching a kind of blockquoteish styling:


#5 @SergeyBiryukov
18 months ago

  • Milestone changed from Awaiting Review to 4.9.9

This ticket was mentioned in Slack in #core-privacy by desrosj. View the logs.

18 months ago

#7 @desrosj
18 months ago

  • Keywords ui-feedback added

I like @jepperask's suggestion. I am marking for some ui-feedback to make sure that this get's the proper attention.

This ticket was mentioned in Slack in #core-privacy by desrosj. View the logs.

17 months ago

#9 @idea15
17 months ago

  • Owner set to idea15
  • Status changed from new to assigned

#10 @karmatosed
17 months ago

I would suggest the indent. I am not sure using a quote style or adding a background color helps. Do we have prior examples you are basing this on? I do agree to not have italic, so it's 'what' is the best here.

#11 @afercia
16 months ago

I'd agree italic shouldn't be used for big blocks of text.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

16 months ago

#13 @jameskockelbergh
16 months ago

Italic readability would improve if the typography size was larger.

#14 @pento
16 months ago

  • Milestone changed from 4.9.9 to Future Release

This ticket was mentioned in Slack in #core-privacy by webdevlaw. View the logs.

16 months ago

#16 @garrett-eclipse
12 months ago

  • Keywords needs-patch added

10 months ago

Suggesting increased font size on the intro copy to give it better distinction from the suggested text

#17 @garrett-eclipse
10 months ago

  • Keywords ui-feedback removed

I agree with @karmatosed and @afercia about avoiding italics and introducing the indent. And supplied an existing example of increasing the font size of the intro as @jameskockelbergh suggested which I agree gives it a better distinction.

6 months ago

#18 @sabernhardt
6 months ago

Since we seem to be in agreement about replacing the italicized style with indentation, I submitted a small patch to the stylesheet to achieve the layout shown in v3 (for both left-to-right and right-to-left directions).

#19 @garrett-eclipse
3 months ago

  • Keywords has-patch needs-testing added; needs-patch removed
  • Milestone changed from Future Release to 5.4
  • Owner changed from idea15 to garrett-eclipse

Thanks for the patch @sabernhardt going to look into this for 5.4.

#20 @sabernhardt
2 months ago

@garrett-eclipse Thanks for setting the milestone.

The previously submitted patch gives the simplest option. It is likely safe to add that version even in 5.3.1, having the least chance of causing trouble with anyone's current font and color settings. I specifically avoided changing the markup (so we would not also need to edit the JavaScript copy function and/or the wp_get_default_privacy_policy_content filter).

For further consideration, though, I'll add two other options, both with the words "Suggested text" indented along with the suggested text (one option with larger text size and one with a white background).

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

2 months ago

larger text for informational paragraphs (1.1 em)

2 months ago

suggested text with white background

#21 @garrett-eclipse
2 months ago

  • Keywords needs-design-feedback added

Thanks @sabernhardt for the patch, these are great.

Personally I'm a big fan of 44621-white-background.diff it stands out and even makes it easier for the user to grab the specific text within section they want.

All the patches applied cleanly to trunk and tested with the results (screens) you shared. I'm adding needs-design-feedback to get thoughts from the team there.

@birgire / @karmatosed / @afercia would appreciate your thoughts.

#22 @afercia
2 months ago

  • Keywords italic-text added

Personally, I'd prefer the white cards because they make very clear the distinction between "informational" text and the suggested text. Not sure the white boxes should be indented. Maybe for consistency they should use the same style of the white card in the wp-admin/tools.php page. Just my 2 cents :)

Related: #47327

#23 @sabernhardt
2 months ago

Yes, I was a little lazy by leaving the indent like that after trying borders. I'll upload a new patch to align the white edges with the other paragraphs, using 1.5em padding.

Borders, however, seem to require relative positioning and extra rules about when one element follows another. (I did create a patch that gives these sections a card style like on the Tools page, though I want to refrain from uploading any border option unless the other styles are deemed inadequate.)

2 months ago

white background option, aligned to the text container edge

#24 @karmatosed
2 months ago

My only point about the white is it seems like a pattern we don't use anywhere else. For example, we use quote styles, but this isn't a quote. I would be more inclined to say keep the indent as a result of this. Unless there is a styling can be borrowed from something else?

#25 @afercia
8 weeks ago

For an existing style, see the Tools page.

8 weeks ago

Tools page.

#26 @sabernhardt
8 weeks ago

Before we go further with a background color and/or border, could we determine whether either of the first two options is not good enough? (see 44621.diff and 44621-larger-font.diff)

A background color can require a special CSS rule in a plugin that supports dark mode or something similar, and borders here have even more potential to disrupt plugins. So I'd prefer a simpler fix, if possible.

Version 0, edited 8 weeks ago by sabernhardt (next)

#27 @karmatosed
7 weeks ago

Ah, thanks for that @afercia. For me that's slightly different use as a card style for an entire section, not using it as a callout. Is there a callout style in other text we can reuse?

#28 @melchoyce
6 weeks ago

Closest we have is probably an info notice.

I'm fine using card styles here, for what it's worth. I think it's a good use of existing styles to call out something that isn't a notice, and it does a good job of separating the suggested text from the explanatory text.

The HTML feels a little hectic on this page; I think we should, at the very least, group all suggested text within the same section into a div, and then style that div to match card styles. So, something like:

<div class="privacy-policy-suggested-text">
    <p><strong class="privacy-policy-tutorial">Suggested text:</strong> If you leave a comment on our site you may opt-in to saving your name, email address and website in cookies. These are for your convenience so that you do not have to fill in your details again when you leave another comment. These cookies will last for one year.</p>
    <p>If you visit our login page, we will set a temporary cookie to determine if your browser accepts cookies. This cookie contains no personal data and is discarded when you close your browser.</p>
    <p>When you log in, we will also set up several cookies to save your login information and your screen display choices. Login cookies last for two days, and screen options cookies last for a year. If you select "Remember Me", your login will persist for two weeks. If you log out of your account, the login cookies will be removed.</p>
    <p>If you edit or publish an article, an additional cookie will be saved in your browser. This cookie includes no personal data and simply indicates the post ID of the article you just edited. It expires after 1 day.</p>


.privacy-policy-suggested-text {
    padding: 0 .75em;
    border: 1px solid #ccd0d4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    background: #fff;

Attaching a screenshot of what that looks like.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.

5 weeks ago

#30 @garrett-eclipse
5 weeks ago

  • Focuses ui css administration added
  • Keywords needs-refresh added; needs-design-feedback italic-text removed

Thanks @melchoyce I definitely like that card approach and from discussions in #design triage on Slack seems this direction works nicely. Marking for a refresh.

P.S. Bonus this approach should make it simple to flag which sections updated when we address #44538

11 days ago

#31 @xkon
11 days ago

  • Keywords needs-refresh removed

44621.2.diff adds the styling that @melchoyce proposed.

Unfortunately, since there was no wrapper until this point and any plugin author was simply adding suggested texts as is (I've seen plugins using additional customized classes also), so we will have to communicate this change in case they would like to update their code as well to include the <div class="privacy-policy-suggested-text"></div> wrapper around the incoming suggestions for a unified style on the whole page.

Note: See TracTickets for help on using tickets.