Skip to content

Tweak admin redesign #15591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
moorscode wants to merge 47 commits into from
Closed

Tweak admin redesign #15591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
83d362a
CSS tweaks for admin pages
moorscode Jun 30, 2020
a77df4d
Restore papers and add spacing
moorscode Jun 30, 2020
4492e2a
Adjust sidebar upsell spacing
moorscode Jun 30, 2020
1945026
Add the context to field-group
moorscode Jun 30, 2020
ca54309
Add spacing
moorscode Jun 30, 2020
86da663
Restore RSS tab header
moorscode Jun 30, 2020
f3ed70b
Special pages spacing
moorscode Jun 30, 2020
df90995
Move the "Show SEO settings" next to other toggle
moorscode Jun 30, 2020
1ce66eb
Remove unneeded z-index
moorscode Jun 30, 2020
4fdd6f2
Use Alert to format the warning when no user is selected
moorscode Jun 30, 2020
6e52b22
Set default Select2 width to 300px
moorscode Jun 30, 2020
f4e0740
Merge remote-tracking branch 'origin' into tweak-admin-redesign
moorscode Jun 30, 2020
a4f2c74
Use correct naming className vs class
moorscode Jun 30, 2020
5c5e816
Organize CSS class definitions
moorscode Jun 30, 2020
f9849c9
Reduce size and spacing
moorscode Jun 30, 2020
462ae26
Only show "Single URLs" when there is an archive
moorscode Jun 30, 2020
4cb0fe3
Do not expand collapsibles by default
moorscode Jun 30, 2020
94b2e09
Add more papers to the settings pages
moorscode Jul 1, 2020
c1e04d3
Move upsells up on the tools page
moorscode Jul 1, 2020
2110146
Notification center styling fix
moorscode Jul 1, 2020
4dbb72d
Remove top padding of first H3 in a paper-content
moorscode Jul 1, 2020
36f3d48
Reduce button size
moorscode Jul 1, 2020
db1948d
Place the content in the center of the screen
moorscode Jul 1, 2020
ff4eb2f
Make switch-labels clickable
moorscode Jul 1, 2020
f77c5e5
Remove duplicate usage-tracking entry
moorscode Jul 1, 2020
5e0dd31
Move person/company company alert below heading
moorscode Jul 1, 2020
d565ef7
Restore LocalSEO Upsell to company select
moorscode Jul 1, 2020
a930030
Fix button pressed padding
moorscode Jul 1, 2020
796d49c
Make the upsell button larger than the regular button
moorscode Jul 1, 2020
c2106b5
Reduce spacing of last paper & feature containers
moorscode Jul 1, 2020
6bdebc4
Covert twitter card selector to radio-buttons
moorscode Jul 2, 2020
c855a9c
Convert person/company to radio buttons
moorscode Jul 2, 2020
42ddcd5
Add full-stops to comments
moorscode Jul 2, 2020
beaa45a
Fix save settings notification
moorscode Jul 2, 2020
ee09446
Twitter card wording
moorscode Jul 2, 2020
a58e69c
Hide twitter card settings when feature is disabled
moorscode Jul 2, 2020
c43937a
Capitalize "Premium"
moorscode Jul 2, 2020
2a32dcc
Consistent font-weights
moorscode Jul 2, 2020
71e9b44
Remove font overwrite of dismissed warnings
moorscode Jul 2, 2020
143b996
Replace labels Show/Hide with Yes/No
moorscode Jul 2, 2020
1d6f4fc
Use Show/Hide instead of Yes/No
moorscode Jul 3, 2020
9624f52
Move post-type archives to own collapsible
moorscode Jul 3, 2020
f4bbf71
Dynamically change max-width for containers
moorscode Jul 3, 2020
9e543cc
Convert Category URLs to collapsible
moorscode Jul 3, 2020
87eb5ba
Convert Tools page to tabs
moorscode Jul 3, 2020
ae311c9
Close unclosed div
moorscode Jul 3, 2020
fbefeb6
Bulk editor collapsibles full width
moorscode Jul 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion admin/class-collapsible-presenter.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' => '',
Expand Down
42 changes: 24 additions & 18 deletions admin/class-yoast-form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" id="wpseo_content_top">
<?php
Expand Down Expand Up @@ -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>';
Expand Down Expand Up @@ -312,9 +312,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;
Expand Down Expand Up @@ -363,7 +366,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>';
}

Expand Down Expand Up @@ -421,7 +424,13 @@ public function textinput( $var, $label, $attr = [] ) {
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>';
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 );
}
Expand Down Expand Up @@ -628,7 +637,6 @@ public function media_input( $var, $label ) {
' value="', esc_attr( $id_value ), '"',
' />';
echo '</div>';
echo '<br class="clear"/>';
}

/**
Expand Down Expand Up @@ -825,21 +833,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
);
}

Expand All @@ -854,12 +856,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 );
}

/**
Expand Down
88 changes: 36 additions & 52 deletions admin/pages/tools.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
2 changes: 1 addition & 1 deletion admin/views/class-view-utils.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
16 changes: 0 additions & 16 deletions admin/views/class-yoast-feature-toggles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,22 +140,6 @@ protected function load_toggles() {
'read_more_url' => 'https://yoa.st/usage-tracking',
'order' => 95,
],
(object) [
'name' => __( 'Usage tracking', 'wordpress-seo' ),
'setting' => 'tracking',
'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_label' => sprintf(
/* translators: 1: Yoast SEO */
__( 'Read more about what we\'ll track.', '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',
Expand Down
12 changes: 5 additions & 7 deletions admin/views/partial-notifications-template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ function _yoast_display_notifications( $list, $status ) {
$notifications = '';

foreach ( $list as $notification ) {

switch ( $status ) {
case 'active':
$button = sprintf(
Expand Down Expand Up @@ -77,12 +76,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 ) {
Expand Down
Loading