vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 22:30:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Dashboard: Introduce a "Try Gutenberg" callout.

Browse Source 
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.



git-svn-id: https://develop.svn.wordpress.org/trunk@41895 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Gary Pendergast
2017-10-18 10:03:39 +00:00
parent 896db16fc7
commit 5fa59cf197
11 changed files with 242 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/wp-admin/css/common.css
View File

@@ -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 {

96
src/wp-admin/css/dashboard.css
View File

@@ -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,7 +146,13 @@
margin: 0;
}
.welcome-panel .welcome-panel-close {
.try-gutenberg-panel .about-description {
font-size: 16px;
margin-top: 1.33em;
}
.welcome-panel .welcome-panel-close,
.try-gutenberg-panel .try-gutenberg-panel-close {
position: absolute;
top: 10px;
right: 10px;
@@ -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,48 @@
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 {
max-width: 360px;
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( 32% - 20px );
padding: 0 20px 20px 0;
}
.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,7 +227,8 @@
margin-top: 10px;
}
.welcome-panel-column p {
.welcome-panel-column p,
.try-gutenberg-panel-column p {
margin-top: 7px;
color: #444;
}
@@ -201,11 +237,13 @@
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;
@@ -1207,14 +1245,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( 49% - 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 +1276,6 @@ a.rsswidget {
.welcome-panel .welcome-panel-column ul {
margin: 0.4em 0 0;
}
}
@media screen and ( max-width: 782px ) {
@@ -1266,7 +1318,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 +1331,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;