WordPress.org
Get WordPress

Make WordPress Core

Changeset 42869


Ignore:
Timestamp:
03/22/2018 12:58:32 AM (7 years ago)
Author:
pento
Message:

Dashboard: Introduce a "Try Gutenberg" callout.

To encourage more people to try Gutenberg, this new Dashboard box allows site users to easily install and try out Gutenberg.

Props pento, melchoyce, joen, karmatosed, joemcgill, SergeyBiryukov, jorbin.

Fixes #41316.

Location:
branches/4.9/src
Files:
11 edited

Legend:

Unmodified
Added
Removed

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

    r41978 r42869  
    6565    'generate-password', 'save-wporg-username', 'delete-plugin', 'search-plugins',
    6666    'search-install-plugins', 'activate-plugin', 'update-theme', 'delete-theme', 'install-theme',
    67     'get-post-thumbnail-html', 'get-community-events', 'edit-theme-plugin-file',
     67    'get-post-thumbnail-html', 'get-community-events', 'edit-theme-plugin-file', 'update-try-gutenberg-panel',
    6868);
    6969

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

    r42865 r42869  
    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

    r41978 r42869  
    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;
    … …  
    118120}
    119121
    120 .welcome-panel h3 {
     122.welcome-panel h3,
     123.try-gutenberg-panel h3 {
    121124    margin: 1.33em 0 0;
    122125    font-size: 16px;
    123126}
    124127
    125 .welcome-panel li {
     128.welcome-panel li,
     129.try-gutenberg-panel li {
    126130    font-size: 14px;
    127131}
    128132
    129 .welcome-panel p {
     133.welcome-panel p,
     134.try-gutenberg-panel p,
     135.try-gutenberg-panel-column p.about-description {
    130136    color: #72777c;
    131137}
    132138
    133 .welcome-panel a {
     139.welcome-panel a,
     140.try-gutenberg-panel a {
    134141    text-decoration: none;
    135142}
    … …  
    140147}
    141148
    142 .welcome-panel .welcome-panel-close {
     149.try-gutenberg-panel .about-description {
     150    font-size: 16px;
     151    margin-top: 1.33em;
     152}
     153
     154.welcome-panel .welcome-panel-close,
     155.try-gutenberg-panel .try-gutenberg-panel-close {
    143156    position: absolute;
     157    z-index: 10;
    144158    top: 10px;
    145159    right: 10px;
    … …  
    150164}
    151165
    152 .welcome-panel .welcome-panel-close:before {
     166.welcome-panel .welcome-panel-close:before,
     167.try-gutenberg-panel .try-gutenberg-panel-close:before {
    153168    position: absolute;
    154169    top: 8px;
    … …  
    165180}
    166181
    167 .welcome-panel-content {
    168     margin-left: 13px;
     182.welcome-panel-content,
     183.try-gutenberg-panel-content {
     184    margin: 0 13px;
    169185    max-width: 1500px;
    170186}
    171187
    172 .welcome-panel .welcome-panel-column-container {
     188.try-gutenberg-panel img {
     189    max-width: 360px;
     190    width: 100%;
     191    border: 1px solid #f3f4f5;
     192}
     193
     194.try-gutenberg-panel .install-now.updating-message:before,
     195.try-gutenberg-panel .install-now.updated-message:before {
     196    margin-top: 11px;
     197}
     198
     199.welcome-panel .welcome-panel-column-container,
     200.try-gutenberg-panel .try-gutenberg-panel-column-container {
    173201    clear: both;
    174202    position: relative;
    175203}
    176204
    177 .welcome-panel .welcome-panel-column {
     205.welcome-panel .welcome-panel-column,
     206.try-gutenberg-panel .try-gutenberg-panel-column {
    178207    width: 32%;
    179208    min-width: 200px;
    … …  
    181210}
    182211
    183 .ie8 .welcome-panel .welcome-panel-column {
     212.try-gutenberg-panel .try-gutenberg-panel-column {
     213    width: calc( 32% - 20px );
     214    padding: 0 20px 20px 0;
     215}
     216
     217.ie8 .welcome-panel .welcome-panel-column,
     218.ie8 .try-gutenberg-panel .try-gutenberg-panel-column {
    184219    min-width: 230px;
    185220}
    186221
    187 .welcome-panel .welcome-panel-column:first-child {
     222.welcome-panel .welcome-panel-column:first-child
     223.try-gutenberg-panel .try-gutenberg-panel-column:first-child {
    188224    width: 36%;
    189225}
    … …  
    193229}
    194230
    195 .welcome-panel-column p {
     231.welcome-panel-column p,
     232.try-gutenberg-panel-column p {
    196233    margin-top: 7px;
    197234    color: #444;
    … …  
    202239}
    203240
    204 .welcome-panel .welcome-panel-column ul {
    205     margin: 0.8em 1em 1em 0;
    206 }
    207 
    208 .welcome-panel .welcome-panel-column li {
     241.welcome-panel .welcome-panel-column ul,
     242.try-gutenberg-panel .try-gutenberg-panel-column ul {
     243        margin: 0.8em 1em 1em 0;
     244}
     245
     246.welcome-panel .welcome-panel-column li,
     247.try-gutenberg-panel .try-gutenberg-panel-column li {
    209248    line-height: 16px;
    210249    list-style-type: none;
    211250    padding: 0 0 8px;
     251}
     252
     253.try-gutenberg-panel .notice {
     254    display: inline-block;
    212255}
    213256
    … …  
    12081251}
    12091252
     1253@media screen and (max-width: 1024px) {
     1254    .try-gutenberg-panel .try-gutenberg-panel-image-column {
     1255        display: none;
     1256    }
     1257
     1258    .try-gutenberg-panel .try-gutenberg-panel-column {
     1259        width: calc( 49% - 20px );
     1260    }
     1261}
     1262
    12101263@media screen and (max-width: 870px) {
    12111264    .welcome-panel .welcome-panel-column,
     1265    .try-gutenberg-panel .try-gutenberg-panel-column,
    12121266    .welcome-panel .welcome-panel-column:first-child {
    12131267        display: block;
    … …  
    12161270    }
    12171271
     1272    .try-gutenberg-panel .try-gutenberg-panel-image-column {
     1273        display: none;
     1274    }
     1275
    12181276    .welcome-panel .welcome-panel-column li {
    12191277        display: inline-block;
    … …  
    12241282        margin: 0.4em 0 0;
    12251283    }
    1226 
    12271284}
    12281285
    … …  
    12671324@media screen and (max-width: 600px) {
    12681325    /* Keep the close icon from overlapping the Welcome text. */
    1269     .welcome-panel .welcome-panel-close {
     1326    .welcome-panel .welcome-panel-close,
     1327    .try-gutenberg-panel .try-gutenberg-panel-close {
    12701328        overflow: hidden;
    12711329        text-indent: 40px;
    … …  
    12791337
    12801338    /* Make the close icon larger for tappability. */
    1281     .welcome-panel .welcome-panel-close:before {
     1339    .welcome-panel .welcome-panel-close:before,
     1340    .try-gutenberg-panel .try-gutenberg-panel-close:before {
    12821341        font-size: 20px;
    12831342        top: 5px;

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

    r42009 r42869  
    14861486
    14871487/**
     1488 * Ajax handler for updating whether to display the Try Gutenberg panel.
     1489 *
     1490 * @since 4.9.5
     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

    r41978 r42869  
    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

    r42170 r42869  
    16201620    <?php
    16211621}
     1622
     1623/**
     1624 * Displays a Try Gutenberg Panel, to introduce people to Gutenberg
     1625 *
     1626 * @since 4.9.5
     1627 */
     1628function wp_try_gutenberg_panel() {
     1629    $plugins = get_plugins();
     1630    $action = $url = $classes = '';
     1631
     1632    if ( current_user_can( 'install_plugins' ) && empty( $plugins['gutenberg/gutenberg.php'] ) ) {
     1633        $action = __( 'Install Today' );
     1634        $url = wp_nonce_url( self_admin_url( 'update.php?action=install-plugin&plugin=gutenberg' ), 'install-plugin_gutenberg' );
     1635        $classes = ' install-now';
     1636    } else if ( current_user_can( 'install_plugins' ) && is_plugin_inactive( 'gutenberg/gutenberg.php' ) ) {
     1637        $action = __( 'Activate Today' );
     1638        $url = wp_nonce_url( self_admin_url( 'plugins.php?action=activate&plugin=gutenberg/gutenberg.php&from=try-gutenberg' ), 'activate-plugin_gutenberg/gutenberg.php' );
     1639        $classes = ' activate-now';
     1640    } else if ( current_user_can( 'edit_posts' ) && is_plugin_active( 'gutenberg/gutenberg.php' ) ) {
     1641        $action = __( 'Try Today' );
     1642        $url = admin_url( 'admin.php?page=gutenberg' );
     1643    }
     1644
     1645    ?>
     1646    <div class="try-gutenberg-panel-content plugin-card-gutenberg">
     1647        <div class="try-gutenberg-panel-column-container">
     1648            <div class="try-gutenberg-panel-column try-gutenberg-panel-image-column">
     1649                <img src="https://s.w.org/images/core/gutenberg-screenshot.gif?<?php echo date( 'Ymd' ); ?>" alt="<?php esc_attr_e( 'Gutenberg animated preview' ); ?>" />
     1650            </div>
     1651            <h2><?php _e( 'Try the new editing experience' ); ?></h2>
     1652            <div class="try-gutenberg-panel-column">
     1653                <p class="about-description"><?php _e( 'WordPress is working on a better way to control your content. How about giving it a try early?' ); ?></p>
     1654                <?php if ( $action ) { ?>
     1655                    <p><a class="button button-primary button-hero<?php echo $classes; ?>" href="<?php echo esc_url( $url ); ?>"><?php echo $action; ?></a></p>
     1656                <?php } ?>
     1657            </div>
     1658            <div class="try-gutenberg-panel-column try-gutenberg-panel-last">
     1659                <h3><?php _e( 'Want to get involved?' ); ?></h3>
     1660                <ul>
     1661                    <li><?php
     1662                        printf( __( 'Learn more about the project <a href="%s">codenamed Gutenberg</a>.' ),
     1663                            'https://wordpress.org/gutenberg/'
     1664                        );
     1665                    ?></li>
     1666                    <li><?php
     1667                        printf( __( 'Help <a href="%1$s">with testing</a>, or contribute on the <a href="%2$s">GitHub repository</a>.' ),
     1668                            __( 'https://make.wordpress.org/test/handbook/call-for-testing/gutenberg-testing/' ),
     1669                            'https://github.com/WordPress/gutenberg/'
     1670                        );
     1671                    ?></li>
     1672                </ul>
     1673            </div>
     1674        </div>
     1675    </div>
     1676    <?php
     1677}

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

    r41978 r42869  
    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.5
     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

    r41978 r42869  
    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        wp.updates.installPluginSuccess( response );
     49    };
     50
     51    if ( tryGutenbergPanel.hasClass('hidden') && tryGutenbergPanelHide.prop('checked') ) {
     52        tryGutenbergPanel.removeClass('hidden');
     53    }
     54
     55    $('.try-gutenberg-panel-close, .try-gutenberg-panel-dismiss a', tryGutenbergPanel).click( function(e) {
     56        e.preventDefault();
     57        tryGutenbergPanel.addClass('hidden');
     58        updateTryGutenbergPanel( 0 );
     59        $('#wp_try_gutenberg_panel-hide').prop('checked', false);
     60    });
     61
     62    tryGutenbergPanelHide.click( function() {
     63        tryGutenbergPanel.toggleClass('hidden', ! this.checked );
     64        updateTryGutenbergPanel( this.checked ? 1 : 0 );
     65    });
     66
     67    tryGutenbergPanel.on( 'click', '.install-now', function( e ) {
     68        e.preventDefault();
     69        var args = {
     70            slug: 'gutenberg',
     71            success: installGutenbergSuccess
     72        };
     73        wp.updates.installPlugin( args );
     74    } );
    3375
    3476    // These widgets are sometimes populated via ajax

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

    r42605 r42869  
    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 if ( $message.hasClass( 'button-secondary' ) ) {
     595            $message.addClass( 'button-secondary-disabled' );
     596        } else {
     597            $message.addClass( 'button-disabled' );
     598        }
     599
    592600        wp.a11y.speak( wp.updates.l10n.installedMsg, 'polite' );
    593601
    … …  
    598606
    599607                // Transform the 'Install' button into an 'Activate' button.
    600                 $message.removeClass( 'install-now installed button-disabled updated-message' ).addClass( 'activate-now button-primary' )
     608                $message.removeClass( 'install-now installed button-primary-disabled button-secondary-disabled button-disabled updated-message' )
     609                    .addClass( 'activate-now button-primary' )
    601610                    .attr( 'href', response.activateUrl )
    602611                    .attr( 'aria-label', wp.updates.l10n.activatePluginLabel.replace( '%s', response.pluginName ) )

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

    r41978 r42869  
    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                wp_redirect( self_admin_url( "admin.php?page=gutenberg") );
    6870            } else {
    6971                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

    r42589 r42869  
    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.