WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 2 days ago

#49264 assigned enhancement

Consider a redesign for the Policy Settings page (includes Policy Guide and future Disclosures & Policies)

Reported by: xkon Owned by: xkon
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Privacy Keywords: needs-design-feedback has-patch 2nd-opinion needs-docs needs-dev-note
Focuses: ui, accessibility, administration, privacy Cc:

Description (last modified by xkon)

After some issues on various tickets similar to #44621 that touch various areas as accessibility, design & general functionality of the page ( i.e. to easily mark which text has been updated ).

I would like us if possible to re-think and re-design these pages, that I still feel like it's just a big blob of text. I'll be more than happy to do it and help and see this through as it's been bugging me since 4.9.6.

Some of the early mockups that I had for 4.9.6 were using accordions on this page similar to Site Health & Gutenberg Panels. At that time those had been turned down due to accessibility and other various issues as we wanted to catch the release and be on time and then got kinda forgotten /shrug :D.

We're passed that point now I believe and we're using accordion-type boxes almost everywhere within the admin (widgets, site health, editor, postboxes so on so forth).

This page on a site that has over 10 plugins is seriously a long mess IMHO and very hard to read/keep track at, we're talking about infinite scrolling :D.

In my opinion, we should re-explore the accordion view "per plugin" (similar to how Site Health pages have per check).

This would eventually ( for Policy Guide ):

  1. Greatly reduce scrolling (yes we have a TOC but..ref on the attached screenshot & imagine a multisite with 60+ plugins :) ).
  2. Will be easier to show which plugins have updated text.
  3. Provide better handling on incoming text from plugins/themes and acting as needed for Suggested text and general Guide text.

And other things that will eventually be adjusted on how this whole page works in general.

I'm adding a needs-design but I will be adding a patch also asap (after 5.4) trying to re-create my original idea with the styles that we're currently using for the sake of conversation & checking :).

Attachments (10)

policy_page_9_plugins.png (1.8 MB) - added by xkon 5 months ago.
preview of policy guide with 9 plugins active
49264.diff (11.9 KB) - added by xkon 4 months ago.
49264_preview.jpg (129.9 KB) - added by xkon 4 months ago.
49264.2.diff (26.6 KB) - added by xkon 4 months ago.
49264.2_preview.gif (3.3 MB) - added by xkon 4 months ago.
49264.3_preview.PNG (77.9 KB) - added by xkon 4 months ago.
49264.3.diff (29.1 KB) - added by xkon 4 months ago.
49264.4.diff (28.1 KB) - added by xkon 4 months ago.
49264.5.diff (51.9 KB) - added by xkon 4 months ago.
49264.5_preview.gif (8.6 MB) - added by xkon 4 months ago.

Change History (19)

@xkon
5 months ago

preview of policy guide with 9 plugins active

#1 @xkon
4 months ago

  • Description modified (diff)
  • Summary changed from Consider a redesign for the Policy Guide page to Consider a redesign for the Policy Settings page (includes Policy Guide and future Disclosures & Policies)

@xkon
4 months ago

@xkon
4 months ago

#2 @xkon
4 months ago

  • Keywords needs-design-feedback has-patch 2nd-opinion added; needs-patch needs-design removed

49264.diff makes a start to re-work the Privacy Settings page using a similar style to Site Health. I'll continue working on this and the next patch will hopefully include a full re-work on the Policy Guide.

The "Disclosures & Permissions" was just added for preview purposes even though it doesn't yet exist in Core ( it will be removed on next patch 😊 ).

@xkon
4 months ago

@xkon
4 months ago

#3 @xkon
4 months ago

49264.2.diff goes further down the changes and "merges" the Policy Guide page with Privacy Settings as a tab. This also makes it a page that it's not hidden anymore as the menu will continue to stay open (this is currently an issue as the privacy-policy-guide.php has no parent/menu so there's no indication at all).

There are various more little things to do here especially regarding the policy text loops and how we handle the suggested texts etc, but I think that the base is there now 😅.

As you can see (in my opinion) even though the text might still be long to read, the page is already becoming way more manageable and you can also keep your focus on the open policy that you're reading and not get lost from scrolling so easily.

Note that this patch introduces a new css file called privacy-settings.css instead of continuing inside the older edit.css that we are using until now.

Preview at 49264.2_preview.gif 😊 .

I'll continue the updates here asap, but feel free to jump in with any comments or ideas!

@xkon
4 months ago

#4 @xkon
4 months ago

49264.3.diff adds finishing touches to the CSS while moving things around to properly work (non-breaking changes) and all the main functionality is patched now 🙂.

It also moves & adds any extra CSS in common.css to avoid creating new files, so it makes it non-depended on major releases only.

Next steps:

  1. Wait for feedback.
  2. Work on the wp_add_privacy_policy_content() that requires a string and there have been a lot of plugins that are not adding styles, headers, etc correctly. I will be seeing on updating the function if possible to standardize a little bit how Policies can be added via an array as well (to keep back-compatibility also).

With an array, we can have more control over the output HTML that will help to prevent false classes and headings as well as make the Copy actions easier.

As an example we can have an array like:

<?php

$policy = array(
	array(
		'title'          => 'What personal data we collect and why we collect it',
		'tutorial_text'  => array(
			'Line 1',
			'Line 2',
			'Line 3',
			'Line 4',
		),
		'suggested_text' => array(
			'Write this',
			'Write this as well',
		),
	),
	array(
		'title'          => 'Embedded content from other websites',
		'tutorial_text'  => array(
			'Line 5',
			'Line 6',
			'Line 7',
		),
		'suggested_text' => array(
			'Write that',
			'Write that as well',
		),
	),
);

And output it's contents like so:

foreach ( $policy as $section ) {
	echo $section['title'];
	if ( array_key_exists( 'tutorial_text', $section ) ) {
		foreach ( $section['tutorial_text'] as $text ) {
			echo '<p class="privacy-policy-tutorial">' . $text . '</p>';
		}
	}
	if ( array_key_exists( 'suggested_text', $section ) ) {
		echo '<p class="privacy-policy-suggested-text">' . __( 'Suggested text:' ) . '</p>';
		foreach ( $section['suggested_text'] as $text ) {
			echo '<p class="privacy-policy-suggested-text">' . $text . '</p>';
		}
	}
}

@xkon
4 months ago

@xkon
4 months ago

#5 @xkon
4 months ago

49264.4.diff makes some minor edits for a clean application on top of 49264.3.diff.

I'll start working on the array proposal of comment 4 and will split that into a different ticket that will need this applied as well.

Since this has a lot of moving parts due to re-organizing the page I prefer to split them in smaller chunks regarding functionality and different things that will need to be altered.

@xkon
4 months ago

@xkon
4 months ago

#6 @xkon
4 months ago

  • Keywords needs-docs needs-dev-note added

After going over and over iterating on the array of my previous comments, I realized that there's no point of changing the current functionality and introduce back-compat issues "just for a text". Also if any author wanted multidimensional nesting it would be hard to follow after a point.

49264.5.diff takes a different approach on the Policy text by introducing just another "needed" class. At the moment the "Suggested" text was not using any class at all so it was hard to define and target it for easier usage either for CSS or copy/paste reasons etc.

Instead we can now use 2x classes. privacy-policy-tutorial (existing for general text) and the new privacy-policy-suggested-text for any suggestion related text.

I've also altered the get_default_content() to split our default policy text into an actual Guide and also as an incoming suggestion. This makes it easier to understand as you're not seeing everything in 1 read from Core and you can simply read the Guide only if you need to do so.

In this patch wp_get_default_privacy_policy_content filter is also getting deprecated. I'm not entirely sure why this was added but unfortunately I've seen a couple of plugins hooking there instead of using the correct wp_add_privacy_policy_content, resulting on changing/extending the Core guide + suggestions. Which IMHO is wrong and shouldn't happen. The guide and core suggestions should only be Cores responsibility with no way of altering them.

Preview at 49264.5_preview.gif .

@azaozz, this is a patch for a future release (if accepted) so it can definitely wait for now, but I'd love to hear your thoughts and any pointers before continuing especially regarding the deprecation, whenever you find some time :-).

--

Todo:
If/when this patch is implemented we will have to add some extra CSS rules for back-compat with the existing ones and update the Copy to clipboard functionality to support both if possible.

Side note:
It seems that we totally missed of informing the Authors about how to properly write their Policy in general as there's no mention at all about classes and correct text convention at https://developer.wordpress.org/plugins/privacy/suggesting-text-for-the-site-privacy-policy/ .

We should be updating those docs in any case and explaining that it would be for the best to start with <h2> and smaller headings, as well as regarding the correct <p> and their classes.

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


4 months ago

#8 @xkon
4 months ago

#46687 was marked as a duplicate.

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


2 days ago

Note: See TracTickets for help on using tickets.