Skip to content

Commit 1c5b025

Browse files
pentopento
committed
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. git-svn-id: https://develop.svn.wordpress.org/branches/4.9@42869 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 29cde1d commit 1c5b025

11 files changed

Lines changed: 256 additions & 26 deletions

File tree

‎src/wp-admin/admin-ajax.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
'parse-media-shortcode', 'destroy-sessions', 'install-plugin', 'update-plugin', 'crop-image',
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

7070
// Deprecated

‎src/wp-admin/css/common.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -764,6 +764,7 @@ img.emoji {
764764

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,
769770
.notice-dismiss:before {

‎src/wp-admin/css/dashboard.css‎

Lines changed: 80 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@
9898
}
9999

100100
/* Welcome Panel */
101-
.welcome-panel {
101+
.welcome-panel,
102+
.try-gutenberg-panel {
102103
position: relative;
103104
overflow: auto;
104105
margin: 16px 0;
@@ -110,27 +111,33 @@
110111
line-height: 2.1em;
111112
}
112113

113-
.welcome-panel h2 {
114+
.welcome-panel h2,
115+
.try-gutenberg-panel h2 {
114116
margin: 0;
115117
font-size: 21px;
116118
font-weight: 400;
117119
line-height: 1.2;
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
}
136143

@@ -139,8 +146,15 @@
139146
margin: 0;
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;
146160
padding: 10px 15px 10px 21px;
@@ -149,7 +163,8 @@
149163
text-decoration: none;
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;
155170
left: 0;
@@ -164,35 +179,57 @@
164179
white-space: normal;
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;
180209
float: left;
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
}
190226

191227
.welcome-panel-column p.hide-if-no-customize {
192228
margin-top: 10px;
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;
198235
}
@@ -201,16 +238,22 @@
201238
line-height: 16px;
202239
}
203240

204-
.welcome-panel .welcome-panel-column ul {
205-
margin: 0.8em 1em 1em 0;
241+
.welcome-panel .welcome-panel-column ul,
242+
.try-gutenberg-panel .try-gutenberg-panel-column ul {
243+
margin: 0.8em 1em 1em 0;
206244
}
207245

208-
.welcome-panel .welcome-panel-column li {
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;
212251
}
213252

253+
.try-gutenberg-panel .notice {
254+
display: inline-block;
255+
}
256+
214257
.welcome-panel .welcome-icon {
215258
background: transparent !important;
216259
}
@@ -1207,14 +1250,29 @@ a.rsswidget {
12071250
}
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;
12141268
float: none;
12151269
width: 100%;
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;
12201278
margin-right: 13px;
@@ -1223,7 +1281,6 @@ a.rsswidget {
12231281
.welcome-panel .welcome-panel-column ul {
12241282
margin: 0.4em 0 0;
12251283
}
1226-
12271284
}
12281285

12291286
@media screen and ( max-width: 782px ) {
@@ -1266,7 +1323,8 @@ a.rsswidget {
12661323
/* Smartphone */
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;
12721330
white-space: nowrap;
@@ -1278,7 +1336,8 @@ a.rsswidget {
12781336
}
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;
12841343
left: -35px;

‎src/wp-admin/includes/ajax-actions.php‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1484,6 +1484,19 @@ function wp_ajax_update_welcome_panel() {
14841484
wp_die( 1 );
14851485
}
14861486

1487+
/**
1488+
* Ajax handler for updating whether to display the Try Gutenberg panel.
1489+
*
1490+
* @since 4.9.5
1491+
*/
1492+
function 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+
14871500
/**
14881501
* Ajax handler for retrieving menu meta boxes.
14891502
*

‎src/wp-admin/includes/class-wp-screen.php‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1020,14 +1020,35 @@ public function render_meta_boxes_preferences() {
10201020
update_user_meta( get_current_user_id(), 'show_welcome_panel', $welcome_checked );
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
}
10261029
}
10271030
echo '<label for="wp_welcome_panel-hide">';
10281031
echo '<input type="checkbox" id="wp_welcome_panel-hide"' . checked( (bool) $welcome_checked, true, false ) . ' />';
10291032
echo _x( 'Welcome', 'Welcome panel' ) . "</label>\n";
10301033
}
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";
1051+
}
10311052
?>
10321053
</fieldset>
10331054
<?php

‎src/wp-admin/includes/dashboard.php‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1619,3 +1619,59 @@ function wp_welcome_panel() {
16191619
</div>
16201620
<?php
16211621
}
1622+
1623+
/**
1624+
* Displays a Try Gutenberg Panel, to introduce people to Gutenberg
1625+
*
1626+
* @since 4.9.5
1627+
*/
1628+
function 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+
}

‎src/wp-admin/index.php‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,38 @@
103103
<div class="wrap">
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';
108134

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'; ?>
114140

0 commit comments

Comments
 (0)