WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 5 months ago

#49282 closed defect (bug) (fixed)

Cleanup Privacy .wp-policy-help CSS remnants (Broken back-compat)

Reported by: garrett-eclipse Owned by: azaozz
Milestone: 5.4 Priority: normal
Severity: normal Version: 4.9.6
Component: Privacy Keywords: needs-docs has-patch needs-testing
Focuses: css Cc:

Description

Hello,

This comes from a discovery in #44588 that we updated the original .wp-policy-help class to be .privacy-policy-tutorial in Changeset#43184.

There seems to be some remnant CSS in the TinyMCE CSS;
https://github.com/WordPress/wordpress-develop/blob/6b366c6620fdd5960cedcdf80955966a715efa82/src/js/_enqueues/vendor/tinymce/skins/wordpress/wp-content.css#L268-L271

One issue I've recently run into with the class change is it doesn't seem to have been properly disclosed to developers in a dev-note or otherwise so many plugins (such as WooCommerce, example) still utilize the old CSS class and as such their tutorial text is being copied along with the suggested text when the user goes to copy the section policy text.
*wpdirectory.net is currently not listing names but indicates there's 52 plugin matches and 3 theme matches.

CC @azaozz - As the original committer I wanted your advice. Should we update the copy code to support both classes and as such all existing plugins, or maybe setup a dev-note or reach out to the plugin developers to prompt them to update and use the more appropriate .privacy-policy-tutorial class?

Thank you

Attachments (5)

49282.diff (2.0 KB) - added by garrett-eclipse 6 months ago.
Patch to address the back-compat issues
49828.2.diff (1.9 KB) - added by garrett-eclipse 6 months ago.
Revert styling change selector back to .wp-suggested-text from .policy-text
49282.3.diff (761 bytes) - added by garrett-eclipse 5 months ago.
Update selector to .policy-text from .wp-suggested-text to apply new styling from #44621 to plugins for consistent UI
Screen Shot 2020-03-01 at 11.39.18 PM.png (185.7 KB) - added by garrett-eclipse 5 months ago.
3rd party plugins like WooCommerce/Ninja Forms weren't following the new styling as they hadn't adopted the .wp-suggested-text div
Screen Shot 2020-03-01 at 11.35.16 PM.png (189.6 KB) - added by garrett-eclipse 5 months ago.
Screen to illustrate result of patch making the styling consistent across core and plugins.

Download all attachments as: .zip

Change History (18)

#1 follow-up: @garrett-eclipse
6 months ago

  • Keywords needs-docs added

The specialized class .privacy-policy-tutorial should probably be added to the docblock for wp_add_privacy_policy_content so it's mentioned in the function reference and then we can also mention it in the handbook here;
Handbook - https://developer.wordpress.org/plugins/privacy/suggesting-text-for-the-site-privacy-policy/
Function Reference - https://developer.wordpress.org/reference/functions/wp_add_privacy_policy_content/

#2 in reply to: ↑ 1 @azaozz
6 months ago

  • Keywords needs-patch added; 2nd-opinion removed
  • Milestone changed from Awaiting Review to 5.4

Replying to garrett-eclipse:

The specialized class .privacy-policy-tutorial should probably be added to the docblock for wp_add_privacy_policy_content so it's mentioned in the function reference and then we can also mention it in the handbook here;

Yep, good idea.

their tutorial text is being copied along with the suggested text...

Yeah, can (probably) add the old class to https://core.trac.wordpress.org/browser/tags/5.3.2/src/wp-admin/css/edit.css#L732 so the content is hidden when copying the text (the way that works is the browser would only copy the visible text, so we hide the explanatory parts temporarily just before copying, then show them again). Looks like it would only need to add the .hide-privacy-policy-tutorial .wp-policy-help selector there.

Regarding TinyMCE, thinking that CSS should just be removed. Seems it was left there unintentionally.

Could you make a patch? :)

#3 @garrett-eclipse
6 months ago

  • Keywords has-patch needs-testing added; needs-patch removed
  • Version set to 5.1

Thanks @azaozz I've uploaded 49282.diff to account for these items;

  1. Deprecate .wp-policy-help from the tinymce css.
  2. Add back-compat CSS to hide .wp-policy-help from the copy command, and remove italic font so it displays and functions the same as .privacy-policy-tutorial
  3. I've added the following to the docblock for wp_add_privacy_policy_content in order to introduce this to the Function Reference. It's a little verbose so if there's any feedback on making it more concise I'm open to that.

The HTML contents of the $policy_text supports use of a specialized privacy-policy-tutorial css class which can be used to provide supplemental information. Any content contained within html elements that have the privacy-policy-tutorial css class applied will be omitted from the clipboard when the section content is copied.

  1. [NEW] While testing I found the tutorial text of plugins and suggested text didn't have the same styling and found when the wp-suggested-text div and italic css was added in Changeset#43184 it didn't apply to the plugin suggested text. To rectify this I've updated the css to use the other policy-text css wrapper as it applied both to the WP and plugin suggested text content.

The only other difference now I'm seeing is the plugins often don't use the <strong class="privacy-policy-tutorial">Suggested Text:</strong> prefix on their content. That's more of an education thing though and can be handled in the documentation example found here;
https://developer.wordpress.org/plugins/privacy/suggesting-text-for-the-site-privacy-policy/

Can you review @azaozz and was wondering if this would warrant a dev-note or if that ship has sailed and maybe we get the plugins team to reach out to affected themes/plugins in order to prompt them to change from using wp-policy-help to privacy-policy-tutorial so they can support WP users from 5.1>5.4 who would be affected by the back-compat reversion?

Last edited 6 months ago by garrett-eclipse (previous) (diff)

@garrett-eclipse
6 months ago

Patch to address the back-compat issues

#4 follow-up: @azaozz
6 months ago

[NEW] While testing I found the tutorial text of plugins and suggested text didn't have the same styling and found when the wp-suggested-text div...

Not sure if we should change that. If the plugins wanted to reuse WP's styling, they could have done that easily. They had couple of years to do that.

The rest looks good, thanks for the patch :)

Re: dev. note. Not really sure if this change is large enough. Thinking best to leave it in the hands of the Docs Coordinator for 5.4

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

@garrett-eclipse
6 months ago

Revert styling change selector back to .wp-suggested-text from .policy-text

#5 @garrett-eclipse
6 months ago

Thanks for the feedback @azaozz I've reverted the css class selector from .policy-text back to .wp-suggested-text in 49828.2.diff

#6 @azaozz
6 months ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 47112:

Privacy: Cleanup .wp-policy-help CSS remnants and add back-compat when hiding the tutorial content before copying.

Props garrett-eclipse.
Fixes #49282.

#7 @SergeyBiryukov
6 months ago

In 47113:

Docs: Remove extra trailing spaces from wp_add_privacy_policy_content() DocBlock to fix WPCS issues, apply minor formatting changes for consistency.

Follow-up to [47112].

See #49282.

#8 @garrett-eclipse
6 months ago

  • Version changed from 5.1 to 4.9.6

Note: I've realized I misunderstood when the original changes happened. Apparently #43473 introduced the change to trunk but #43980 replaced it before 4.9.6 was even released so for all public releases it's always used .privacy-policy-tutorial. Updating versions.

#9 in reply to: ↑ 4 @pputzer
5 months ago

Replying to azaozz:

[NEW] While testing I found the tutorial text of plugins and suggested text didn't have the same styling and found when the wp-suggested-text div...

Not sure if we should change that. If the plugins wanted to reuse WP's styling, they could have done that easily. They had couple of years to do that.

Only if they had been aware of the issue. Since there is very little documentation available, it's no surprise that they didn't. I don't think having plugins add an additional and semantically meaningless <div> is good practice. Instead, Core should make it easier to have consistent styling in the privacy policy guide automatically.

@garrett-eclipse
5 months ago

Update selector to .policy-text from .wp-suggested-text to apply new styling from #44621 to plugins for consistent UI

@garrett-eclipse
5 months ago

3rd party plugins like WooCommerce/Ninja Forms weren't following the new styling as they hadn't adopted the .wp-suggested-text div

@garrett-eclipse
5 months ago

Screen to illustrate result of patch making the styling consistent across core and plugins.

#10 follow-up: @garrett-eclipse
5 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Thanks @pputzer I agree considering the documentation makes no mention of the .wp-suggested-text div.
Docs Reference - https://developer.wordpress.org/plugins/privacy/suggesting-text-for-the-site-privacy-policy/

Also with the UI changing in #44621 the plugins that haven't adopted this div aren't styled consistently leading to a non-consistent UI.

In 49282.3.diff I've updated the selectors which brings conformity across core and plugin suggested privacy text. As well I added a 1em bottom margin to ensure the white background tutorial sections don't butt up against the Copy button.

Reopening to revisit and hopefully have the UI changes in 5.4 apply to plugins as well as core.

#11 in reply to: ↑ 10 @pputzer
5 months ago

Replying to garrett-eclipse:

In 49282.3.diff I've updated the selectors which brings conformity across core and plugin suggested privacy text. As well I added a 1em bottom margin to ensure the white background tutorial sections don't butt up against the Copy button.

Thank you! (Especially for adding the missing margin, which I noticed yesterday while committing the extra div to the development branch of Avatar Privacy, but didn't report yet.)

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.


5 months ago

#13 @johnbillion
5 months ago

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

In 47411:

Privacy: Reintroduce consistency to the styling of suggested privacy text from core and plugins.

Props garrett-eclipse

Fixes #49282

Note: See TracTickets for help on using tickets.