[wp-trac] [WordPress Trac] #49264: Consider a redesign for the Policy Settings page (includes Policy Guide and future Disclosures & Policies)

[WordPress Trac]

#49264: Consider a redesign for the Policy Settings page (includes Policy Guide and
future Disclosures & Policies)
-------------------------------------+-------------------------------------
 Reporter:  xkon                     |       Owner:  xkon
     Type:  enhancement              |      Status:  reviewing
 Priority:  normal                   |   Milestone:  5.7
Component:  Privacy                  |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch 2nd-opinion    |     Focuses:  ui, accessibility,
  needs-docs needs-dev-note          |  administration
  settings-api needs-testing         |
-------------------------------------+-------------------------------------
Changes (by xkon):

 * owner:  garrett-eclipse => xkon


Comment:

 @hellofromTonya I added [attachment:"49264.7.diff"] that includes the Copy
 button changes also. They where simple so splitting it up was going to
 make testing a bit harder as 2 patches would need to be applied for a
 simple change.

 To recap for a patch review & testing:

 [attachment:"49264.7.diff"] include all necessary changes for a re-design
 of the Privacy related pages ( including Settings & Policy Guide ). Using
 the same page styling that we used on Site Health we can now have a more
 compact and easy way to move around policies and a nicer Settings page
 overall.

 By applying the patch the end result should be similar to
 [attachment:"49264.7_preview.gif"] .

 All actions should work fine ( select policy page, create new page, copy
 to clipboard ).

 To make the new policy text styling work the Copy action and the way that
 the incoming policies are added via filters need to change a bit (
 basically by adding 1 new CSS style ).

 **Dev Notes**: Example Policy ( snippet taken from WooCommerce ) as a
 "current" vs "new" example to understand the differences and changes
 needed.

 - `wp-suggested-text` wrapper is not needed any more
 - `privacy-policy-tutorial` is not used any more.
 - Instead we're focusing on `privacy-policy-suggested-text` to stylize the
 suggested text properly & copy it to clipboard.
 - `privacy-policy-suggested-text-header` is also used but it's not
 mandatory.

 **Current styling of a policy:**
 {{{
 $content = '<div class="wp-suggested-text">' .
         '<p class="privacy-policy-tutorial">' .
                 __( 'This sample language includes the basics around what
 personal data your store may be collecting, storing and sharing, as well
 as who may have access to that data. Depending on what settings are
 enabled and which additional plugins are used, the specific information
 shared by your store will vary. We recommend consulting with a lawyer when
 deciding what information to disclose on your privacy policy.',
 'woocommerce' ) .
         '</p>' .
         '<p>' . __( 'We collect information about you during the checkout
 process on our store.', 'woocommerce' ) . '</p>' .
         '<h2>' . __( 'What we collect and store', 'woocommerce' ) .
 '</h2>' .
         '<p>' . __( 'While you visit our site, we’ll track:',
 'woocommerce' ) . '</p>' .
         '<ul>' .
                 '<li>' . __( 'Products you’ve viewed:  we’ll use this to,
 for example, show you products you’ve recently viewed', 'woocommerce' ) .
 '</li>' .
                 '<li>' . __( 'Location, IP address and browser type: we’ll
 use this for purposes like estimating taxes and shipping', 'woocommerce' )
 . '</li>' .
                 '<li>' . __( 'Shipping address: we’ll ask you to enter
 this so we can, for instance, estimate shipping before you place an order,
 and send you the order!', 'woocommerce' ) . '</li>' .
         '</ul>' .
         '</div>';
 }}}

 **New styling needed after patch is applied:**

 The `privacy-policy-suggested-text` can be applied to a `<p>` or a `<div>`
 etc to create the indentation needed.

 {{{
 $content = '<p>' .
                 __( 'This sample language includes the basics around what
 personal data your store may be collecting, storing and sharing, as well
 as who may have access to that data. Depending on what settings are
 enabled and which additional plugins are used, the specific information
 shared by your store will vary. We recommend consulting with a lawyer when
 deciding what information to disclose on your privacy policy.',
 'woocommerce' ) .
         '</p>' .
         '<p>' . __( 'We collect information about you during the checkout
 process on our store.', 'woocommerce' ) . '</p>' .
         '<h2>' . __( 'What we collect and store', 'woocommerce' ) .
 '</h2>' .
         '<p class="privacy-policy-suggested-text-header">' . __(
 'Suggested text:' ) . '</p>' .
         '<div class="privacy-policy-suggested-text">' .
         '<p>' . __( 'While you visit our site, we’ll track:',
 'woocommerce' ) . '</p>' .
         '<ul>' .
                 '<li>' . __( 'Products you’ve viewed:  we’ll use this to,
 for example, show you products you’ve recently viewed', 'woocommerce' ) .
 '</li>' .
                 '<li>' . __( 'Location, IP address and browser type: we’ll
 use this for purposes like estimating taxes and shipping', 'woocommerce' )
 . '</li>' .
                 '<li>' . __( 'Shipping address: we’ll ask you to enter
 this so we can, for instance, estimate shipping before you place an order,
 and send you the order!', 'woocommerce' ) . '</li>' .
         '</ul>' .
         '</div>';
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49264#comment:25>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform