Ticket #49264: 49264.3.diff

src/js/_enqueues/admin/privacy-tools.js

@@ -77 +77 @@
 
                         appendResultsAfterRow( $requestRow, 'notice-success', summaryMessage, [] );
                         $this.hide();
-                        
+
                         if ( 'undefined' !== typeof zipUrl ) {
                                 window.location = zipUrl;
                         } else if ( ! sendAsEmail ) {
@@ -259 +259 @@
                         }
                 }
         });
+
+        /**
+         * Handle the new JS for the revamped Policy Settings
+         */
+        $( 'body.options-privacy-php label[for=create-page]' ).on( 'click', function( e ) {
+                e.preventDefault();
+                $( 'input#create-page' ).focus();
+        } );
+
+        // Accordion handling in various areas.
+        $( '.privacy-settings-accordion' ).on( 'click', '.privacy-settings-accordion-trigger', function() {
+                var isExpanded = ( 'true' === $( this ).attr( 'aria-expanded' ) );
+
+                if ( isExpanded ) {
+                        $( this ).attr( 'aria-expanded', 'false' );
+                        $( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', true );
+                } else {
+                        $( this ).attr( 'aria-expanded', 'true' );
+                        $( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', false );
+                }
+        } );
 });
 

src/wp-admin/css/common.css

@@ -4064 +4064 @@
                 text-align: left;
         }
 }
+
+/**
+* Privacy Settings section
+*/
+
+/* General */
+.privacy-settings #wpcontent,
+.privacy-settings.auto-fold #wpcontent {
+        padding-left: 0;
+}
+
+.privacy-settings-header h1 {
+        display: inline-block;
+        font-weight: 600;
+        margin: 0 0.8rem 1rem;
+        font-size: 23px;
+        padding: 9px 0 4px 0;
+        line-height: 1.3;
+}
+
+.privacy-settings-body h2 {
+        padding: 1rem 0;
+        line-height: 1.4;
+}
+
+.privacy-settings-body h3 {
+        padding: 0;
+        font-weight: 400;
+}
+
+/* Header */
+.privacy-settings-header {
+        text-align: center;
+        margin: 0 0 1rem;
+        background: #fff;
+        border-bottom: 1px solid #e2e4e7;
+}
+
+.privacy-settings-title-section {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        clear: both;
+}
+
+.privacy-settings-tabs-wrapper {
+        /* IE 11 */
+        display: -ms-inline-grid;
+        -ms-grid-columns: 1fr 1fr;
+        vertical-align: top;
+        /* modern browsers */
+        display: inline-grid;
+        grid-template-columns: 1fr 1fr;
+}
+
+.privacy-settings-tab {
+        display: block; /* IE 11 */
+        text-decoration: none;
+        color: inherit;
+        padding: 0.5rem 1rem 1rem;
+        margin: 0 1rem;
+        transition: box-shadow 0.5s ease-in-out;
+}
+
+.privacy-settings-tab:nth-child(1) {
+        -ms-grid-column: 1; /* IE 11 */
+}
+
+.privacy-settings-tab:nth-child(2) {
+        -ms-grid-column: 2; /* IE 11 */
+}
+
+.privacy-settings-tab:focus {
+        color: #191e23;
+        outline: 1px solid #6c7781;
+        box-shadow: none;
+}
+
+.privacy-settings-tab.active {
+        box-shadow: inset 0 -3px #007cba;
+        font-weight: 600;
+}
+
+/* Body */
+.privacy-settings-body {
+        max-width: 800px;
+        margin: 0 auto;
+}
+
+.tools-privacy-policy-page th {
+        min-width: 230px;
+}
+
+.hr-separator {
+        margin-top: 20px;
+        margin-bottom: 15px;
+}
+
+/* Accordions */
+.privacy-settings-accordion {
+        border: 1px solid #ccd0d4;
+}
+
+.privacy-settings-accordion-heading {
+        margin: 0;
+        border-top: 1px solid #ccd0d4;
+        font-size: inherit;
+        line-height: inherit;
+        font-weight: 600;
+        color: inherit;
+}
+
+.privacy-settings-accordion-heading:first-child {
+        border-top: none;
+}
+
+.privacy-settings-accordion-trigger {
+        background: #fff;
+        border: 0;
+        color: #32373c;
+        cursor: pointer;
+        display: flex;
+        font-weight: 400;
+        margin: 0;
+        padding: 1em 3.5em 1em 1.5em;
+        min-height: 46px;
+        position: relative;
+        text-align: left;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+}
+
+.privacy-settings-accordion-trigger:hover,
+.privacy-settings-accordion-trigger:active {
+        background: #f8f9f9;
+}
+
+.privacy-settings-accordion-trigger:focus {
+        color: #191e23;
+        border: none;
+        box-shadow: none;
+        outline-offset: -2px;
+        outline: 1px dotted #555d66;
+}
+
+.privacy-settings-accordion-trigger .title {
+        pointer-events: none;
+        font-weight: 600;
+        flex-grow: 1;
+}
+
+.privacy-settings-accordion-trigger .icon,
+.privacy-settings-view-read .icon {
+        border: solid #555d66;
+        border-width: 0 2px 2px 0;
+        height: 0.5rem;
+        pointer-events: none;
+        position: absolute;
+        right: 1.5em;
+        top: 50%;
+        transform: translateY(-70%) rotate(45deg);
+        width: 0.5rem;
+}
+
+.privacy-settings-accordion-trigger .badge {
+        padding: 0.1rem 0.5rem 0.15rem;
+        color: #32373c;
+        font-weight: 600;
+        margin-left: 0.5rem;
+}
+
+.privacy-settings-accordion-trigger .badge.blue {
+        border: 1px solid #bfe7f3;
+}
+
+.privacy-settings-accordion-trigger .badge.orange {
+        border: 1px solid #ffb900;
+}
+
+.privacy-settings-accordion-trigger .badge.red {
+        border: 1px solid #dc3232;
+}
+
+.privacy-settings-accordion-trigger .badge.green {
+        border: 1px solid #46b450;
+}
+
+.privacy-settings-accordion-trigger .badge.purple {
+        border: 1px solid #826eb4;
+}
+
+.privacy-settings-accordion-trigger .badge.gray {
+        border: 1px solid #ccd0d4;
+}
+
+.privacy-settings-accordion-trigger[aria-expanded="true"] .icon,
+.privacy-settings-view-passed[aria-expanded="true"] .icon {
+        transform: translateY(-30%) rotate(-135deg)
+}
+
+.privacy-settings-accordion-panel {
+        margin: 0;
+        padding: 1em 1.5em;
+        background: #fff;
+}
+
+.privacy-settings-accordion-panel[hidden] {
+        display: none;
+}
+
+.privacy-settings-accordion-panel a .dashicons {
+        text-decoration: none;
+}
+
+.privacy-settings-accordion-actions {
+        text-align: right;
+        display: block;
+}
+
+/* Suggested text for privacy policy */
+.wp-suggested-text h1,
+.wp-suggested-text h2,
+.wp-suggested-text h3,
+.wp-suggested-text h4,
+.wp-suggested-text h5,
+.wp-suggested-text h6 {
+        font-weight: 600;
+}
+
+.wp-suggested-text .privacy-suggested-text {
+        font-weight: 600;
+}
+
+/* Media queries */
+@media screen and (max-width: 782px) {
+
+        .privacy-settings-body {
+                margin: 0 12px;
+                width: auto;
+        }
+
+        .privacy-settings .notice {
+                margin: 5px 10px 15px;
+        }
+
+        .privacy-settings .update-nag {
+                margin-right: 10px;
+                margin-left: 10px;
+        }
+
+        input#create-page {
+                margin-top: 10px;
+        }
+}
+
+@media only screen and (max-width: 1004px) {
+
+        .privacy-settings-body {
+                margin: 0 22px;
+                width: auto;
+        }
+}
+
+/**
+* End Privacy Settings section
+*/

src/wp-admin/css/edit.css

@@ -658 +658 @@
         min-height: 1.6923em;
 }
 
-/* Suggested text for privacy policy */
-.wp-privacy-policy-guide {
-        max-width: 1000px;
-}
-
-.privacy-text-box {
-        width: calc(100% - 260px);
-}
-
-.privacy-text-box-toc {
-        float: right;
-        width: 250px;
-        background-color: #fff;
-}
-
-.privacy-text-box-toc p {
-        margin: 0;
-        padding: 0.7em 1em;
-        border-bottom: 1px solid #eee;
-}
-
-.privacy-text-box-toc ol {
-        margin-left: 2em;
-}
-
-.wp-privacy-policy-guide h3 {
-        font-size: 1.2em;
-        margin: 1em 0 0.5em;
-}
-
-.privacy-text-section .privacy-text-copy {
-        float: right;
-}
-
-.privacy-text-section {
-        position: relative;
-        border-top: 1px solid #e3e3e3;
-}
-
-.privacy-text-box-head,
-.privacy-text-section.text-removed {
-        padding-bottom: 12px;
-}
-
-.text-removed .policy-text {
-        font-style: italic;
-        color: #666;
-        font-weight: 600;
-}
-
-.privacy-text-actions {
-        height: 32px;
-        line-height: 2.46153846;
-        padding-bottom: 6px;
-}
-
-.wp-privacy-policy-guide .policy-text h2 {
-        margin: 1.2em 0 1em;
-        padding: 0;
-}
-
-.suggested-policy-content {
-        font-style: italic;
-}
-
-.privacy-text-section a.return-to-top {
-        float: right;
-        margin-right: -250px;
-        margin-top: 6px;
-}
-
-.hide-privacy-policy-tutorial .privacy-policy-tutorial {
-        visibility: hidden;
-}
-
-.wp-suggested-text p {
-        font-style: italic;
-}
-
-.wp-suggested-text p.privacy-policy-tutorial {
-        font-style: normal;
-}
-
-.notice.wp-pp-notice {
-        margin: 15px 0 3px;
-}
-
 /*------------------------------------------------------------------------------
   11.1 - Custom Fields
 ------------------------------------------------------------------------------*/

src/wp-admin/includes/admin-filters.php

@@ -140 +140 @@
 // Show a "postbox" with the text suggestions for a privacy policy.
 add_action( 'admin_notices', array( 'WP_Privacy_Policy_Content', 'notice' ) );
 
-// Add the suggested policy text from WordPress.
-add_action( 'admin_init', array( 'WP_Privacy_Policy_Content', 'add_suggested_content' ), 1 );
-
 // Update the cached policy info when the policy page is updated.
 add_action( 'post_updated', array( 'WP_Privacy_Policy_Content', '_policy_page_updated' ) );
 

src/wp-admin/includes/class-wp-privacy-policy-content.php

@@ -142 +142 @@
                                 printf(
                                         /* translators: %s: Privacy Policy Guide URL. */
                                         __( 'The suggested privacy policy text has changed. Please <a href="%s">review the guide</a> and update your privacy policy.' ),
-                                        esc_url( admin_url( 'privacy-policy-guide.php' ) )
+                                        esc_url( admin_url( 'options-privacy.php?tab=policyguide' ) )
                                 );
                         ?>
                         </p>
@@ -325 +325 @@
                 }
 
                 $message = __( 'Need help putting together your new Privacy Policy page? Check out our guide for recommendations on what content to include, along with policies suggested by your plugins and theme.' );
-                $url     = esc_url( admin_url( 'privacy-policy-guide.php' ) );
+                $url     = esc_url( admin_url( 'options-privacy.php?tab=policyguide' ) );
                 $label   = __( 'View Privacy Policy Guide.' );
 
                 if ( get_current_screen()->is_block_editor() ) {
@@ -373 +373 @@
                 $content_array = self::get_suggested_policy_text();
 
                 $content       = '';
-                $toc           = array( '<li><a href="#wp-privacy-policy-guide-introduction">' . __( 'Introduction' ) . '</a></li>' );
                 $date_format   = __( 'F j, Y' );
-                $copy          = __( 'Copy this section to clipboard' );
-                $return_to_top = '<a href="#" class="return-to-top">' . __( '&uarr; Return to Top' ) . '</a>';
 
                 foreach ( $content_array as $section ) {
                         $class   = '';
@@ -384 +381 @@
                         $removed = '';
 
                         if ( ! empty( $section['removed'] ) ) {
-                                $class = ' text-removed';
+                                $badge_class = ' red';
+
                                 $date  = date_i18n( $date_format, $section['removed'] );
+
                                 /* translators: %s: Date of plugin deactivation. */
-                                $meta = sprintf( __( 'Removed %s.' ), $date );
+                                $badge_title = sprintf( __( 'Removed %s.' ), $date );
 
                                 /* translators: %s: Date of plugin deactivation. */
                                 $removed = __( 'You deactivated this plugin on %s and may no longer need this policy.' );
                                 $removed = '<div class="error inline"><p>' . sprintf( $removed, $date ) . '</p></div>';
                         } elseif ( ! empty( $section['updated'] ) ) {
-                                $class = ' text-updated';
+                                $badge_class = ' blue';
+
                                 $date  = date_i18n( $date_format, $section['updated'] );
-                                /* translators: %s: Date of privacy policy text update. */
-                                $meta = sprintf( __( 'Updated %s.' ), $date );
-                        }
 
-                        if ( $meta ) {
-                                $meta = '<br><span class="privacy-text-meta">' . $meta . '</span>';
+                                /* translators: %s: Date of privacy policy text update. */
+                                $badge_title = sprintf( __( 'Updated %s.' ), $date );
                         }
 
                         $plugin_name = esc_html( $section['plugin_name'] );
-                        $toc_id      = 'wp-privacy-policy-guide-' . sanitize_title( $plugin_name );
-                        $toc[]       = sprintf( '<li><a href="#%1$s">%2$s</a>' . $meta . '</li>', $toc_id, $plugin_name );
-
-                        $content .= '<div class="privacy-text-section' . $class . '">';
-                        $content .= '<a id="' . $toc_id . '">&nbsp;</a>';
-                        /* translators: %s: Plugin name. */
-                        $content .= '<h2>' . sprintf( __( 'Source: %s' ), $plugin_name ) . '</h2>';
-                        $content .= $removed;
-
-                        $content .= '<div class="policy-text">' . $section['policy_text'] . '</div>';
-                        $content .= $return_to_top;
-
-                        if ( empty( $section['removed'] ) ) {
-                                $content         .= '<div class="privacy-text-actions">';
-                                        $content     .= '<button type="button" class="privacy-text-copy button">';
-                                                $content .= $copy;
-                                                $content .= '<span class="screen-reader-text">';
-                                                /* translators: %s: Plugin name. */
-                                                $content .= sprintf( __( 'Copy suggested policy text from %s.' ), $plugin_name );
-                                                $content .= '</span>';
-                                        $content     .= '</button>';
-                                $content         .= '</div>';
-                        }
-
-                        $content .= "</div>\n"; // End of .privacy-text-section.
-                }
 
-                if ( count( $toc ) > 2 ) {
+                        $sanitized_policy_name = sanitize_title_with_dashes( $plugin_name );
                         ?>
-                        <div  class="privacy-text-box-toc">
-                                <p><?php _e( 'Table of Contents' ); ?></p>
-                                <ol>
-                                        <?php echo implode( "\n", $toc ); ?>
-                                </ol>
+                        <h4 class="privacy-settings-accordion-heading">
+                        <button aria-expanded="false" class="privacy-settings-accordion-trigger" aria-controls="privacy-settings-accordion-block-<?php echo $sanitized_policy_name; ?>" type="button">
+                                <span class="title"><?php echo $plugin_name ?></span>
+                                <?php if ( ! empty( $section['removed'] ) || ! empty( $section['updated'] ) ) : ?>
+                                <span class="badge <?php echo $badge_class; ?>"> <?php echo $badge_title ?></span>
+                                <?php endif; ?>
+                                <span class="icon"></span>
+                        </button>
+                        </h4>
+                        <div id="privacy-settings-accordion-block-<?php echo $sanitized_policy_name; ?>" class="privacy-settings-accordion-panel privacy-text-box-body" hidden="hidden">
+                                <?php
+                                echo $removed;
+                                echo $section['policy_text'];
+                                ?>
+                                <?php if ( empty( $section['removed'] ) ) : ?>
+                                <div class="privacy-settings-accordion-actions">
+                                        <button type="button" class="privacy-text-copy button">
+                                                <?php _e( 'Copy this section to clipboard' ); ?>
+                                                <span class="screen-reader-text">
+                                                        <?php
+                                                        /* translators: %s: Plugin name. */
+                                                        sprintf( __( 'Copy suggested policy text from %s.' ), $plugin_name );
+                                                        ?>
+                                                </span>
+                                        </button>
+                                </div>
+                                <?php endif; ?>
                         </div>
                         <?php
                 }
-
-                ?>
-                <div class="privacy-text-box">
-                        <div class="privacy-text-box-head">
-                                <a id="wp-privacy-policy-guide-introduction">&nbsp;</a>
-                                <h2><?php _e( 'Introduction' ); ?></h2>
-                                <p><?php _e( 'Hello,' ); ?></p>
-                                <p><?php _e( 'This text template will help you to create your web site&#8217;s privacy policy.' ); ?></p>
-                                <p><?php _e( 'We have suggested the sections you will need. Under each section heading you will find a short summary of what information you should provide, which will help you to get started. Some sections include suggested policy content, others will have to be completed with information from your theme and plugins.' ); ?></p>
-                                <p><?php _e( 'Please edit your privacy policy content, making sure to delete the summaries, and adding any information from your theme and plugins. Once you publish your policy page, remember to add it to your navigation menu.' ); ?></p>
-                                <p><?php _e( 'It is your responsibility to write a comprehensive privacy policy, to make sure it reflects all national and international legal requirements on privacy, and to keep your policy current and accurate.' ); ?></p>
-                        </div>
-
-                        <div class="privacy-text-box-body">
-                                <?php echo $content; ?>
-                        </div>
-                </div>
-                <?php
         }
 
         /**
@@ -712 +687 @@
                  */
                 return apply_filters( 'wp_get_default_privacy_policy_content', $content, $strings, $description, $blocks );
         }
-
-        /**
-         * Add the suggested privacy policy text to the policy postbox.
-         *
-         * @since 4.9.6
-         */
-        public static function add_suggested_content() {
-                $content = self::get_default_content( true, false );
-                wp_add_privacy_policy_content( __( 'WordPress' ), $content );
-        }
 }

src/wp-admin/options-privacy.php

@@ -13 +13 @@
         wp_die( __( 'Sorry, you are not allowed to manage privacy on this site.' ) );
 }
 
+if ( isset( $_GET['tab'] ) && 'policyguide' === $_GET['tab'] ) {
+        require_once( dirname( __FILE__ ) . '/privacy-policy-guide.php' );
+        return;
+}
+
+add_filter(
+        'admin_body_class',
+        function( $body_class ) {
+                $body_class .= ' privacy-settings ';
+
+                return $body_class;
+        }
+);
+
 $action = isset( $_POST['action'] ) ? $_POST['action'] : '';
 
 if ( ! empty( $action ) ) {
@@ -112 +126 @@
         }
 }
 
-$title       = __( 'Privacy Settings' );
 $parent_file = 'options-general.php';
 
+wp_enqueue_script( 'privacy-tools' );
+
 require_once( ABSPATH . 'wp-admin/admin-header.php' );
 
 ?>
-<div class="wrap">
-        <h1><?php echo $title; ?></h1>
-        <h2><?php _e( 'Privacy Policy Page' ); ?></h2>
+<div class="privacy-settings-header">
+        <div class="privacy-settings-title-section">
+                <h1>
+                        <?php _e( 'Privacy' ); ?>
+                </h1>
+        </div>
+
+        <nav class="privacy-settings-tabs-wrapper hide-if-no-js" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
+                <a href="<?php echo esc_url( admin_url( 'options-privacy.php' ) ); ?>" class="privacy-settings-tab active" aria-current="true">
+                        <?php
+                        /* translators: Tab heading for Site Health Status page. */
+                        _ex( 'Settings', 'Privacy Settings' );
+                        ?>
+                </a>
+
+                <a href="<?php echo esc_url( admin_url( 'options-privacy.php?tab=policyguide' ) ); ?>" class="privacy-settings-tab">
+                        <?php
+                        /* translators: Tab heading for Site Health Status page. */
+                        _ex( 'Policy Guide', 'Privacy Settings' );
+                        ?>
+                </a>
+        </nav>
+</div>
+
+<hr class="wp-header-end">
+
+<div class="notice notice-error hide-if-js">
+        <p><?php _e( 'The Privacy Settings require JavaScript.' ); ?></p>
+</div>
+
+<div class="privacy-settings-body hide-if-no-js">
+        <h2><?php _e( 'Privacy Settings' ); ?></h2>
         <p>
                 <?php _e( 'As a website owner, you may need to follow national or international privacy laws. For example, you may need to create and display a Privacy Policy.' ); ?>
                 <?php _e( 'If you already have a Privacy Policy page, please select it below. If not, please create one.' ); ?>
@@ -133 +177 @@
                 <?php _e( 'After your Privacy Policy page is set, we suggest that you edit it.' ); ?>
                 <?php _e( 'We would also suggest reviewing your Privacy Policy from time to time, especially after installing or updating any themes or plugins. There may be changes or new suggested information for you to consider adding to your policy.' ); ?>
         </p>
-        <?php
-
-        if ( $privacy_policy_page_exists ) {
-                $edit_href = add_query_arg(
-                        array(
-                                'post'   => $privacy_policy_page_id,
-                                'action' => 'edit',
-                        ),
-                        admin_url( 'post.php' )
-                );
-
-                $view_href = get_permalink( $privacy_policy_page_id );
-                ?>
-                <p class="tools-privacy-edit"><strong>
-                        <?php
-                        if ( 'publish' === get_post_status( $privacy_policy_page_id ) ) {
-                                printf(
-                                        /* translators: 1: URL to edit Privacy Policy page, 2: URL to view Privacy Policy page. */
-                                        __( '<a href="%1$s">Edit</a> or <a href="%2$s">view</a> your Privacy Policy page content.' ),
-                                        esc_url( $edit_href ),
-                                        esc_url( $view_href )
-                                );
-                        } else {
-                                printf(
-                                        /* translators: 1: URL to edit Privacy Policy page, 2: URL to preview Privacy Policy page. */
-                                        __( '<a href="%1$s">Edit</a> or <a href="%2$s">preview</a> your Privacy Policy page content.' ),
-                                        esc_url( $edit_href ),
-                                        esc_url( $view_href )
-                                );
-                        }
-                        ?>
-                </strong></p>
-                <?php
-        }
-        ?>
         <p>
                 <?php
+                if ( $privacy_policy_page_exists ) {
+                        $edit_href = add_query_arg(
+                                array(
+                                        'post'   => $privacy_policy_page_id,
+                                        'action' => 'edit',
+                                ),
+                                admin_url( 'post.php' )
+                        );
+
+                        $view_href = get_permalink( $privacy_policy_page_id );
+                        ?>
+                                <strong>
+                                <?php
+                                if ( 'publish' === get_post_status( $privacy_policy_page_id ) ) {
+                                        printf(
+                                                /* translators: 1: URL to edit Privacy Policy page, 2: URL to view Privacy Policy page. */
+                                                __( '<a href="%1$s">Edit</a> or <a href="%2$s">view</a> your Privacy Policy page content.' ),
+                                                esc_url( $edit_href ),
+                                                esc_url( $view_href )
+                                        );
+                                } else {
+                                        printf(
+                                                /* translators: 1: URL to edit Privacy Policy page, 2: URL to preview Privacy Policy page. */
+                                                __( '<a href="%1$s">Edit</a> or <a href="%2$s">preview</a> your Privacy Policy page content.' ),
+                                                esc_url( $edit_href ),
+                                                esc_url( $view_href )
+                                        );
+                                }
+                                ?>
+                                </strong>
+                        <?php
+                }
                 printf(
                         /* translators: 1: Privacy Policy guide URL, 2: Additional link attributes, 3: Accessibility text. */
-                        __( 'Need help putting together your new Privacy Policy page? <a href="%1$s" %2$s>Check out our guide%3$s</a> for recommendations on what content to include, along with policies suggested by your plugins and theme.' ),
-                        esc_url( admin_url( 'privacy-policy-guide.php' ) ),
+                        __( 'Need help putting together your new Privacy Policy page? <a href="%1$s" %2$s>Check out our Privacy Policy guide%3$s</a> for recommendations on what content to include, along with policies suggested by your plugins and theme.' ),
+                        esc_url( admin_url( 'options-privacy.php?tab=policyguide' ) ),
                         '',
                         ''
                 );
@@ -181 +222 @@
         </p>
 
         <hr>
+
+        <?php
+        $has_pages = (bool) get_posts(
+                array(
+                        'post_type'      => 'page',
+                        'posts_per_page' => 1,
+                        'post_status'    => array(
+                                'publish',
+                                'draft',
+                        ),
+                )
+        );
+        ?>
+
         <table class="form-table tools-privacy-policy-page" role="presentation">
+                <tr>
+                        <th scope="row">
+                                <label for="create-page">
+                                <?php
+                                if ( $has_pages ) {
+                                        _e( 'Create a new Privacy Policy Page' );
+                                } else {
+                                        _e( 'There are no pages.' );
+                                }
+                                ?>
+                                </label>
+                        </td>
+                        <td>
+                                <form class="wp-create-privacy-page" method="post" action="">
+                                        <input type="hidden" name="action" value="create-privacy-page" />
+                                        <?php
+                                        wp_nonce_field( 'create-privacy-page' );
+
+                                        submit_button( __( 'Create' ), 'secondary', 'submit', false, array( 'id' => 'create-page' ) );
+                                        ?>
+                                </form>
+                        </td>
+                </tr>
+                <?php if ( $has_pages ) : ?>
                 <tr>
                         <th scope="row">
                                 <label for="page_for_privacy_policy">
@@ -195 +274 @@
                                 </label>
                         </th>
                         <td>
-                                <?php
-                                $has_pages = (bool) get_posts(
-                                        array(
-                                                'post_type'      => 'page',
-                                                'posts_per_page' => 1,
-                                                'post_status'    => array(
-                                                        'publish',
-                                                        'draft',
-                                                ),
-                                        )
-                                );
-
-                                if ( $has_pages ) :
-                                        ?>
-                                        <form method="post" action="">
-                                                <input type="hidden" name="action" value="set-privacy-page" />
-                                                <?php
-                                                wp_dropdown_pages(
-                                                        array(
-                                                                'name'              => 'page_for_privacy_policy',
-                                                                'show_option_none'  => __( '&mdash; Select &mdash;' ),
-                                                                'option_none_value' => '0',
-                                                                'selected'          => $privacy_policy_page_id,
-                                                                'post_status'       => array( 'draft', 'publish' ),
-                                                        )
-                                                );
-
-                                                wp_nonce_field( 'set-privacy-page' );
-
-                                                submit_button( __( 'Use This Page' ), 'primary', 'submit', false, array( 'id' => 'set-page' ) );
-                                                ?>
-                                        </form>
-                                <?php endif; ?>
-
-                                <form class="wp-create-privacy-page" method="post" action="">
-                                        <input type="hidden" name="action" value="create-privacy-page" />
-                                        <span>
-                                                <?php
-                                                if ( $has_pages ) {
-                                                        _e( 'Or:' );
-                                                } else {
-                                                        _e( 'There are no pages.' );
-                                                }
-                                                ?>
-                                        </span>
+                                <form method="post" action="">
+                                        <input type="hidden" name="action" value="set-privacy-page" />
                                         <?php
-                                        wp_nonce_field( 'create-privacy-page' );
+                                        wp_dropdown_pages(
+                                                array(
+                                                        'name'              => 'page_for_privacy_policy',
+                                                        'show_option_none'  => __( '&mdash; Select &mdash;' ),
+                                                        'option_none_value' => '0',
+                                                        'selected'          => $privacy_policy_page_id,
+                                                        'post_status'       => array( 'draft', 'publish' ),
+                                                )
+                                        );
 
-                                        submit_button( __( 'Create New Page' ), 'primary', 'submit', false, array( 'id' => 'create-page' ) );
+                                        wp_nonce_field( 'set-privacy-page' );
+
+                                        submit_button( __( 'Use This Page' ), 'primary', 'submit', false, array( 'id' => 'set-page' ) );
                                         ?>
                                 </form>
                         </td>
                 </tr>
+                <?php endif; ?>
         </table>
+
 </div>
 <?php
 

src/wp-admin/privacy-policy-guide.php

@@ -17 +17 @@
         include_once( ABSPATH . 'wp-admin/includes/class-wp-privacy-policy-content.php' );
 }
 
-$title = __( 'Privacy Policy Guide' );
+add_filter(
+        'admin_body_class',
+        function( $body_class ) {
+                $body_class .= ' privacy-settings ';
+
+                return $body_class;
+        }
+);
 
 wp_enqueue_script( 'privacy-tools' );
 
 require_once( ABSPATH . 'wp-admin/admin-header.php' );
 
 ?>
-<div class="wrap">
-        <h1><?php echo esc_html( $title ); ?></h1>
+<div class="privacy-settings-header">
+        <div class="privacy-settings-title-section">
+                <h1>
+                        <?php _e( 'Privacy' ); ?>
+                </h1>
+        </div>
+
+        <nav class="privacy-settings-tabs-wrapper hide-if-no-js" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
+                <a href="<?php echo esc_url( admin_url( 'options-privacy.php' ) ); ?>" class="privacy-settings-tab">
+                        <?php
+                        /* translators: Tab heading for Site Health Status page. */
+                        _ex( 'Settings', 'Privacy Settings' );
+                        ?>
+                </a>
+
+                <a href="<?php echo esc_url( admin_url( 'options-privacy.php?tab=policyguide' ) ); ?>" class="privacy-settings-tab active" aria-current="true">
+                        <?php
+                        /* translators: Tab heading for Site Health Status page. */
+                        _ex( 'Policy Guide', 'Privacy Settings' );
+                        ?>
+                </a>
+        </nav>
+</div>
+
+<hr class="wp-header-end">
+
+<div class="notice notice-error hide-if-js">
+        <p><?php _e( 'The Privacy Settings require JavaScript.' ); ?></p>
+</div>
 
-        <div class="wp-privacy-policy-guide">
+<div class="privacy-settings-body hide-if-no-js">
+        <h2><?php _e( 'Privacy Policy Guide' ); ?></h2>
+        <h3 class="section-title"><?php _e( 'Introduction' ); ?></h3>
+        <p><?php _e( 'This text template will help you to create your web site&#8217;s privacy policy.' ); ?></p>
+        <p><?php _e( 'We have suggested the sections you will need. Under each section heading you will find a short summary of what information you should provide, which will help you to get started. Some sections include suggested policy content, others will have to be completed with information from your theme and plugins.' ); ?></p>
+        <p><?php _e( 'Please edit your privacy policy content, making sure to delete the summaries, and adding any information from your theme and plugins. Once you publish your policy page, remember to add it to your navigation menu.' ); ?></p>
+        <p><?php _e( 'It is your responsibility to write a comprehensive privacy policy, to make sure it reflects all national and international legal requirements on privacy, and to keep your policy current and accurate.' ); ?></p>
+
+        <div class="privacy-settings-accordion">
+                <h4 class="privacy-settings-accordion-heading">
+                        <button aria-expanded="false" class="privacy-settings-accordion-trigger" aria-controls="privacy-settings-accordion-block-wordpress" type="button">
+                                <span class="title"><?php _e( 'WordPress' ); ?></span>
+                                <span class="icon"></span>
+                        </button>
+                </h4>
+                <div id="privacy-settings-accordion-block-wordpress" class="privacy-settings-accordion-panel" hidden="hidden">
+                        <?php
+                        $content = WP_Privacy_Policy_Content::get_default_content( true, false );
+                        echo $content;
+                        ?>
+                        <div class="actions">
+                                <p> Copy ! </p>
+                        </div>
+                </div>
+        </div>
+
+        <hr class="hr-separator">
+
+        <h3 class="section-title"><?php _e( 'Policies' ); ?></h3>
+
+        <div class="privacy-settings-accordion wp-privacy-policy-guide">
                 <?php WP_Privacy_Policy_Content::privacy_policy_guide(); ?>
         </div>
-</div>
+</div> <!-- privacy-settings-body -->
+
 <?php
 
 include( ABSPATH . 'wp-admin/admin-footer.php' );

src/wp-admin/tools.php

@@ -23 +23 @@
 
 // The privacy policy guide used to be outputted from here. Since WP 5.3 it is in wp-admin/privacy-policy-guide.php.
 if ( isset( $_GET['wp-privacy-policy-guide'] ) ) {
-        wp_redirect( admin_url( 'privacy-policy-guide.php' ), 301 );
+        wp_redirect( admin_url( 'options-privacy.php?tab=policyguide' ), 301 );
         exit;
 } elseif ( isset( $_GET['page'] ) ) {
         // These were also moved to files in WP 5.3.