WordPress.org
Get WordPress

Make WordPress Core

Changeset 43502


Ignore:
Timestamp:
07/18/2018 06:41:07 AM (6 years ago)
Author:
pento
Message:

Dashboard: Introduce the "Try Gutenberg" callout.

To encourage folks to prepare for Gutenberg, this new Dashboard box allows site users to easily install and try the Gutenberg plugin now, or to install the Classic Editor plugin before WordPress 5.0 is released.

Props pento, melchoyce, joen, karmatosed, joemcgill, SergeyBiryukov, jorbin, bph, Clorith, afercia, chanthaboune, chrislema, kjellr, matveb, michelleweber.
Fixes #41316.

Location:
branches/4.9/src
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • branches/4.9/src/wp-admin/css/common.css

    r43101 r43502  
    765765/* @todo can we combine these into a class or use an existing dashicon one? */
    766766.welcome-panel .welcome-panel-close:before,
     767.try-gutenberg-panel .try-gutenberg-panel-close:before,
    767768.tagchecklist .ntdelbutton .remove-tag-icon:before,
    768769#bulk-titles div a:before,

  • branches/4.9/src/wp-admin/css/dashboard.css

    r42883 r43502  
    9999
    100100/* Welcome Panel */
    101 .welcome-panel {
     101.welcome-panel,
     102.try-gutenberg-panel {
    102103    position: relative;
    103104    overflow: auto;
    … …  
    111112}
    112113
    113 .welcome-panel h2 {
     114.welcome-panel h2,
     115.try-gutenberg-panel h2 {
    114116    margin: 0;
    115117    font-size: 21px;
    … …  
    123125}
    124126
    125 .welcome-panel li {
     127.try-gutenberg-panel h3 {
     128    margin: 17px 0 0;
     129    font-size: 16px;
     130}
     131
     132.welcome-panel li,
     133.try-gutenberg-panel li {
    126134    font-size: 14px;
    127135}
    128136
    129 .welcome-panel p {
     137.welcome-panel p,
     138.try-gutenberg-panel p {
    130139    color: #72777c;
    131140}
    132141
    133 .welcome-panel a {
     142.welcome-panel a,
     143.try-gutenberg-action a {
    134144    text-decoration: none;
    135145}
    136146
    137 .welcome-panel .about-description {
     147.welcome-panel .about-description,
     148.try-gutenberg-panel .about-description {
    138149    font-size: 16px;
    139150    margin: 0;
    140151}
    141152
    142 .welcome-panel .welcome-panel-close {
     153.try-gutenberg-panel-content hr {
     154    margin: 20px -23px 0 -23px;
     155    border-top: 1px solid #f3f4f5;
     156    border-bottom: none;
     157}
     158
     159.welcome-panel .welcome-panel-close,
     160.try-gutenberg-panel .try-gutenberg-panel-close {
    143161    position: absolute;
     162    z-index: 10;
    144163    top: 10px;
    145164    right: 10px;
    … …  
    150169}
    151170
    152 .welcome-panel .welcome-panel-close:before {
     171.welcome-panel .welcome-panel-close:before,
     172.try-gutenberg-panel .try-gutenberg-panel-close:before {
    153173    position: absolute;
    154174    top: 8px;
    … …  
    165185}
    166186
    167 .welcome-panel-content {
    168     margin-left: 13px;
     187.welcome-panel-content,
     188.try-gutenberg-panel-content {
     189    margin: 0 13px;
    169190    max-width: 1500px;
     191}
     192
     193.try-gutenberg-panel img {
     194    margin-top: 23px;
     195    width: calc( 100% - 40px );
     196    border: 1px solid #f3f4f5;
     197}
     198
     199.try-gutenberg-panel .install-now.updating-message:before,
     200.try-gutenberg-panel .install-now.updated-message:before {
     201    margin-top: 11px;
    170202}
    171203
    … …  
    181213}
    182214
     215.try-gutenberg-panel .try-gutenberg-panel-column > * {
     216    padding-right: 40px;
     217}
     218
    183219.ie8 .welcome-panel .welcome-panel-column {
    184220    min-width: 230px;
    … …  
    189225}
    190226
     227.try-gutenberg-panel .try-gutenberg-panel-column-container {
     228    display: -ms-grid;
     229    display: grid;
     230    -ms-grid-columns: 36% 32% 32%;
     231    grid-template-columns: 36% 32% 32%;
     232    margin-bottom: 13px;
     233}
     234
     235.try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
     236    display: -ms-grid;
     237    display: grid;
     238    -ms-grid-rows: 45px auto 100px;
     239    grid-template-rows: 45px auto 100px;
     240}
     241
    191242.welcome-panel-column p.hide-if-no-customize {
    192243    margin-top: 10px;
    193244}
    194245
    195 .welcome-panel-column p {
     246.welcome-panel-column p,
     247.try-gutenberg-panel-column p {
    196248    margin-top: 7px;
    197249    color: #444;
    … …  
    203255
    204256.welcome-panel .welcome-panel-column ul {
    205     margin: 0.8em 1em 1em 0;
     257        margin: 0.8em 1em 1em 0;
    206258}
    207259
    … …  
    12081260}
    12091261
     1262@media screen and (max-width: 1024px) {
     1263    .try-gutenberg-panel .try-gutenberg-panel-column-container {
     1264        -ms-grid-columns: 50% 50%;
     1265        grid-template-columns: 50% 50%;
     1266    }
     1267
     1268    .try-gutenberg-panel .try-gutenberg-panel-image-column {
     1269        display: none;
     1270    }
     1271}
     1272
    12101273@media screen and (max-width: 870px) {
    12111274    .welcome-panel .welcome-panel-column,
    … …  
    12161279    }
    12171280
     1281    .try-gutenberg-panel .try-gutenberg-panel-column-container {
     1282        -ms-grid-columns: 100%;
     1283        grid-template-columns: 100%;
     1284    }
     1285
    12181286    .welcome-panel .welcome-panel-column li {
    12191287        display: inline-block;
    … …  
    12241292        margin: 0.4em 0 0;
    12251293    }
    1226 
    12271294}
    12281295
    … …  
    12671334@media screen and (max-width: 600px) {
    12681335    /* Keep the close icon from overlapping the Welcome text. */
    1269     .welcome-panel .welcome-panel-close {
     1336    .welcome-panel .welcome-panel-close,
     1337    .try-gutenberg-panel .try-gutenberg-panel-close {
    12701338        overflow: hidden;
    12711339        text-indent: 40px;
    … …  
    12791347
    12801348    /* Make the close icon larger for tappability. */
    1281     .welcome-panel .welcome-panel-close:before {
     1349    .welcome-panel .welcome-panel-close:before,
     1350    .try-gutenberg-panel .try-gutenberg-panel-close:before {
    12821351        font-size: 20px;
    12831352        top: 5px;

  • branches/4.9/src/wp-admin/includes/ajax-actions.php

    r43229 r43502  
    14861486
    14871487/**
     1488 * Ajax handler for updating whether to display the Try Gutenberg panel.
     1489 *
     1490 * @since 4.9.8
     1491 */
     1492function wp_ajax_update_try_gutenberg_panel() {
     1493    check_ajax_referer( 'try-gutenberg-panel-nonce', 'trygutenbergpanelnonce' );
     1494
     1495    update_user_meta( get_current_user_id(), 'show_try_gutenberg_panel', empty( $_POST['visible'] ) ? 0 : 1 );
     1496
     1497    wp_die( 1 );
     1498}
     1499
     1500/**
    14881501 * Ajax handler for retrieving menu meta boxes.
    14891502 *

  • branches/4.9/src/wp-admin/includes/class-wp-screen.php

    r42883 r43502  
    10211021                } else {
    10221022                    $welcome_checked = get_user_meta( get_current_user_id(), 'show_welcome_panel', true );
    1023                     if ( 2 == $welcome_checked && wp_get_current_user()->user_email != get_option( 'admin_email' ) ) {
     1023                    if ( '' === $welcome_checked ) {
     1024                        $welcome_checked = '1';
     1025                    }
     1026                    if ( '2' === $welcome_checked && wp_get_current_user()->user_email != get_option( 'admin_email' ) ) {
    10241027                        $welcome_checked = false;
    10251028                    }
    … …  
    10281031                echo '<input type="checkbox" id="wp_welcome_panel-hide"' . checked( (bool) $welcome_checked, true, false ) . ' />';
    10291032                echo _x( 'Welcome', 'Welcome panel' ) . "</label>\n";
     1033            }
     1034
     1035            if ( 'dashboard' === $this->id && has_action( 'try_gutenberg_panel' ) ) {
     1036                if ( isset( $_GET['try_gutenberg'] ) ) {
     1037                    $try_gutenberg_checked = empty( $_GET['try_gutenberg'] ) ? 0 : 1;
     1038                    update_user_meta( get_current_user_id(), 'show_try_gutenberg_panel', $try_gutenberg_checked );
     1039                } else {
     1040                    $try_gutenberg_checked = get_user_meta( get_current_user_id(), 'show_try_gutenberg_panel', true );
     1041                    if ( '' === $try_gutenberg_checked ) {
     1042                        $try_gutenberg_checked = '1';
     1043                    }
     1044                    if ( '2' === $try_gutenberg_checked && wp_get_current_user()->user_email != get_option( 'admin_email' ) ) {
     1045                        $try_gutenberg_checked = false;
     1046                    }
     1047                }
     1048                echo '<label for="wp_try_gutenberg_panel-hide">';
     1049                echo '<input type="checkbox" id="wp_try_gutenberg_panel-hide"' . checked( (bool) $try_gutenberg_checked, true, false ) . ' />';
     1050                echo __( 'New Editor' ) . "</label>\n";
    10301051            }
    10311052        ?>

  • branches/4.9/src/wp-admin/includes/dashboard.php

    r42883 r43502  
    16201620    <?php
    16211621}
     1622
     1623/**
     1624 * Displays a Try Gutenberg Panel, to introduce people to Gutenberg
     1625 *
     1626 * @since 4.9.8
     1627 */
     1628function wp_try_gutenberg_panel() {
     1629    $plugins = get_plugins();
     1630    $action = $url = $classes = '';
     1631    $classic_action = $classic_url = $classic_classes = '';
     1632
     1633    if ( current_user_can( 'install_plugins' ) ) {
     1634        if ( empty( $plugins['gutenberg/gutenberg.php'] ) ) {
     1635            $action = __( 'Install Gutenberg' );
     1636            $url = wp_nonce_url( self_admin_url( 'update.php?action=install-plugin&plugin=gutenberg' ), 'install-plugin_gutenberg' );
     1637            $classes = ' install-now';
     1638        } else if ( is_plugin_inactive( 'gutenberg/gutenberg.php' ) ) {
     1639            $action = __( 'Activate Gutenberg' );
     1640            $url = wp_nonce_url( self_admin_url( 'plugins.php?action=activate&plugin=gutenberg/gutenberg.php&from=try-gutenberg' ), 'activate-plugin_gutenberg/gutenberg.php' );
     1641            $classes = ' activate-now';
     1642        }
     1643
     1644        if ( empty( $plugins['classic-editor/classic-editor.php'] ) ) {
     1645            $classic_action = __( 'Install the Classic Editor' );
     1646            $classic_url = wp_nonce_url( self_admin_url( 'update.php?action=install-plugin&plugin=classic-editor' ), 'install-plugin_classic-editor' );
     1647            $classic_classes = ' install-now';
     1648        } else if ( is_plugin_inactive( 'classic-editor/classic-editor.php' ) ) {
     1649            $classic_action = __( 'Activate the Classic Editor' );
     1650            $classic_url = wp_nonce_url( self_admin_url( 'plugins.php?action=activate&plugin=classic-editor/classic-editor.php&from=try-gutenberg' ), 'activate-plugin_classic-editor/classic-editor.php' );
     1651            $classic_classes = ' activate-now';
     1652        } else {
     1653            $classic_action = __( 'The Classic Editor is activated' );
     1654            $classic_url = wp_nonce_url( self_admin_url( 'plugins.php?action=activate&plugin=classic-editor/classic-editor.php&from=try-gutenberg' ), 'activate-plugin_classic-editor/classic-editor.php' );;
     1655            $classic_classes = ' button-disabled install-now updated-message';
     1656        }
     1657    }
     1658
     1659    if ( current_user_can( 'edit_posts' ) && is_plugin_active( 'gutenberg/gutenberg.php' ) ) {
     1660        $action = __( 'Try Gutenberg' );
     1661        $url = admin_url( 'admin.php?page=gutenberg' );
     1662    }
     1663
     1664    ?>
     1665    <div class="try-gutenberg-panel-content">
     1666        <h2><?php _e( 'A new, modern publishing experience is coming soon.' ); ?></h2>
     1667
     1668        <p class="about-description"><?php _e( "Take your words, media, and layout in new directions with Gutenberg, the WordPress editor we're currently building." ); ?></p>
     1669
     1670        <hr />
     1671
     1672        <div class="try-gutenberg-panel-column-container">
     1673            <div class="try-gutenberg-panel-column try-gutenberg-panel-image-column">
     1674                <picture>
     1675                    <source srcset="about:blank" media="(max-width: 1024px)">
     1676                    <img src="https://s.w.org/images/core/gutenberg-screenshot.png?<?php echo date( 'Ymd' ); ?>" alt="<?php esc_attr_e( 'Screenshot from the Gutenberg interface' ); ?>" />
     1677                </picture>
     1678            </div>
     1679            <div class="try-gutenberg-panel-column plugin-card-gutenberg">
     1680
     1681                <h3><?php _e( 'Test the new editor today.' ); ?></h3>
     1682
     1683                <p>
     1684                    <?php _e( "You can take Gutenberg for a spin (and share your feedback, if you’d like) before we officially release it, by installing it as a plugin." ); ?>
     1685                    <?php
     1686                        printf(
     1687                            /* translators: 1: Gutenberg call for testing handbook link, 2: Gutenberg GitHub repository issues link, 3: Gutenberg GitHub repository CONTRIBUTING.md link */
     1688                            __( 'You can help by <a href="%1$s">testing</a>, <a href="%2$s">filing bugs</a>, or contributing on the <a href="%3$s">GitHub repository</a>.' ),
     1689                            'https://make.wordpress.org/test/handbook/call-for-testing/gutenberg-testing/',
     1690                            'https://github.com/WordPress/gutenberg/issues',
     1691                            'https://github.com/WordPress/gutenberg/blob/master/CONTRIBUTING.md'
     1692                        );
     1693                    ?>
     1694                </p>
     1695
     1696                    <?php if ( $action ) { ?>
     1697                        <div class="try-gutenberg-action">
     1698                            <p><a class="button button-primary button-hero<?php echo $classes; ?>" href="<?php echo esc_url( $url ); ?>" data-name="<?php esc_attr_e( 'Gutenberg' ); ?>" data-slug="gutenberg"><?php echo $action; ?></a></p>
     1699                            <p>
     1700                                <?php
     1701                                    printf(
     1702                                        /* translators: Link to https://wordpress.org/gutenberg/ */
     1703                                        __( '<a href="%s">Learn more about Gutenberg</a>' ),
     1704                                        'https://wordpress.org/gutenberg/'
     1705                                    );
     1706                                ?>
     1707                            </p>
     1708                        </div>
     1709                    <?php } ?>
     1710            </div>
     1711
     1712            <div class="try-gutenberg-panel-column plugin-card-classic-editor">
     1713
     1714                <h3><?php _e( 'Not quite ready?' ); ?></h3>
     1715
     1716                <p>
     1717                    <?php _e( 'The new editor will be enabled by default in the next major release of WordPress. If you’re not sure how compatible your current themes and plugins are, we’ve got you covered.' ); ?>
     1718                    <?php
     1719                        printf(
     1720                            /* translators: Link to the Classic Editor plugin page */
     1721                            __( 'Install the <a href="%s">Classic Editor plugin</a> to keep using the current editor until you’re ready to make the switch.' ),
     1722                            'http://wordpress.org/plugins/classic-editor'
     1723                        );
     1724                    ?>
     1725                </p>
     1726
     1727                <?php if ( $classic_action ) { ?>
     1728                    <div class="try-gutenberg-action">
     1729                        <p><a class="button button-secondary button-hero<?php echo $classic_classes; ?>" href="<?php echo esc_url( $classic_url ); ?>" data-name="<?php esc_attr_e( 'Classic Editor' ); ?>" data-slug="classic-editor"><?php echo $classic_action; ?></a></p>
     1730                    </div>
     1731                <?php } ?>
     1732            </div>
     1733        </div>
     1734    </div>
     1735    <?php
     1736}

  • branches/4.9/src/wp-admin/index.php

    r42883 r43502  
    104104    <h1><?php echo esc_html( $title ); ?></h1>
    105105
     106<?php if ( has_action( 'try_gutenberg_panel' ) ) :
     107    $classes = 'try-gutenberg-panel';
     108
     109    $option = get_user_meta( get_current_user_id(), 'show_try_gutenberg_panel', true );
     110    // 0 = hide, 1 = toggled to show or single site creator, 2 = multisite site owner
     111    $hide = '0' === $option || ( '2' === $option && wp_get_current_user()->user_email !== get_option( 'admin_email' ) );
     112    if ( $hide )
     113        $classes .= ' hidden'; ?>
     114
     115    <div id="try-gutenberg-panel" class="<?php echo esc_attr( $classes ); ?>">
     116        <?php wp_nonce_field( 'try-gutenberg-panel-nonce', 'trygutenbergpanelnonce', false ); ?>
     117        <a class="try-gutenberg-panel-close" href="<?php echo esc_url( admin_url( '?try_gutenberg=0' ) ); ?>" aria-label="<?php esc_attr_e( 'Dismiss the Try Gutenberg panel' ); ?>"><?php _e( 'Dismiss' ); ?></a>
     118        <?php
     119        /**
     120         * Add content to the Try Gutenberg panel on the admin dashboard.
     121         *
     122         * To remove the Try Gutenberg panel, use remove_action():
     123         *
     124         *     remove_action( 'try_gutenberg_panel', 'wp_try_gutenberg_panel' );
     125         *
     126         * @since 4.9.8
     127         */
     128        do_action( 'try_gutenberg_panel' );
     129        ?>
     130    </div>
     131<?php endif; ?>
    106132<?php if ( has_action( 'welcome_panel' ) && current_user_can( 'edit_theme_options' ) ) :
    107133    $classes = 'welcome-panel';
    … …  
    109135    $option = get_user_meta( get_current_user_id(), 'show_welcome_panel', true );
    110136    // 0 = hide, 1 = toggled to show or single site creator, 2 = multisite site owner
    111     $hide = 0 == $option || ( 2 == $option && wp_get_current_user()->user_email != get_option( 'admin_email' ) );
     137    $hide = '0' === $option || ( '2' === $option && wp_get_current_user()->user_email != get_option( 'admin_email' ) );
    112138    if ( $hide )
    113139        $classes .= ' hidden'; ?>

  • branches/4.9/src/wp-admin/js/dashboard.js

    r42883 r43502  
    3131        updateWelcomePanel( this.checked ? 1 : 0 );
    3232    });
     33
     34    var tryGutenbergPanel = $( '#try-gutenberg-panel' ),
     35        tryGutenbergPanelHide = $('#wp_try_gutenberg_panel-hide'),
     36        updateTryGutenbergPanel, installGutenbergSuccess;
     37
     38    updateTryGutenbergPanel = function( visible ) {
     39        $.post( ajaxurl, {
     40            action: 'update-try-gutenberg-panel',
     41            visible: visible,
     42            trygutenbergpanelnonce: $( '#trygutenbergpanelnonce' ).val()
     43        });
     44    };
     45
     46    installGutenbergSuccess = function( response ) {
     47        response.activateUrl += '&from=try-gutenberg';
     48        response.activateLabel = wp.updates.l10n.activatePluginLabel.replace( '%s', response.pluginName );
     49        wp.updates.installPluginSuccess( response );
     50    };
     51
     52    if ( tryGutenbergPanel.hasClass( 'hidden' ) && tryGutenbergPanelHide.prop( 'checked' ) ) {
     53        tryGutenbergPanel.removeClass( 'hidden' );
     54    }
     55
     56    $( '.try-gutenberg-panel-close, .try-gutenberg-panel-dismiss a', tryGutenbergPanel ).click( function( e ) {
     57        e.preventDefault();
     58        tryGutenbergPanel.addClass( 'hidden' );
     59        updateTryGutenbergPanel( 0 );
     60        $('#wp_try_gutenberg_panel-hide').prop( 'checked', false );
     61    });
     62
     63    tryGutenbergPanelHide.click( function() {
     64        tryGutenbergPanel.toggleClass( 'hidden', ! this.checked );
     65        updateTryGutenbergPanel( this.checked ? 1 : 0 );
     66    });
     67
     68    tryGutenbergPanel.on( 'click', '.install-now', function( e ) {
     69        e.preventDefault();
     70        var args = {
     71            slug: $( e.target ).data( 'slug' ),
     72            success: installGutenbergSuccess
     73        };
     74        wp.updates.installPlugin( args );
     75    } );
    3376
    3477    // These widgets are sometimes populated via ajax

  • branches/4.9/src/wp-admin/js/updates.js

    r42883 r43502  
    586586        $message
    587587            .removeClass( 'updating-message' )
    588             .addClass( 'updated-message installed button-disabled' )
     588            .addClass( 'updated-message installed' )
    589589            .attr( 'aria-label', wp.updates.l10n.pluginInstalledLabel.replace( '%s', response.pluginName ) )
    590590            .text( wp.updates.l10n.pluginInstalled );
    591591
     592        if ( $message.hasClass( 'button-primary' ) ) {
     593            $message.addClass( 'button-primary-disabled' );
     594        } else {
     595            $message.addClass( 'button-disabled' );
     596        }
     597
    592598        wp.a11y.speak( wp.updates.l10n.installedMsg, 'polite' );
    593599
    … …  
    598604
    599605                // Transform the 'Install' button into an 'Activate' button.
    600                 $message.removeClass( 'install-now installed button-disabled updated-message' ).addClass( 'activate-now button-primary' )
     606                $message.removeClass( 'install-now installed button-primary-disabled button-secondary-disabled button-disabled updated-message' )
     607                    .addClass( 'activate-now' )
    601608                    .attr( 'href', response.activateUrl )
    602609                    .attr( 'aria-label', wp.updates.l10n.activatePluginLabel.replace( '%s', response.pluginName ) )
    603                     .text( wp.updates.l10n.activatePlugin );
     610                    .text( response.activateLabel || wp.updates.l10n.activatePlugin );
    604611            }, 1000 );
    605612        }

  • branches/4.9/src/wp-admin/plugins.php

    r42883 r43502  
    6666            } else if ( isset($_GET['from']) && 'press-this' == $_GET['from'] ) {
    6767                wp_redirect( self_admin_url( "press-this.php") );
     68            } else if ( isset( $_GET['from'] ) && 'try-gutenberg' == $_GET['from'] ) {
     69                if ( 'gutenberg/gutenberg.php' === $plugin ) {
     70                    wp_redirect( self_admin_url( "admin.php?page=gutenberg" ) );
     71                } else {
     72                    wp_redirect( self_admin_url() );
     73                }
    6874            } else {
    6975                wp_redirect( self_admin_url("plugins.php?activate=true&plugin_status=$status&paged=$page&s=$s") ); // overrides the ?error=true one above

  • branches/4.9/src/wp-includes/default-filters.php

    r43233 r43502  
    319319add_action( 'comment_form',               'wp_comment_form_unfiltered_html_nonce'          );
    320320add_action( 'admin_init',                 'send_frame_options_header',               10, 0 );
     321add_action( 'try_gutenberg_panel',        'wp_try_gutenberg_panel'                         );
    321322add_action( 'welcome_panel',              'wp_welcome_panel'                               );
    322323
Note: See TracChangeset for help on using the changeset viewer.