diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index ac3a7c6b65..8613e822e7 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -764,6 +764,7 @@ img.emoji { /* @todo can we combine these into a class or use an existing dashicon one? */ .welcome-panel .welcome-panel-close:before, +.try-gutenberg-panel .try-gutenberg-panel-close:before, .tagchecklist .ntdelbutton .remove-tag-icon:before, #bulk-titles div a:before, .notice-dismiss:before { diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index f64cc92422..3df875c815 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -98,7 +98,8 @@ } /* Welcome Panel */ -.welcome-panel { +.welcome-panel, +.try-gutenberg-panel { position: relative; overflow: auto; margin: 16px 0; @@ -110,27 +111,33 @@ line-height: 2.1em; } -.welcome-panel h2 { +.welcome-panel h2, +.try-gutenberg-panel h2 { margin: 0; font-size: 21px; font-weight: 400; line-height: 1.2; } -.welcome-panel h3 { +.welcome-panel h3, +.try-gutenberg-panel h3 { margin: 1.33em 0 0; font-size: 16px; } -.welcome-panel li { +.welcome-panel li, +.try-gutenberg-panel li { font-size: 14px; } -.welcome-panel p { +.welcome-panel p, +.try-gutenberg-panel p, +.try-gutenberg-panel-column p.about-description { color: #72777c; } -.welcome-panel a { +.welcome-panel a, +.try-gutenberg-panel a { text-decoration: none; } @@ -139,8 +146,14 @@ margin: 0; } -.welcome-panel .welcome-panel-close { +.try-gutenberg-panel .about-description { + font-size: 16px; +} + +.welcome-panel .welcome-panel-close, +.try-gutenberg-panel .try-gutenberg-panel-close { position: absolute; + z-index: 10; top: 10px; right: 10px; padding: 10px 15px 10px 21px; @@ -149,7 +162,8 @@ text-decoration: none; } -.welcome-panel .welcome-panel-close:before { +.welcome-panel .welcome-panel-close:before, +.try-gutenberg-panel .try-gutenberg-panel-close:before { position: absolute; top: 8px; left: 0; @@ -164,27 +178,51 @@ white-space: normal; } -.welcome-panel-content { - margin-left: 13px; +.welcome-panel-content, +.try-gutenberg-panel-content { + margin: 0 13px; max-width: 1500px; } -.welcome-panel .welcome-panel-column-container { +.try-gutenberg-panel img { + width: 100%; + border: 1px solid #f3f4f5; +} + +.try-gutenberg-panel .install-now.updating-message:before, +.try-gutenberg-panel .install-now.updated-message:before { + margin-top: 11px; +} + +.welcome-panel .welcome-panel-column-container, +.try-gutenberg-panel .try-gutenberg-panel-column-container { clear: both; position: relative; } -.welcome-panel .welcome-panel-column { +.welcome-panel .welcome-panel-column, +.try-gutenberg-panel .try-gutenberg-panel-column { width: 32%; min-width: 200px; float: left; } -.ie8 .welcome-panel .welcome-panel-column { +.try-gutenberg-panel .try-gutenberg-panel-column { + width: calc( 64% - 40px ); + padding: 0 20px 20px 0; +} + +.try-gutenberg-panel .try-gutenberg-panel-image-column { + width: calc( 32% - 20px ); +} + +.ie8 .welcome-panel .welcome-panel-column, +.ie8 .try-gutenberg-panel .try-gutenberg-panel-column { min-width: 230px; } -.welcome-panel .welcome-panel-column:first-child { +.welcome-panel .welcome-panel-column:first-child +.try-gutenberg-panel .try-gutenberg-panel-column:first-child { width: 36%; } @@ -192,25 +230,36 @@ margin-top: 10px; } -.welcome-panel-column p { +.welcome-panel-column p, +.try-gutenberg-panel-column p { margin-top: 7px; color: #444; } +.try-gutenberg-panel-column p:last-of-type { + margin-top: 1.33em; +} + .welcome-panel .welcome-widgets-menus { line-height: 16px; } -.welcome-panel .welcome-panel-column ul { - margin: 0.8em 1em 1em 0; +.welcome-panel .welcome-panel-column ul, +.try-gutenberg-panel .try-gutenberg-panel-column ul { + margin: 0.8em 1em 1em 0; } -.welcome-panel .welcome-panel-column li { +.welcome-panel .welcome-panel-column li, +.try-gutenberg-panel .try-gutenberg-panel-column li { line-height: 16px; list-style-type: none; padding: 0 0 8px; } +.try-gutenberg-panel .notice { + display: inline-block; +} + .welcome-panel .welcome-icon { background: transparent !important; } @@ -1207,14 +1256,29 @@ a.rsswidget { } } +@media screen and (max-width: 1024px) { + .try-gutenberg-panel .try-gutenberg-panel-image-column { + display: none; + } + + .try-gutenberg-panel .try-gutenberg-panel-column { + width: calc( 98% - 20px ); + } +} + @media screen and (max-width: 870px) { .welcome-panel .welcome-panel-column, + .try-gutenberg-panel .try-gutenberg-panel-column, .welcome-panel .welcome-panel-column:first-child { display: block; float: none; width: 100%; } + .try-gutenberg-panel .try-gutenberg-panel-image-column { + display: none; + } + .welcome-panel .welcome-panel-column li { display: inline-block; margin-right: 13px; @@ -1223,7 +1287,6 @@ a.rsswidget { .welcome-panel .welcome-panel-column ul { margin: 0.4em 0 0; } - } @media screen and ( max-width: 782px ) { @@ -1266,7 +1329,8 @@ a.rsswidget { /* Smartphone */ @media screen and (max-width: 600px) { /* Keep the close icon from overlapping the Welcome text. */ - .welcome-panel .welcome-panel-close { + .welcome-panel .welcome-panel-close, + .try-gutenberg-panel .try-gutenberg-panel-close { overflow: hidden; text-indent: 40px; white-space: nowrap; @@ -1278,7 +1342,8 @@ a.rsswidget { } /* Make the close icon larger for tappability. */ - .welcome-panel .welcome-panel-close:before { + .welcome-panel .welcome-panel-close:before, + .try-gutenberg-panel .try-gutenberg-panel-close:before { font-size: 20px; top: 5px; left: -35px; diff --git a/src/wp-admin/includes/ajax-actions.php b/src/wp-admin/includes/ajax-actions.php index 8fb348c6d3..eb14c51f69 100644 --- a/src/wp-admin/includes/ajax-actions.php +++ b/src/wp-admin/includes/ajax-actions.php @@ -1484,6 +1484,19 @@ function wp_ajax_update_welcome_panel() { wp_die( 1 ); } +/** + * Ajax handler for updating whether to display the Try Gutenberg panel. + * + * @since 4.9.6 + */ +function wp_ajax_update_try_gutenberg_panel() { + check_ajax_referer( 'try-gutenberg-panel-nonce', 'trygutenbergpanelnonce' ); + + update_user_meta( get_current_user_id(), 'show_try_gutenberg_panel', empty( $_POST['visible'] ) ? 0 : 1 ); + + wp_die( 1 ); +} + /** * Ajax handler for retrieving menu meta boxes. * diff --git a/src/wp-admin/includes/class-wp-screen.php b/src/wp-admin/includes/class-wp-screen.php index 0146b56cbf..84cbd9164f 100644 --- a/src/wp-admin/includes/class-wp-screen.php +++ b/src/wp-admin/includes/class-wp-screen.php @@ -1020,7 +1020,10 @@ final class WP_Screen { update_user_meta( get_current_user_id(), 'show_welcome_panel', $welcome_checked ); } else { $welcome_checked = get_user_meta( get_current_user_id(), 'show_welcome_panel', true ); - if ( 2 == $welcome_checked && wp_get_current_user()->user_email != get_option( 'admin_email' ) ) { + if ( '' === $welcome_checked ) { + $welcome_checked = '1'; + } + if ( '2' === $welcome_checked && wp_get_current_user()->user_email != get_option( 'admin_email' ) ) { $welcome_checked = false; } } @@ -1028,6 +1031,24 @@ final class WP_Screen { echo ''; echo _x( 'Welcome', 'Welcome panel' ) . "\n"; } + + if ( 'dashboard' === $this->id && has_action( 'try_gutenberg_panel' ) ) { + if ( isset( $_GET['try_gutenberg'] ) ) { + $try_gutenberg_checked = empty( $_GET['try_gutenberg'] ) ? 0 : 1; + update_user_meta( get_current_user_id(), 'show_try_gutenberg_panel', $try_gutenberg_checked ); + } else { + $try_gutenberg_checked = get_user_meta( get_current_user_id(), 'show_try_gutenberg_panel', true ); + if ( '' === $try_gutenberg_checked ) { + $try_gutenberg_checked = '1'; + } + if ( '2' === $try_gutenberg_checked && wp_get_current_user()->user_email != get_option( 'admin_email' ) ) { + $try_gutenberg_checked = false; + } + } + echo '\n"; + } ?> +
+

+ +

+ +
+
+ + + <?php esc_attr_e( 'Gutenberg animated preview' ); ?> + +
+
+ +

+ +

+ + testing, filing bugs, or contributing on the GitHub repository.' ), + 'https://make.wordpress.org/test/handbook/call-for-testing/gutenberg-testing/', + 'https://github.com/WordPress/gutenberg/issues', + 'https://github.com/WordPress/gutenberg/blob/master/CONTRIBUTING.md' + ); + ?> +

+ + +

+ + +

+ Learn more about Gutenberg' ), + 'https://wordpress.org/gutenberg/' + ); + ?> +

+
+
+ +

+ +

+ + Classic Editor plugin.' ), + 'http://wordpress.org/plugins/classic-editor', + ); + ?> + +

+ + +

+ + +

+ Learn more about Gutenberg' ), + 'https://wordpress.org/gutenberg/' + ); + ?> +

+
+
+
+

+user_email !== get_option( 'admin_email' ) ); + if ( $hide ) + $classes .= ' hidden'; ?> + +
+ + + +
+ user_email != get_option( 'admin_email' ) ); + $hide = '0' === $option || ( '2' === $option && wp_get_current_user()->user_email != get_option( 'admin_email' ) ); if ( $hide ) $classes .= ' hidden'; ?> diff --git a/src/wp-admin/js/dashboard.js b/src/wp-admin/js/dashboard.js index a6b56c37ef..8b6c4bbfa4 100644 --- a/src/wp-admin/js/dashboard.js +++ b/src/wp-admin/js/dashboard.js @@ -31,6 +31,48 @@ jQuery(document).ready( function($) { updateWelcomePanel( this.checked ? 1 : 0 ); }); + var tryGutenbergPanel = $( '#try-gutenberg-panel' ), + tryGutenbergPanelHide = $('#wp_try_gutenberg_panel-hide'), + updateTryGutenbergPanel, installGutenbergSuccess; + + updateTryGutenbergPanel = function( visible ) { + $.post( ajaxurl, { + action: 'update-try-gutenberg-panel', + visible: visible, + trygutenbergpanelnonce: $( '#trygutenbergpanelnonce' ).val() + }); + }; + + installGutenbergSuccess = function( response ) { + response.activateUrl += '&from=try-gutenberg'; + wp.updates.installPluginSuccess( response ); + }; + + if ( tryGutenbergPanel.hasClass('hidden') && tryGutenbergPanelHide.prop('checked') ) { + tryGutenbergPanel.removeClass('hidden'); + } + + $('.try-gutenberg-panel-close, .try-gutenberg-panel-dismiss a', tryGutenbergPanel).click( function(e) { + e.preventDefault(); + tryGutenbergPanel.addClass('hidden'); + updateTryGutenbergPanel( 0 ); + $('#wp_try_gutenberg_panel-hide').prop('checked', false); + }); + + tryGutenbergPanelHide.click( function() { + tryGutenbergPanel.toggleClass('hidden', ! this.checked ); + updateTryGutenbergPanel( this.checked ? 1 : 0 ); + }); + + tryGutenbergPanel.on( 'click', '.install-now', function( e ) { + e.preventDefault(); + var args = { + slug: 'gutenberg', + success: installGutenbergSuccess + }; + wp.updates.installPlugin( args ); + } ); + // These widgets are sometimes populated via ajax ajaxWidgets = ['dashboard_primary']; diff --git a/src/wp-admin/js/updates.js b/src/wp-admin/js/updates.js index 22229a6f51..0bfabafba0 100644 --- a/src/wp-admin/js/updates.js +++ b/src/wp-admin/js/updates.js @@ -585,10 +585,18 @@ $message .removeClass( 'updating-message' ) - .addClass( 'updated-message installed button-disabled' ) + .addClass( 'updated-message installed' ) .attr( 'aria-label', wp.updates.l10n.pluginInstalledLabel.replace( '%s', response.pluginName ) ) .text( wp.updates.l10n.pluginInstalled ); + if ( $message.hasClass( 'button-primary' ) ) { + $message.addClass( 'button-primary-disabled' ); + } else if ( $message.hasClass( 'button-secondary' ) ) { + $message.addClass( 'button-secondary-disabled' ); + } else { + $message.addClass( 'button-disabled' ); + } + wp.a11y.speak( wp.updates.l10n.installedMsg, 'polite' ); $document.trigger( 'wp-plugin-install-success', response ); @@ -597,7 +605,8 @@ setTimeout( function() { // Transform the 'Install' button into an 'Activate' button. - $message.removeClass( 'install-now installed button-disabled updated-message' ).addClass( 'activate-now button-primary' ) + $message.removeClass( 'install-now installed button-primary-disabled button-secondary-disabled button-disabled updated-message' ) + .addClass( 'activate-now button-primary' ) .attr( 'href', response.activateUrl ) .attr( 'aria-label', wp.updates.l10n.activatePluginLabel.replace( '%s', response.pluginName ) ) .text( wp.updates.l10n.activatePlugin ); diff --git a/src/wp-admin/plugins.php b/src/wp-admin/plugins.php index b92a7964e6..5b221c3fef 100644 --- a/src/wp-admin/plugins.php +++ b/src/wp-admin/plugins.php @@ -65,6 +65,8 @@ if ( $action ) { wp_redirect( self_admin_url("import.php?import=" . str_replace('-importer', '', dirname($plugin))) ); // overrides the ?error=true one above and redirects to the Imports page, stripping the -importer suffix } else if ( isset($_GET['from']) && 'press-this' == $_GET['from'] ) { wp_redirect( self_admin_url( "press-this.php") ); + } else if ( isset($_GET['from']) && 'try-gutenberg' == $_GET['from'] ) { + wp_redirect( self_admin_url( "admin.php?page=gutenberg") ); } else { wp_redirect( self_admin_url("plugins.php?activate=true&plugin_status=$status&paged=$page&s=$s") ); // overrides the ?error=true one above } diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php index e012beb182..fb8af82daf 100644 --- a/src/wp-includes/default-filters.php +++ b/src/wp-includes/default-filters.php @@ -318,6 +318,7 @@ add_action( 'transition_post_status', '_transition_post_status', add_action( 'transition_post_status', '_update_term_count_on_transition_post_status', 10, 3 ); add_action( 'comment_form', 'wp_comment_form_unfiltered_html_nonce' ); add_action( 'admin_init', 'send_frame_options_header', 10, 0 ); +add_action( 'try_gutenberg_panel', 'wp_try_gutenberg_panel' ); add_action( 'welcome_panel', 'wp_welcome_panel' ); // Privacy