Tweak admin redesign 2

admin/class-collapsible-presenter.php

@@ -22,7 +22,7 @@ public function __construct( $title, $view_file = '', array $settings = [] ) {
 		$defaults = [
 			'paper_id'                 => null,
 			'paper_id_prefix'          => 'wpseo-',
-			'collapsible'              => false,
+			'collapsible'              => true,
 			'collapsible_header_class' => '',
 			'expanded'                 => false,
 			'help_button'              => '',

admin/class-premium-upsell-admin-block.php

@@ -75,7 +75,7 @@ public function render() {
 			$button_text
 		);
 
-		echo '<div class="yoast-paper ' . esc_attr( $class ) . '">';
+		echo '<div class="yoast-paper yoast-paper--bottom ' . esc_attr( $class ) . '">';
 
 		echo '<div>';
 		echo '<h2 class="' . esc_attr( $class . '--header' ) . '">' .

admin/class-yoast-form.php

@@ -75,7 +75,7 @@ public function admin_header( $form = true, $option = 'wpseo', $contains_files =
 		 */
 		require_once ABSPATH . 'wp-admin/options-head.php';
 		?>
-		<h1 id="wpseo-title"><?php echo esc_html( get_admin_page_title() ); ?></h1>
+		<div class="wpseo_content_cell"><h1 id="wpseo-title"><?php echo esc_html( get_admin_page_title() ); ?></h1></div>
 		<div class="wpseo_content_wrapper yoast-layout">
 			<div class="wpseo_content_cell yoast-main" id="wpseo_content_top">
 		<?php
@@ -130,9 +130,9 @@ public function admin_footer( $submit = true, $show_sidebar = true ) {
 			$settings_changed_listener = new WPSEO_Admin_Settings_Changed_Listener();
 
 			echo '<div id="wpseo-submit-container">';
-			submit_button( __( 'Save changes', 'wordpress-seo' ), 'yoast-button yoast-button--primary' );
-
 			$settings_changed_listener->show_success_message();
+
+			submit_button( __( 'Save changes', 'wordpress-seo' ), 'yoast-button yoast-button--primary' );
 			echo '</div>';
 
 			echo PHP_EOL . '</form>';
@@ -224,7 +224,9 @@ public function legend( $text, $attr ) {
 		$attr     = wp_parse_args( $attr, $defaults );
 
 		$id = ( $attr['id'] === '' ) ? '' : ' id="' . esc_attr( $attr['id'] ) . '"';
+		echo '<div class="yoast-field-group__title">';
 		echo '<legend class="yoast-form-legend ' . esc_attr( $attr['class'] ) . '"' . $id . '>' . $text . '</legend>';
+		echo '</div>';
 	}
 
 	/**
@@ -307,9 +309,12 @@ public function light_switch( $var, $label, $buttons = [], $help = '', $inverse
 			$class .= '--inverse';
 		}
 
-
 		if ( empty( $buttons ) ) {
 			$buttons = [ __( 'Disabled', 'wordpress-seo' ), __( 'Enabled', 'wordpress-seo' ) ];
+
+			if ( $inverse ) {
+				$buttons = array_reverse( $buttons );
+			}
 		}
 
 		list( $off_button, $on_button ) = $buttons;
@@ -358,7 +363,7 @@ public function light_switch_disabled( $var, $label, $buttons = [], $help = '',
 		'<span class="yoast-toggle--inactive" aria-hidden="true">', esc_html( $off_button ), '</span>',
 		'<span class="yoast-toggle--active" aria-hidden="true">', esc_html( $on_button ), '</span>',
 		'</div>',
-		'<a href="', $url, '" class="yoast-button yoast-button--buy yoast-button--buy-small">', __( 'Upgrade to premium', 'wordpress-seo' ) ,'<span class="yoast-button--buy__caret"></span></a>',
+		'<a href="', $url, '" class="yoast-button yoast-button--buy yoast-button--buy-small">', __( 'Upgrade to Premium', 'wordpress-seo' ) ,'<span class="yoast-button--buy__caret"></span></a>',
 		'</div>';
 	}
 
@@ -410,12 +415,19 @@ public function textinput( $var, $label, $attr = [] ) {
 		Yoast_Input_Validation::set_error_descriptions();
 		$aria_attributes .= Yoast_Input_Validation::get_the_aria_describedby_attribute( $var );
 
-		echo '<input' . $attributes . $aria_attributes . ' class="yoast-field-group__inputfield ' . esc_attr( $attr['class'] ) . '
-		" placeholder="' . esc_attr( $attr['placeholder'] ) . '
-		" type="' . $type . '
-		" id="', esc_attr( $var ), '
-		" name="', esc_attr( $this->option_name ), '[', esc_attr( $var ), ']
-		" value="', esc_attr( $val ), '"', disabled( $this->is_control_disabled( $var ), true, false ), '/>', '</div>';
+		echo '<input' . $attributes . $aria_attributes . ' class="yoast-field-group__inputfield ' . esc_attr( $attr['class'] ) . '"
+		placeholder="' . esc_attr( $attr['placeholder'] ) . '"
+		type="' . $type . '"
+		id="', esc_attr( $var ), '"
+		name="', esc_attr( $this->option_name ), '[', esc_attr( $var ), ']"
+		value="', esc_attr( $val ), '"',
+		disabled( $this->is_control_disabled( $var ), true, false ), '/>';
+
+		if ( ! empty( $attr['html_after'] ) ) {
+			echo $attr['html_after'];
+		}
+
+		echo '</div>';
 
 		echo Yoast_Input_Validation::get_the_error_description( $var );
 	}
@@ -622,7 +634,6 @@ public function media_input( $var, $label ) {
 				' value="', esc_attr( $id_value ), '"',
 				' />';
 		echo '</div>';
-		echo '<br class="clear"/>';
 	}
 
 	/**
@@ -643,7 +654,7 @@ public function radio( $var, $values, $legend = '', $legend_attr = [] ) {
 
 		$var_esc = esc_attr( $var );
 
-		echo '<fieldset class="yoast-form-fieldset wpseo_radio_block" id="' . $var_esc . '">';
+		echo '<fieldset class="yoast-field-group" id="' . $var_esc . '">';
 
 		if ( is_string( $legend ) && $legend !== '' ) {
 
@@ -667,15 +678,10 @@ public function radio( $var, $values, $legend = '', $legend_attr = [] ) {
 			}
 
 			$key_esc = esc_attr( $key );
+			echo '<div class="yoast-field-group__radiobutton yoast-field-group__radiobutton--vertical">';
 			echo '<input type="radio" class="radio" id="' . $var_esc . '-' . $key_esc . '" name="' . esc_attr( $this->option_name ) . '[' . $var_esc . ']" value="' . $key_esc . '" ' . checked( $val, $key_esc, false ) . disabled( $this->is_control_disabled( $var ), true, false ) . ' />';
-			$this->label(
-				$label,
-				[
-					'for'        => $var_esc . '-' . $key_esc,
-					'class'      => 'radio',
-					'aria_label' => $aria_label,
-				]
-			);
+			echo '<label for="' . $var_esc . '-' . $key_esc . '">' . $label . '</label>';
+			echo '</div>';
 		}
 		echo '</fieldset>';
 	}
@@ -823,21 +829,15 @@ public function toggle_switch( $var, $values, $label, $help = '' ) {
 	 * @return void
 	 */
 	public function index_switch( $var, $label, $help = '' ) {
-		$index_switch_values = [
-			__( 'Yes', 'wordpress-seo' ),
-			__( 'No', 'wordpress-seo' ),
-		];
-
-		$this->light_switch(
+		$this->show_hide_switch(
 			$var,
 			sprintf(
 			/* translators: %s expands to an indexable object's name, like a post type or taxonomy */
 				esc_html__( 'Show %s in search results?', 'wordpress-seo' ),
 				esc_html( $label )
 			),
-			$index_switch_values,
-			$help,
-			true
+			true,
+			$help
 		);
 	}
 
@@ -852,12 +852,16 @@ public function index_switch( $var, $label, $help = '' ) {
 	 * @return void
 	 */
 	public function show_hide_switch( $var, $label, $inverse_keys = false, $help = '' ) {
-		$show_hide_switch = [
+		$labels = [
 			__( 'Hide', 'wordpress-seo' ),
 			__( 'Show', 'wordpress-seo' ),
 		];
 
-		$this->light_switch( $var, $label, $show_hide_switch, $help, $inverse_keys );
+		if ( $inverse_keys ) {
+			$labels = array_reverse( $labels );
+		}
+
+		$this->light_switch( $var, $label, $labels, $help, $inverse_keys );
 	}
 
 	/**

admin/pages/tools.php

@@ -12,74 +12,58 @@
 }
 
 $tool_page = (string) filter_input( INPUT_GET, 'tool' );
+$admin_url = admin_url( 'admin.php?page=wpseo_tools' );
 
-$yform = Yoast_Form::get_instance();
-$yform->admin_header( false, 'tools' );
-
-if ( $tool_page === '' ) {
-
-	$tools = [];
-
-	$tools['import-export'] = [
-		'title' => __( 'Import and Export', 'wordpress-seo' ),
-		'desc'  => __( 'Import settings from other SEO plugins and export your settings for re-use on (another) blog.', 'wordpress-seo' ),
-	];
-
-	if ( WPSEO_Utils::allow_system_file_edit() === true && ! is_multisite() ) {
-		$tools['file-editor'] = [
-			'title' => __( 'File editor', 'wordpress-seo' ),
-			'desc'  => __( 'This tool allows you to quickly change important files for your SEO, like your robots.txt and, if you have one, your .htaccess file.', 'wordpress-seo' ),
-		];
-	}
-
-	$tools['bulk-editor'] = [
-		'title' => __( 'Bulk editor', 'wordpress-seo' ),
-		'desc'  => __( 'This tool allows you to quickly change titles and descriptions of your posts and pages without having to go into the editor for each page.', 'wordpress-seo' ),
-	];
-
-	echo '<p>';
-	printf(
-		/* translators: %1$s expands to Yoast SEO */
-		esc_html__( '%1$s comes with some very powerful built-in tools:', 'wordpress-seo' ),
-		'Yoast SEO'
-	);
-	echo '</p>';
-
-	echo '<ul class="yoast-list">';
+$tools = [];
 
-	$admin_url = admin_url( 'admin.php?page=wpseo_tools' );
+$tools['general'] = [
+	'title' => __( 'General', 'wordpress-seo' ),
+	'href' => '',
+];
 
-	foreach ( $tools as $slug => $tool ) {
-		$href = ( ! empty( $tool['href'] ) ) ? $admin_url . $tool['href'] : add_query_arg( [ 'tool' => $slug ], $admin_url );
-		$attr = ( ! empty( $tool['attr'] ) ) ? $tool['attr'] : '';
+$tools['import-export'] = [ 'title' => __( 'Import and Export', 'wordpress-seo' ) ];
 
-		echo '<li>';
-		echo '<a href="', esc_url( $href ), '" ', esc_attr( $attr ) , '>', esc_html( $tool['title'] ), '</a><br/>';
-		echo esc_html( $tool['desc'] );
-		echo '</li>';
-	}
+if ( WPSEO_Utils::allow_system_file_edit() === true && ! is_multisite() ) {
+	$tools['file-editor'] = [ 'title' => __( 'File editor', 'wordpress-seo' ) ];
+}
 
-	/**
-	 * Action: 'wpseo_tools_overview_list_items' - Hook to add additional tools to the overview.
-	 */
-	do_action( 'wpseo_tools_overview_list_items' );
+$tools['bulk-editor'] = [ 'title' => __( 'Bulk editor', 'wordpress-seo' ) ];
 
-	echo '</ul>';
+$yform = Yoast_Form::get_instance();
+$yform->admin_header( false, 'tools' );
 
-	echo '<input type="hidden" id="wpseo_recalculate_nonce" name="wpseo_recalculate_nonce" value="' . esc_attr( wp_create_nonce( 'wpseo_recalculate' ) ) . '" />';
-}
-else {
-	echo '<a href="', esc_url( admin_url( 'admin.php?page=wpseo_tools' ) ), '">', esc_html__( '&laquo; Back to Tools page', 'wordpress-seo' ), '</a>';
+require_once WPSEO_PATH . 'admin/views/tools-navigation.php';
 
+if ( ! empty( $tool_page ) ) {
 	$tool_pages = [ 'bulk-editor', 'import-export' ];
-
 	if ( WPSEO_Utils::allow_system_file_edit() === true && ! is_multisite() ) {
 		$tool_pages[] = 'file-editor';
 	}
 
 	if ( in_array( $tool_page, $tool_pages, true ) ) {
 		require_once WPSEO_PATH . 'admin/views/tool-' . $tool_page . '.php';
 	}
+
+	$yform->admin_footer( false );
+
+	return;
 }
 
+echo '<div class="yoast-paper">';
+
+echo '<ul class="yoast-list">';
+
+$admin_url = admin_url( 'admin.php?page=wpseo_tools' );
+
+/**
+ * Action: 'wpseo_tools_overview_list_items' - Hook to add additional tools to the overview.
+ */
+do_action( 'wpseo_tools_overview_list_items' );
+
+echo '</ul>';
+
+echo '<input type="hidden" id="wpseo_recalculate_nonce" name="wpseo_recalculate_nonce" value="' . esc_attr( wp_create_nonce( 'wpseo_recalculate' ) ) . '" />';
+
+echo '</div>'; // yoast-paper.
+
 $yform->admin_footer( false );

admin/views/class-view-utils.php

@@ -58,7 +58,7 @@ public function show_post_type_settings( $post_type, $paper_style = false ) {
 
 		$this->form->show_hide_switch(
 			'showdate-' . $post_type->name,
-			__( 'Date in Google Preview', 'wordpress-seo' )
+			__( 'Show date in Google Preview', 'wordpress-seo' )
 		);
 
 		$this->form->show_hide_switch(

admin/views/class-yoast-feature-toggles.php

@@ -129,6 +129,17 @@ protected function load_toggles() {
 				'read_more_url'   => 'https://yoa.st/40r',
 				'order'           => 90,
 			],
+			(object) [
+				'name'    => __( 'Usage tracking', 'wordpress-seo' ),
+				'setting' => 'tracking',
+				'read_more_label'   => sprintf(
+				    /* translators: 1: Yoast SEO */
+					__( 'Allow us to track some data about your site to improve our plugin.', 'wordpress-seo' ),
+					'Yoast SEO'
+				),
+				'read_more_url'   => 'https://yoa.st/usage-tracking',
+				'order'   => 95,
+			],
 			(object) [
 				'name'    => __( 'REST API: Head endpoint', 'wordpress-seo' ),
 				'setting' => 'enable_headless_rest_endpoints',

admin/views/partial-notifications-template.php

@@ -30,7 +30,6 @@ function _yoast_display_notifications( $list, $status ) {
 		$notifications = '';
 
 		foreach ( $list as $notification ) {
-
 			switch ( $status ) {
 				case 'active':
 					$button = sprintf(
@@ -76,12 +75,11 @@ function _yoast_display_notifications( $list, $status ) {
 
 <div>
 	<?php if ( $total ) : ?>
-		<div class="yoast-paper__content">
-			<?php
-			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: _yoast_display_notifications is considered a safe function.
-			echo _yoast_display_notifications( $active, 'active' );
-			?>
-		</div>
+		<?php
+		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: _yoast_display_notifications is considered a safe function.
+		echo _yoast_display_notifications( $active, 'active' );
+		?>
+
 
 		<?php
 		if ( $dismissed ) {