WordPress.org
Get WordPress

Make WordPress Core

Changeset 41895


Ignore:
Timestamp:
10/18/2017 10:03:39 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.
Fixes #41316.

Location:
trunk/src
Files:
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/admin-ajax.php

    r41721 r41895  
    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

  • trunk/src/wp-admin/css/common.css

    r41887 r41895  
    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,

  • trunk/src/wp-admin/css/dashboard.css

    r41062 r41895  
    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;
    144157    top: 10px;
    … …  
    150163}
    151164
    152 .welcome-panel .welcome-panel-close:before {
     165.welcome-panel .welcome-panel-close:before,
     166.try-gutenberg-panel .try-gutenberg-panel-close:before {
    153167    position: absolute;
    154168    top: 8px;
    … …  
    165179}
    166180
    167 .welcome-panel-content {
    168     margin-left: 13px;
     181.welcome-panel-content,
     182.try-gutenberg-panel-content {
     183    margin: 0 13px;
    169184    max-width: 1500px;
    170185}
    171186
    172 .welcome-panel .welcome-panel-column-container {
     187.try-gutenberg-panel img {
     188    max-width: 360px;
     189    width: 100%;
     190    border: 1px solid #f3f4f5;
     191}
     192
     193.try-gutenberg-panel .install-now.updating-message:before,
     194.try-gutenberg-panel .install-now.updated-message:before {
     195    margin-top: 11px;
     196}
     197
     198.welcome-panel .welcome-panel-column-container,
     199.try-gutenberg-panel .try-gutenberg-panel-column-container {
    173200    clear: both;
    174201    position: relative;
    175202}
    176203
    177 .welcome-panel .welcome-panel-column {
     204.welcome-panel .welcome-panel-column,
     205.try-gutenberg-panel .try-gutenberg-panel-column {
    178206    width: 32%;
    179207    min-width: 200px;
    … …  
    181209}
    182210
    183 .ie8 .welcome-panel .welcome-panel-column {
     211.try-gutenberg-panel .try-gutenberg-panel-column {
     212    width: calc( 32% - 20px );
     213    padding: 0 20px 20px 0;
     214}
     215
     216.ie8 .welcome-panel .welcome-panel-column,
     217.ie8 .try-gutenberg-panel .try-gutenberg-panel-column {
    184218    min-width: 230px;
    185219}
    186220
    187 .welcome-panel .welcome-panel-column:first-child {
     221.welcome-panel .welcome-panel-column:first-child
     222.try-gutenberg-panel .try-gutenberg-panel-column:first-child {
    188223    width: 36%;
    189224}
    … …  
    193228}
    194229
    195 .welcome-panel-column p {
     230.welcome-panel-column p,
     231.try-gutenberg-panel-column p {
    196232    margin-top: 7px;
    197233    color: #444;
    … …  
    202238}
    203239
    204 .welcome-panel .welcome-panel-column ul {
    205     margin: 0.8em 1em 1em 0;
    206 }
    207 
    208 .welcome-panel .welcome-panel-column li {
     240.welcome-panel .welcome-panel-column ul,
     241.try-gutenberg-panel .try-gutenberg-panel-column ul {
     242        margin: 0.8em 1em 1em 0;
     243}
     244
     245.welcome-panel .welcome-panel-column li,
     246.try-gutenberg-panel .try-gutenberg-panel-column li {
    209247    line-height: 16px;
    210248    list-style-type: none;
    … …  
    12081246}
    12091247
     1248@media screen and (max-width: 1024px) {
     1249    .try-gutenberg-panel .try-gutenberg-panel-image-column {
     1250        display: none;
     1251    }
     1252
     1253    .try-gutenberg-panel .try-gutenberg-panel-column {
     1254        width: calc( 49% - 20px );
     1255    }
     1256}
     1257
    12101258@media screen and (max-width: 870px) {
    12111259    .welcome-panel .welcome-panel-column,
     1260    .try-gutenberg-panel .try-gutenberg-panel-column,
    12121261    .welcome-panel .welcome-panel-column:first-child {
    12131262        display: block;
    … …  
    12161265    }
    12171266
     1267    .try-gutenberg-panel .try-gutenberg-panel-image-column {
     1268        display: none;
     1269    }
     1270
    12181271    .welcome-panel .welcome-panel-column li {
    12191272        display: inline-block;
    … …  
    12241277        margin: 0.4em 0 0;
    12251278    }
    1226 
    12271279}
    12281280
    … …  
    12671319@media screen and (max-width: 600px) {
    12681320    /* Keep the close icon from overlapping the Welcome text. */
    1269     .welcome-panel .welcome-panel-close {
     1321    .welcome-panel .welcome-panel-close,
     1322    .try-gutenberg-panel .try-gutenberg-panel-close {
    12701323        overflow: hidden;
    12711324        text-indent: 40px;
    … …  
    12791332
    12801333    /* Make the close icon larger for tappability. */
    1281     .welcome-panel .welcome-panel-close:before {
     1334    .welcome-panel .welcome-panel-close:before,
     1335    .try-gutenberg-panel .try-gutenberg-panel-close:before {
    12821336        font-size: 20px;
    12831337        top: 5px;

  • trunk/src/wp-admin/includes/ajax-actions.php

    r41721 r41895  
    14811481
    14821482/**
     1483 * Ajax handler for updating whether to display the Try Gutenberg panel.
     1484 *
     1485 * @since 4.9.0
     1486 */
     1487function wp_ajax_update_try_gutenberg_panel() {
     1488    check_ajax_referer( 'try-gutenberg-panel-nonce', 'trygutenbergpanelnonce' );
     1489
     1490    update_user_meta( get_current_user_id(), 'show_try_gutenberg_panel', empty( $_POST['visible'] ) ? 0 : 1 );
     1491
     1492    wp_die( 1 );
     1493}
     1494
     1495/**
    14831496 * Ajax handler for retrieving menu meta boxes.
    14841497 *

  • trunk/src/wp-admin/includes/class-wp-screen.php

    r41317 r41895  
    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        ?>

  • trunk/src/wp-admin/includes/dashboard.php

    r41699 r41895  
    16201620    <?php
    16211621}
     1622
     1623/**
     1624 * Displays a Try Gutenberg Panel, to introduce people to Gutenberg
     1625 *
     1626 * @since 4.9.0
     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-demo' );
     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 printf( __( 'Learn more about the project <a href="%s">codenamed Gutenberg</a>.' ), 'https://wordpress.org/gutenberg/' ); ?></li>
     1662                    <li><?php printf( __( 'Help <a href="%1$s">with testing</a>, or contribute on the <a href="%2$s">GitHub repository</a>.' ), '', 'https://github.com/WordPress/gutenberg/' ); ?></li>
     1663                </ul>
     1664            </div>
     1665        </div>
     1666    </div>
     1667    <?php
     1668}

  • trunk/src/wp-admin/index.php

    r41797 r41895  
    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.0
     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'; ?>

  • trunk/src/wp-admin/js/dashboard.js

    r41682 r41895  
    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

  • trunk/src/wp-admin/js/updates.js

    r41648 r41895  
    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 ) )

  • trunk/src/wp-admin/plugins.php

    r41584 r41895  
    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-demo") );
    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

  • trunk/src/wp-includes/default-filters.php

    r41753 r41895  
    323323add_action( 'importer_scheduled_cleanup', 'wp_delete_attachment'                           );
    324324add_action( 'upgrader_scheduled_cleanup', 'wp_delete_attachment'                           );
     325add_action( 'try_gutenberg_panel',        'wp_try_gutenberg_panel'                         );
    325326add_action( 'welcome_panel',              'wp_welcome_panel'                               );
    326327
Note: See TracChangeset for help on using the changeset viewer.