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..798a6b14bf 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,7 +111,8 @@ line-height: 2.1em; } -.welcome-panel h2 { +.welcome-panel h2, +.try-gutenberg-panel h2 { margin: 0; font-size: 21px; font-weight: 400; @@ -122,25 +124,42 @@ font-size: 16px; } -.welcome-panel li { +.try-gutenberg-panel h3 { + margin: 17px 0 0; + font-size: 16px; +} + +.welcome-panel li, +.try-gutenberg-panel li { font-size: 14px; } -.welcome-panel p { +.welcome-panel p, +.try-gutenberg-panel p { color: #72777c; } -.welcome-panel a { +.welcome-panel a, +.try-gutenberg-action a { text-decoration: none; } -.welcome-panel .about-description { +.welcome-panel .about-description, +.try-gutenberg-panel .about-description { font-size: 16px; margin: 0; } -.welcome-panel .welcome-panel-close { +.try-gutenberg-panel-content hr { + margin: 20px -23px 0 -23px; + border-top: 1px solid #f3f4f5; + border-bottom: none; +} + +.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 +168,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,11 +184,23 @@ white-space: normal; } -.welcome-panel-content { - margin-left: 13px; +.welcome-panel-content, +.try-gutenberg-panel-content { + margin: 0 13px; max-width: 1500px; } +.try-gutenberg-panel img { + margin-top: 23px; + width: calc( 100% - 40px ); + 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 { clear: both; position: relative; @@ -180,6 +212,10 @@ float: left; } +.try-gutenberg-panel .try-gutenberg-panel-column > * { + padding-right: 40px; +} + .ie8 .welcome-panel .welcome-panel-column { min-width: 230px; } @@ -188,11 +224,23 @@ width: 36%; } +.try-gutenberg-panel .try-gutenberg-panel-column-container { + display: grid; + grid-template-columns: 36% 32% 32%; + margin-bottom: 13px; +} + +.try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) { + display: grid; + grid-template-rows: 45px auto 100px; +} + .welcome-panel-column p.hide-if-no-customize { margin-top: 10px; } -.welcome-panel-column p { +.welcome-panel-column p, +.try-gutenberg-panel-column p { margin-top: 7px; color: #444; } @@ -202,7 +250,7 @@ } .welcome-panel .welcome-panel-column ul { - margin: 0.8em 1em 1em 0; + margin: 0.8em 1em 1em 0; } .welcome-panel .welcome-panel-column li { @@ -1207,6 +1255,16 @@ a.rsswidget { } } +@media screen and (max-width: 1024px) { + .try-gutenberg-panel .try-gutenberg-panel-column-container { + grid-template-columns: 50% 50%; + } + + .try-gutenberg-panel .try-gutenberg-panel-image-column { + display: none; + } +} + @media screen and (max-width: 870px) { .welcome-panel .welcome-panel-column, .welcome-panel .welcome-panel-column:first-child { @@ -1215,6 +1273,10 @@ a.rsswidget { width: 100%; } + .try-gutenberg-panel .try-gutenberg-panel-column-container { + grid-template-columns: 100%; + } + .welcome-panel .welcome-panel-column li { display: inline-block; margin-right: 13px; @@ -1223,7 +1285,6 @@ a.rsswidget { .welcome-panel .welcome-panel-column ul { margin: 0.4em 0 0; } - } @media screen and ( max-width: 782px ) { @@ -1266,7 +1327,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 +1340,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( 'Screenshot from the Gutenberg interface' ); ?> + +
+
+ +

+ +

+ + 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 to keep using the current editor until you’re ready to make the switch.' ), + 'http://wordpress.org/plugins/classic-editor' + ); + ?> +

+ + +
+

+
+ +
+
+
+

+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..2ae6455244 100644 --- a/src/wp-admin/js/dashboard.js +++ b/src/wp-admin/js/dashboard.js @@ -31,6 +31,49 @@ 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'; + response.activateLabel = wp.updates.l10n.activatePluginLabel.replace( '%s', response.pluginName ); + 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: $( e.target ).data( 'slug' ), + 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..a39ceeadeb 100644 --- a/src/wp-admin/js/updates.js +++ b/src/wp-admin/js/updates.js @@ -585,10 +585,16 @@ $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 { + $message.addClass( 'button-disabled' ); + } + wp.a11y.speak( wp.updates.l10n.installedMsg, 'polite' ); $document.trigger( 'wp-plugin-install-success', response ); @@ -597,10 +603,11 @@ 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' ) .attr( 'href', response.activateUrl ) .attr( 'aria-label', wp.updates.l10n.activatePluginLabel.replace( '%s', response.pluginName ) ) - .text( wp.updates.l10n.activatePlugin ); + .text( response.activateLabel || wp.updates.l10n.activatePlugin ); }, 1000 ); } }; diff --git a/src/wp-admin/plugins.php b/src/wp-admin/plugins.php index b92a7964e6..50e4114503 100644 --- a/src/wp-admin/plugins.php +++ b/src/wp-admin/plugins.php @@ -65,6 +65,12 @@ 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'] ) { + if ( 'gutenberg/gutenberg.php' === $plugin ) { + wp_redirect( self_admin_url( "admin.php?page=gutenberg" ) ); + } else { + wp_redirect( self_admin_url() ); + } } 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